fix(segmentedbutton)!: remove with-* token prefixes

PiperOrigin-RevId: 546951852
material-components · Jul 10, 2023 · cc786d1 · cc786d1
1 parent 4ac1f76
commit cc786d1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/labs/segmentedbutton/lib/_shared.scss b/labs/segmentedbutton/lib/_shared.scss
@@ -73,9 +73,9 @@
     .md3-segmented-button__checkmark,
     .md3-segmented-button__icon,
     .md3-segmented-button__icon ::slotted([slot='icon']) {
-      height: var(--_with-icon-icon-size);
-      width: var(--_with-icon-icon-size);
-      font-size: var(--_with-icon-icon-size);
+      height: var(--_icon-size);
+      width: var(--_icon-size);
+      font-size: var(--_icon-size);
     }
 
     // Under the following conditions, we need to account for extra space between
@@ -98,7 +98,7 @@
     &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark {
       .md3-segmented-button__graphic {
         // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
-        width: calc(var(--_with-icon-icon-size) + 8px);
+        width: calc(var(--_icon-size) + 8px);
       }
     }
 
@@ -163,7 +163,7 @@
 
   .md3-segmented-button--unselected {
     .md3-segmented-button__icon {
-      color: var(--_unselected-with-icon-icon-color);
+      color: var(--_unselected-icon-color);
     }
 
     &:hover {
@@ -204,11 +204,11 @@
     background-color: var(--_selected-container-color);
 
     .md3-segmented-button__icon {
-      color: var(--_selected-with-icon-icon-color);
+      color: var(--_selected-icon-color);
     }
 
     .md3-segmented-button__checkmark-path {
-      stroke: var(--_selected-with-icon-icon-color);
+      stroke: var(--_selected-icon-color);
     }
 
     &:hover {

diff --git a/labs/segmentedbutton/outlined-segmented-button_test.ts b/labs/segmentedbutton/outlined-segmented-button_test.ts
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../../testing/tokens.js';
+
+import {MdOutlinedSegmentedButton} from './outlined-segmented-button.js';
+
+describe('<md-outlined-segmented-button>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdOutlinedSegmentedButton.styles);
+  });
+});
diff --git a/tokens/_md-comp-outlined-segmented-button.scss b/tokens/_md-comp-outlined-segmented-button.scss
@@ -16,54 +16,54 @@
 
 $supported-tokens: (
   // go/keep-sorted start
-  'container-height',
   'disabled-icon-color',
-  'disabled-icon-opacity',
   'disabled-label-text-color',
-  'disabled-label-text-opacity',
   'disabled-outline-color',
-  'disabled-outline-opacity',
-  'focus-state-layer-opacity',
   'hover-state-layer-opacity',
+  'icon-size',
   'label-text-type',
   'outline-color',
-  'outline-width',
   'pressed-state-layer-opacity',
   'selected-container-color',
   'selected-focus-icon-color',
   'selected-focus-label-text-color',
-  'selected-focus-state-layer-color',
   'selected-hover-icon-color',
   'selected-hover-label-text-color',
   'selected-hover-state-layer-color',
+  'selected-icon-color',
   'selected-label-text-color',
   'selected-pressed-icon-color',
   'selected-pressed-label-text-color',
   'selected-pressed-state-layer-color',
-  'selected-with-icon-icon-color',
-  'shape',
   'unselected-focus-icon-color',
   'unselected-focus-label-text-color',
-  'unselected-focus-state-layer-color',
   'unselected-hover-icon-color',
   'unselected-hover-label-text-color',
   'unselected-hover-state-layer-color',
+  'unselected-icon-color',
   'unselected-label-text-color',
   'unselected-pressed-icon-color',
   'unselected-pressed-label-text-color',
   'unselected-pressed-state-layer-color',
-  'unselected-with-icon-icon-color',
-  'with-icon-icon-size',
   // go/keep-sorted end
 );
 
 $unsupported-tokens: (
   // go/keep-sorted start
+  'container-height',
+  'disabled-icon-opacity',
+  'disabled-label-text-opacity',
+  'disabled-outline-opacity',
+  'focus-state-layer-opacity',
   'label-text-font',
   'label-text-line-height',
   'label-text-size',
   'label-text-tracking',
   'label-text-weight',
+  'outline-width',
+  'selected-focus-state-layer-color',
+  'shape',
+  'unselected-focus-state-layer-color',
   // go/keep-sorted end
 );
 
@@ -78,7 +78,13 @@ $_default: (
   $tokens: values.validate(
     md-comp-outlined-segmented-button.values($deps, $exclude-hardcoded-values),
     $supported-tokens: $supported-tokens,
-    $unsupported-tokens: $unsupported-tokens
+    $unsupported-tokens: $unsupported-tokens,
+    $renamed-tokens: (
+      // Remove "with-*" prefixes (b/273534858)
+      'with-icon-icon-size': 'icon-size',
+      'selected-with-icon-icon-color': 'selected-icon-color',
+      'unselected-with-icon-icon-color': 'unselected-icon-color'
+    )
   );
 
   // TODO(b/271876162): remove when tokens compiler emits typescale tokens