From c1f27e4d28f7e7890acee99f1845c075f76f5d4e Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 9 Apr 2025 14:43:27 -0400 Subject: [PATCH 01/23] docs(accordion): general docs cleanup --- .../accordion/stories/accordion.stories.js | 18 +++++++++++++----- components/accordion/stories/template.js | 2 +- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 3709e75871f..f8aa76119fe 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -11,9 +11,7 @@ import { Template } from "./template.js"; /** * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements. * - * ## Density options - * - * Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious. + * Accordion has three density options: regular (default), compact, or spacious. Each of the different densities have the same font size, but have tighter or looser vertical spacing between the rows. */ export default { title: "Accordion", @@ -180,6 +178,10 @@ WithForcedColors.parameters = { }; // ********* DOCS ONLY ********* // + +/** + * The compact density has less spacing between rows. + */ export const Compact = Template.bind({}); Compact.tags = ["!dev"]; Compact.args = { @@ -189,8 +191,11 @@ Compact.args = { Compact.parameters = { chromatic: { disableSnapshot: true }, }; -Compact.storyName = "Density - Compact"; +Compact.storyName = "Density: Compact"; +/** + * The spacious density has more spacing between rows. + */ export const Spacious = Template.bind({}); Spacious.tags = ["!dev"]; Spacious.args = { @@ -200,8 +205,11 @@ Spacious.args = { Spacious.parameters = { chromatic: { disableSnapshot: true }, }; -Spacious.storyName = "Density - Spacious"; +Spacious.storyName = "Density: Spacious"; +/** + * Each of the different sizes have varying font sizes, and tighter or looser vertical spacing between the rows. Medium is the default size. + */ export const Sizing = (args, context) => Sizes({ Template, withBorder: false, diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 79fc3648bf3..360df6f0199 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -56,7 +56,7 @@ export const AccordionItem = ({ }, context)} - +
Date: Thu, 10 Apr 2025 12:40:38 -0400 Subject: [PATCH 02/23] refactor(accordion): move around and organize existing css Move around existing CSS for consistency, clarity, and improved organization: - Moves some properties within existing organization. - Moves high contrast styles to the bottom. - Moves sizing classes above density classes. - Adds a few comments, such as for a complex calc. - Simplifies border declarations using single short-hand property. - Removes unnecessary "calc" keyword used within max() function. --- components/accordion/index.css | 132 ++++++++++++++++----------------- 1 file changed, 63 insertions(+), 69 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index f3b52638318..d9f660ca5dd 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -12,10 +12,7 @@ */ .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); - --spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); - + /* Layout and spacing */ --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200)); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); @@ -51,26 +48,31 @@ --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); + --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); + --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); + /* Label */ --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - - /* Focus indicator */ - --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); - + /* Calculated minimum block-size that accounts for top and bottom spacing plus line-height sometimes being taller than the minimum height token. */ --spectrum-accordion-min-block-size: max( var(--spectrum-accordion-item-height), - calc(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)))) + 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))) ); + /* Right-to-left adjustments */ &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } + /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { @@ -79,6 +81,36 @@ } } +.spectrum-Accordion--sizeS { + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); + --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); +} + +.spectrum-Accordion--sizeL { + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); + --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); +} + +.spectrum-Accordion--sizeXL { + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-400)); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); + --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); +} + .spectrum-Accordion--compact { --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); @@ -127,36 +159,6 @@ } } -.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); -} - -.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); -} - -.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-400)); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); -} - .spectrum-Accordion { display: block; list-style: none; @@ -167,21 +169,14 @@ .spectrum-Accordion-item { z-index: inherit; position: relative; - margin: 0; - min-block-size: var(--spectrum-accordion-item-height); min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); &:first-child { - border-block-start: 1px solid transparent; - border-color: var(--spectrum-accordion-divider-color); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); + border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); } - - border-block-end: 1px solid transparent; - border-color: var(--spectrum-accordion-divider-color); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); } .spectrum-Accordion-itemHeading { @@ -240,12 +235,15 @@ font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); - /* reset styling if button element is used */ + /* Reset styling if button element is used */ appearance: none; border: 0; text-align: start; inline-size: 100%; + color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); + background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); + &:focus { outline: none; @@ -255,8 +253,6 @@ inset-inline-start: 0; } } - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); - background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); &:hover { color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); @@ -282,11 +278,9 @@ } } -.spectrum-Accordion-item { - &.is-open { - .spectrum-Accordion-itemHeader:hover { - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - } +.spectrum-Accordion-item.is-open { + .spectrum-Accordion-itemHeader:hover { + background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); } } @@ -309,18 +303,6 @@ } } -@media (forced-colors: active) { - .spectrum-Accordion-itemHeader { - &::after { - /* make sure focus ring renders */ - forced-color-adjust: none; - content: ""; - position: absolute; - inset-inline-start: 0; - } - } -} - .spectrum-Accordion-item { &.is-open { > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, @@ -339,3 +321,15 @@ } } } + +@media (forced-colors: active) { + .spectrum-Accordion-itemHeader { + &::after { + /* Make sure focus ring renders */ + forced-color-adjust: none; + content: ""; + position: absolute; + inset-inline-start: 0; + } + } +} From d2150ffb5f9e7ee51f241c726c64c048853dfcd8 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 15 Apr 2025 11:50:34 -0400 Subject: [PATCH 03/23] feat(accordion): rename height and width properties and mods Rename height and width custom properties to include "minimum" in their name, to better reflect what they actually are and how they are used. --- components/accordion/dist/metadata.json | 8 ++++---- components/accordion/index.css | 24 ++++++++++++------------ 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index bc3c102ec9b..ca62e832a14 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -80,8 +80,8 @@ "--mod-accordion-item-header-font-weight", "--mod-accordion-item-header-line-height", "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-height", - "--mod-accordion-item-width", + "--mod-accordion-item-minimum-height", + "--mod-accordion-item-minimum-width", "--mod-accordion-min-block-size" ], "component": [ @@ -137,8 +137,8 @@ "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", "--spectrum-accordion-item-header-top-to-text-space", - "--spectrum-accordion-item-height", - "--spectrum-accordion-item-width", + "--spectrum-accordion-item-minimum-height", + "--spectrum-accordion-item-minimum-width", "--spectrum-accordion-min-block-size", "--spectrum-accordion-minimum-width", "--spectrum-accordion-small-top-to-text-spacious", diff --git a/components/accordion/index.css b/components/accordion/index.css index d9f660ca5dd..7b7cfd35143 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -13,8 +13,8 @@ .spectrum-Accordion { /* Layout and spacing */ - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200)); - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); @@ -63,7 +63,7 @@ /* Calculated minimum block-size that accounts for top and bottom spacing plus line-height sometimes being taller than the minimum height token. */ --spectrum-accordion-min-block-size: max( - var(--spectrum-accordion-item-height), + var(--spectrum-accordion-item-minimum-height), 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))) ); @@ -82,7 +82,7 @@ } .spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); @@ -92,7 +92,7 @@ } .spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); @@ -102,7 +102,7 @@ } .spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-400)); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); @@ -112,24 +112,24 @@ } .spectrum-Accordion--compact { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); + --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--sizeS { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-75)); + --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--sizeL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200)); + --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--sizeXL { - --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); + --spectrum-accordion-item-minimum-height: var(--mod-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); } @@ -170,8 +170,8 @@ z-index: inherit; position: relative; margin: 0; - min-block-size: var(--spectrum-accordion-item-height); - min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + min-block-size: var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)); + min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); &:first-child { From cb25f685e4131f1fbec383364828ce42bc2802bb Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 15 Apr 2025 12:08:25 -0400 Subject: [PATCH 04/23] refactor(accordion): use existing rtl custom property Use existing custom property for RTL icon rotation for the default icon state. Apply to icon, like the existing open styles, instead of the icon container. --- components/accordion/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index 7b7cfd35143..0aab5b780f4 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -196,8 +196,8 @@ position: absolute; inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2)); - &:dir(rtl) { - transform: scaleX(-1); + .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation); } } From b11a3bf4158d9c65b911333fdc14e8b172761bda Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 15 Apr 2025 12:24:55 -0400 Subject: [PATCH 05/23] refactor(accordion): organize open and disabled styles Better organize open and disabled styles within the same blocks of CSS. Only moves existing CSS. --- components/accordion/index.css | 33 ++++++++++++--------------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index 0aab5b780f4..7ce9cd093a6 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -67,7 +67,7 @@ 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))) ); - /* Right-to-left adjustments */ + /* Right-to-left adjustments for transforms */ &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } @@ -265,7 +265,6 @@ &:focus-visible { border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); - outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus)); color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus)); @@ -279,6 +278,15 @@ } .spectrum-Accordion-item.is-open { + > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, + > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); + } + + > .spectrum-Accordion-itemContent { + display: block; + } + .spectrum-Accordion-itemHeader:hover { background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); } @@ -286,6 +294,8 @@ .spectrum-Accordion-item.is-disabled { .spectrum-Accordion-itemHeader { + cursor: default; + &, &:hover, &:focus-visible { @@ -303,25 +313,6 @@ } } -.spectrum-Accordion-item { - &.is-open { - > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, - > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - > .spectrum-Accordion-itemContent { - display: block; - } - } - - &.is-disabled { - .spectrum-Accordion-itemHeader { - cursor: default; - } - } -} - @media (forced-colors: active) { .spectrum-Accordion-itemHeader { &::after { From 5d62446daa5a4281e452794cb48cd1855a382a04 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 15 Apr 2025 12:38:41 -0400 Subject: [PATCH 06/23] feat(accordion): add new sized corner rounding tokens --- components/accordion/index.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index 7ce9cd093a6..484d2182838 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -23,7 +23,7 @@ --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium); --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-component-edge-to-text: var(--spectrum-component-edge-to-text-75); @@ -85,6 +85,7 @@ --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-small); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); @@ -95,6 +96,7 @@ --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-large); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); @@ -105,6 +107,7 @@ --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); From 25dfd2ab6fbe8d6492e7eb3ee5360a95910ad509 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 18 Apr 2025 17:24:37 -0400 Subject: [PATCH 07/23] feat(accordion)!: overall s2 migration with markup changes Uses new tokens from S2 spec. Simplifies layout with some noted markup changes to use flexbox instead of a position absolute for the disclosure icon. Plus some other general refactoring, cleanup, and documentation. --- .changeset/chatty-lands-attack.md | 27 ++++ components/accordion/dist/metadata.json | 50 ++++--- components/accordion/index.css | 133 +++++++----------- .../accordion/stories/accordion.stories.js | 5 + components/accordion/stories/template.js | 13 +- 5 files changed, 124 insertions(+), 104 deletions(-) create mode 100644 .changeset/chatty-lands-attack.md diff --git a/.changeset/chatty-lands-attack.md b/.changeset/chatty-lands-attack.md new file mode 100644 index 00000000000..e17f62807cd --- /dev/null +++ b/.changeset/chatty-lands-attack.md @@ -0,0 +1,27 @@ +--- +"@spectrum-css/accordion": major +--- + +#### Spectrum 2 migration + +Accordion now uses Spectrum 2 tokens and specifications. + +New sized tokens are used for corner rounding, the spacing around the disclosure icon, and +the spacing around the content area. + +##### Markup changes + +The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved +from outside the the button (`spectrum-Accordion-itemHeader`), to within the button. The extra +element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has +been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading +text. + +###### Mod changes + +The following `--mod` custom properties have been renamed to better reflect how they are used: + +- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height` +- `--mod-accordion-item-width` has been renamed to `--mod-accordion-item-minimum-width` +- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size` +- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline` diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index ca62e832a14..d7af9f90dcd 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -19,10 +19,8 @@ ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover", - ".spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent", - ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", - ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", + ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator", ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", ".spectrum-Accordion-itemHeader", @@ -34,28 +32,26 @@ ".spectrum-Accordion-itemHeader:hover", ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer", ".spectrum-Accordion-itemHeading", - ".spectrum-Accordion-itemIconContainer", - ".spectrum-Accordion-itemIconContainer:dir(rtl)", + ".spectrum-Accordion-itemIndicator", + ".spectrum-Accordion-itemTitle", ".spectrum-Accordion:dir(rtl)", ".spectrum-Accordion:lang(ja)", ".spectrum-Accordion:lang(ko)", ".spectrum-Accordion:lang(zh)", - "[dir=\"rtl\"] .spectrum-Accordion", - "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer" + "[dir=\"rtl\"] .spectrum-Accordion" ], "modifiers": [ "--mod-accordion-background-color-default", "--mod-accordion-background-color-down", "--mod-accordion-background-color-hover", "--mod-accordion-background-color-key-focus", - "--mod-accordion-component-edge-to-text", + "--mod-accordion-content-padding-inline", "--mod-accordion-corner-radius", "--mod-accordion-disclosure-indicator-height", "--mod-accordion-disclosure-indicator-to-text-space", "--mod-accordion-divider-color", "--mod-accordion-divider-thickness", "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", "--mod-accordion-focus-indicator-color", "--mod-accordion-focus-indicator-gap", "--mod-accordion-focus-indicator-thickness", @@ -80,9 +76,10 @@ "--mod-accordion-item-header-font-weight", "--mod-accordion-item-header-line-height", "--mod-accordion-item-header-top-to-text-space", + "--mod-accordion-item-min-block-size", "--mod-accordion-item-minimum-height", "--mod-accordion-item-minimum-width", - "--mod-accordion-min-block-size" + "--mod-accordion-top-to-disclosure-indicator" ], "component": [ "--spectrum-accordion-background-color-default", @@ -101,15 +98,21 @@ "--spectrum-accordion-bottom-to-text-spacious-large", "--spectrum-accordion-bottom-to-text-spacious-medium", "--spectrum-accordion-bottom-to-text-spacious-small", - "--spectrum-accordion-component-edge-to-text", "--spectrum-accordion-content-area-bottom-to-content", + "--spectrum-accordion-content-area-edge-to-content-extra-large", + "--spectrum-accordion-content-area-edge-to-content-large", + "--spectrum-accordion-content-area-edge-to-content-medium", + "--spectrum-accordion-content-area-edge-to-content-small", "--spectrum-accordion-content-area-top-to-content", + "--spectrum-accordion-content-padding-inline", "--spectrum-accordion-corner-radius", "--spectrum-accordion-disclosure-indicator-height", - "--spectrum-accordion-disclosure-indicator-to-text", + "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "--spectrum-accordion-disclosure-indicator-to-text-large", + "--spectrum-accordion-disclosure-indicator-to-text-medium", + "--spectrum-accordion-disclosure-indicator-to-text-small", "--spectrum-accordion-disclosure-indicator-to-text-space", "--spectrum-accordion-divider-color", - "--spectrum-accordion-edge-to-disclosure-indicator", "--spectrum-accordion-edge-to-disclosure-indicator-space", "--spectrum-accordion-edge-to-text", "--spectrum-accordion-edge-to-text-space", @@ -137,11 +140,12 @@ "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", "--spectrum-accordion-item-header-top-to-text-space", + "--spectrum-accordion-item-min-block-size", "--spectrum-accordion-item-minimum-height", "--spectrum-accordion-item-minimum-width", - "--spectrum-accordion-min-block-size", "--spectrum-accordion-minimum-width", "--spectrum-accordion-small-top-to-text-spacious", + "--spectrum-accordion-top-to-disclosure-indicator", "--spectrum-accordion-top-to-text-compact-extra-large", "--spectrum-accordion-top-to-text-compact-large", "--spectrum-accordion-top-to-text-compact-medium", @@ -167,20 +171,28 @@ "--spectrum-body-size-s", "--spectrum-body-size-xs", "--spectrum-bold-font-weight", + "--spectrum-chevron-icon-size-100", + "--spectrum-chevron-icon-size-200", + "--spectrum-chevron-icon-size-300", + "--spectrum-chevron-icon-size-75", "--spectrum-cjk-line-height-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-50", - "--spectrum-component-edge-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-400", + "--spectrum-component-height-500", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-divider-thickness-small", + "--spectrum-field-edge-to-disclosure-icon-100", + "--spectrum-field-edge-to-disclosure-icon-200", + "--spectrum-field-edge-to-disclosure-icon-300", + "--spectrum-field-edge-to-disclosure-icon-75", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", diff --git a/components/accordion/index.css b/components/accordion/index.css index 484d2182838..0aedf1671a8 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -15,25 +15,25 @@ /* Layout and spacing */ --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-medium); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-100); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-medium); --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); - --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-accordion-focus-indicator-gap: var(--spectrum-accordion-focus-indicator-gap); --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium); --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-component-edge-to-text: var(--spectrum-component-edge-to-text-75); /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); /* Text body */ --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); @@ -55,18 +55,22 @@ --spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - /* Label */ --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - /* Calculated minimum block-size that accounts for top and bottom spacing plus line-height sometimes being taller than the minimum height token. */ - --spectrum-accordion-min-block-size: max( - var(--spectrum-accordion-item-minimum-height), + /* Calculated minimum block-size that accounts for density spacing changes and/or increases in font size and line-height. + This gives us the block-size of the header with a single line of text. */ + --spectrum-accordion-item-min-block-size: max( + var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)), 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 top to disclosure icon space that takes into account density and line-height, to vertically align icon with first line of header text. + This is needed because the spec field-top-to-disclosure-icon-* tokens can't be used because they are not affected by density. */ + --spectrum-accordion-top-to-disclosure-indicator: max(0px, var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) / 2 - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)) / 2); + /* Right-to-left adjustments for transforms */ &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); @@ -83,8 +87,10 @@ .spectrum-Accordion--sizeS { --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); + --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); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-75); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-small); --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-small); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); @@ -94,8 +100,10 @@ .spectrum-Accordion--sizeL { --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); + --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); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-200); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-large); --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-large); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); @@ -105,8 +113,10 @@ .spectrum-Accordion--sizeXL { --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); + --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); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-300); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-extra-large); --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); @@ -132,31 +142,31 @@ } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--mod-accordion-item-minimum-height, var(--spectrum-component-height-300)); + --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--spacious { - --spectrum-accordion-item-header-line-height: 1.278; + --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--sizeS { - --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-header-line-height: 1.273; + --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--sizeXL { - --spectrum-accordion-item-header-line-height: 1.25; + --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); } @@ -173,7 +183,7 @@ z-index: inherit; position: relative; margin: 0; - min-block-size: var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)); + min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); @@ -188,26 +198,17 @@ box-sizing: border-box; } -.spectrum-Accordion-itemIconContainer { - padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)); - inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - display: flex; - justify-content: center; - align-items: center; - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); - position: absolute; - inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2)); - - .spectrum-Accordion-itemIndicator { - transform: var(--spectrum-logical-rotation); - } +.spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation); + flex-shrink: 0; + margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); + margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); } .spectrum-Accordion-itemContent { - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)); display: none; + padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); + padding-inline: var(--mod-accordion-content-padding-inline, var(--spectrum-accordion-content-padding-inline)); color: var(--spectrum-accordion-item-content-color); font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); @@ -216,19 +217,20 @@ line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); } +.spectrum-Accordion-itemTitle { + padding-block: 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)); +} + +/* Focusable button that expands/collapses the accordion item. */ .spectrum-Accordion-itemHeader { + box-sizing: border-box; position: relative; + display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; - box-sizing: border-box; - padding-block: 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)); - - padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); - - min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)); + padding-inline: 0; line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); text-overflow: ellipsis; @@ -238,7 +240,7 @@ font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); - /* Reset styling if button element is used */ + /* Reset styling of button element */ appearance: none; border: 0; text-align: start; @@ -247,30 +249,16 @@ color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); - &:focus { - outline: none; - - &::after { - content: ""; - position: absolute; - inset-inline-start: 0; - } - } - &:hover { color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - - + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); - } } &:focus-visible { border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); - outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus)); color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus)); + outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1); } @@ -281,18 +269,13 @@ } .spectrum-Accordion-item.is-open { - > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, - > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { + > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator { transform: var(--spectrum-logical-rotation,) rotate(90deg); } > .spectrum-Accordion-itemContent { display: block; } - - .spectrum-Accordion-itemHeader:hover { - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - } } .spectrum-Accordion-item.is-disabled { @@ -305,10 +288,6 @@ color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); background-color: transparent; } - - + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); - } } .spectrum-Accordion-itemContent { @@ -317,13 +296,7 @@ } @media (forced-colors: active) { - .spectrum-Accordion-itemHeader { - &::after { - /* Make sure focus ring renders */ - forced-color-adjust: none; - content: ""; - position: absolute; - inset-inline-start: 0; - } + .spectrum-Accordion { + --spectrum-accordion-focus-indicator-color: Highlight; } } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index f8aa76119fe..38b3edfd156 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -56,6 +56,8 @@ export default { disableAll: false, }, parameters: { + // Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body. + layout: "padded", actions: { handles: ["click .spectrum-Accordion-item"], }, @@ -158,6 +160,9 @@ const content = new Map([ ] ]); +/** + * The default accordion displays at medium size with a regular density. + */ export const Default = AccordionGroup.bind({}); Default.args = { items: content, diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 360df6f0199..5dfc403f8ae 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -45,16 +45,19 @@ export const AccordionItem = ({ aria-controls="spectrum-accordion-item-${idx}-content" aria-expanded="${open ? "true" : "false"}" > - ${heading} - - ${Icon({ - iconName: !isOpen ? "ChevronRight" : "ChevronDown", + iconName: (!isOpen ? "ChevronRight" : "ChevronDown") + ({ + s: "75", + m: "100", + l: "200", + xl: "300", + }[iconSize] || "100"), setName: "ui", size: iconSize, customClasses: [`${rootClass}Indicator`], }, context)} - + ${heading} +
Date: Fri, 18 Apr 2025 18:22:58 -0400 Subject: [PATCH 08/23] refactor(accordion): use custom properties for disabled styles --- components/accordion/index.css | 36 ++++++++++++++-------------------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index 0aedf1671a8..a69ff155614 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -34,6 +34,7 @@ --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); + --spectrum-accordion-item-header-cursor: pointer; /* Text body */ --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); @@ -52,9 +53,6 @@ --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); @@ -172,6 +170,19 @@ } } +.spectrum-Accordion-item.is-disabled { + --spectrum-accordion-item-header-cursor: default; + --spectrum-accordion-background-color-default: transparent; + --spectrum-accordion-background-color-hover: transparent; + --spectrum-accordion-background-color-down: transparent; + --spectrum-accordion-background-color-key-focus: transparent; + --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); +} + .spectrum-Accordion { display: block; list-style: none; @@ -234,7 +245,7 @@ line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); text-overflow: ellipsis; - cursor: pointer; + cursor: var(--spectrum-accordion-item-header-cursor); font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); @@ -278,23 +289,6 @@ } } -.spectrum-Accordion-item.is-disabled { - .spectrum-Accordion-itemHeader { - cursor: default; - - &, - &:hover, - &:focus-visible { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); - background-color: transparent; - } - } - - .spectrum-Accordion-itemContent { - color: var(--spectrum-accordion-item-content-disabled-color); - } -} - @media (forced-colors: active) { .spectrum-Accordion { --spectrum-accordion-focus-indicator-color: Highlight; From 1da74ded5593aa00951c1d943df43b81ad329ba3 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 18 Apr 2025 18:39:58 -0400 Subject: [PATCH 09/23] feat(accordion): add chevron rotation animation Add CSS transition for the rotation of the disclosure indicator. --- .changeset/chatty-lands-attack.md | 5 +++++ components/accordion/index.css | 3 +++ 2 files changed, 8 insertions(+) diff --git a/.changeset/chatty-lands-attack.md b/.changeset/chatty-lands-attack.md index e17f62807cd..1f3ac9053c2 100644 --- a/.changeset/chatty-lands-attack.md +++ b/.changeset/chatty-lands-attack.md @@ -9,6 +9,11 @@ Accordion now uses Spectrum 2 tokens and specifications. New sized tokens are used for corner rounding, the spacing around the disclosure icon, and the spacing around the content area. +##### New features + +- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and + collapsing the accordion item. + ##### Markup changes The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved diff --git a/components/accordion/index.css b/components/accordion/index.css index a69ff155614..d55aa88a54e 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -34,7 +34,9 @@ --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); + --spectrum-accordion-item-header-cursor: pointer; + --spectrum-accordion-animation-duration: var(--spectrum-animation-duration-100); /* Text body */ --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); @@ -211,6 +213,7 @@ .spectrum-Accordion-itemIndicator { transform: var(--spectrum-logical-rotation); + transition: transform ease var(--mod-accordion-animation-duration, var(--spectrum-accordion-animation-duration)); flex-shrink: 0; margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); From 4b73eca8de5e7b3b3ed0fb8be25bea53dea9e373 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 21 Apr 2025 09:41:18 -0400 Subject: [PATCH 10/23] chore(accordion): updated metadata --- components/accordion/dist/metadata.json | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index d7af9f90dcd..6e6ceeb8a09 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -14,23 +14,15 @@ ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS", ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL", ".spectrum-Accordion-item", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover", + ".spectrum-Accordion-item.is-disabled", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator", ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", ".spectrum-Accordion-itemHeader", ".spectrum-Accordion-itemHeader:active", - ".spectrum-Accordion-itemHeader:after", - ".spectrum-Accordion-itemHeader:focus", ".spectrum-Accordion-itemHeader:focus-visible", - ".spectrum-Accordion-itemHeader:focus:after", ".spectrum-Accordion-itemHeader:hover", - ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer", ".spectrum-Accordion-itemHeading", ".spectrum-Accordion-itemIndicator", ".spectrum-Accordion-itemTitle", @@ -41,6 +33,7 @@ "[dir=\"rtl\"] .spectrum-Accordion" ], "modifiers": [ + "--mod-accordion-animation-duration", "--mod-accordion-background-color-default", "--mod-accordion-background-color-down", "--mod-accordion-background-color-hover", @@ -82,6 +75,7 @@ "--mod-accordion-top-to-disclosure-indicator" ], "component": [ + "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", "--spectrum-accordion-background-color-down", "--spectrum-accordion-background-color-hover", @@ -122,7 +116,6 @@ "--spectrum-accordion-item-content-area-bottom-to-content", "--spectrum-accordion-item-content-area-top-to-content", "--spectrum-accordion-item-content-color", - "--spectrum-accordion-item-content-disabled-color", "--spectrum-accordion-item-content-font", "--spectrum-accordion-item-content-font-size", "--spectrum-accordion-item-content-font-style", @@ -133,7 +126,7 @@ "--spectrum-accordion-item-header-color-down", "--spectrum-accordion-item-header-color-hover", "--spectrum-accordion-item-header-color-key-focus", - "--spectrum-accordion-item-header-disabled-color", + "--spectrum-accordion-item-header-cursor", "--spectrum-accordion-item-header-font", "--spectrum-accordion-item-header-font-size", "--spectrum-accordion-item-header-font-style", @@ -159,6 +152,7 @@ "--spectrum-accordion-top-to-text-spacious-medium" ], "global": [ + "--spectrum-animation-duration-100", "--spectrum-background-opacity-default", "--spectrum-background-opacity-down", "--spectrum-background-opacity-hover", @@ -194,7 +188,6 @@ "--spectrum-field-edge-to-disclosure-icon-300", "--spectrum-field-edge-to-disclosure-icon-75", "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-200", "--spectrum-font-size-300", From 64fc1afa3940937a345f7a3ee89b3adb96388dc9 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 21 Apr 2025 11:19:36 -0400 Subject: [PATCH 11/23] feat(accordion): add quiet style Adds the "quiet" option to accordion, which does not have dividers and shows the rounded corners on hover. --- .changeset/chatty-lands-attack.md | 1 + components/accordion/dist/metadata.json | 2 ++ components/accordion/index.css | 13 ++++++++++-- .../accordion/stories/accordion.stories.js | 20 ++++++++++++++++++- components/accordion/stories/template.js | 4 +++- 5 files changed, 36 insertions(+), 4 deletions(-) diff --git a/.changeset/chatty-lands-attack.md b/.changeset/chatty-lands-attack.md index 1f3ac9053c2..2c4830ba327 100644 --- a/.changeset/chatty-lands-attack.md +++ b/.changeset/chatty-lands-attack.md @@ -11,6 +11,7 @@ the spacing around the content area. ##### New features +- Adds the optional "quiet" style, which does not show dividers between accordion items. - Adds CSS transition to animate the rotation of the disclosure indicator when expanding and collapsing the accordion item. diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 6e6ceeb8a09..1a2e202af7b 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -6,6 +6,7 @@ ".spectrum-Accordion--compact.spectrum-Accordion--sizeL", ".spectrum-Accordion--compact.spectrum-Accordion--sizeS", ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL", + ".spectrum-Accordion--quiet", ".spectrum-Accordion--sizeL", ".spectrum-Accordion--sizeS", ".spectrum-Accordion--sizeXL", @@ -107,6 +108,7 @@ "--spectrum-accordion-disclosure-indicator-to-text-small", "--spectrum-accordion-disclosure-indicator-to-text-space", "--spectrum-accordion-divider-color", + "--spectrum-accordion-divider-thickness", "--spectrum-accordion-edge-to-disclosure-indicator-space", "--spectrum-accordion-edge-to-text", "--spectrum-accordion-edge-to-text-space", diff --git a/components/accordion/index.css b/components/accordion/index.css index d55aa88a54e..9d0e1fed708 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -27,6 +27,7 @@ --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium); --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); /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); @@ -172,6 +173,10 @@ } } +.spectrum-Accordion--quiet { + --spectrum-accordion-divider-thickness: 0px; +} + .spectrum-Accordion-item.is-disabled { --spectrum-accordion-item-header-cursor: default; --spectrum-accordion-background-color-default: transparent; @@ -198,10 +203,10 @@ margin: 0; min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); - border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); + border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); &:first-child { - border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color); + border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); } } @@ -292,6 +297,10 @@ } } +.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader { + border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); +} + @media (forced-colors: active) { .spectrum-Accordion { --spectrum-accordion-focus-indicator-color: Highlight; diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 38b3edfd156..0fee68bd68c 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -1,7 +1,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; +import { isQuiet, size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -47,6 +47,7 @@ export default { options: ["compact", "regular", "spacious"], control: "select", }, + isQuiet, }, args: { rootClass: "spectrum-Accordion", @@ -54,6 +55,7 @@ export default { density: "regular", collapseAll: false, disableAll: false, + isQuiet: false, }, parameters: { // Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body. @@ -212,6 +214,22 @@ Spacious.parameters = { }; Spacious.storyName = "Density: Spacious"; +/** + * The optional quiet style for accordion has no dividers between sections. This style works best when a clear layout + * (vertical stack, table, grid) makes it easy see and understand. Too many quiet components in a small space can be + * hard to differentiate. This can be applied by adding the `spectrum-Accordion--quiet` class alongside the + * parent `spectrum-Accordion` class. + */ +export const Quiet = Template.bind({}); +Quiet.tags = ["!dev"]; +Quiet.args = { + items: content, + isQuiet: true, +}; +Quiet.parameters = { + chromatic: { disableSnapshot: true }, +}; + /** * Each of the different sizes have varying font sizes, and tighter or looser vertical spacing between the rows. Medium is the default size. */ diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 5dfc403f8ae..75d53a04db5 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -76,6 +76,7 @@ export const Template = ({ rootClass = "spectrum-Accordion", size = "m", density = "regular", + isQuiet = false, items = [], id = getRandomId("accordion"), disableAll = false, @@ -90,9 +91,10 @@ export const Template = ({ class="${classMap({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: - typeof size !== "undefined", + typeof size !== "undefined" && size !== "m", [`${rootClass}--${density}`]: typeof density !== "undefined" && density !== "regular", + [`${rootClass}--quiet`]: isQuiet, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })}" id=${ifDefined(id)} From e39fdc776f376194b1628c79b2b669715e3e954c Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 23 Apr 2025 16:11:26 -0400 Subject: [PATCH 12/23] docs(accordion): additions to stories and tests Reorganize and add stories to better document accordion's various options. - Adds a disabled state story - Simplifies accordion items displayed on Docs page - Tests accordion states and density sizes in testing preview grid --- components/accordion/dist/metadata.json | 1 + .../accordion/stories/accordion.stories.js | 46 ++--- .../accordion/stories/accordion.test.js | 165 +++++++++++++++++- components/accordion/stories/template.js | 10 +- 4 files changed, 186 insertions(+), 36 deletions(-) diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 1a2e202af7b..cf6d52af793 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-Accordion--compact.spectrum-Accordion--sizeS", ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL", ".spectrum-Accordion--quiet", + ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader", ".spectrum-Accordion--sizeL", ".spectrum-Accordion--sizeS", ".spectrum-Accordion--sizeXL", diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 0fee68bd68c..f491b10383d 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -80,7 +80,7 @@ const content = new Map([ { 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.", - isDisabled: true, + isDisabled: false, }, ], [ @@ -116,23 +116,11 @@ const content = new Map([ ], [ "How many products does Adobe have?", - { - content: - "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, - }, - ], - [ - "How much do Adobe products cost?", { content: Typography({ semantics: "body", content: [ - "Creative Cloud plans start at US$9.99/mo. You can subscribe to specific Single App plans or get 20+ creative apps and services in the Creative Cloud All Apps plan.", - Link({ - url: "https://www.adobe.com/creativecloud/plans.html", - text: "Explore Creative Cloud plans.", - }), + "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.", ], }), }, @@ -144,22 +132,6 @@ const content = new Map([ "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.", }, ], - [ - "How can I get a student discount on Adobe products?", - { - content: Typography({ - semantics: "body", - content: [ - `Students who provide a valid school-issued email address at purchase are eligible to save over 60% on Creative Cloud All Apps, which includes 20+ apps such as Photoshop, Illustrator, InDesign, Acrobat Pro, and more. ${Link( - { - url: "https://www.adobe.com/creativecloud/buy/students.html", - text: "Learn more about Creative Cloud for students.", - } - )}`, - ], - }), - }, - ] ]); /** @@ -214,6 +186,20 @@ Spacious.parameters = { }; Spacious.storyName = "Density: Spacious"; +/** + * Individual accordion items (of class `.spectrum-Accordion-item`) can be styled as disabled by applying the `is-disabled` class. + * This example markup also applies the `disabled` attribute on the heading button. + */ +export const Disabled = Template.bind({}); +Disabled.tags = ["!dev"]; +Disabled.args = { + items: content, + disableAll: true, +}; +Disabled.parameters = { + chromatic: { disableSnapshot: true }, +}; + /** * The optional quiet style for accordion has no dividers between sections. This style works best when a clear layout * (vertical stack, table, grid) makes it easy see and understand. Too many quiet components in a small space can be diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 192400fe3fb..616a90a96b0 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -1,17 +1,148 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes, Variants } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; 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. + */ +const testsContent = 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.", + }, + ], +]); + +const defaultContentText = "This is an example of text content within the content area that is not wrapped by any typography classes or elements."; + +/** + * Content for testing accordion item states. + */ +const statesTestContent = new Map([ + [ + "hovered", + { + isHovered: true, + content: defaultContentText, + }, + ], + [ + "disabled", + { + isDisabled: true, + isHovered: true, + content: defaultContentText, + }, + ], + [ + "hovered + disabled", + { + isDisabled: true, + isHovered: true, + content: defaultContentText, + }, + ], + [ + "focus-visible", + { + isFocused: true, + content: defaultContentText, + }, + ], + [ + "active/down", + { + isActive: true, + content: defaultContentText, + }, + ], + [ + "active/down + hovered", + { + isActive: true, + isHovered: true, + content: defaultContentText, + }, + ], + [ + "focus-visible + hovered", + { + isFocused: true, + isHovered: true, + content: defaultContentText, + }, + ], +]); + export const AccordionGroup = Variants({ Template, testData: [ { testHeading: "Standard", + items: testsContent, + customStyles: { + maxInlineSize: "500px", + }, + }, + { + testHeading: "Quiet", + items: testsContent, + isQuiet: true, customStyles: { maxInlineSize: "500px", }, }, { testHeading: "Compact", + items: testsContent, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, density: "compact", collapseAll: true, customStyles: { @@ -21,6 +152,8 @@ export const AccordionGroup = Variants({ }, { testHeading: "Spacious", + items: testsContent, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, density: "spacious", collapseAll: true, customStyles: { @@ -29,8 +162,30 @@ export const AccordionGroup = Variants({ withStates: false, }, { - testHeading: "Text wrapping", - collapseAll: true, + testHeading: "Heading text wrapping", + items: new Map([ + [ + "This example has a heading that wraps to two lines.", + { + content: defaultContentText, + isOpen: false, + }, + ], + [ + "This example has a heading that wraps to more than two lines. What are the most popular Adobe products?", + { + content: defaultContentText, + isOpen: false, + }, + ], + [ + "This example has a heading that wraps to more than two lines. It also shows the text in its content area.", + { + content: defaultContentText, + isOpen: true, + }, + ], + ]), customStyles: { maxInlineSize: "300px", }, @@ -39,8 +194,8 @@ export const AccordionGroup = Variants({ ], stateData: [ { - testHeading: "Disabled", - disableAll: true, + testHeading: "Accordion item states", + items: statesTestContent, }, ], }); diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 75d53a04db5..62b4b7b6c9a 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -16,6 +16,9 @@ export const AccordionItem = ({ idx = 0, isDisabled = false, isOpen = false, + isHovered = false, + isActive = false, + isFocused = false, iconSize = "m", customStyles = {}, customClasses = [], @@ -38,7 +41,12 @@ export const AccordionItem = ({