fix(picker): correctly process the CSS for quiet Picker hover

adobe · Mar 12, 2024 · d9faaa6 · d9faaa6
1 parent 287b979
commit d9faaa6
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 21 deletions.
diff --git a/packages/picker/src/spectrum-config.js b/packages/picker/src/spectrum-config.js
@@ -98,6 +98,19 @@ const config = {
                         },
                     ],
                 },
+                {
+                    find: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.class('spectrum-Picker--quiet')]],
+                    },
+                    replace: {
+                        type: 'pseudo-class',
+                        kind: 'not',
+                        selectors: [[builder.attribute('quiet')]],
+                    },
+                    hoist: true,
+                },
             ],
         },
     ],

diff --git a/packages/picker/src/spectrum-picker.css b/packages/picker/src/spectrum-picker.css
@@ -713,7 +713,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([open]) #button:not(.spectrum-Picker--quiet) {
+:host([open]:not([quiet])) #button {
     color: var(
         --highcontrast-picker-content-color-default,
         var(
@@ -737,7 +737,7 @@ governing permissions and limitations under the License.
     );
 }
 
-:host([open]) #button:not(.spectrum-Picker--quiet) .picker {
+:host([open]:not([quiet])) #button .picker {
     color: var(
         --highcontrast-picker-content-color-default,
         var(
@@ -969,7 +969,7 @@ governing permissions and limitations under the License.
         );
     }
 
-    :host([open]) #button:not(.spectrum-Picker--quiet):hover .picker {
+    :host([open]:not([quiet])) #button:hover .picker {
         color: var(
             --highcontrast-picker-content-color-default,
             var(
@@ -1013,7 +1013,7 @@ governing permissions and limitations under the License.
         );
     }
 
-    :host([open]) #button:not(.spectrum-Picker--quiet):hover {
+    :host([open]:not([quiet])) #button:hover {
         color: var(
             --highcontrast-picker-content-color-default,
             var(

diff --git a/packages/picker/stories/args.ts b/packages/picker/stories/args.ts
@@ -27,6 +27,7 @@ export const argTypes = {
             },
             type: 'select',
         },
+        options: ['s', 'm', 'l', 'xl'],
     },
     quiet: {
         name: 'quiet',

diff --git a/packages/picker/stories/picker.stories.ts b/packages/picker/stories/picker.stories.ts
@@ -26,6 +26,7 @@ import { isOverlayOpen } from '../../overlay/stories/index.js';
 import '../../overlay/stories/index.js';
 import { handleChange, StoryArgs, Template } from './template.js';
 import { argTypes } from './args.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 export default {
     title: 'Picker',
@@ -54,7 +55,9 @@ export default {
 
 export const Default = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-1"
             @change=${handleChange(args)}
@@ -88,7 +91,9 @@ disabled.args = {
 export const tooltip = (args: StoryArgs): TemplateResult => {
     const { open, ...rest } = args;
     return html`
-        <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-1"
             @change=${handleChange(args)}
@@ -128,7 +133,11 @@ tooltip.decorators = [isOverlayOpen];
 
 export const leftSideLabel = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label side-aligned="start" for="picker-1">
+        <sp-field-label
+            side-aligned="start"
+            for="picker-1"
+            size=${ifDefined(args.size)}
+        >
             Where do you live?
         </sp-field-label>
         <sp-picker
@@ -207,7 +216,9 @@ export const slottedLabel = (args: StoryArgs): TemplateResult => {
 
 export const quiet = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-quiet">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             ${spreadProps(args)}
             id="picker-quiet"
@@ -234,7 +245,11 @@ quiet.args = {
 
 export const quietSideLabel = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label side-aligned="start" for="picker-quiet-sidelabel">
+        <sp-field-label
+            side-aligned="start"
+            for="picker-quiet-sidelabel"
+            size=${ifDefined(args.size)}
+        >
             Where do you live?
         </sp-field-label>
         <sp-picker
@@ -263,7 +278,7 @@ quietSideLabel.args = {
 
 export const icons = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -291,7 +306,7 @@ export const icons = (args: StoryArgs): TemplateResult => {
 
 export const iconsNone = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -324,7 +339,7 @@ iconsNone.decorators = [isOverlayOpen];
 
 export const iconValue = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -354,7 +369,7 @@ export const iconValue = (args: StoryArgs): TemplateResult => {
 
 export const iconsOnly = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-quiet">
+        <sp-field-label for="picker-quiet" size=${ifDefined(args.size)}>
             Choose an action type...
         </sp-field-label>
         <sp-picker
@@ -392,7 +407,7 @@ export const Open = (args: StoryArgs): TemplateResult => {
             }
         </style>
         <fieldset class="backdrop-filter-test">
-            <sp-field-label for="picker-open">
+            <sp-field-label for="picker-open" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -413,7 +428,7 @@ export const Open = (args: StoryArgs): TemplateResult => {
             </sp-picker>
         </fieldset>
         <fieldset>
-            <sp-field-label for="picker-closed">
+            <sp-field-label for="picker-closed" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -473,7 +488,7 @@ export const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {
             .
         </p>
         <fieldset class="backdrop-filter-test">
-            <sp-field-label for="picker-open">
+            <sp-field-label for="picker-open" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -494,7 +509,7 @@ export const OpenShowingEdgeCase = (args: StoryArgs): TemplateResult => {
             </sp-picker>
         </fieldset>
         <fieldset>
-            <sp-field-label for="picker-closed">
+            <sp-field-label for="picker-closed" size=${ifDefined(args.size)}>
                 Where do you live?
             </sp-field-label>
             <sp-picker
@@ -520,7 +535,9 @@ OpenShowingEdgeCase.swc_vrt = {
 
 export const initialValue = (args: StoryArgs): TemplateResult => {
     return html`
-        <sp-field-label for="picker-initial">Where do you live?</sp-field-label>
+        <sp-field-label for="picker-initial" size=${ifDefined(args.size)}>
+            Where do you live?
+        </sp-field-label>
         <sp-picker
             id="picker-initial"
             @change=${handleChange(args)}
@@ -564,7 +581,7 @@ export const readonly = (args: StoryArgs): TemplateResult => {
 export const custom = (args: StoryArgs): TemplateResult => {
     const initialState = 'lb1-mo';
     return html`
-        <sp-field-label for="picker-state">
+        <sp-field-label for="picker-state" size=${ifDefined(args.size)}>
             What state do you live in?
         </sp-field-label>
         <sp-picker

diff --git a/packages/picker/stories/template.ts b/packages/picker/stories/template.ts
@@ -10,13 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import { html, type TemplateResult } from '@spectrum-web-components/base';
+import {
+    ElementSize,
+    html,
+    type TemplateResult,
+} from '@spectrum-web-components/base';
 import type { Picker } from '@spectrum-web-components/picker';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/picker/sp-picker.js';
 import '@spectrum-web-components/menu/sp-menu-item.js';
 
 import { spreadProps } from '../../../test/lit-helpers.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 
 export interface StoryArgs {
     disabled?: boolean;
@@ -26,6 +31,7 @@ export interface StoryArgs {
     showText?: boolean;
     onChange?: (val: string) => void;
     [prop: string]: unknown;
+    size?: ElementSize;
 }
 
 export const handleChange =
@@ -36,7 +42,9 @@ export const handleChange =
     };
 
 export const Template = (args: StoryArgs): TemplateResult => html`
-    <sp-field-label for="picker-1">Where do you live?</sp-field-label>
+    <sp-field-label for="picker-1" size=${ifDefined(args.size)}>
+        Where do you live?
+    </sp-field-label>
     <sp-picker
         id="picker-1"
         @change=${handleChange(args)}