Skip to content

feat(menu): S2 menu fast follows #4058

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

Merged
5t3ph merged 13 commits into from
Jul 31, 2025
Merged

feat(menu): S2 menu fast follows #4058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1eb9aeb
fix(menu): use LinkOut icon
5t3ph Jul 22, 2025
8a57986
feat(menu): unavailable toggle icon
5t3ph Jul 22, 2025
731055d
fix(menu): refine spacing/alignment
5t3ph Jul 23, 2025
caf8434
fix(menu): adjust feature combinations
5t3ph Jul 29, 2025
9c2e7e8
feat(menu): add changeset
5t3ph Jul 29, 2025
306fb46
Merge branch 'spectrum-two' of https://github.com/adobe/spectrum-css …
5t3ph Jul 29, 2025
ff8b5b8
feat(menu): update metadata
5t3ph Jul 29, 2025
17682e5
Merge branch 'spectrum-two' of https://github.com/adobe/spectrum-css …
5t3ph Jul 30, 2025
d6ef3eb
fix(menu): resolve selection alignment
5t3ph Jul 30, 2025
9284ac7
feat(menu): update story controls
5t3ph Jul 30, 2025
ca3ea33
feat(menu): add unavailable, external link stories
5t3ph Jul 30, 2025
7fa0a0c
fix(menu): eslint
5t3ph Jul 30, 2025
a5fcd4f
Merge branch 'spectrum-two' of https://github.com/adobe/spectrum-css …
5t3ph Jul 31, 2025
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
16 changes: 16 additions & 0 deletions .changeset/small-berries-dream.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
"@spectrum-css/menu": minor
---

This handles a few remaining items from the initial S2 migration:

- update to use the correct "LinkOut" icon (previously unavailable)
- add "Unavailable" icon
- the functionality in WC will be to open an explanatory popover
Comment thread
5t3ph marked this conversation as resolved.

Additionally, per design review, updates were made regarding valid feature combos:

- **Not allowed:**
- external links with: thumbnails, drill-in, unavailable, or selection modes
- thumbnails with: drill-in, external links
- new "unavailable" with: selection modes, external links
Comment thread
5t3ph marked this conversation as resolved.
5 changes: 1 addition & 4 deletions components/accordion/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,7 @@
);

/* Calculated vertical spacing for action button and switch to center them within the accordion item */
--spectrum-accordion-item-direct-actions-vertical-spacing: calc(
(var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) -
var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2
);
--spectrum-accordion-item-direct-actions-vertical-spacing: calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2);

/* Right-to-left adjustments for transforms */
&:dir(rtl) {
Expand Down
17 changes: 8 additions & 9 deletions components/menu/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
".spectrum-Menu .spectrum-Menu-item--drillIn.is-open",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox",
".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch",
".spectrum-Menu .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout",
".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox",
".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch",
".spectrum-Menu .spectrum-Menu-itemIcon",
Expand Down Expand Up @@ -100,15 +99,15 @@
".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue",
".spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-checkmark",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemActions",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemCheckbox",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemValue",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) .spectrum-Menu-itemThumbnail",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) > .spectrum-Menu-checkmark",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) > .spectrum-Menu-itemActions",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) > .spectrum-Menu-itemCheckbox",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) > .spectrum-Menu-itemLabel",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) > .spectrum-Menu-itemValue",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox",
".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription",
".spectrum-Menu-item:hover",
".spectrum-Menu-item:hover .spectrum-Menu-linkout",
".spectrum-Menu-item:hover > .spectrum-Menu-checkmark",
Expand Down
23 changes: 5 additions & 18 deletions components/menu/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,11 +300,14 @@
}
}

&.is-selectable,
&.is-selectableMultiple {
.spectrum-Menu-item {
align-items: start;
}
}

&.is-selectableMultiple {
.spectrum-Menu-itemCheckbox {
grid-area: checkmarkArea;
}
Expand All @@ -329,7 +332,6 @@
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-label-icon-color-default, var(--spectrum-menu-item-label-icon-color-default)));

grid-area: iconArea;
align-self: start;
Comment thread
5t3ph marked this conversation as resolved.
}

.spectrum-Menu-checkmark {
Expand All @@ -347,7 +349,6 @@
margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));

grid-area: checkmarkArea;
align-self: start;
}

.spectrum-Menu-chevron {
Expand All @@ -358,7 +359,6 @@
margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control));

grid-area: chevronArea;
align-self: center;

&:dir(rtl) {
transform: rotate(-180deg);
Expand Down Expand Up @@ -386,17 +386,6 @@
.spectrum-Menu-linkout {
block-size: var(--mod-menu-item-linkout-icon-height, var(--spectrum-menu-item-linkout-icon-height));
inline-size: var(--mod-menu-item-linkout-icon-width, var(--spectrum-menu-item-linkout-icon-width));

/* Improve vertical alignment of linkout icon */
/* TODO: revisit with #1194 when final icon available */
display: block;
margin-block-start: calc(var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)) - var(--spectrum-menu-item-linkout-icon-height));
}

/* Improve vertical alignment of linkout icon */
/* TODO: revisit with #1194 when final icon available */
.spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout {
margin-block-start: calc(var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)) - var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height) / 2));
}

/* Presentational list items for sections and dividers. */
Expand Down Expand Up @@ -443,7 +432,7 @@
grid-template-rows: 1fr auto;

/* Alignment adjustments if there's a thumbnail */
&:has(> .spectrum-Menu-itemThumbnail) {
&:has(> .spectrum-Menu-itemThumbnail):not(:has(.spectrum-Menu-itemSwitch)) {
> .spectrum-Menu-itemCheckbox,
> .spectrum-Menu-checkmark,
> .spectrum-Menu-itemActions,
Expand Down Expand Up @@ -694,13 +683,12 @@
color: var(--highcontrast-menu-item-color-default, var(--mod-menu-item-value-color-default, var(--spectrum-menu-item-value-color-default)));
font-size: var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size));
justify-self: end;
align-self: start;
margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

.spectrum-Menu-itemActions {
display: grid;
grid-area: actionsArea;
align-self: start;
margin-inline-start: var(--mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing));
}

Expand Down Expand Up @@ -751,7 +739,6 @@
/* Span two rows to properly align to description when present */
.spectrum-Menu-item:has(> &):has(> .spectrum-Menu-itemDescription) & {
grid-row-end: visualOverflow;
align-self: center;
}
}

Expand Down
Loading
Loading