Skip to content
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

Jump to bottom

fix: adding max height and full height to picker menu component #3051

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
+52 −6
Open

fix: adding max height and full height to picker menu component #3051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b8b7aa9
fix: adding picker menu height capabilities
Aug 29, 2024
f0cfb1e
fix: adding max height or full height picker menu
Aug 29, 2024
0cb9496
fix: changing height property to block-size
Aug 29, 2024
dc77410
fix: adding max height toggle in storybook and removing full height c…
Aug 29, 2024
002c065
chore: merging main branch
Aug 29, 2024
5641c1c
Merge branch 'main' into aramos-adobe/add-max-height-menu
aramos-adobe Aug 29, 2024
ec4f491
feat(picker,popover): add ability to modify height in popover to pass…
Sep 4, 2024
ef24086
Merge branch 'aramos-adobe/add-max-height-menu' of https://github.com…
Sep 4, 2024
fbc95ca
Merge branch 'main' into aramos-adobe/add-max-height-menu
Sep 5, 2024
5d313e7
feat: update popover utility and extend to other components
Sep 5, 2024
1e39eff
fix: removing unused variable in popover index.css
Sep 5, 2024
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
6 changes: 6 additions & 0 deletions .changeset/quick-kangaroos-speak.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
5 changes: 5 additions & 0 deletions .changeset/unlucky-wasps-sit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@spectrum-css/picker": major
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be a major bump? Seems like this feature is non-breaking.

---

Removing full height mod and keeping max block size for fixed menu height
5 changes: 5 additions & 0 deletions .changeset/yellow-bags-smash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@spectrum-css/picker": major
---

Adding max height to picker menu
6 changes: 6 additions & 0 deletions .changeset/yellow-ghosts-allow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
7 changes: 7 additions & 0 deletions components/picker/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need the .is-open here? Can't the popover max-block-size be defined independently of being open?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For specificity, I think it's necessary. It also gives other devs more context.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the render function in the packages/picker/src/Picker.ts, I don't think this is a "Picker" feature so much as it's a "Menu" feature. If we add a block-size property to the root Menu class:

.spectrum-Menu {
	display: inline-block;
	inline-size: var(--mod-menu-inline-size, auto);
	block-size: var(--mod-menu-block-size, auto);
}

Users now have a hook to set a 200px fixed height if they so wish. If the design guidance is to default to 200px, that's a breaking change so maybe we can make note of it to add in the future and deprecate a block-size of auto?

--mod-popover-max-block-size: 200px;
}
}
4 changes: 3 additions & 1 deletion components/picker/metadata/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
10 changes: 10 additions & 0 deletions components/picker/stories/picker.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
9 changes: 4 additions & 5 deletions components/picker/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export const Picker = ({
customClasses = [],
customStyles = {},
onclick,
menuHeight = false,
} = {}, context = {}) => {
return html`
<button
Expand All @@ -39,6 +40,7 @@ export const Picker = ({
["is-open"]: isOpen,
["is-loading"]: isLoading,
["is-keyboardFocused"]: isKeyboardFocused,
[`${rootClass}--menu-height-fixed`]: menuHeight,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have we considered the pros and cons of not having a dedicated API for this feature? For instance, instead of having a specific menu-height class, we could use a generic mod variable applied to the base class. This mod variable would function as a feature toggle, although customers would need to define its value themselves (because we would not have a default fallback).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But I guess this is a more holistic API design question, maybe the CSS team can help understand when a mod is enough vs a dedicated toggleable class feature.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this feels like a good use-case to add a mod rather than new API.

...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
?disabled=${isDisabled}
Expand Down Expand Up @@ -88,8 +90,8 @@ export const Template = ({
withSwitch = false,
fieldLabelStyle = {},
customClasses = [],
customStyles = {},
content = [],
menuHeight = false,
id = getRandomId("picker"),
} = {}, context = {}) => {
const { updateArgs } = context;
Expand Down Expand Up @@ -136,13 +138,10 @@ export const Template = ({
isDisabled,
isReadOnly,
customClasses,
customStyles: {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did these go? 😛

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rubencarvalho I removed the inline styling of the Picker because it was displaying the label and button inline and overriding the flex-box styling and disrupting the text wrap especially when the label was displayed left. So I "turned it off" by removing this block. I can bring it back if needed

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, thanks for the context! I thought it was a forgotten edit 😄

"display": labelPosition == "left" ? "inline-block" : undefined,
...customStyles,
},
content,
iconName,
labelPosition,
menuHeight,
id,
onclick: function() {
updateArgs({ isOpen: !isOpen });
Expand Down
3 changes: 3 additions & 0 deletions components/popover/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@

/* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */
--spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2));

/* Max menu block size */
max-block-size: var(--mod-popover-max-block-size, --spectrum-popover-max-block-size);
}

/* windows high contrast mode */
Expand Down
2 changes: 2 additions & 0 deletions components/popover/metadata/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@
"--mod-popover-content-area-spacing-vertical",
"--mod-popover-corner-radius",
"--mod-popover-filter",
"--mod-popover-max-block-size",
"--mod-popover-pointer-edge-spacing",
"--mod-popover-pointer-height",
"--mod-popover-pointer-width",
Expand All @@ -123,6 +124,7 @@
"--spectrum-popover-content-area-spacing-vertical",
"--spectrum-popover-corner-radius",
"--spectrum-popover-filter",
"--spectrum-popover-max-block-size",
"--spectrum-popover-pointer-edge-offset",
"--spectrum-popover-pointer-edge-spacing",
"--spectrum-popover-pointer-height",
Expand Down
1 change: 1 addition & 0 deletions components/popover/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
| `--mod-popover-content-area-spacing-vertical` |
| `--mod-popover-corner-radius` |
| `--mod-popover-filter` |
| `--mod-popover-max-block-size` |
| `--mod-popover-pointer-edge-spacing` |
| `--mod-popover-pointer-height` |
| `--mod-popover-pointer-width` |
Expand Down
Loading