diff --git a/.changeset/grumpy-ghosts-serve.md b/.changeset/grumpy-ghosts-serve.md new file mode 100644 index 00000000000..103fb59de7f --- /dev/null +++ b/.changeset/grumpy-ghosts-serve.md @@ -0,0 +1,19 @@ +--- +"@spectrum-css/picker": major +--- + +#### Picker: remove quiet variant + +This removes the quiet variant for the picker component based on design feedback. Prior to this change, there was an odd state where the quiet picker scaled with the foundations down state applied. + +##### Removed mods + +`--mod-picker-background-color-disabled` + +**Additionally:** all of the quiet variant mods have been removed. + +`--mod-picker-inline-size-quiet` +`--mod-picker-min-inline-size-quiet` +`--mod-picker-spacing-edge-to-disclosure-icon-quiet` +`--mod-picker-spacing-edge-to-text-quiet` +`--mod-picker-spacing-label-to-picker-quiet` diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index bde45fd599a..59bb8316bfc 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -5,13 +5,6 @@ ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", - ".spectrum-Picker--quiet", - ".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.spectrum-Picker--sideLabel .spectrum-Picker-button", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", ".spectrum-Picker--sizeS", @@ -22,7 +15,6 @@ ".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", @@ -35,10 +27,10 @@ ".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.is-open:not(:disabled, .is-disabled, .is-loading)", + ".spectrum-Picker-button.is-open:not(:disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-open:not(:disabled, .is-disabled, .is-loading):hover", + ".spectrum-Picker-button.is-open:not(: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", @@ -48,7 +40,6 @@ ".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", @@ -77,7 +68,6 @@ "--mod-picker-background-color-active", "--mod-picker-background-color-default", "--mod-picker-background-color-default-open", - "--mod-picker-background-color-disabled", "--mod-picker-background-color-hover", "--mod-picker-background-color-hover-open", "--mod-picker-background-color-key-focus", @@ -117,21 +107,16 @@ "--mod-picker-icon-color-hover-open", "--mod-picker-icon-color-key-focus", "--mod-picker-inline-size", - "--mod-picker-inline-size-quiet", "--mod-picker-line-height", "--mod-picker-line-height-cjk", "--mod-picker-min-inline-size", - "--mod-picker-min-inline-size-quiet", "--mod-picker-placeholder-font-style", "--mod-picker-placeholder-font-weight", "--mod-picker-spacing-bottom-to-text", "--mod-picker-spacing-edge-to-disclosure-icon", - "--mod-picker-spacing-edge-to-disclosure-icon-quiet", "--mod-picker-spacing-edge-to-text", - "--mod-picker-spacing-edge-to-text-quiet", "--mod-picker-spacing-icon-to-disclosure-icon", "--mod-picker-spacing-label-to-picker", - "--mod-picker-spacing-label-to-picker-quiet", "--mod-picker-spacing-starting-icon-to-text", "--mod-picker-spacing-text-to-icon-inline-end", "--mod-picker-spacing-top-to-alert-icon", @@ -163,7 +148,6 @@ "--spectrum-picker-border-color-key-focus", "--spectrum-picker-border-radius", "--spectrum-picker-border-width", - "--spectrum-picker-end-edge-to-disclousure-icon-quiet", "--spectrum-picker-focus-indicator-color", "--spectrum-picker-focus-indicator-gap", "--spectrum-picker-focus-indicator-thickness", @@ -196,7 +180,6 @@ "--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-starting-icon-to-text", "--spectrum-picker-spacing-text-to-icon-inline-end", "--spectrum-picker-spacing-top-to-alert-icon", @@ -251,16 +234,11 @@ "--spectrum-field-default-width-large", "--spectrum-field-default-width-medium", "--spectrum-field-default-width-small", - "--spectrum-field-edge-to-text-quiet", "--spectrum-field-end-edge-to-disclosure-icon-100", "--spectrum-field-end-edge-to-disclosure-icon-200", "--spectrum-field-end-edge-to-disclosure-icon-300", "--spectrum-field-end-edge-to-disclosure-icon-75", "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", "--spectrum-field-top-to-disclosure-icon-100", "--spectrum-field-top-to-disclosure-icon-200", "--spectrum-field-top-to-disclosure-icon-300", diff --git a/components/picker/index.css b/components/picker/index.css index ea2015af243..a4627961e04 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -52,7 +52,6 @@ /* Space from label component to Picker component. */ --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); /* Space from optional starting icon to the text. */ --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100); @@ -119,7 +118,6 @@ --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-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); @@ -134,7 +132,6 @@ --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); @@ -154,7 +151,6 @@ --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); @@ -169,26 +165,6 @@ --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } -.spectrum-Picker--quiet { - --spectrum-picker-background-color-default: transparent; - --spectrum-picker-background-color-default-open: transparent; - --spectrum-picker-background-color-hover: transparent; - --spectrum-picker-background-color-hover-open: transparent; - --spectrum-picker-background-color-active: transparent; - --spectrum-picker-background-color-key-focus: transparent; - --spectrum-picker-background-color-disabled: transparent; - - --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0); - --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto); - --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; - } -} - /* Note: .spectrum-Picker has been renamed to .spectrum-Picker-button. This selector now triggers the Popover component. */ .spectrum-Picker-button { @extend %spectrum-BaseButton; @@ -286,7 +262,7 @@ } } - &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) { + &.is-open:not(:disabled, .is-disabled, .is-loading) { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); @@ -411,35 +387,6 @@ flex-shrink: 0; } -.spectrum-Picker--quiet { - &.spectrum-Picker--sideLabel { - margin-block-start: 0; - } - - .spectrum-Picker-button { - border: none; - border-radius: 0; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - - &::after { - border: none; - 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; - } - } - } -} - .spectrum-Picker--sideLabel { display: inline-flex; vertical-align: top; @@ -455,10 +402,6 @@ border-color: var(--highcontrast-picker-border-color-disabled, transparent); color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); - &:not(.spectrum-Picker--quiet) { - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - } - .spectrum-Picker-icon, .spectrum-Picker-menuIcon, .spectrum-Picker-validationIcon { diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 306a1490bdf..081dbebd247 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -2,7 +2,7 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js"; import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { PickerGroup } from "./picker.test.js"; @@ -82,11 +82,6 @@ export default { category: "Advanced", }, }, - isQuiet: { - ...isQuiet, - description: "An alternative way to display the Picker without a visible background.", - name: "Quiet styling", - }, helpText: { name: "Help text", description: "Optional help text that can be informational or an error message. Displays a separate help text component after the picker. For error messages, the invalid control must also be set to true.", @@ -123,7 +118,6 @@ export default { currentValue: "", contentIconName: "Image", showWorkflowIcon: false, - isQuiet: false, isKeyboardFocused: false, isLoading: false, isDisabled: false, @@ -313,52 +307,6 @@ Loading.parameters = { chromatic: { disableSnapshot: true }, }; -/** - * Quiet pickers have no visible background. This style works best when a clear layout (vertical stack, table, grid) - * makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read. - */ -export const Quiet = ClosedAndOpenTemplate.bind({}); -Quiet.tags = ["!dev"]; -Quiet.args = { - isQuiet: true, -}; -Quiet.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "300px", - } - }, -}; - -export const QuietDisabled = DisabledTemplate.bind({}); -QuietDisabled.storyName = "Quiet and disabled"; -QuietDisabled.tags = ["!dev"]; -QuietDisabled.args = { - isDisabled: true, - isQuiet: true, -}; -QuietDisabled.parameters = { - chromatic: { disableSnapshot: true }, -}; - -export const QuietInvalid = ClosedAndOpenTemplate.bind({}); -QuietInvalid.storyName = "Quiet and invalid"; -QuietInvalid.tags = ["!dev"]; -QuietInvalid.args = { - isInvalid: true, - isQuiet: true, - helpText: "Select a country.", -}; -QuietInvalid.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "300px", - } - }, -}; - /** * The value and placeholder within the picker will truncate with an ellipsis when it is longer than the available horizontal space within the picker. * The full text of the option can be shown in the menu. diff --git a/components/picker/stories/picker.test.js b/components/picker/stories/picker.test.js index 46c8e389348..0df9b4b6c86 100644 --- a/components/picker/stories/picker.test.js +++ b/components/picker/stories/picker.test.js @@ -16,19 +16,10 @@ export const PickerGroup = Variants({ testHeading: "Default, with value and text overflow", currentValue: "The selected value of the picker, with long text the triggers the overflow behavior with ellipsis", }, - { - testHeading: "Quiet", - isQuiet: true, - }, { testHeading: "Side label", labelPosition: "side", }, - { - testHeading: "Side label, quiet", - labelPosition: "side", - isQuiet: true, - }, { testHeading: "Side label, alignment with switch", labelPosition: "side", diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 12947c0b76f..16997396b4c 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -114,7 +114,6 @@ export const Template = ({ currentValue, helpText, id = getRandomId("picker"), - isQuiet = false, isOpen = false, isInvalid = false, isDisabled = false, @@ -139,7 +138,6 @@ export const Template = ({ const pickerMarkup = Picker({ rootClass, size, - isQuiet, currentValue, showWorkflowIcon, contentIconName, @@ -160,7 +158,6 @@ export const Template = ({ isOpen: isOpen && !isDisabled && !isLoading, withTip: false, position: "bottom-start", - isQuiet, content: popoverContent, size, customStyles: customPopoverStyles, @@ -186,7 +183,6 @@ export const Template = ({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--quiet`]: isQuiet, [`${rootClass}--sideLabel`]: labelPosition == "side", })} style=${styleMap({