fix(chips): remove flat prefixes

PiperOrigin-RevId: 524311144
material-components · Apr 14, 2023 · 4fa83bf · 4fa83bf
1 parent b3a6dac
commit 4fa83bf
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 234 deletions.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -50,7 +50,7 @@
     text-decoration: none;
     width: 100%;
 
-    // Container and outline color, separate node for disabled opacity changes
+    // Container color, separate node for disabled opacity changes
     &::before {
       border-radius: inherit;
       content: '';
@@ -68,17 +68,22 @@
     pointer-events: none;
   }
 
-  .flat::before {
-    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
+  // Outline, separate node for disabled opacity changes
+  .outline {
+    border: var(--_outline-width) solid var(--_outline-color);
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
   }
 
-  .flat:focus::before {
-    border-color: var(--_flat-focus-outline-color);
+  :focus .outline {
+    border-color: var(--_focus-outline-color);
   }
 
-  .flat.disabled::before {
-    border-color: var(--_flat-disabled-outline-color);
-    opacity: var(--_flat-disabled-outline-opacity);
+  .disabled .outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
   }
 
   .elevated {
@@ -179,15 +184,14 @@
 
   .icon {
     align-self: center;
-    font-size: var(--_icon-size);
-    max-height: var(--_icon-size);
-    max-width: var(--_icon-size);
+    height: var(--_icon-size);
+    position: relative;
   }
 
   .icon ::slotted(*) {
-    font-size: inherit;
-    height: 100%;
-    width: 100%;
+    font-size: var(--_icon-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
   }
 
   .icon.leading {

diff --git a/tokens/_md-comp-assist-chip.scss b/tokens/_md-comp-assist-chip.scss
@@ -25,6 +25,8 @@ $supported-tokens: (
   'disabled-label-text-opacity',
   'disabled-leading-icon-color',
   'disabled-leading-icon-opacity',
+  'disabled-outline-color',
+  'disabled-outline-opacity',
   'elevated-container-color',
   'elevated-container-elevation',
   'elevated-container-shadow-color',
@@ -34,13 +36,9 @@ $supported-tokens: (
   'elevated-focus-container-elevation',
   'elevated-hover-container-elevation',
   'elevated-pressed-container-elevation',
-  'flat-disabled-outline-color',
-  'flat-disabled-outline-opacity',
-  'flat-focus-outline-color',
-  'flat-outline-color',
-  'flat-outline-width',
   'focus-label-text-color',
   'focus-leading-icon-color',
+  'focus-outline-color',
   'focus-state-layer-color',
   'focus-state-layer-opacity',
   'hover-label-text-color',
@@ -51,6 +49,8 @@ $supported-tokens: (
   'label-text-color',
   'label-text-type',
   'leading-icon-color',
+  'outline-color',
+  'outline-width',
   'pressed-label-text-color',
   'pressed-leading-icon-color',
   'pressed-state-layer-color',
@@ -60,12 +60,12 @@ $supported-tokens: (
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'container-elevation',
   'dragged-container-elevation',
   'dragged-label-text-color',
   'dragged-leading-icon-color',
   'dragged-state-layer-color',
   'dragged-state-layer-opacity',
-  'flat-container-elevation',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
@@ -74,19 +74,6 @@ $unsupported-tokens: (
   // go/keep-sorted end
 );
 
-$renamed-tokens: (
-  // Remove "with-icon-*" prefix (b/273534858)
-  // Rename "icon" to "leading-icon" (b/275577569)
-  'with-icon-disabled-icon-color': 'disabled-leading-icon-color',
-  'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',
-  'with-icon-dragged-icon-color': 'dragged-leading-icon-color',
-  'with-icon-focus-icon-color': 'focus-leading-icon-color',
-  'with-icon-hover-icon-color': 'hover-leading-icon-color',
-  'with-icon-icon-color': 'leading-icon-color',
-  'with-icon-icon-size': 'icon-size',
-  'with-icon-pressed-icon-color': 'pressed-leading-icon-color'
-);
-
 $_default: (
   'md-sys-color': md-sys-color.values-light(),
   'md-sys-elevation': md-sys-elevation.values(),
@@ -100,7 +87,25 @@ $_default: (
     md-comp-assist-chip.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
     $unsupported-tokens: $unsupported-tokens,
-    $renamed-tokens: $renamed-tokens
+    $renamed-tokens: (
+      // Remove "flat-*" prefix (b/275577569)
+      'flat-container-elevation': 'container-elevation',
+      'flat-disabled-outline-color': 'disabled-outline-color',
+      'flat-disabled-outline-opacity': 'disabled-outline-opacity',
+      'flat-focus-outline-color': 'focus-outline-color',
+      'flat-outline-color': 'outline-color',
+      'flat-outline-width': 'outline-width',
+      // Remove "with-*" prefixes (b/273534858)
+      // Rename "icon" to "leading-icon" (b/275577569)
+      'with-icon-disabled-icon-color': 'disabled-leading-icon-color',
+      'with-icon-disabled-icon-opacity': 'disabled-leading-icon-opacity',
+      'with-icon-dragged-icon-color': 'dragged-leading-icon-color',
+      'with-icon-focus-icon-color': 'focus-leading-icon-color',
+      'with-icon-hover-icon-color': 'hover-leading-icon-color',
+      'with-icon-icon-color': 'leading-icon-color',
+      'with-icon-icon-size': 'icon-size',
+      'with-icon-pressed-icon-color': 'pressed-leading-icon-color'
+    )
   );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens