feat(picker-button): migrate to core tokens

adobe · Aug 3, 2023 · b39219c · b39219c
1 parent 630d156
commit b39219c
Show file tree

Hide file tree

Showing 10 changed files with 415 additions and 1,126 deletions.
diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json
@@ -56,7 +56,7 @@
         "@spectrum-web-components/icons-ui": "^0.35.0"
     },
     "devDependencies": {
-        "@spectrum-css/pickerbutton": "^3.0.33"
+        "@spectrum-css/pickerbutton": "^4.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/picker-button/src/PickerButton.ts b/packages/picker-button/src/PickerButton.ts
@@ -11,17 +11,26 @@ governing permissions and limitations under the License.
 */
 import {
     CSSResultArray,
+    DefaultElementSize,
     html,
     SizedMixin,
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { classMap } from '@spectrum-web-components/base/src/directives.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from '@spectrum-web-components/button/src/ButtonBase.js';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js';
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 
 import styles from './picker-button.css.js';
+import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
+
+const chevronClass = {
+    s: 'spectrum-UIIcon-ChevronDown75',
+    m: 'spectrum-UIIcon-ChevronDown100',
+    l: 'spectrum-UIIcon-ChevronDown200',
+    xl: 'spectrum-UIIcon-ChevronDown300',
+};
 
 /**
  * @element sp-picker-button
@@ -30,7 +39,7 @@ export class PickerButton extends SizedMixin(
     ObserveSlotPresence(ButtonBase, '[slot="label"]')
 ) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [styles, chevronStyles];
     }
 
     @property({ type: Boolean, reflect: true })
@@ -59,9 +68,11 @@ export class PickerButton extends SizedMixin(
                         <slot name="label"></slot>
                     </span>
                     <slot name="icon">
-                        <sp-icon-chevron200
-                            class="spectrum-PickerButton-UIIcon spectrum-Icon spectrum-UIIcon-ChevronDown200"
-                        ></sp-icon-chevron200>
+                        <sp-icon-chevron100
+                            class="spectrum-PickerButton-icon spectrum-Icon ${chevronClass[
+                                this.size as DefaultElementSize
+                            ]}"
+                        ></sp-icon-chevron100>
                     </slot>
                 </div>
             </div>

diff --git a/packages/picker-button/src/picker-button.css b/packages/picker-button/src/picker-button.css
@@ -17,65 +17,5 @@ governing permissions and limitations under the License.
 }
 
 .root {
-    display: contents;
-}
-
-:host([size='s']) {
-    --spectrum-icon-tshirt-size-height: var(
-        --spectrum-alias-workflow-icon-size-s
-    );
-    --spectrum-icon-tshirt-size-width: var(
-        --spectrum-alias-workflow-icon-size-s
-    );
-    --spectrum-ui-icon-tshirt-size-height: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-75
-    );
-    --spectrum-ui-icon-tshirt-size-width: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-75
-    );
-}
-
-:host([size='m']) {
-    --spectrum-icon-tshirt-size-height: var(
-        --spectrum-alias-workflow-icon-size-m
-    );
-    --spectrum-icon-tshirt-size-width: var(
-        --spectrum-alias-workflow-icon-size-m
-    );
-    --spectrum-ui-icon-tshirt-size-height: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-100
-    );
-    --spectrum-ui-icon-tshirt-size-width: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-100
-    );
-}
-
-:host([size='l']) {
-    --spectrum-icon-tshirt-size-height: var(
-        --spectrum-alias-workflow-icon-size-l
-    );
-    --spectrum-icon-tshirt-size-width: var(
-        --spectrum-alias-workflow-icon-size-l
-    );
-    --spectrum-ui-icon-tshirt-size-height: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-200
-    );
-    --spectrum-ui-icon-tshirt-size-width: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-200
-    );
-}
-
-:host([size='xl']) {
-    --spectrum-icon-tshirt-size-height: var(
-        --spectrum-alias-workflow-icon-size-xl
-    );
-    --spectrum-icon-tshirt-size-width: var(
-        --spectrum-alias-workflow-icon-size-xl
-    );
-    --spectrum-ui-icon-tshirt-size-height: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-300
-    );
-    --spectrum-ui-icon-tshirt-size-width: var(
-        --spectrum-alias-ui-icon-cornertriangle-size-300
-    );
+    display: flex;
 }
diff --git a/packages/picker-button/src/spectrum-config.js b/packages/picker-button/src/spectrum-config.js
@@ -38,6 +38,12 @@ const convertSize = (size) => [
                     selectors: [builder.attribute('size', size)],
                 },
             },
+            {
+                replace: builder.combinator(' '),
+            },
+            {
+                replace: builder.class('root'),
+            },
         ],
     },
     {
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,12 @@ const convertSize = (size) => [ @@
                         selectors: [builder.attribute('size', size)],
                     },
                 },
+                {
+                    replace: builder.combinator(' '),
+                },
+                {
+                    replace: builder.class('root'),
+                },
             ],
         },
         {
@@ Expand Down @@