diff --git a/.changeset/quick-kangaroos-speak.md b/.changeset/quick-kangaroos-speak.md new file mode 100644 index 0000000000..02010b4217 --- /dev/null +++ b/.changeset/quick-kangaroos-speak.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/popover": minor +"@spectrum-css/picker": minor +--- + +Adding the ability to define height in popover and pass the variable to picker diff --git a/.changeset/unlucky-wasps-sit.md b/.changeset/unlucky-wasps-sit.md new file mode 100644 index 0000000000..5ef4cbfd9f --- /dev/null +++ b/.changeset/unlucky-wasps-sit.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": major +--- + +Removing full height mod and keeping max block size for fixed menu height diff --git a/.changeset/yellow-bags-smash.md b/.changeset/yellow-bags-smash.md new file mode 100644 index 0000000000..ee773825eb --- /dev/null +++ b/.changeset/yellow-bags-smash.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": major +--- + +Adding max height to picker menu diff --git a/.changeset/yellow-ghosts-allow.md b/.changeset/yellow-ghosts-allow.md new file mode 100644 index 0000000000..7df6940a36 --- /dev/null +++ b/.changeset/yellow-ghosts-allow.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/popover": minor +"@spectrum-css/picker": minor +--- + +Adding max block size utility in popover so that other components such as picker can use it diff --git a/components/picker/index.css b/components/picker/index.css index 9eae5fa771..40afc11f6b 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -491,3 +491,10 @@ color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); } } + +/* Fixed menu height */ +.spectrum-Picker--menu-height-fixed { + & + .spectrum-Popover.is-open { + --mod-popover-max-block-size: 200px; + } +} diff --git a/components/picker/metadata/metadata.json b/components/picker/metadata/metadata.json index a87ea36a42..cb95cea95e 100644 --- a/components/picker/metadata/metadata.json +++ b/components/picker/metadata/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", + ".spectrum-Picker--menu-height-fixed + .spectrum-Popover.is-open", ".spectrum-Picker--quiet", ".spectrum-Picker--quiet .spectrum-Picker-menuIcon", ".spectrum-Picker--quiet.is-keyboardFocused", @@ -320,7 +321,8 @@ "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", - "--mod-button-line-height" + "--mod-button-line-height", + "--mod-popover-max-block-size" ], "high-contrast": [ "--highcontrast-picker-background-color", diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 12a0100c8d..372a8b4b87 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -52,6 +52,16 @@ export default { }, isQuiet, isOpen, + menuHeight: { + name: "Max menu block size", + type: {name: "boolean"}, + table: { + type: { name: "boolean" }, + category: "State", + }, + if: { arg: "isOpen", eq: true }, + control: "boolean", + }, isKeyboardFocused, isDisabled, isLoading, diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 40b71ffb7b..fd42c6ebcb 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -26,6 +26,7 @@ export const Picker = ({ customClasses = [], customStyles = {}, onclick, + menuHeight = false, } = {}, context = {}) => { return html`