From 49fc6fc15a90b48595604451d4161404cc89e0fd Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sat, 17 Feb 2024 11:37:35 +0100
Subject: [PATCH] fix(material/expansion): center indicator icon in M3

Currently the expansion panel arrow is drawn with borders which makes it difficult to center. It's also problematic in high contrast mode where it renders as a rectangle. We've wanted to fix this for a while, but it breaks a lot of internal screenshot tests (see #10503).

These changes resolve the issue for apps using M3 by having two indicators that we toggle using tokens.

Fixes #28037.
---
 .../theming/_custom-tokens.scss               |  2 +
 .../core/tokens/m2/mat/_expansion.scss        |  2 +
 .../expansion/expansion-panel-header.html     | 10 ++++-
 .../expansion/expansion-panel-header.scss     | 45 ++++++++++++++-----
 4 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index 9e0ced8efbe7..583e8fc938f9 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -467,6 +467,8 @@
     _generate-typography-tokens($systems, container-text, body-large),
     (
       container-shape: _hardcode(12px, $exclude-hardcoded),
+      legacy-header-indicator-display: _hardcode(none, $exclude-hardcoded),
+      header-indicator-display: _hardcode(inline-block, $exclude-hardcoded),
       container-background-color: map.get($systems, md-sys-color, surface),
       container-text-color: map.get($systems, md-sys-color, on-surface),
       actions-divider-color: map.get($systems, md-sys-color, outline-variant),
diff --git a/src/material/core/tokens/m2/mat/_expansion.scss b/src/material/core/tokens/m2/mat/_expansion.scss
index 0d0f473f5b37..85e443de8e0e 100644
--- a/src/material/core/tokens/m2/mat/_expansion.scss
+++ b/src/material/core/tokens/m2/mat/_expansion.scss
@@ -12,6 +12,8 @@ $prefix: (mat, expansion);
 @function get-unthemable-tokens() {
   @return (
     container-shape: 4px,
+    legacy-header-indicator-display: inline-block,
+    header-indicator-display: none,
   );
 }
 
diff --git a/src/material/expansion/expansion-panel-header.html b/src/material/expansion/expansion-panel-header.html
index c00f7da4cddb..84c077279b98 100644
--- a/src/material/expansion/expansion-panel-header.html
+++ b/src/material/expansion/expansion-panel-header.html
@@ -5,5 +5,13 @@
 </span>
 
 @if (_showToggle()) {
-  <span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator"></span>
+  <span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960"
+      aria-hidden="true"
+      focusable="false">
+      <path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/>
+    </svg>
+  </span>
 }
diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss
index 2380200e0d07..9cf896fa6e19 100644
--- a/src/material/expansion/expansion-panel-header.scss
+++ b/src/material/expansion/expansion-panel-header.scss
@@ -140,18 +140,41 @@
 
 // Creates the expansion indicator arrow. Done using ::after
 // rather than havingadditional nodes in the template.
-.mat-expansion-indicator::after {
-  border-style: solid;
-  border-width: 0 2px 2px 0;
-  content: '';
-  display: inline-block;
-  padding: 3px;
-  transform: rotate(45deg);
-  vertical-align: middle;
+.mat-expansion-indicator {
+  &::after {
+    border-style: solid;
+    border-width: 0 2px 2px 0;
+    content: '';
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    vertical-align: middle;
+
+    @include token-utils.use-tokens(
+      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
+      @include token-utils.create-token-slot(color, header-indicator-color);
+      @include token-utils.create-token-slot(display, legacy-header-indicator-display,
+        inline-block);
+    }
+  }
 
-  @include token-utils.use-tokens(
-    tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
-    @include token-utils.create-token-slot(color, header-indicator-color);
+  svg {
+    width: 24px;
+    height: 24px;
+
+    // The SVG icon isn't edge-to-edge so we need to offset
+    // it slightly so it's aligned correctly horizontally.
+    margin: 0 -8px;
+
+    // Since the container is `display: inline`, we need to set this to center the arrow.
+    // Ideally we'd make the container `inline-flex`, but that affects M2.
+    vertical-align: middle;
+
+    @include token-utils.use-tokens(
+      tokens-mat-expansion.$prefix, tokens-mat-expansion.get-token-slots()) {
+      @include token-utils.create-token-slot(fill, header-indicator-color);
+      @include token-utils.create-token-slot(display, header-indicator-display, none);
+    }
   }
 }