diff --git a/.changeset/chatty-lands-attack.md b/.changeset/chatty-lands-attack.md new file mode 100644 index 00000000000..850564662c8 --- /dev/null +++ b/.changeset/chatty-lands-attack.md @@ -0,0 +1,33 @@ +--- +"@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. + +#### 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. + +#### 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/.storybook/types/variants.js b/.storybook/types/variants.js index 2c7a3258287..e530d63da61 100644 --- a/.storybook/types/variants.js +++ b/.storybook/types/variants.js @@ -49,6 +49,16 @@ export const isQuiet = { control: { type: "boolean" }, }; +export const hasNoInlinePadding = { + name: "No Inline Padding Styling", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: { type: "boolean" }, +}; + export const staticColor = { name: "Static color", description: diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index bc3c102ec9b..1068d8d2fd1 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -6,6 +6,8 @@ ".spectrum-Accordion--compact.spectrum-Accordion--sizeL", ".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", @@ -14,46 +16,38 @@ ".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-open .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-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", ".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-itemIconContainer", - ".spectrum-Accordion-itemIconContainer:dir(rtl)", + ".spectrum-Accordion-itemIndicator", + ".spectrum-Accordion-itemTitle", + ".spectrum-Accordion.spectrum-Accordion--noInlinePadding", ".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-animation-duration", "--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-content-area", "--mod-accordion-edge-to-disclosure-indicator-space", "--mod-accordion-edge-to-text-space", "--mod-accordion-focus-indicator-color", @@ -80,11 +74,13 @@ "--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-min-block-size" + "--mod-accordion-item-min-block-size", + "--mod-accordion-item-minimum-height", + "--mod-accordion-item-minimum-width", + "--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", @@ -101,15 +97,23 @@ "--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-divider-thickness", + "--spectrum-accordion-edge-to-content-area", "--spectrum-accordion-edge-to-disclosure-indicator-space", "--spectrum-accordion-edge-to-text", "--spectrum-accordion-edge-to-text-space", @@ -119,7 +123,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", @@ -130,18 +133,19 @@ "--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", "--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-min-block-size", + "--spectrum-accordion-item-min-block-size", + "--spectrum-accordion-item-minimum-height", + "--spectrum-accordion-item-minimum-width", "--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", @@ -155,6 +159,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", @@ -167,27 +172,34 @@ "--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-50", "--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", + "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", - "--spectrum-font-size-500", - "--spectrum-font-size-700", + "--spectrum-font-size-400", "--spectrum-gray-200", "--spectrum-gray-900-rgb", "--spectrum-line-height-100", diff --git a/components/accordion/index.css b/components/accordion/index.css index f3b52638318..958956a795e 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -12,31 +12,32 @@ */ .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)); - - --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); - --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); + /* Layout and spacing */ + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); + --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-content-area: var(--spectrum-accordion-content-padding-inline); --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-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); + --spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small); /* 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-font-size: var(--spectrum-font-size-200); + --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); @@ -46,31 +47,37 @@ --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); /* Colors */ - --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); - --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); - --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-background-color-default: rgb(var(--spectrum-gray-900-rgb) / var(--spectrum-background-opacity-default)); + --spectrum-accordion-background-color-hover: rgb(var(--spectrum-gray-900-rgb) / var(--spectrum-background-opacity-hover)); + --spectrum-accordion-background-color-down: rgb(var(--spectrum-gray-900-rgb) / var(--spectrum-background-opacity-down)); + --spectrum-accordion-background-color-key-focus: rgb(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); - /* 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); - - --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)))) + /* 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); } + /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { @@ -79,82 +86,113 @@ } } +.spectrum-Accordion--sizeS { + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); + --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-100); + --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-minimum-height: var(--spectrum-component-height-200); + --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-300); + --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-minimum-height: var(--spectrum-component-height-300); + --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-400); + --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-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--sizeS { - --spectrum-accordion-item-height: var(--mod-accordion-item-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--sizeL { - --spectrum-accordion-item-height: var(--mod-accordion-item-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--sizeXL { - --spectrum-accordion-item-height: var(--mod-accordion-item-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--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-100); --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-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--sizeXL { - --spectrum-accordion-item-header-line-height: 1.25; + --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--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--quiet { + --spectrum-accordion-divider-thickness: 0px; } -.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-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--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.spectrum-Accordion--noInlinePadding { + --spectrum-accordion-edge-to-disclosure-indicator-space: 0px; + --spectrum-accordion-edge-to-content-area: 0px; } .spectrum-Accordion { @@ -167,21 +205,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)); + 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-accordion-divider-thickness)) 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-accordion-divider-thickness)) 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 { @@ -190,26 +221,18 @@ 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)); - - &:dir(rtl) { - transform: scaleX(-1); - } +.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)); } .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)); @@ -218,61 +241,49 @@ 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)); + padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-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 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); 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)); 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; inline-size: 100%; - &:focus { - outline: none; - - &::after { - content: ""; - position: absolute; - 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)); 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); } @@ -282,60 +293,22 @@ } } -.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-itemHeading .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); } -} -.spectrum-Accordion-item.is-disabled { - .spectrum-Accordion-itemHeader { - &, - &:hover, - &:focus-visible { - 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 { - color: var(--spectrum-accordion-item-content-disabled-color); + > .spectrum-Accordion-itemContent { + display: block; } } -@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--quiet .spectrum-Accordion-itemHeader { + border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); } -.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 { + --spectrum-accordion-focus-indicator-color: Highlight; } } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 3709e75871f..9f0c230186f 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 { hasNoInlinePadding, 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"; @@ -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", @@ -49,6 +47,8 @@ export default { options: ["compact", "regular", "spacious"], control: "select", }, + isQuiet, + hasNoInlinePadding, }, args: { rootClass: "spectrum-Accordion", @@ -56,8 +56,12 @@ export default { density: "regular", collapseAll: false, disableAll: false, + isQuiet: false, + hasNoInlinePadding: 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"], }, @@ -78,7 +82,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, }, ], [ @@ -114,23 +118,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.", ], }), }, @@ -142,24 +134,11 @@ 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.", - } - )}`, - ], - }), - }, - ] ]); +/** + * The default accordion displays at medium size with a regular density. + */ export const Default = AccordionGroup.bind({}); Default.args = { items: content, @@ -180,6 +159,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 +172,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 +186,56 @@ Spacious.args = { Spacious.parameters = { chromatic: { disableSnapshot: true }, }; -Spacious.storyName = "Density - Spacious"; +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 + * 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 }, +}; + +/** + * The optional no inline padding style for accordion. This sets no overall horizontal padding on either side of the component + * (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion----noInlinePadding` class alongside the + * parent `spectrum-Accordion` class. + */ +export const NoInlinePadding = Template.bind({}); +NoInlinePadding.tags = ["!dev"]; +NoInlinePadding.args = { + items: content, + hasNoInlinePadding: true, +}; +NoInlinePadding.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. + */ export const Sizing = (args, context) => Sizes({ Template, withBorder: false, diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 192400fe3fb..74bee317592 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -1,17 +1,156 @@ -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: "No Inline Padding", + items: testsContent, + hasNoInlinePadding: true, customStyles: { maxInlineSize: "500px", }, }, { testHeading: "Compact", + items: testsContent, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, density: "compact", collapseAll: true, customStyles: { @@ -21,6 +160,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 +170,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 +202,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 79fc3648bf3..11930316425 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,25 +41,33 @@ export const AccordionItem = ({

- ${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} +

- +
({ ...a, [c]: true }), {}), })}" id=${ifDefined(id)} diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 3b4f63996b8..819a2b1b560 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -12,16 +12,17 @@ ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover", ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch", + ".spectrum-Menu .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch", ".spectrum-Menu .spectrum-Menu-itemIcon", ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", - ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)", + ".spectrum-Menu .spectrum-Menu-linkout", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", @@ -60,10 +61,10 @@ ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-disabled", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading", ".spectrum-Menu-item.is-disabled:hover", @@ -72,15 +73,17 @@ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item.is-focused", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item.is-focus-visible", + ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:active", + ".spectrum-Menu-item:active .spectrum-Menu-linkout", ".spectrum-Menu-item:active > .spectrum-Menu-checkmark", ".spectrum-Menu-item:active > .spectrum-Menu-chevron", ".spectrum-Menu-item:active > .spectrum-Menu-itemDescription", @@ -88,16 +91,26 @@ ".spectrum-Menu-item:active > .spectrum-Menu-itemLabel", ".spectrum-Menu-item:active > .spectrum-Menu-itemValue", ".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item:focus", - ".spectrum-Menu-item:focus > .spectrum-Menu-checkmark", - ".spectrum-Menu-item:focus > .spectrum-Menu-chevron", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemValue", - ".spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:focus-visible", + ".spectrum-Menu-item:focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemActions", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) .spectrum-Menu-itemThumbnail", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription", ".spectrum-Menu-item:hover", + ".spectrum-Menu-item:hover .spectrum-Menu-linkout", ".spectrum-Menu-item:hover > .spectrum-Menu-checkmark", ".spectrum-Menu-item:hover > .spectrum-Menu-chevron", ".spectrum-Menu-item:hover > .spectrum-Menu-itemDescription", @@ -110,11 +123,12 @@ ".spectrum-Menu-itemLabel", ".spectrum-Menu-itemLabel--truncate", ".spectrum-Menu-itemSelection", + ".spectrum-Menu-itemThumbnail", ".spectrum-Menu-itemValue", - ".spectrum-Menu-item[aria-disabled=\"true\"]", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel", + ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover", @@ -123,6 +137,7 @@ ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading", + ".spectrum-Menu-sectionDescription", ".spectrum-Menu-sectionHeading", ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", @@ -131,11 +146,9 @@ ".spectrum-Menu.spectrum-Menu--sizeL", ".spectrum-Menu.spectrum-Menu--sizeS", ".spectrum-Menu.spectrum-Menu--sizeXL", - ".spectrum-Menu:dir(rtl)", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu", "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" ], "modifiers": [ @@ -166,6 +179,7 @@ "--mod-menu-item-checkmark-height", "--mod-menu-item-checkmark-width", "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", + "--mod-menu-item-corner-radius", "--mod-menu-item-description-color-default", "--mod-menu-item-description-color-disabled", "--mod-menu-item-description-color-down", @@ -195,17 +209,30 @@ "--mod-menu-item-label-text-to-visual", "--mod-menu-item-label-to-description-spacing", "--mod-menu-item-label-to-value-area-min-spacing", + "--mod-menu-item-linkout-icon-height", + "--mod-menu-item-linkout-icon-width", "--mod-menu-item-min-height", "--mod-menu-item-selectable-edge-to-text-not-selected", "--mod-menu-item-text-to-control", + "--mod-menu-item-thumbnail-height", + "--mod-menu-item-thumbnail-opacity-disabled", + "--mod-menu-item-thumbnail-to-label", + "--mod-menu-item-thumbnail-width", "--mod-menu-item-top-edge-to-text", "--mod-menu-item-top-to-action", "--mod-menu-item-top-to-checkbox", "--mod-menu-item-top-to-checkmark", + "--mod-menu-item-top-to-thumbnail", + "--mod-menu-item-top-to-workflow-icon", "--mod-menu-item-value-color-default", "--mod-menu-item-value-color-down", "--mod-menu-item-value-color-focus", "--mod-menu-item-value-color-hover", + "--mod-menu-section-description-color", + "--mod-menu-section-description-font-size", + "--mod-menu-section-description-font-weight", + "--mod-menu-section-description-line-height", + "--mod-menu-section-description-line-height-cjk", "--mod-menu-section-divider-margin-block", "--mod-menu-section-header-bottom-edge-to-text", "--mod-menu-section-header-color", @@ -214,6 +241,7 @@ "--mod-menu-section-header-line-height", "--mod-menu-section-header-line-height-cjk", "--mod-menu-section-header-min-width", + "--mod-menu-section-header-to-description", "--mod-menu-section-header-top-edge-to-text" ], "component": [ @@ -234,18 +262,12 @@ "--spectrum-menu-item-background-color-default", "--spectrum-menu-item-background-color-down", "--spectrum-menu-item-background-color-hover", - "--spectrum-menu-item-background-color-key-focus", + "--spectrum-menu-item-background-color-keyboard-focus", "--spectrum-menu-item-bottom-edge-to-text", "--spectrum-menu-item-checkmark-height", - "--spectrum-menu-item-checkmark-height-extra-large", - "--spectrum-menu-item-checkmark-height-large", - "--spectrum-menu-item-checkmark-height-medium", - "--spectrum-menu-item-checkmark-height-small", "--spectrum-menu-item-checkmark-width", - "--spectrum-menu-item-checkmark-width-extra-large", - "--spectrum-menu-item-checkmark-width-large", - "--spectrum-menu-item-checkmark-width-medium", - "--spectrum-menu-item-checkmark-width-small", + "--spectrum-menu-item-chevron-height", + "--spectrum-menu-item-chevron-width", "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start", "--spectrum-menu-item-corner-radius", "--spectrum-menu-item-description-color-default", @@ -256,14 +278,12 @@ "--spectrum-menu-item-description-font-size", "--spectrum-menu-item-description-line-height", "--spectrum-menu-item-description-line-height-cjk", - "--spectrum-menu-item-focus-indicator-border-width", "--spectrum-menu-item-focus-indicator-color", "--spectrum-menu-item-focus-indicator-color-default", - "--spectrum-menu-item-focus-indicator-direction-scalar", "--spectrum-menu-item-focus-indicator-offset", "--spectrum-menu-item-focus-indicator-outline-style", - "--spectrum-menu-item-focus-indicator-shadow", "--spectrum-menu-item-focus-indicator-width", + "--spectrum-menu-item-focus-margin", "--spectrum-menu-item-icon-height", "--spectrum-menu-item-icon-width", "--spectrum-menu-item-label-content-color-default", @@ -282,8 +302,13 @@ "--spectrum-menu-item-label-line-height-cjk", "--spectrum-menu-item-label-text-to-visual", "--spectrum-menu-item-label-to-description", - "--spectrum-menu-item-label-to-description-spacing", + "--spectrum-menu-item-label-to-description-extra-large", + "--spectrum-menu-item-label-to-description-large", + "--spectrum-menu-item-label-to-description-medium", + "--spectrum-menu-item-label-to-description-small", "--spectrum-menu-item-label-to-value-area-min-spacing", + "--spectrum-menu-item-linkout-icon-height", + "--spectrum-menu-item-linkout-icon-width", "--spectrum-menu-item-min-height", "--spectrum-menu-item-section-divider-height", "--spectrum-menu-item-selectable-edge-to-text-not-selected", @@ -291,8 +316,11 @@ "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", - "--spectrum-menu-item-spacing-multiplier", "--spectrum-menu-item-text-to-control", + "--spectrum-menu-item-thumbnail-height", + "--spectrum-menu-item-thumbnail-opacity-disabled", + "--spectrum-menu-item-thumbnail-to-label", + "--spectrum-menu-item-thumbnail-width", "--spectrum-menu-item-top-edge-to-text", "--spectrum-menu-item-top-to-action", "--spectrum-menu-item-top-to-checkbox", @@ -301,24 +329,46 @@ "--spectrum-menu-item-top-to-selected-icon-large", "--spectrum-menu-item-top-to-selected-icon-medium", "--spectrum-menu-item-top-to-selected-icon-small", + "--spectrum-menu-item-top-to-thumbnail", + "--spectrum-menu-item-top-to-thumbnail-extra-large", + "--spectrum-menu-item-top-to-thumbnail-large", + "--spectrum-menu-item-top-to-thumbnail-medium", + "--spectrum-menu-item-top-to-thumbnail-small", + "--spectrum-menu-item-top-to-workflow-icon", "--spectrum-menu-item-value-color-default", "--spectrum-menu-item-value-color-down", "--spectrum-menu-item-value-color-focus", "--spectrum-menu-item-value-color-hover", + "--spectrum-menu-section-description-color", + "--spectrum-menu-section-description-font-size", + "--spectrum-menu-section-description-font-weight", + "--spectrum-menu-section-description-line-height", + "--spectrum-menu-section-description-line-height-cjk", "--spectrum-menu-section-header-color", "--spectrum-menu-section-header-font-size", "--spectrum-menu-section-header-font-weight", "--spectrum-menu-section-header-line-height", "--spectrum-menu-section-header-line-height-cjk", - "--spectrum-menu-section-header-min-width" + "--spectrum-menu-section-header-min-width", + "--spectrum-menu-section-header-to-description", + "--spectrum-menu-section-header-to-description-extra-large", + "--spectrum-menu-section-header-to-description-large", + "--spectrum-menu-section-header-to-description-medium", + "--spectrum-menu-section-header-to-description-small" ], "global": [ "--spectrum-accent-color-1000", "--spectrum-accent-color-1100", "--spectrum-accent-color-900", - "--spectrum-blue-800", "--spectrum-bold-font-weight", - "--spectrum-border-width-200", + "--spectrum-checkmark-icon-size-100", + "--spectrum-checkmark-icon-size-200", + "--spectrum-checkmark-icon-size-300", + "--spectrum-checkmark-icon-size-75", + "--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-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -332,24 +382,38 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-400", + "--spectrum-corner-radius-500", + "--spectrum-corner-radius-600", + "--spectrum-corner-radius-700", "--spectrum-disabled-content-color", "--spectrum-divider-thickness-medium", "--spectrum-divider-thickness-small", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-50", "--spectrum-font-size-75", - "--spectrum-gray-1000-rgb", "--spectrum-gray-900", "--spectrum-line-height-100", + "--spectrum-link-out-icon-size-100", + "--spectrum-link-out-icon-size-200", + "--spectrum-link-out-icon-size-75", "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "--spectrum-navigational-indicator-top-to-back-icon-large", "--spectrum-navigational-indicator-top-to-back-icon-medium", @@ -362,6 +426,7 @@ "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", "--spectrum-neutral-subdued-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-spacing-100", "--spectrum-spacing-50", "--spectrum-text-to-control-100", @@ -371,8 +436,12 @@ "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-400", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-200-opacity", + "--spectrum-thumbnail-size-500", + "--spectrum-thumbnail-size-700", + "--spectrum-thumbnail-size-800", + "--spectrum-thumbnail-size-900", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index e3affcc83cb..5b40e74c96e 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -4,8 +4,6 @@ ".spectrum-Swatch", ".spectrum-Swatch .spectrum-Swatch-disabledIcon", ".spectrum-Swatch .spectrum-Swatch-fill", - ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before", - ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before", ".spectrum-Swatch--rectangle", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", @@ -22,69 +20,86 @@ ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", ".spectrum-Swatch--sizeL", - ".spectrum-Swatch--sizeM", + ".spectrum-Swatch--sizeS", ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", ".spectrum-Swatch-disabledIcon path:last-child", ".spectrum-Swatch-fill", ".spectrum-Swatch-fill:before", + ".spectrum-Swatch-icon", ".spectrum-Swatch-image", - ".spectrum-Swatch-mixedValueIcon", + ".spectrum-Swatch.is-addSwatch", + ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill", + ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon", + ".spectrum-Swatch.is-addSwatch.is-keyboardFocused", + ".spectrum-Swatch.is-addSwatch:active", + ".spectrum-Swatch.is-addSwatch:focus-visible", + ".spectrum-Swatch.is-addSwatch:hover", ".spectrum-Swatch.is-disabled", ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon", ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before", + ".spectrum-Swatch.is-keyboardFocused", + ".spectrum-Swatch.is-mixedValue", ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill", - ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon", - ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill", - ".spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after", - ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill:after", + ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon", + ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after", + ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill", + ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after", ".spectrum-Swatch.is-selected", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", - ".spectrum-Swatch:after", ".spectrum-Swatch:before", - ".spectrum-Swatch:focus-visible:after", + ".spectrum-Swatch:focus-visible", ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], "modifiers": [ + "--mod-add-button-background", + "--mod-add-button-background-down", + "--mod-add-button-background-hover", + "--mod-add-button-background-keyboard-focus", "--mod-animation-duration-100", + "--mod-corner-radius-full", + "--mod-mixed-button-background", + "--mod-swatch-border", "--mod-swatch-border-color", - "--mod-swatch-border-color-light", "--mod-swatch-border-color-selected", + "--mod-swatch-border-opacity", "--mod-swatch-border-radius", "--mod-swatch-border-thickness", "--mod-swatch-border-thickness-selected", "--mod-swatch-disabled-icon-color", "--mod-swatch-disabled-icon-size", - "--mod-swatch-focus-indicator-border-radius", "--mod-swatch-focus-indicator-color", "--mod-swatch-focus-indicator-gap", "--mod-swatch-focus-indicator-thickness", "--mod-swatch-icon-border-color", + "--mod-swatch-icon-color", "--mod-swatch-inner-border-color-selected", "--mod-swatch-size", "--mod-swatch-slash-icon-color", "--mod-swatch-slash-thickness" ], "component": [ + "--spectrum-swatch-border", "--spectrum-swatch-border-color", - "--spectrum-swatch-border-color-light", "--spectrum-swatch-border-color-selected", + "--spectrum-swatch-border-opacity", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", "--spectrum-swatch-border-thickness-selected", - "--spectrum-swatch-dash-icon-color", + "--spectrum-swatch-disabled-icon-border-opacity", "--spectrum-swatch-disabled-icon-color", "--spectrum-swatch-disabled-icon-size", - "--spectrum-swatch-focus-indicator-border-radius", "--spectrum-swatch-focus-indicator-color", "--spectrum-swatch-focus-indicator-gap", "--spectrum-swatch-focus-indicator-thickness", "--spectrum-swatch-icon-border-color", + "--spectrum-swatch-icon-color", "--spectrum-swatch-inner-border-color-selected", + "--spectrum-swatch-rectangle-width-multiplier", "--spectrum-swatch-size", "--spectrum-swatch-size-extra-small", "--spectrum-swatch-size-large", @@ -98,20 +113,28 @@ "--spectrum-swatch-slash-thickness-small" ], "global": [ + "--spectrum-add-button-background", + "--spectrum-add-button-background-down", + "--spectrum-add-button-background-hover", + "--spectrum-add-button-background-keyboard-focus", "--spectrum-animation-duration-100", "--spectrum-border-width-100", "--spectrum-border-width-200", "--spectrum-corner-radius-100", + "--spectrum-corner-radius-full", + "--spectrum-corner-radius-none", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", + "--spectrum-gray-100", + "--spectrum-gray-1000", + "--spectrum-gray-200", "--spectrum-gray-25", - "--spectrum-gray-800", - "--spectrum-gray-900", + "--spectrum-mixed-button-background", + "--spectrum-negative-visual-color", + "--spectrum-neutral-content-color-default", "--spectrum-picked-color", - "--spectrum-red-900", "--spectrum-white", - "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" @@ -123,6 +146,7 @@ "--highcontrast-swatch-border-color-selected", "--highcontrast-swatch-disabled-icon-color", "--highcontrast-swatch-fill-foreground-color", - "--highcontrast-swatch-focus-indicator-color" + "--highcontrast-swatch-focus-indicator-color", + "--highcontrast-swatch-icon-color" ] } diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 24e3423ca5d..73ac1e248a6 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -3,19 +3,19 @@ "selectors": [ ".spectrum-SwatchGroup", ".spectrum-SwatchGroup--compact", - ".spectrum-SwatchGroup--spacious" + ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)", + ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)" ], - "modifiers": [ - "--mod-swatchgroup-spacing-compact", - "--mod-swatchgroup-spacing-regular", - "--mod-swatchgroup-spacing-spacious" + "modifiers": ["--mod-swatchgroup-spacing"], + "component": [ + "--spectrum-swatch-group-spacing-spacious", + "--spectrum-swatchgroup-spacing" ], - "component": ["--spectrum-swatchgroup-spacing"], "global": [ "--spectrum-spacing-100", "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "passthroughs": [], + "passthroughs": ["--mod-swatch-border-opacity"], "high-contrast": [] }