diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md new file mode 100644 index 00000000000..e63c2bfcf56 --- /dev/null +++ b/.changeset/open-squids-refuse.md @@ -0,0 +1,20 @@ +--- +"@spectrum-css/picker": major +--- + +### S2 Picker component refactor + +- Refactors Picker component to use proper custom property naming conventions +- Adds size-specific animation distances for Popover component +- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button` +- `spectrum-Picker` now encapsulates help text, label, and popover components +- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible +- Updates Popover animation distance to use `spectrum-Picker` custom properties + +#### New token + +`--spectrum-picker-popover-animation-distance` + +#### Renamed tokens + +`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance` diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 9133755e956..bde45fd599a 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -2,22 +2,60 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Picker", - ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", ".spectrum-Picker--quiet", - ".spectrum-Picker--quiet.is-keyboardFocused:after", + ".spectrum-Picker--quiet .spectrum-Picker-button", + ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after", + ".spectrum-Picker--quiet .spectrum-Picker-button:after", + ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after", ".spectrum-Picker--quiet.spectrum-Picker--sideLabel", - ".spectrum-Picker--quiet:after", - ".spectrum-Picker--quiet:focus-visible:after", + ".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", - ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeS", - ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeXL", - ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open", + ".spectrum-Picker-button", + ".spectrum-Picker-button.is-disabled", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-icon", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)", + ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover", + ".spectrum-Picker-button.is-keyboardFocused", + ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-keyboardFocused:after", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon", + ".spectrum-Picker-button::-moz-focus-inner", + ".spectrum-Picker-button:active", + ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:active:after", + ".spectrum-Picker-button:disabled", + ".spectrum-Picker-button:disabled .spectrum-Picker-icon", + ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon", + ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)", + ".spectrum-Picker-button:focus", + ".spectrum-Picker-button:focus-visible", + ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon", + ".spectrum-Picker-button:focus-visible:after", + ".spectrum-Picker-button:hover", + ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon", ".spectrum-Picker-label", ".spectrum-Picker-label.is-placeholder", ".spectrum-Picker-label.is-placeholder:active", @@ -25,48 +63,11 @@ ".spectrum-Picker-menuIcon", ".spectrum-Picker-menuIcon:active", ".spectrum-Picker-validationIcon", - ".spectrum-Picker.is-disabled", - ".spectrum-Picker.is-disabled .spectrum-Picker-icon", - ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)", - ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover", ".spectrum-Picker.is-keyboardFocused", - ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-keyboardFocused:after", ".spectrum-Picker.is-loading", ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon", - ".spectrum-Picker::-moz-focus-inner", - ".spectrum-Picker:active", - ".spectrum-Picker:active .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:active:after", ".spectrum-Picker:after", - ".spectrum-Picker:disabled", - ".spectrum-Picker:disabled .spectrum-Picker-icon", - ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:disabled .spectrum-Picker-menuIcon", - ".spectrum-Picker:disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)", - ".spectrum-Picker:focus", ".spectrum-Picker:focus-visible", - ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon", - ".spectrum-Picker:focus-visible:after", - ".spectrum-Picker:hover", - ".spectrum-Picker:hover .spectrum-Picker-menuIcon", ".spectrum-Picker:lang(ja) .spectrum-Picker-label", ".spectrum-Picker:lang(ko) .spectrum-Picker-label", ".spectrum-Picker:lang(zh) .spectrum-Picker-label" @@ -131,7 +132,6 @@ "--mod-picker-spacing-icon-to-disclosure-icon", "--mod-picker-spacing-label-to-picker", "--mod-picker-spacing-label-to-picker-quiet", - "--mod-picker-spacing-picker-to-popover", "--mod-picker-spacing-starting-icon-to-text", "--mod-picker-spacing-text-to-icon-inline-end", "--mod-picker-spacing-top-to-alert-icon", @@ -190,13 +190,13 @@ "--spectrum-picker-min-inline-size", "--spectrum-picker-minimum-width-multiplier", "--spectrum-picker-placeholder-font-style", + "--spectrum-picker-popover-animation-distance", "--spectrum-picker-spacing-bottom-to-text", "--spectrum-picker-spacing-edge-to-disclosure-icon", "--spectrum-picker-spacing-edge-to-text", "--spectrum-picker-spacing-icon-to-disclosure-icon", "--spectrum-picker-spacing-label-to-picker", "--spectrum-picker-spacing-label-to-picker-quiet", - "--spectrum-picker-spacing-picker-to-popover", "--spectrum-picker-spacing-starting-icon-to-text", "--spectrum-picker-spacing-text-to-icon-inline-end", "--spectrum-picker-spacing-top-to-alert-icon", @@ -302,7 +302,8 @@ "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", - "--mod-button-line-height" + "--mod-button-line-height", + "--mod-popover-animation-distance" ], "high-contrast": [ "--highcontrast-picker-background-color", diff --git a/components/picker/index.css b/components/picker/index.css index 924bef384d1..ea2015af243 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -103,9 +103,10 @@ --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - & + .spectrum-Popover--bottom-start.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium); + + --mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance); } .spectrum-Picker--sizeS { @@ -118,16 +119,14 @@ --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-75); --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - - & + .spectrum-Popover--bottom-start.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-small); } .spectrum-Picker--sizeL { @@ -135,21 +134,19 @@ --spectrum-picker-inline-size: var(--spectrum-field-default-width-large); --spectrum-picker-block-size: var(--spectrum-component-height-200); --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-200); --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-200); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - - & + .spectrum-Popover--bottom-start.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-large); } .spectrum-Picker--sizeXL { @@ -157,21 +154,19 @@ --spectrum-picker-inline-size: var(--spectrum-field-default-width-extra-large); --spectrum-picker-block-size: var(--spectrum-component-height-300); --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-300); --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-300); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - - & + .spectrum-Popover--bottom-start.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } .spectrum-Picker--quiet { @@ -188,9 +183,14 @@ --spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet)); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet)); --spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)); + + &.spectrum-Picker--sideLabel .spectrum-Picker-button { + margin-block-start: 0; + } } -.spectrum-Picker { +/* Note: .spectrum-Picker has been renamed to .spectrum-Picker-button. This selector now triggers the Popover component. */ +.spectrum-Picker-button { @extend %spectrum-BaseButton; display: flex; @@ -219,27 +219,6 @@ background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); - /* Focus indicator */ - &::after { - pointer-events: none; - content: ""; - position: absolute; - block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - inset-inline: 0; - inset-block: 0; - border-style: solid; - border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); - border-color: transparent; - border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - } - &:hover { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); @@ -277,6 +256,27 @@ border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); } + /* Focus indicator */ + &::after { + pointer-events: none; + content: ""; + position: absolute; + block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + inset-inline: 0; + inset-block: 0; + border-style: solid; + border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); + border-color: transparent; + border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + } + .spectrum-Picker-label.is-placeholder { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); } @@ -408,35 +408,34 @@ margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); -} - -.spectrum-Picker + .spectrum-Popover--bottom-start.is-open { - transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); + flex-shrink: 0; } .spectrum-Picker--quiet { - border: none; - border-radius: 0; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - &.spectrum-Picker--sideLabel { margin-block-start: 0; } - &::after { + .spectrum-Picker-button { border: none; - block-size: auto; - inline-size: auto; - } + border-radius: 0; + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - &:focus-visible, - &.is-keyboardFocused { - /* Focus indicator changes from a ring to a line underneath. */ &::after { border: none; - border-radius: 0; - box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); - margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + block-size: auto; + inline-size: auto; + } + + &:focus-visible, + &.is-keyboardFocused { + /* Focus indicator changes from a ring to a line underneath. */ + &::after { + border: none; + border-radius: 0; + border-block-end: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) solid var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + } } } } @@ -449,8 +448,8 @@ /* Disabled and loading states: Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ -.spectrum-Picker:disabled, -.spectrum-Picker.is-disabled { +.spectrum-Picker-button:disabled, +.spectrum-Picker-button.is-disabled { cursor: default; transform: none; border-color: var(--highcontrast-picker-border-color-disabled, transparent); diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index c6224c7c3dd..306a1490bdf 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -76,7 +76,11 @@ export default { ...(IconStories?.argTypes?.iconName ?? {}), name: "Icon", description: "Optional workflow icon that appears before the value/placeholder text within the picker.", - if: false, + if: { arg: "showWorkflowIcon", eq: true }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, }, isQuiet: { ...isQuiet, @@ -117,6 +121,7 @@ export default { placeholder: "Select a country", helpText: "", currentValue: "", + contentIconName: "Image", showWorkflowIcon: false, isQuiet: false, isKeyboardFocused: false, diff --git a/components/picker/stories/picker.test.js b/components/picker/stories/picker.test.js index 82f7e060075..46c8e389348 100644 --- a/components/picker/stories/picker.test.js +++ b/components/picker/stories/picker.test.js @@ -24,6 +24,11 @@ export const PickerGroup = Variants({ testHeading: "Side label", labelPosition: "side", }, + { + testHeading: "Side label, quiet", + labelPosition: "side", + isQuiet: true, + }, { testHeading: "Side label, alignment with switch", labelPosition: "side", @@ -32,6 +37,7 @@ export const PickerGroup = Variants({ { testHeading: "With thumbnail icon", showWorkflowIcon: true, + contentIconName: "Image", }, ], stateData: [ diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index d2713463154..12947c0b76f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -18,13 +18,10 @@ import "../index.css"; */ export const Picker = ({ rootClass = "spectrum-Picker", - id = getRandomId("picker"), size = "m", - labelPosition = "top", placeholder, currentValue, contentIconName, - isQuiet = false, isKeyboardFocused = false, showWorkflowIcon = false, isOpen = false, @@ -42,11 +39,7 @@ export const Picker = ({ return html`