diff --git a/.changeset/slow-eyes-lay.md b/.changeset/slow-eyes-lay.md new file mode 100644 index 0000000000..f9db30ddad --- /dev/null +++ b/.changeset/slow-eyes-lay.md @@ -0,0 +1,38 @@ +--- +"@spectrum-css/divider": major +--- + +# S2 divider migration + +This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design spec. + +### New properties + +```css +--spectrum-divider-horizontal-minimum-width +--spectrum-divider-vertical-minimum-height +``` + +### New mods + +```css +--mod-divider-inline-minimum-size +--mod-divider-block-minimum-size +``` + +### Removed mods + +```css +--mod-divider-background-color-large-static-black +--mod-divider-background-color-large-static-white +--mod-divider-background-color-medium-static-black +--mod-divider-background-color-medium-static-white +--mod-divider-background-color-small-static-black +--mod-divider-background-color-small-static-white +``` + +### Additions + +This adds new minimum width and height tokens for the divider and the `minDimensionValues` arg has been removed in favor of these tokens and the rules with which they're applied. + +The default size for the Storybook control has been changed to `medium` (the new default size for the component). All sizes are now displayed for the static color variants in the docs. diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index 15fa0043a7..94ce19f83f 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -6,20 +6,15 @@ ".spectrum-Divider--sizeS", ".spectrum-Divider--staticBlack", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", ".spectrum-Divider--staticWhite", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", - ".spectrum-Divider--vertical" + ".spectrum-Divider--vertical", + ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], "modifiers": [ "--mod-divider-background-color", - "--mod-divider-background-color-large-static-black", - "--mod-divider-background-color-large-static-white", - "--mod-divider-background-color-medium-static-black", - "--mod-divider-background-color-medium-static-white", - "--mod-divider-background-color-small-static-black", - "--mod-divider-background-color-small-static-white", + "--mod-divider-block-minimum-size", + "--mod-divider-inline-minimum-size", "--mod-divider-thickness", "--mod-divider-vertical-align", "--mod-divider-vertical-height", @@ -27,12 +22,14 @@ ], "component": [ "--spectrum-divider-background-color", - "--spectrum-divider-background-color-static-black", - "--spectrum-divider-background-color-static-white", + "--spectrum-divider-block-minimum-size", + "--spectrum-divider-horizontal-minimum-width", + "--spectrum-divider-inline-minimum-size", "--spectrum-divider-thickness", "--spectrum-divider-thickness-large", "--spectrum-divider-thickness-medium", - "--spectrum-divider-thickness-small" + "--spectrum-divider-thickness-small", + "--spectrum-divider-vertical-minimum-height" ], "global": [ "--spectrum-gray-200", diff --git a/components/divider/index.css b/components/divider/index.css index c1095df1c0..b793b6c86a 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,24 +11,13 @@ * governing permissions and limitations under the License. */ -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Divider { - --highcontrast-divider-background-color: CanvasText; - } -} - .spectrum-Divider { - /* background colors */ --spectrum-divider-background-color: var(--spectrum-gray-200); - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + + --spectrum-divider-inline-minimum-size: var(--spectrum-divider-horizontal-minimum-width); + --spectrum-divider-block-minimum-size: var(--spectrum-divider-vertical-minimum-height); } .spectrum-Divider--sizeS { @@ -42,33 +31,19 @@ /* static white variant colors */ .spectrum-Divider--staticWhite { - /** @deprecated --mod-divider-background-color-medium-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-white-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-white-800); } } /* static black variant colors */ .spectrum-Divider--staticBlack { - /** @deprecated --mod-divider-background-color-medium-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-black-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-black-800); } } @@ -84,12 +59,24 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color))); + + &:not(&.spectrum-Divider--vertical) { + min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size)); + } } /* vertical dividers */ .spectrum-Divider--vertical { inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + min-block-size: var(--mod-divider-block-minimum-size, var(--spectrum-divider-block-minimum-size)); margin-block: var(--mod-divider-vertical-margin, 0); block-size: var(--mod-divider-vertical-height, 100%); align-self: var(--mod-divider-vertical-align, flex-start); } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Divider { + --highcontrast-divider-background-color: CanvasText; + } +} diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 306e5c0c45..84f65e83bd 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -25,13 +25,11 @@ export default { control: "boolean", }, tag: { table: { disable: true } }, - minDimensionValues: {table: { disable: true }}, }, args: { rootClass: "spectrum-Divider", - size: "s", + size: "m", vertical: false, - minDimensionValues: true, }, parameters: { design: { @@ -44,16 +42,14 @@ export default { }; /** - * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. + * By default, dividers are horizontal and should be used for separating content vertically. The medium divider is the default size. */ export const Default = DividerGroup.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // /** - * To divide similar components such as table rows, action button groups, and components within a panel, use the default, small divider. - * - * The medium divider is used for dividing subsections on a page, or to separate different groupings of components such as panels, rails, etc. + * To divide similar components such as table rows, action button groups, and components within a panel, use the default, medium divider. * * Only use the large divider for page titles or section titles. */ @@ -63,9 +59,6 @@ export const Sizing = (args, context) => Sizes({ withBorder: false, ...args, }, context); -Sizing.args = { - minDimensionValues: true, -}; Sizing.tags = ["!dev"]; Sizing.parameters = { chromatic: { disableSnapshot: true }, @@ -84,13 +77,17 @@ VerticalSizing.storyName = "Vertical"; VerticalSizing.tags = ["!dev"]; VerticalSizing.args = { vertical: true, - minDimensionValues: true, }; VerticalSizing.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticWhiteGroup = Default.bind({}); +export const StaticWhiteGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticWhiteGroup.storyName = "Static white"; StaticWhiteGroup.tags = ["!dev"]; StaticWhiteGroup.args = { @@ -100,7 +97,12 @@ StaticWhiteGroup.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticBlackGroup = Default.bind({}); +export const StaticBlackGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticBlackGroup.storyName = "Static black"; StaticBlackGroup.tags = ["!dev"]; StaticBlackGroup.args = { diff --git a/components/divider/stories/divider.test.js b/components/divider/stories/divider.test.js index a670bfd687..c4b708206d 100644 --- a/components/divider/stories/divider.test.js +++ b/components/divider/stories/divider.test.js @@ -7,18 +7,15 @@ export const DividerGroup = Variants({ { testHeading: "Default", vertical: false, - minDimensionValues: true, }, { testHeading: "Non-HR", tag: "div", vertical: false, - minDimensionValues: true, }, { testHeading: "Vertical", vertical: true, - minDimensionValues: true, }, { testHeading: "Static black", diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index cd3d9bc1a6..149a962667 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -11,7 +11,6 @@ export const Template = ({ tag = "hr", staticColor, vertical = false, - minDimensionValues, customClasses = [], customStyles = {}, } = {}) => { @@ -25,11 +24,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" />`; } @@ -43,11 +38,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" >`; };