From e7f0c2582eea68dce600f2925c64af83e7d671bd Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 7 Jul 2025 12:18:54 -1000 Subject: [PATCH 1/9] feat(accordion): update test cases - updates test cases in order to use shorter content that fits better with the default width of accordion items --- .../accordion/stories/accordion.test.js | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 20e4e9b468..3b927617ba 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -9,18 +9,18 @@ import { Template } from "./template.js"; */ export const testsContent = new Map([ [ - "Are any Adobe products free?", + "Abstract", { - content: "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.", }, ], [ - "Are Adobe products worth it?", + "Architecture", { content: Typography({ semantics: "body", content: [ - "This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.", + "This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit.", Link({ url: "https://www.adobe.com/creativecloud/plans.html", text: "Learn more about Adobe Creative Cloud plans and pricing.", @@ -31,12 +31,12 @@ export const testsContent = new Map([ }, ], [ - "Which Adobe product is best for editing PDFs?", + "Nature", { content: Typography({ semantics: "body", content: [ - "You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.", + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.", Link({ url: "https://www.adobe.com/acrobat.html", text: "Learn more about Acrobat.", @@ -46,16 +46,22 @@ export const testsContent = new Map([ }, ], [ - "How many products does Adobe have?", + "Illustrations", { - content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.", + content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit.", isOpen: true, }, ], [ - "What are the most popular Adobe products?", + "Business", { - content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.", + }, + ], + [ + "Landscape", + { + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.", }, ], ]); From 5d00ba1926d7eb9a695cc7cd565a23d390a6ae63 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 7 Jul 2025 12:19:42 -1000 Subject: [PATCH 2/9] feat(accordion): add direct actions feature - adds direct actions feature to storybook, template, and css --- components/accordion/dist/metadata.json | 10 ++++++ components/accordion/index.css | 29 ++++++++++++++- .../accordion/stories/accordion.stories.js | 35 +++++++++++++++++- .../accordion/stories/accordion.test.js | 2 +- components/accordion/stories/template.js | 36 +++++++++++++++++++ 5 files changed, 109 insertions(+), 3 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 774e6f9a3d..424fee7d2b 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -22,6 +22,9 @@ ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator", ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", + ".spectrum-Accordion-itemDirectActions", + ".spectrum-Accordion-itemDirectActions .spectrum-ActionButton", + ".spectrum-Accordion-itemDirectActions .spectrum-Switch", ".spectrum-Accordion-itemHeader", ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active", ".spectrum-Accordion-itemHeader:focus-visible", @@ -60,6 +63,9 @@ "--mod-accordion-item-content-font-style", "--mod-accordion-item-content-font-weight", "--mod-accordion-item-content-line-height", + "--mod-accordion-item-direct-actions-height", + "--mod-accordion-item-direct-actions-spacing", + "--mod-accordion-item-direct-actions-vertical-spacing", "--mod-accordion-item-focus-indicator-color", "--mod-accordion-item-focus-indicator-gap", "--mod-accordion-item-focus-indicator-thickness", @@ -131,6 +137,9 @@ "--spectrum-accordion-item-content-font-style", "--spectrum-accordion-item-content-font-weight", "--spectrum-accordion-item-content-line-height", + "--spectrum-accordion-item-direct-actions-height", + "--spectrum-accordion-item-direct-actions-spacing", + "--spectrum-accordion-item-direct-actions-vertical-spacing", "--spectrum-accordion-item-focus-indicator-color", "--spectrum-accordion-item-focus-indicator-gap", "--spectrum-accordion-item-focus-indicator-thickness", @@ -227,6 +236,7 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack", + "--spectrum-spacing-100", "--spectrum-transparent-black-100", "--spectrum-transparent-black-25", "--spectrum-transparent-black-300" diff --git a/components/accordion/index.css b/components/accordion/index.css index 93bda34c08..459f019196 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -31,6 +31,7 @@ --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); --spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small); + --spectrum-accordion-item-direct-actions-height: var(--spectrum-component-height-100); /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); @@ -40,6 +41,7 @@ --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); --spectrum-accordion-item-header-cursor: pointer; + --spectrum-accordion-item-direct-actions-spacing: var(--spectrum-spacing-100); --spectrum-accordion-animation-duration: var(--spectrum-animation-duration-100); /* Text body */ @@ -72,6 +74,12 @@ var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))) ); + /* 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 + ); + /* Right-to-left adjustments for transforms */ &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -100,6 +108,7 @@ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-small); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-small); + --spectrum-accordion-item-direct-actions-height: var(--spectrum-component-height-75); /* component height for switch and action button */ } .spectrum-Accordion--sizeL { @@ -116,6 +125,7 @@ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-large); + --spectrum-accordion-item-direct-actions-height: var(--spectrum-component-height-200); } .spectrum-Accordion--sizeXL { @@ -132,6 +142,7 @@ --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-extra-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-extra-large); + --spectrum-accordion-item-direct-actions-height: var(--spectrum-component-height-300); } .spectrum-Accordion--compact { @@ -237,6 +248,7 @@ margin: 0; position: relative; box-sizing: border-box; + display: flex; } .spectrum-Accordion-itemIndicator { @@ -268,15 +280,16 @@ /* Focusable button that expands/collapses the accordion item. */ .spectrum-Accordion-itemHeader { + overflow-wrap: anywhere; box-sizing: border-box; position: relative; - display: flex; align-items: flex-start; justify-content: flex-start; /* start spacing controlled by edge to disclosure icon spacing */ padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + padding-block: 0; /* reset user-agent styles */ line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); text-overflow: ellipsis; @@ -315,6 +328,20 @@ } } +.spectrum-Accordion-itemDirectActions { + margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); + display: inline-flex; + gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); + + & .spectrum-ActionButton, + & .spectrum-Switch { + margin-block-start: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); + + /* needs to be set to prevent compact XL items from growing vertically to accommodate the direct actions */ + margin-block-end: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); + } +} + .spectrum-Accordion-item.is-open { > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator { transform: var(--spectrum-logical-rotation,) rotate(90deg); diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 1af62f4e98..25938e7fb6 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -1,3 +1,4 @@ +import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, size } from "@spectrum-css/preview/types"; @@ -60,7 +61,36 @@ export default { }, control: { type: "boolean" }, }, - isQuiet + isQuiet, + hasActionButtons: { + name: "Has action buttons", + description: "Adds an action button to each accordion item header, in the direct actions section.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Direct actions", + }, + control: { type: "boolean" }, + }, + actionButtonIconName: { + name: "Action button icon", + ...(IconStories?.argTypes?.iconName ?? {}), + if: { arg: "hasActionButtons", truthy: true }, + table: { + type: { summary: "string" }, + category: "Direct actions", + }, + }, + hasSwitches: { + name: "Has switches", + description: "Adds a switch to each accordion item header, in the direct actions section.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Direct actions", + }, + control: { type: "boolean" }, + }, }, args: { rootClass: "spectrum-Accordion", @@ -70,6 +100,9 @@ export default { disableAll: false, isQuiet: false, hasNoInlinePadding: false, + hasActionButtons: false, + actionButtonIconName: "Circle", + hasSwitches: false, }, parameters: { actions: { diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 3b927617ba..94dbed5649 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -59,7 +59,7 @@ export const testsContent = new Map([ }, ], [ - "Landscape", + "Landscape and longer text that wraps", { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.", }, diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 1193031642..d71a919b3c 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -1,10 +1,13 @@ +import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; +import { when } from "lit/directives/when.js"; import "../index.css"; @@ -19,6 +22,10 @@ export const AccordionItem = ({ isHovered = false, isActive = false, isFocused = false, + hasActionButton = false, + hasSwitch = false, + actionButtonIconName = "", + size = "m", iconSize = "m", customStyles = {}, customClasses = [], @@ -66,6 +73,28 @@ export const AccordionItem = ({ }, context)} ${heading} + ${when( + hasActionButton || hasSwitch, + () => + html` +
+ ${when(hasActionButton, () => + ActionButton({ + label: "", // icon-only + isQuiet: true, + customClasses: [`${rootClass}ActionButton`], + iconName: actionButtonIconName, + size, + }, context) + )} + ${when(hasSwitch, () => + Switch({ + label: "", + customClasses: [`${rootClass}Switch`], + size + }, context))} +
+ `)}
{ @@ -118,6 +150,10 @@ export const Template = ({ rootClass: `${rootClass}-item`, heading, idx, + size, + hasActionButton: item.hasActionButton || hasActionButtons, + actionButtonIconName: item.actionButtonIconName || actionButtonIconName, + hasSwitch: item.hasSwitch || hasSwitches, iconSize: `${size}`, isDisabled: item.isDisabled || disableAll, isOpen: collapseAll === true ? false : item.isOpen, From ce323bd045e516a64dbd0d9f87f7ef44402f338f Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Thu, 10 Jul 2025 07:50:07 -1000 Subject: [PATCH 3/9] docs(accordion): update docs and tests to include direct actions --- .changeset/spicy-rings-cough.md | 11 ++ .../accordion/stories/accordion.stories.js | 18 ++- .../accordion/stories/accordion.test.js | 104 +++++++++++++++++- components/accordion/stories/template.js | 2 +- 4 files changed, 126 insertions(+), 9 deletions(-) create mode 100644 .changeset/spicy-rings-cough.md diff --git a/.changeset/spicy-rings-cough.md b/.changeset/spicy-rings-cough.md new file mode 100644 index 0000000000..1e22245368 --- /dev/null +++ b/.changeset/spicy-rings-cough.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/accordion": minor +--- + +Accordion now supports direct actions. Direct actions, which may consist of a quiet action button or a switch, or both, may be added to each accordion item's heading. Direct action items are vertically centered within the heading's first line of text for all sizes and densities, and maintain their own individual key focus states. + +To allow the same level of customizability found in other elements within this component, the following --mod custom properties have been added: + +- "--mod-accordion-item-direct-actions-height", +- "--mod-accordion-item-direct-actions-spacing", +- "--mod-accordion-item-direct-actions-vertical-spacing" diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 25938e7fb6..925ed7c7cd 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -4,7 +4,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { AccordionGroup, testsContent as accordionContent } from "./accordion.test.js"; +import { AccordionGroup, testsContent as accordionContent, directActionsContent, longerContent } from "./accordion.test.js"; import { Template } from "./template.js"; /** @@ -154,9 +154,9 @@ export const CustomWidth = AccordionGroup.bind({}); CustomWidth.tags = ["!dev"]; CustomWidth.storyName = "Custom width"; CustomWidth.args = { - items: accordionContent, + items: longerContent, customStyles: { - "--mod-accordion-item-width": "500px", + "--mod-accordion-item-width": "auto", }, }; CustomWidth.parameters = { @@ -191,6 +191,18 @@ Spacious.parameters = { }; Spacious.storyName = "Density: Spacious"; +/** + * Direct actions within accordion items are supported. A quiet + * [action button](/?path=/docs/actionbutton--default), a + * [switch](/?path=/docs/switch--default), or both can be added to + * each accordion item header. + */ +export const DirectActions = Template.bind({}); +DirectActions.tags = ["!dev"]; +DirectActions.args = { + items: directActionsContent +}; + /** * Individual accordion items can be disabled by applying the `.is-disabled` class to the * `.spectrum-Accordion-item` element. This example also demonstrates the use of the disabled diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 94dbed5649..f6aeee1f27 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -5,7 +5,6 @@ import { Template } from "./template.js"; /** * General accordion item content for tests. - * Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */ export const testsContent = new Map([ [ @@ -66,6 +65,89 @@ export const testsContent = new Map([ ], ]); +/** + * Longer content for a custom width accordion. + * Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. + */ +export const longerContent = new Map([ + [ + "Are any Adobe products free?", + { + content: "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.", + }, + ], + [ + "Are Adobe products worth it?", + { + content: Typography({ + semantics: "body", + content: [ + "This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.", + Link({ + url: "https://www.adobe.com/creativecloud/plans.html", + text: "Learn more about Adobe Creative Cloud plans and pricing.", + }), + ], + }), + isOpen: true, + }, + ], + [ + "Which Adobe product is best for editing PDFs?", + { + content: Typography({ + semantics: "body", + content: [ + "You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.", + Link({ + url: "https://www.adobe.com/acrobat.html", + text: "Learn more about Acrobat.", + }), + ], + }), + }, + ], + [ + "How many products does Adobe have?", + { + content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.", + isOpen: true, + }, + ], + [ + "What are the most popular Adobe products?", + { + content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.", + }, + ], +]); + +export const directActionsContent = new Map([ + [ + "Heading 1", + { + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + hasActionButton: true, + }, + ], + [ + "Heading 2", + { + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", + hasSwitch: true, + }, + ], + [ + "Heading 3", + { + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.", + hasActionButton: true, + hasSwitch: true, + isOpen: true, + }, + ], +]); + const defaultContentText = "This is an example of text content within the content area that is not wrapped by any typography classes or elements."; /** @@ -127,6 +209,7 @@ const statesTestContent = new Map([ ]); export const AccordionGroup = Variants({ + withSizes: false, Template, testData: [ { @@ -183,8 +266,8 @@ export const AccordionGroup = Variants({ withStates: false, }, { - testHeading: "Compact", - items: testsContent, + testHeading: "Compact density", + items: new Map([...testsContent, ...directActionsContent]), Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, density: "compact", collapseAll: true, @@ -194,8 +277,19 @@ export const AccordionGroup = Variants({ withStates: false, }, { - testHeading: "Spacious", - items: testsContent, + testHeading: "Regular density", + items: new Map([...testsContent, ...directActionsContent]), + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + density: "regular", + collapseAll: true, + customStyles: { + maxInlineSize: "500px", + }, + withStates: false, + }, + { + testHeading: "Spacious density", + items: new Map([...testsContent, ...directActionsContent]), Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, density: "spacious", collapseAll: true, diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index d71a919b3c..6afab7ec5f 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -83,7 +83,7 @@ export const AccordionItem = ({ label: "", // icon-only isQuiet: true, customClasses: [`${rootClass}ActionButton`], - iconName: actionButtonIconName, + iconName: actionButtonIconName || "Circle", size, }, context) )} From 614148c2fdea7463a1d94fc0e0bd0688f55c7d15 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 21 Jul 2025 08:13:09 -1000 Subject: [PATCH 4/9] feat(accordion): style adjustments --- components/accordion/dist/metadata.json | 2 -- components/accordion/index.css | 10 +++------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 424fee7d2b..fd3c5078db 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -23,8 +23,6 @@ ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", ".spectrum-Accordion-itemDirectActions", - ".spectrum-Accordion-itemDirectActions .spectrum-ActionButton", - ".spectrum-Accordion-itemDirectActions .spectrum-Switch", ".spectrum-Accordion-itemHeader", ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active", ".spectrum-Accordion-itemHeader:focus-visible", diff --git a/components/accordion/index.css b/components/accordion/index.css index 459f019196..5ea163e997 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -281,6 +281,7 @@ /* Focusable button that expands/collapses the accordion item. */ .spectrum-Accordion-itemHeader { overflow-wrap: anywhere; + word-break: normal; box-sizing: border-box; position: relative; display: flex; @@ -333,13 +334,8 @@ display: inline-flex; gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); - & .spectrum-ActionButton, - & .spectrum-Switch { - margin-block-start: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); - - /* needs to be set to prevent compact XL items from growing vertically to accommodate the direct actions */ - margin-block-end: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); - } + /* margin needs to be set on top and bottom to keep compact XL items vertically centered and prevent them from growing vertically */ + margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); } .spectrum-Accordion-item.is-open { From 49eadfa1183007e51bb05c26090b2b7f7dd55c95 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 23 Jul 2025 10:25:56 -1000 Subject: [PATCH 5/9] fix(accordion): pr fixes - use template to ensure that disabled accordion items also have disabled direct actions - maintain padding-inline end on accordion item headers with direct actions --- components/accordion/dist/metadata.json | 3 +++ components/accordion/index.css | 6 ++++++ components/accordion/stories/template.js | 2 ++ 3 files changed, 11 insertions(+) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index fd3c5078db..b5dfbbb07c 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -26,6 +26,7 @@ ".spectrum-Accordion-itemHeader", ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active", ".spectrum-Accordion-itemHeader:focus-visible", + ".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)", ".spectrum-Accordion-itemHeader:hover", ".spectrum-Accordion-itemHeading", ".spectrum-Accordion-itemIndicator", @@ -78,6 +79,7 @@ "--mod-accordion-item-header-font-style", "--mod-accordion-item-header-font-weight", "--mod-accordion-item-header-line-height", + "--mod-accordion-item-header-to-direct-actions-space", "--mod-accordion-item-header-top-to-text-space", "--mod-accordion-item-min-block-size", "--mod-accordion-item-minimum-height", @@ -152,6 +154,7 @@ "--spectrum-accordion-item-header-font-style", "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", + "--spectrum-accordion-item-header-to-direct-actions-space", "--spectrum-accordion-item-header-top-to-text-space", "--spectrum-accordion-item-min-block-size", "--spectrum-accordion-item-minimum-height", diff --git a/components/accordion/index.css b/components/accordion/index.css index 5ea163e997..e628d3e93a 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -32,6 +32,7 @@ --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); --spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small); --spectrum-accordion-item-direct-actions-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-header-to-direct-actions-space: var(--spectrum-spacing-100); /* same for all sizes */ /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); @@ -327,6 +328,11 @@ background-color: var(--spectrum-accordion-background-color-down); color: var(--spectrum-accordion-item-header-color-down); } + + &:has(+ .spectrum-Accordion-itemDirectActions) { + /* set spacing between header and direct actions, whether or not noInlinePadding variant is used */ + padding-inline-end: var(--mod-accordion-item-header-to-direct-actions-space, var(--spectrum-accordion-item-header-to-direct-actions-space)); + } } .spectrum-Accordion-itemDirectActions { diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 6afab7ec5f..e12314a460 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -84,6 +84,7 @@ export const AccordionItem = ({ isQuiet: true, customClasses: [`${rootClass}ActionButton`], iconName: actionButtonIconName || "Circle", + isDisabled, size, }, context) )} @@ -91,6 +92,7 @@ export const AccordionItem = ({ Switch({ label: "", customClasses: [`${rootClass}Switch`], + isDisabled, size }, context))}
From 5e96d7f821ce24ccde2342c3324feaddefbb86da Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 23 Jul 2025 13:29:50 -1000 Subject: [PATCH 6/9] fix(accordion): adjust minimum height to match spec --- components/accordion/dist/metadata.json | 2 +- components/accordion/index.css | 33 +++++++++++-------------- 2 files changed, 15 insertions(+), 20 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index b5dfbbb07c..7f5f58a0fd 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -194,7 +194,7 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-400", - "--spectrum-component-height-50", + "--spectrum-component-height-500", "--spectrum-component-height-75", "--spectrum-corner-radius-medium-size-extra-large", "--spectrum-corner-radius-medium-size-large", diff --git a/components/accordion/index.css b/components/accordion/index.css index e628d3e93a..a115648924 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -13,7 +13,7 @@ .spectrum-Accordion { /* Layout and spacing */ - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-item-width: var(--spectrum-field-default-width-medium); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100); @@ -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) { @@ -96,7 +93,7 @@ } .spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); /* small size default width uses this min-width token */ --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small); @@ -113,7 +110,7 @@ } .spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-width: var(--spectrum-field-default-width-large); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large); @@ -130,7 +127,7 @@ } .spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-item-width: var(--spectrum-field-default-width-extra-large); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large); @@ -147,27 +144,27 @@ } .spectrum-Accordion--compact { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-extra-large); @@ -175,27 +172,27 @@ } .spectrum-Accordion--spacious { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-500); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large); @@ -336,12 +333,10 @@ } .spectrum-Accordion-itemDirectActions { + margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); display: inline-flex; gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); - - /* margin needs to be set on top and bottom to keep compact XL items vertically centered and prevent them from growing vertically */ - margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); } .spectrum-Accordion-item.is-open { From 91f89d4e915fd120bbefd3c17b8b549eb3e5467f Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Wed, 23 Jul 2025 14:17:25 -1000 Subject: [PATCH 7/9] fix(tokens): temporarily add in correct top to text tokens for accordion --- tokens/custom/large-vars.css | 3 +++ tokens/custom/medium-vars.css | 3 +++ 2 files changed, 6 insertions(+) diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index d202b80848..cf825e073b 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -146,4 +146,7 @@ --spectrum-field-edge-to-icon-100: 9px; --spectrum-field-edge-to-icon-200: 11px; --spectrum-field-edge-to-icon-300: 14px; + + --spectrum-accordion-top-to-text-compact-medium: 5px; + --spectrum-accordion-top-to-text-spacious-medium: 15px; } diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index c124152a5e..ca55b00695 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -144,4 +144,7 @@ --spectrum-field-edge-to-icon-100: 5px; --spectrum-field-edge-to-icon-200: 6px; --spectrum-field-edge-to-icon-300: 10px; + + --spectrum-accordion-top-to-text-compact-medium: 5px; + --spectrum-accordion-top-to-text-spacious-medium: 13px; } From 48b32759ce401b9d7c7e3fb960c293113de883ab Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 28 Jul 2025 20:21:25 -0500 Subject: [PATCH 8/9] Revert "fix(tokens): temporarily add in correct top to text tokens for accordion" This reverts commit 9abb590b05ab0f0b42910de744f88492fefd5222. --- tokens/custom/large-vars.css | 3 --- tokens/custom/medium-vars.css | 3 --- 2 files changed, 6 deletions(-) diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index cf825e073b..d202b80848 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -146,7 +146,4 @@ --spectrum-field-edge-to-icon-100: 9px; --spectrum-field-edge-to-icon-200: 11px; --spectrum-field-edge-to-icon-300: 14px; - - --spectrum-accordion-top-to-text-compact-medium: 5px; - --spectrum-accordion-top-to-text-spacious-medium: 15px; } diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index ca55b00695..c124152a5e 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -144,7 +144,4 @@ --spectrum-field-edge-to-icon-100: 5px; --spectrum-field-edge-to-icon-200: 6px; --spectrum-field-edge-to-icon-300: 10px; - - --spectrum-accordion-top-to-text-compact-medium: 5px; - --spectrum-accordion-top-to-text-spacious-medium: 13px; } From 192bbd3cf1e56d06f663783850d14c76b18eadc2 Mon Sep 17 00:00:00 2001 From: Rise Erpelding Date: Mon, 28 Jul 2025 20:22:28 -0500 Subject: [PATCH 9/9] Revert "fix(accordion): adjust minimum height to match spec" This reverts commit f848627c40a0be7433dde9070a85c5f307b36fa6. --- components/accordion/dist/metadata.json | 2 +- components/accordion/index.css | 33 ++++++++++++++----------- 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 7f5f58a0fd..b5dfbbb07c 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -194,7 +194,7 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-400", - "--spectrum-component-height-500", + "--spectrum-component-height-50", "--spectrum-component-height-75", "--spectrum-corner-radius-medium-size-extra-large", "--spectrum-corner-radius-medium-size-large", diff --git a/components/accordion/index.css b/components/accordion/index.css index a115648924..e628d3e93a 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -13,7 +13,7 @@ .spectrum-Accordion { /* Layout and spacing */ - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-item-width: var(--spectrum-field-default-width-medium); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100); @@ -76,7 +76,10 @@ ); /* 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) { @@ -93,7 +96,7 @@ } .spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); /* small size default width uses this min-width token */ --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small); @@ -110,7 +113,7 @@ } .spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-width: var(--spectrum-field-default-width-large); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large); @@ -127,7 +130,7 @@ } .spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-width: var(--spectrum-field-default-width-extra-large); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large); @@ -144,27 +147,27 @@ } .spectrum-Accordion--compact { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-extra-large); @@ -172,27 +175,27 @@ } .spectrum-Accordion--spacious { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-500); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large); @@ -333,10 +336,12 @@ } .spectrum-Accordion-itemDirectActions { - margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); display: inline-flex; gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing)); + + /* margin needs to be set on top and bottom to keep compact XL items vertically centered and prevent them from growing vertically */ + margin-block: var(--mod-accordion-item-direct-actions-vertical-spacing, var(--spectrum-accordion-item-direct-actions-vertical-spacing)); } .spectrum-Accordion-item.is-open {