diff --git a/.changeset/itchy-shrimps-help.md b/.changeset/itchy-shrimps-help.md new file mode 100644 index 0000000000..68598dd4f7 --- /dev/null +++ b/.changeset/itchy-shrimps-help.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": patch +--- + +S2 Popover has an updated default position, bottom-start. The correct `.spectrum-Popover--bottom-start` class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted. diff --git a/components/picker/index.css b/components/picker/index.css index 99a8d5ad7d..703c320b9f 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -52,7 +52,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); } @@ -124,7 +124,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); } } @@ -146,7 +146,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); } } @@ -168,7 +168,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); } } @@ -409,7 +409,7 @@ margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); } -.spectrum-Picker + .spectrum-Popover--bottom.is-open { +.spectrum-Picker + .spectrum-Popover--bottom-start.is-open { transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); } diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json index 1048a0a2f5..754e012f59 100644 --- a/components/picker/metadata/metadata.json +++ b/components/picker/metadata/metadata.json @@ -2,7 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Picker", - ".spectrum-Picker + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", @@ -13,11 +13,11 @@ ".spectrum-Picker--quiet:focus-visible:after", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", - ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeS", - ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeXL", - ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker-label", ".spectrum-Picker-label.is-placeholder", ".spectrum-Picker-label.is-placeholder:active", diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 8bbcddc36c..17fa7b12b3 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -97,7 +97,7 @@ export default { }, isHovered, isActive, - content: { table: { disable: true } }, + popoverContent: { table: { disable: true } }, }, args: { rootClass: "spectrum-Picker", diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 806c278283..9e1739da05 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -125,7 +125,7 @@ export const Template = ({ // Helps ensure that Popover appears below the Picker, with side labels layout. display: "block", }, - content = [], + popoverContent = [], } = {}, context = {}) => { const pickerMarkup = Picker({ size, @@ -134,19 +134,22 @@ export const Template = ({ isInvalid, isDisabled, isLoading, - content, + popoverContent, labelPosition, ariaLabeledBy: fieldLabelId, }, context); - const popoverMarkup = content.length !== 0 ? Popover({ + const popoverMarkup = popoverContent.length !== 0 ? Popover({ isOpen: isOpen && !isDisabled && !isLoading, withTip: false, - position: "bottom", + position: "bottom-start", isQuiet, - content, + content: popoverContent, size, customStyles: customPopoverStyles, + popoverWrapperStyles: { + "display": "block", + }, }, context) : ""; const helpTextMarkup = helpText ? HelpText({