chore(picker): remove quiet variant (#4129)

Author: cdransf

.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`

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",

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 {

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.

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",

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({