diff --git a/.changeset/few-candles-sniff.md b/.changeset/few-candles-sniff.md new file mode 100644 index 00000000000..dade1443715 --- /dev/null +++ b/.changeset/few-candles-sniff.md @@ -0,0 +1,47 @@ +--- +"@spectrum-css/pickerbutton": major +--- + +The picker button component has been migrated to Spectrum 2. The picker button uses the same design spec as infield button and in some cases may be able to be used interchangeably with it. Its updated features include: + +- Corner rounding updates - corner rounding differs by the component's t-shirt size, but otherwise is a standard size. This means that the rounded variant of picker button with increased corner rounding and the position variants of picker button that helped the picker button fit snugly within either side of an input have been removed. +- Color and spacing updates to match S2 spec +- Added WHCM support +- Updated S2 down state +- Removed focus styles: there are no spec'd focus styles in S2, therefore these styles have been removed. +- The label variant of picker button has been removed. +- Removal of `.spectrum-PickerButton--uiicononly`, `.spectrum-PickerButton--icononly`, and `.spectrum-PickerButton--textuiicon` classes: + - The picker button featuring a UI icon is the default variant, so no additional `.spectrum-PickerButton--uiicononly` class needs to be applied. + - The `.spectrum-PickerButton--icononly` class has been renamed to `.spectrum-PickerButton--workflowicon` to clarify when it should be used. Applying `.spectrum-PickerButton--workflowicon` when using a workflow icon instead is recommended, but probably not required. + - Because the picker button no longer supports a label, there is no need for a `--textuiicon` variant which is why that class has been removed. +- The `.is-open` state can continue to be used as before. + +Added mod custom properties: + +- `--mod-picker-button-background-color-quiet-disabled` + +Removed mod custom properties: + +- `--mod-picker-button-background-color-key-focus` +- `--mod-picker-button-background-color-key-focus-quiet` +- `--mod-picker-button-border-color` +- `--mod-picker-button-border-color-disabled` +- `--mod-picker-button-border-color-quiet` +- `--mod-picker-button-border-radius-rounded` +- `--mod-picker-button-border-radius-rounded-sided` +- `--mod-picker-button-border-radius-sided` +- `--mod-picker-button-border-width` +- `--mod-picker-button-font-color` +- `--mod-picker-button-font-color-disabled` +- `--mod-picker-button-font-color-down` +- `--mod-picker-button-font-color-down-disabled` +- `--mod-picker-button-font-color-hover` +- `--mod-picker-button-font-color-hover-disabled` +- `--mod-picker-button-font-color-key-focus` +- `--mod-picker-button-font-family` +- `--mod-picker-button-font-size` +- `--mod-picker-button-font-style` +- `--mod-picker-button-font-weight` +- `--mod-picker-button-gap` +- `--mod-picker-button-icon-color-key-focus` +- `--mod-picker-button-label-padding` diff --git a/.changeset/green-falcons-rush.md b/.changeset/green-falcons-rush.md new file mode 100644 index 00000000000..760f1391e29 --- /dev/null +++ b/.changeset/green-falcons-rush.md @@ -0,0 +1,9 @@ +--- +"@spectrum-css/infieldbutton": patch +--- + +Remove unused key-focus and border mods. Note that border and key focus styles were previously removed in the migration to Spectrum 2, and the mod removals here do not have any visual impact to the infield button. + +Also updates transition to use `background-color` instead of `border-color`. + +Also fixes a flash bug in WHCM: when hovered, the infield button was flashing/blinking before changing to the appropriate hover color. diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index eebb928df80..9f653cb8c92 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -85,12 +85,12 @@ export const DatePicker = ({ }, }, context))} ${PickerButton({ - customClasses: [`${rootClass}-button`], + customClasses: [`${rootClass}-button`, "spectrum-PickerButton--workflowicon"], size: "m", iconName: "Calendar", iconSet: "workflow", isQuiet, - customStyles: isReadOnly ? { "display": "none" } : undefined, + customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" }, // @todo this is not added to the button on the website; need to make sure it's not a bug // isOpen, isInvalid, diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index cf5dfa5f4cc..98a823a73c7 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -34,13 +34,8 @@ "--mod-infield-button-background-color-hover", "--mod-infield-button-background-color-hover-disabled", "--mod-infield-button-background-color-hover-quiet", - "--mod-infield-button-background-color-key-focus", - "--mod-infield-button-background-color-key-focus-quiet", "--mod-infield-button-background-color-quiet", "--mod-infield-button-background-color-quiet-disabled", - "--mod-infield-button-border-color", - "--mod-infield-button-border-color-disabled", - "--mod-infield-button-border-color-quiet-disabled", "--mod-infield-button-border-radius", "--mod-infield-button-edge-to-fill", "--mod-infield-button-field-edge-to-icon", @@ -53,8 +48,6 @@ "--mod-infield-button-icon-color-down-disabled", "--mod-infield-button-icon-color-hover", "--mod-infield-button-icon-color-hover-disabled", - "--mod-infield-button-icon-color-key-focus", - "--mod-infield-button-icon-color-key-focus-disabled", "--mod-infield-button-side-edge-to-fill", "--mod-infield-button-width" ], diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index a237fc6c698..fc5aad69ca5 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -44,12 +44,9 @@ --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); - --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color)); } &.spectrum-InfieldButton--sizeS { @@ -87,11 +84,9 @@ --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent); --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent); --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); - --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); } } @@ -161,7 +156,7 @@ align-items: center; justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); - transition: border-color var(--spectrum-animation-duration-100) ease-in-out; + transition: background-color var(--spectrum-animation-duration-100) ease-in-out; } .spectrum-InfieldButton-icon { @@ -181,6 +176,7 @@ .spectrum-InfieldButton { --highcontrast-infield-button-background-color: ButtonText; --highcontrast-infield-button-icon-color: ButtonFace; + forced-color-adjust: none; /* keeps button from flashing when hovered */ &:disabled { --highcontrast-infield-button-background-color: GrayText; diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 02185b17d4e..06eca6f321f 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -15,7 +15,6 @@ export const Template = ( iconName = "ChevronDown", iconSet = "ui", isDisabled, - isInvalid, isHovered, isActive, isInline, @@ -38,7 +37,6 @@ export const Template = ( [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--quiet`]: isQuiet, - "is-invalid": isInvalid, "is-hover": isHovered, "is-active": isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -68,7 +66,6 @@ export const Template = ( [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--quiet`]: isQuiet, - "is-invalid": isInvalid, "is-hover": isHovered, "is-active": isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -101,7 +98,6 @@ export const Template = ( [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--quiet`]: isQuiet, - "is-invalid": isInvalid, "is-hover": isHovered, "is-active": isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index c6186980d83..4b3d33be65e 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -2,30 +2,27 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-PickerButton", - ".spectrum-PickerButton--left .spectrum-PickerButton-fill", - ".spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill", - ".spectrum-PickerButton--right .spectrum-PickerButton-fill", - ".spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill", - ".spectrum-PickerButton--rounded .spectrum-PickerButton-fill", - ".spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill", - ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill", - ".spectrum-PickerButton--uiicononly .spectrum-PickerButton-label", + ".spectrum-PickerButton--quiet", + ".spectrum-PickerButton--quiet:disabled", + ".spectrum-PickerButton--quiet:not(:disabled):active", + ".spectrum-PickerButton--quiet:not(:disabled):focus-visible", + ".spectrum-PickerButton--quiet:not(:disabled):hover", + ".spectrum-PickerButton--workflowicon .spectrum-PickerButton-fill", ".spectrum-PickerButton-fill", ".spectrum-PickerButton-icon", - ".spectrum-PickerButton-label", - ".spectrum-PickerButton.is-focused", - ".spectrum-PickerButton.is-keyboardFocused", ".spectrum-PickerButton.is-open", ".spectrum-PickerButton.spectrum-PickerButton--quiet", + ".spectrum-PickerButton.spectrum-PickerButton--quiet:disabled", ".spectrum-PickerButton.spectrum-PickerButton--sizeL", ".spectrum-PickerButton.spectrum-PickerButton--sizeS", ".spectrum-PickerButton.spectrum-PickerButton--sizeXL", - ".spectrum-PickerButton.spectrum-PickerButton--uiicononly", ".spectrum-PickerButton:active", ".spectrum-PickerButton:disabled", - ".spectrum-PickerButton:focus", ".spectrum-PickerButton:focus-visible", - ".spectrum-PickerButton:hover" + ".spectrum-PickerButton:hover", + ".spectrum-PickerButton:not(:disabled):active", + ".spectrum-PickerButton:not(:disabled):focus-visible", + ".spectrum-PickerButton:not(:disabled):hover" ], "modifiers": [ "--mod-picker-button-background-animation-duration", @@ -37,30 +34,10 @@ "--mod-picker-button-background-color-hover", "--mod-picker-button-background-color-hover-disabled", "--mod-picker-button-background-color-hover-quiet", - "--mod-picker-button-background-color-key-focus", - "--mod-picker-button-background-color-key-focus-quiet", "--mod-picker-button-background-color-quiet", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-color-quiet", + "--mod-picker-button-background-color-quiet-disabled", "--mod-picker-button-border-radius", - "--mod-picker-button-border-radius-rounded", - "--mod-picker-button-border-radius-rounded-sided", - "--mod-picker-button-border-radius-sided", - "--mod-picker-button-border-width", "--mod-picker-button-fill-padding", - "--mod-picker-button-font-color", - "--mod-picker-button-font-color-disabled", - "--mod-picker-button-font-color-down", - "--mod-picker-button-font-color-down-disabled", - "--mod-picker-button-font-color-hover", - "--mod-picker-button-font-color-hover-disabled", - "--mod-picker-button-font-color-key-focus", - "--mod-picker-button-font-family", - "--mod-picker-button-font-size", - "--mod-picker-button-font-style", - "--mod-picker-button-font-weight", - "--mod-picker-button-gap", "--mod-picker-button-height", "--mod-picker-button-icon-color", "--mod-picker-button-icon-color-disabled", @@ -68,8 +45,6 @@ "--mod-picker-button-icon-color-down-disabled", "--mod-picker-button-icon-color-hover", "--mod-picker-button-icon-color-hover-disabled", - "--mod-picker-button-icon-color-key-focus", - "--mod-picker-button-label-padding", "--mod-picker-button-padding", "--mod-picker-button-width" ], @@ -78,66 +53,49 @@ "--spectrum-picker-button-background-color", "--spectrum-picker-button-background-color-down", "--spectrum-picker-button-background-color-hover", - "--spectrum-picker-button-background-color-key-focus", - "--spectrum-picker-button-border-color", "--spectrum-picker-button-border-radius", - "--spectrum-picker-button-border-radius-rounded", - "--spectrum-picker-button-border-radius-rounded-sided", - "--spectrum-picker-button-border-radius-sided", - "--spectrum-picker-button-border-width", + "--spectrum-picker-button-downstate-perspective", "--spectrum-picker-button-fill-padding", - "--spectrum-picker-button-font-color", - "--spectrum-picker-button-font-color-down", - "--spectrum-picker-button-font-color-hover", - "--spectrum-picker-button-font-color-key-focus", - "--spectrum-picker-button-font-family", - "--spectrum-picker-button-font-size", - "--spectrum-picker-button-font-style", - "--spectrum-picker-button-font-weight", - "--spectrum-picker-button-gap", "--spectrum-picker-button-height", "--spectrum-picker-button-icon-color", "--spectrum-picker-button-icon-color-down", "--spectrum-picker-button-icon-color-hover", - "--spectrum-picker-button-icon-color-key-focus", - "--spectrum-picker-button-label-padding", "--spectrum-picker-button-padding", "--spectrum-picker-button-width" ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", - "--spectrum-corner-radius-200", - "--spectrum-default-font-style", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", + "--spectrum-corner-radius-small-size-extra-large", + "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", + "--spectrum-corner-radius-small-size-small", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-field-edge-to-disclosure-icon-100", "--spectrum-field-edge-to-disclosure-icon-200", "--spectrum-field-edge-to-disclosure-icon-300", "--spectrum-field-edge-to-disclosure-icon-75", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-50", + "--spectrum-in-field-button-edge-to-fill-extra-large", + "--spectrum-in-field-button-edge-to-fill-large", + "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-button-edge-to-fill-small", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-75", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-50" + "--spectrum-neutral-content-color-hover" ], "passthroughs": [], - "high-contrast": [] + "high-contrast": [ + "--highcontrast-picker-button-background-color", + "--highcontrast-picker-button-icon-color" + ] } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 65e1f840c19..6babce103a4 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -12,111 +12,80 @@ */ .spectrum-PickerButton { - /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ - --spectrum-picker-button-padding: 4px; + --spectrum-picker-button-background-color: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + + --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); + --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); --spectrum-picker-button-height: var(--spectrum-component-height-100); --spectrum-picker-button-width: var(--spectrum-component-height-100); - --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-medium); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-50); - --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-medium); /* equivalent to --spectrum-infield-button-edge-to-fill */ - --spectrum-picker-button-icon-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-color: var(--spectrum-neutral-content-color-default); - --spectrum-picker-button-font-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-picker-button-font-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-picker-button-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-picker-button-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-picker-button-font-style: var(--spectrum-default-font-style); - --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-picker-button-font-size: var(--spectrum-font-size-100); - - --spectrum-picker-button-border-color: inherit; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-button-border-radius-rounded-sided: 0; - --spectrum-picker-button-border-radius-sided: 0; - --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-200); - - --spectrum-picker-button-background-color: var(--spectrum-gray-50); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-background-animation-duration: var(--spectrum-animation-duration-100); - &:hover { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover)); - --mod-picker-button-font-color: var(--mod-picker-button-font-color-hover, var(--spectrum-picker-button-font-color-hover)); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover)); - } + --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-100); /* equivalent to --spectrum-infield-button-inline-edge-to-disclosure-icon */ - &:active, - &.is-open { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down)); - --mod-picker-button-font-color: var(--mod-picker-button-font-color-down, var(--spectrum-picker-button-font-color-down)); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down)); - } - &:focus, - &.is-focused, - &:focus-visible, - &.is-keyboardFocused { - --mod-picker-button-background-color: var(--mod-picker-button-background-color-key-focus, var(--spectrum-picker-button-background-color-key-focus)); - --mod-picker-button-font-color: var(--mod-picker-button-font-color-key-focus, var(--spectrum-picker-button-font-color-key-focus)); - --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-key-focus, var(--spectrum-picker-button-icon-color-key-focus)); - } + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-picker-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &:disabled { --mod-picker-button-background-color: var(--mod-picker-button-background-color-disabled, var(--spectrum-disabled-background-color)); --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-picker-button-border-color: var(--mod-picker-button-border-color-disabled, var(--spectrum-disabled-background-color)); - - --mod-picker-button-font-color: var(--mod-picker-button-font-color-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-font-color-hover: var(--mod-picker-button-font-color-hover-disabled, var(--spectrum-disabled-content-color)); - --mod-picker-button-font-color-down: var(--mod-picker-button-font-color-down-disabled, var(--spectrum-disabled-content-color)); --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-picker-button-icon-color-hover: var(--mod-picker-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); --mod-picker-button-icon-color-down: var(--mod-picker-button-icon-color-down-disabled, var(--spectrum-disabled-content-color)); } + &:hover { + --mod-picker-button-background-color: var(--mod-picker-button-background-color-hover, var(--spectrum-picker-button-background-color-hover)); + --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-hover, var(--spectrum-picker-button-icon-color-hover)); + } + + &:active, + &.is-open { + --mod-picker-button-background-color: var(--mod-picker-button-background-color-down, var(--spectrum-picker-button-background-color-down)); + --mod-picker-button-icon-color: var(--mod-picker-button-icon-color-down, var(--spectrum-picker-button-icon-color-down)); + } + &.spectrum-PickerButton--quiet { --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet, transparent); --mod-picker-button-background-color-hover: var(--mod-picker-button-background-color-hover-quiet, transparent); --mod-picker-button-background-color-down: var(--mod-picker-button-background-color-down-quiet, transparent); - --mod-picker-button-background-color-key-focus: var(--mod-picker-button-background-color-key-focus-quiet, transparent); - --mod-picker-button-border-color: var(--mod-picker-button-border-color-quiet, transparent); + &:disabled { + --mod-picker-button-background-color: var(--mod-picker-button-background-color-quiet-disabled, transparent); + } } &.spectrum-PickerButton--sizeS { --spectrum-picker-button-height: var(--spectrum-component-height-75); --spectrum-picker-button-width: var(--spectrum-component-height-75); - --spectrum-picker-button-label-padding: var(--spectrum-spacing-75); - --spectrum-picker-button-font-size: var(--spectrum-font-size-75); + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-small); + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-small); --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-75); } &.spectrum-PickerButton--sizeL { --spectrum-picker-button-height: var(--spectrum-component-height-200); --spectrum-picker-button-width: var(--spectrum-component-height-200); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-200); - --spectrum-picker-button-font-size: var(--spectrum-font-size-200); + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-large); + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-large); --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-200); } &.spectrum-PickerButton--sizeXL { --spectrum-picker-button-height: var(--spectrum-component-height-300); --spectrum-picker-button-width: var(--spectrum-component-height-300); - --spectrum-picker-button-label-padding: var(--spectrum-text-to-visual-300); - --spectrum-picker-button-font-size: var(--spectrum-font-size-300); + --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill-extra-large); + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large); --spectrum-picker-button-fill-padding: var(--spectrum-field-edge-to-disclosure-icon-300); } } @@ -124,98 +93,90 @@ .spectrum-PickerButton { border-style: none; background-color: transparent; - block-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); + cursor: pointer; + display: flex; justify-content: center; align-items: center; - box-sizing: border-box; - padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)); - &.spectrum-PickerButton--uiicononly { - inline-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height)); - } -} + block-size: var(--mod-picker-button-height, var(--spectrum-picker-button-height)); + inline-size: var(--mod-picker-button-width, var(--spectrum-picker-button-width)); -.spectrum-PickerButton-label { - /* Be the biggest, but also shrink! */ - flex: 1 1 auto; - color: var(--mod-picker-button-font-color, var(--spectrum-picker-button-font-color)); + padding: var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)); - white-space: nowrap; - overflow: hidden; - padding-block-end: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); - padding-block-start: var(--mod-picker-button-label-padding, var(--spectrum-picker-button-label-padding)); + &:disabled { + cursor: auto; + } - font-family: var(--mod-picker-button-font-family, var(--spectrum-picker-button-font-family)); - font-style: var(--mod-picker-button-font-style, var(--spectrum-picker-button-font-style)); - font-weight: var(--mod-picker-button-font-weight, var(--spectrum-picker-button-font-weight)); - font-size: var(--mod-picker-button-font-size, var(--spectrum-picker-button-font-size)); + &:active { + transform: perspective(var(--spectrum-picker-button-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); + } - .spectrum-PickerButton--uiicononly & { - display: none; + &:focus-visible { + outline: none; } } .spectrum-PickerButton-fill { - display: flex; - align-items: center; - justify-content: center; - box-sizing: border-box; block-size: 100%; inline-size: 100%; - gap: var(--mod-picker-button-gap, var(--spectrum-picker-button-gap)); - - background-color: var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color)); - border-color: var(--mod-picker-button-border-color, var(--spectrum-picker-button-border-color)); - border-width: var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)); - border-style: solid; - padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width))); - - border-end-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-end-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-start-end-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - border-start-start-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - - transition: border-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; - .spectrum-PickerButton--right & { - border-end-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - border-start-start-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - } + background-color: var(--highcontrast-picker-button-background-color, var(--mod-picker-button-background-color, var(--spectrum-picker-button-background-color))); + border-radius: var(--mod-picker-button-border-radius, var(--spectrum-picker-button-border-radius)); - .spectrum-PickerButton--right.spectrum-PickerButton--rounded & { - border-end-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - border-start-start-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - } + padding: calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding))); - .spectrum-PickerButton--left & { - border-end-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - border-start-end-radius: var(--mod-picker-button-border-radius-sided, var(--spectrum-picker-button-border-radius-sided)); - } + display: flex; + align-items: center; + justify-content: center; - .spectrum-PickerButton--left.spectrum-PickerButton--rounded & { - border-end-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - border-start-end-radius: var(--mod-picker-button-border-radius-rounded-sided, var(--spectrum-picker-button-border-radius-rounded-sided)); - } + box-sizing: border-box; - .spectrum-PickerButton--rounded & { - border-end-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-end-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-start-end-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - border-start-start-radius: var(--mod-picker-button-border-radius-rounded, var(--spectrum-picker-button-border-radius-rounded)); - } + transition: background-color var(--mod-picker-button-background-animation-duration, var(--spectrum-picker-button-background-animation-duration)) ease-in-out; - .spectrum-PickerButton--uiicononly & { + .spectrum-PickerButton--workflowicon & { + /* don't use padding tokens, rely on flexbox to center icons */ padding: 0; } - - .spectrum-PickerButton--textuiicon & { - inline-size: auto; - } } .spectrum-PickerButton-icon { /* don't be small, ever */ flex-shrink: 0; - color: var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color)); + color: var(--highcontrast-picker-button-icon-color, var(--mod-picker-button-icon-color, var(--spectrum-picker-button-icon-color))); +} + +@media (forced-colors: active) { + .spectrum-PickerButton { + --highcontrast-picker-button-background-color: ButtonText; + --highcontrast-picker-button-icon-color: ButtonFace; + forced-color-adjust: none; /* keeps button from flashing when hovered */ + + &:disabled { + --highcontrast-picker-button-background-color: GrayText; + } + + &:not(:disabled):hover, + &:not(:disabled):active, + &:not(:disabled):focus-visible { + --highcontrast-picker-button-background-color: Highlight; + } + } + + .spectrum-PickerButton--quiet { + --highcontrast-picker-button-background-color: Canvas; + --highcontrast-picker-button-icon-color: ButtonText; + + &:disabled { + --highcontrast-picker-button-background-color: Canvas; + --highcontrast-picker-button-icon-color: GrayText; + } + + &:not(:disabled):hover, + &:not(:disabled):active, + &:not(:disabled):focus-visible { + --highcontrast-picker-button-background-color: Canvas; + --highcontrast-picker-button-icon-color: Highlight; + } + } } diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index c01a0f00eec..05ffae7ba37 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -1,14 +1,14 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isHovered, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { PickerGroup } from "./pickerbutton.test.js"; -import { CustomIconTemplate, Template } from "./template.js"; +import { PickerIconOptions, Template } from "./template.js"; /** - * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs). + * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs) and [date picker](?path=/docs/components-date-picker--docs). */ export default { title: "Picker button", @@ -25,69 +25,58 @@ export default { options: ["ui", "workflow"], control: "inline-radio", }, - iconName: { + uiIconName: { + ...Icon.argTypes.uiIconName, + if: { arg: "iconSet", eq: "ui" }, + category: "Content", + }, + workflowIconName: { ...Icon.argTypes.iconName, if: { arg: "iconSet", eq: "workflow" }, - }, - label: { - name: "Label", - type: { name: "string" }, - table: { - type: { summary: "string" }, - category: "Content", - }, - control: { type: "text" }, + category: "Content", }, isOpen: { ...isOpen, if: { arg: "isDisabled", truthy: false } }, - isRounded: { - name: "Rounded", - description: "Increases the amount of rounding on the rounded corners.", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: "boolean", - }, + isActive, + isHovered, isQuiet, isDisabled, - isFocused: { - ...isFocused, - if: { arg: "isDisabled", truthy: false } - }, - position: { - name: "Position", - description: - "Denotes which side of a form field the button is displayed; this influences which corners are rounded.", - type: { name: "string", required: true }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["right", "left"], - control: "inline-radio", - }, }, args: { rootClass: "spectrum-PickerButton", - label: undefined, size: "m", + isActive: false, + isHovered: false, isOpen: false, - isRounded: false, isQuiet: false, isDisabled: false, - isFocused: false, iconSet: "ui", - iconName: "ChevronDown", - position: "right", + workflowIconName: "Calendar", + uiIconName: "ChevronDown", }, parameters: { packageJson, metadata, + actions: { + handles: ["click .spectrum-PickerButton"], + }, + design: { + type: "figma", + url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=126176-34080&m=dev" + }, + downState: { + selectors: [".spectrum-PickerButton:not(:disabled)"], + }, }, + status: { + type: "migrated", + }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = PickerGroup.bind({}); @@ -104,15 +93,6 @@ WithForcedColors.parameters = { }; // ********* DOCS ONLY ********* // -export const WithLabel = Template.bind({}); -WithLabel.tags = ["!dev"]; -WithLabel.args = { - label: "Select", -}; -WithLabel.parameters = { - chromatic: { disableSnapshot: true }, -}; - export const Disabled = Template.bind({}); Disabled.tags = ["!dev"]; Disabled.args = { @@ -122,6 +102,36 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * Use the correct UI icon size that corresponds to the t-shirt size you require. For instance, if using the chevron icon seen below: + * + + + + + + + + + + + + + + + + + + + + + + + + + +
**T-Shirt Size****Icon Size**
spectrum-PickerButton--sizeSspectrum-css-icon-Chevron75
spectrum-PickerButton--sizeMspectrum-css-icon-Chevron100
spectrum-PickerButton--sizeLspectrum-css-icon-Chevron200
spectrum-PickerButton--sizeXLspectrum-css-icon-Chevron300
+ */ export const Sizing = (args, context) => Sizes({ Template, withHeading: false, @@ -143,27 +153,24 @@ Open.parameters = { }; /** - * This example uses a custom icon instead of the chevron UI icon. + * These examples use custom icons. The icon on the left is a custom UI icon, and the icon on the right is a custom workflow icon. The size of the icon can also be modified by using the `--mod-icon-size` custom property. Here, `--mod-icon-size` is set to `14px`. + * + * By default, the picker button supports a UI icon. If using a workflow icon, please apply the `.spectrum-PickerButton--workflowicon` class to the picker button to best support the use of a workflow icon. */ -export const CustomIcon = CustomIconTemplate.bind({}); +export const CustomIcon = PickerIconOptions.bind({}); +CustomIcon.args = { + uiIconName: "ArrowDown100", + workflowIconName: "Calendar", + customStyles: { + "--mod-icon-size": "14px", + } +}; CustomIcon.storyName = "With custom icon"; CustomIcon.tags = ["!dev"]; CustomIcon.parameters = { chromatic: { disableSnapshot: true }, }; -/** - * The `spectrum-PickerButton--rounded` class increases the amount of rounding on the rounded corners. - */ -export const Rounded = Template.bind({}); -Rounded.tags = ["!dev"]; -Rounded.args = { - isRounded: true, -}; -Rounded.parameters = { - chromatic: { disableSnapshot: true }, -}; - export const Quiet = Template.bind({}); Quiet.tags = ["!dev"]; Quiet.args = { diff --git a/components/pickerbutton/stories/pickerbutton.test.js b/components/pickerbutton/stories/pickerbutton.test.js index 2e436ac7df0..cec58a01e37 100644 --- a/components/pickerbutton/stories/pickerbutton.test.js +++ b/components/pickerbutton/stories/pickerbutton.test.js @@ -1,37 +1,38 @@ import { Variants } from "@spectrum-css/preview/decorators"; -import { Template } from "./template.js"; +import { PickerIconOptions, Template } from "./template.js"; export const PickerGroup = Variants({ Template, + SizeTemplate: PickerIconOptions, testData: [ { testHeading: "Default", }, - { - testHeading: "With label", - label: "Select", - }, { testHeading: "Quiet", isQuiet: true, }, { - testHeading: "Rounded", - isRounded: true, - }, - { - testHeading: "Position: left", - position: "left", + testHeading: "Custom sized workflow icon", + iconName: "Calendar", + iconSet: "workflow", + customStyles: { + "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)", + }, } ], stateData: [ { - testHeading: "Disabled", - isDisabled: true, + testHeading: "Hovered", + isHovered: true, + }, + { + testHeading: "Active", + isActive: true, }, { - testHeading: "Focused", - isFocused: true, + testHeading: "Disabled", + isDisabled: true, }, ] }); diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 6adcb7398fd..520492668da 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -1,11 +1,9 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; -import { getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; -import { when } from "lit/directives/when.js"; import "../index.css"; @@ -13,16 +11,15 @@ export const Template = ({ rootClass = "spectrum-PickerButton", id = getRandomId("pickerbutton"), size = "m", - label, - position, iconSet = "ui", - iconName = "ChevronDown", + workflowIconName = "Calendar", + uiIconName = "ChevronDown", + isActive = false, + isHovered = false, isDisabled = false, - isFocused = false, isOpen = false, isQuiet = false, customClasses = [], - isRounded = false, customStyles = {}, onclick, tabindex, @@ -33,15 +30,12 @@ export const Template = ({