Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(divider): S2 migration #3557

Open
wants to merge 1 commit into
base: spectrum-two
Choose a base branch
from
+84 −72
Open

feat(divider): S2 migration #3557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions .changeset/slow-eyes-lay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
21 changes: 9 additions & 12 deletions components/divider/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,30 @@
".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",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This drops deprecated color styles in favor of the tokens specified by design — I'm not sure if we should alias the raw color tokens to our own and — if so — what naming scheme to use? Doing so would allow us to provide mods for them, but I'm not sure if that's necessary.

"--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",
"--mod-divider-vertical-margin"
],
"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",
Expand Down
53 changes: 20 additions & 33 deletions components/divider/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 {
Expand All @@ -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);
}
}

Expand All @@ -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;
}
}
28 changes: 15 additions & 13 deletions components/divider/stories/divider.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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.
*/
Expand All @@ -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 },
Expand All @@ -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 = {
Expand All @@ -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 = {
Expand Down
3 changes: 0 additions & 3 deletions components/divider/stories/divider.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
13 changes: 2 additions & 11 deletions components/divider/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ export const Template = ({
tag = "hr",
staticColor,
vertical = false,
minDimensionValues,
customClasses = [],
customStyles = {},
} = {}) => {
Expand All @@ -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"
/>`;
}
Expand All @@ -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"
></div>`;
};
Loading