Skip to content

chore(picker): remove quiet variant #4129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cdransf merged 1 commit into from
Aug 13, 2025
Merged

chore(picker): remove quiet variant #4129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions .changeset/grumpy-ghosts-serve.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Comment thread
cdransf marked this conversation as resolved.

##### 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`
30 changes: 4 additions & 26 deletions components/picker/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
59 changes: 1 addition & 58 deletions components/picker/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -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)));
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
54 changes: 1 addition & 53 deletions components/picker/stories/picker.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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.",
Expand Down Expand Up @@ -123,7 +118,6 @@ export default {
currentValue: "",
contentIconName: "Image",
showWorkflowIcon: false,
isQuiet: false,
isKeyboardFocused: false,
isLoading: false,
isDisabled: false,
Expand Down Expand Up @@ -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.
Expand Down
9 changes: 0 additions & 9 deletions components/picker/stories/picker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 0 additions & 4 deletions components/picker/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,6 @@ export const Template = ({
currentValue,
helpText,
id = getRandomId("picker"),
isQuiet = false,
isOpen = false,
isInvalid = false,
isDisabled = false,
Expand All @@ -139,7 +138,6 @@ export const Template = ({
const pickerMarkup = Picker({
rootClass,
size,
isQuiet,
currentValue,
showWorkflowIcon,
contentIconName,
Expand All @@ -160,7 +158,6 @@ export const Template = ({
isOpen: isOpen && !isDisabled && !isLoading,
withTip: false,
position: "bottom-start",
isQuiet,
content: popoverContent,
size,
customStyles: customPopoverStyles,
Expand All @@ -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({
Expand Down
Loading