Skip to content

Commit 081187b

Browse files
Melissa Thompsonaramos-adobe
Melissa Thompson
authored and
aramos-adobe
committed
feat(downstate): docs + implementation for example components (#2520)
* feat(downstate): docs + implementation for example components * docs: update mdx * docs: reorg, stories live within foundations * docs: decorator for down state dimension tokens * docs: fix mdx hierarchy console error * fix: small iconOnly button gets min perspective * docs: use markdown, update language * fix: disabled, readonly checkbox doesnt have down state * chore(button,checkbox): update package versions
1 parent 65d2543 commit 081187b

File tree

11 files changed

+180
-0
lines changed

11 files changed

+180
-0
lines changed

‎.storybook/decorators/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14+
<<<<<<< HEAD
1415
export { withArgEvents } from "./arg-events.js";
1516
export { withContextWrapper } from "./context.js";
1617
export { withDownStateDimensionCapture } from "./down-state.js";
@@ -19,6 +20,11 @@ export { withLanguageWrapper } from "./language.js";
1920
export { withReducedMotionWrapper } from "./reduce-motion.js";
2021
export { withTestingPreviewWrapper } from "./testing-preview.js";
2122
export { withTextDirectionWrapper } from "./text-direction.js";
23+
=======
24+
export { withContextWrapper } from "./contextsWrapper.js";
25+
export { withDownStateDimensionCapture } from "./withDownStateDimensionCapture.js";
26+
export { withTestingPreviewWrapper } from "./withTestingPreviewWrapper.js";
27+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
2228

2329
/* This is exported but must be opted-into on a component-by-component basis */
2430
export { withUnderlayWrapper } from "./underlay.js";

‎.storybook/decorators/withDownStateDimensionCapture.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const withDownStateDimensionCapture = (selector) => (Story, context) => {
2+
const captureDownStateDimensions = () => {
3+
const components = document.querySelectorAll(selector);
4+
components.forEach((component) => {
5+
const { width, height } = component.getBoundingClientRect();
6+
component.style.setProperty('--spectrum-downstate-width', `${width}px`);
7+
component.style.setProperty('--spectrum-downstate-height', `${height}px`);
8+
});
9+
};
10+
11+
document.addEventListener("DOMContentLoaded", () => {
12+
// Wait to make sure the story is fully rendered (otherwise width/height can be wrong)
13+
setTimeout(() => {
14+
captureDownStateDimensions();
15+
}, 100);
16+
});
17+
18+
return Story(context);
19+
};

‎.storybook/foundations/down-state/button-down-state.stories.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
<<<<<<< HEAD
12
import { Template } from "@spectrum-css/button/stories/template.js";
23

34
export default {
45
title: "Down state",
6+
=======
7+
import { Template } from "../../../components/button/stories/template";
8+
9+
export default {
10+
title: "Foundations/Down state",
11+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
512
description:
613
"Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
714
component: "Button",
@@ -10,10 +17,22 @@ export default {
1017
},
1118
parameters: {
1219
actions: {
20+
<<<<<<< HEAD
1321
handles: ["click .spectrum-Button"],
1422
},
1523
},
1624
tags: ["!dev"],
25+
=======
26+
handles: ['click .spectrum-Button'],
27+
},
28+
status: {
29+
type: process.env.MIGRATED_PACKAGES.includes("button")
30+
? "migrated"
31+
: undefined,
32+
},
33+
},
34+
tags: ['foundation'],
35+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
1736
};
1837

1938
export const ButtonDownState = Template.bind({});

‎.storybook/foundations/down-state/checkbox-down-state.stories.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1+
<<<<<<< HEAD
12
import { Template } from "@spectrum-css/checkbox/stories/template.js";
23

34
export default {
45
title: "Down state",
6+
=======
7+
import { Template } from "../../../components/checkbox/stories/template";
8+
9+
export default {
10+
title: "Foundations/Down state",
11+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
512
description:
613
"Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.",
714
component: "Checkbox",
@@ -10,10 +17,22 @@ export default {
1017
},
1118
parameters: {
1219
actions: {
20+
<<<<<<< HEAD
1321
handles: ["click input[type=\"checkbox\"]"],
1422
},
1523
},
1624
tags: ["!dev"],
25+
=======
26+
handles: ['click input[type="checkbox"]'],
27+
},
28+
status: {
29+
type: process.env.MIGRATED_PACKAGES.includes("checkbox")
30+
? "migrated"
31+
: undefined,
32+
},
33+
},
34+
tags: ['foundation'],
35+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
1736
};
1837

1938
export const CheckboxDownState = Template.bind({});

‎.storybook/foundations/down-state/down-state.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { Meta, Story } from '@storybook/blocks';
22
import * as Checkbox from './checkbox-down-state.stories.js';
33
import * as Button from './button-down-state.stories.js';
44

5+
<<<<<<< HEAD
56
<Meta title="Down state" />
7+
=======
8+
<Meta title="Foundations/Down state" />
9+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
610
711
# Down state
812

‎.storybook/main.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const components = fs.readdirSync(componentDir, { withFileTypes: true })
1010

1111
export default {
1212
stories: [
13+
<<<<<<< HEAD
1314
{
1415
directory: "../components",
1516
files: "*/stories/*.@(stories.js|mdx)",
@@ -30,6 +31,15 @@ export default {
3031
files: "**/*.@(stories.js|mdx)",
3132
titlePrefix: "Deprecated",
3233
},
34+
=======
35+
"../components/*/stories/*.stories.js",
36+
"../components/*/stories/*.mdx",
37+
"./guides/*.mdx",
38+
"./foundations/*/*.mdx",
39+
"./foundations/*/*.stories.js",
40+
"./deprecated/*/*.stories.js",
41+
"./deprecated/*/*.mdx",
42+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
3343
],
3444
rootDir: "../",
3545
staticDirs: ["./assets", "./assets/images"],

‎.storybook/manager.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ addons.setConfig({
6767
}),
6868
sidebar: {
6969
showRoots: false,
70+
<<<<<<< HEAD
7071
renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚",
72+
=======
73+
filters: {
74+
patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')),
75+
}
76+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
7177
},
7278
});

‎.storybook/preview.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
import {
23
withActions,
34
withArgEvents,
@@ -12,6 +13,19 @@ import { FontLoader, IconLoader } from "./loaders";
1213
import modes from "./modes";
1314
import DocumentationTemplate from "./templates/DocumentationTemplate.mdx";
1415
import { argTypes, globalTypes } from "./types";
16+
=======
17+
18+
import DocumentationTemplate from "./DocumentationTemplate.mdx";
19+
20+
import { withActions } from "@storybook/addon-actions/decorator";
21+
import {
22+
withContextWrapper,
23+
withLanguageWrapper,
24+
withReducedMotionWrapper,
25+
withTestingPreviewWrapper,
26+
withTextDirectionWrapper,
27+
} from "./decorators/index.js";
28+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
1529

1630
import "./assets/base.css";
1731

@@ -29,6 +43,7 @@ export const parameters = {
2943
actions: { argTypesRegex: "^on.*" },
3044
options: {
3145
storySort: {
46+
<<<<<<< HEAD
3247
method: "alphabetical-by-kind",
3348
order: [
3449
"Guides",
@@ -41,6 +56,10 @@ export const parameters = {
4156
["*", ["Docs", "Default", "*"]],
4257
"*",
4358
],
59+
=======
60+
method: "alphabetical",
61+
order: ["Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], "Foundations", "Components", ["Docs", "Default", "*"], "*"],
62+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
4463
includeNames: true,
4564
},
4665
},
@@ -69,8 +88,17 @@ export const parameters = {
6988
},
7089
},
7190
docs: {
91+
<<<<<<< HEAD
7292
page: DocumentationTemplate,
7393
story: { inline: true },
94+
=======
95+
autodocs: true,
96+
page: DocumentationTemplate,
97+
story: {
98+
inline: true,
99+
iframeHeight: "200px",
100+
},
101+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
74102
source: {
75103
dark: false,
76104
excludeDecorators: true,

‎components/button/index.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
--spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
2121
--spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
2222

23+
<<<<<<< HEAD
2324
--spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
2425
--spectrum-button-height: var(--spectrum-component-height-100);
2526

@@ -47,6 +48,14 @@
4748
&.spectrum-Button--iconOnly {
4849
--spectrum-button-border-radius: var(--spectrum-corner-radius-full);
4950
}
51+
=======
52+
<<<<<<< HEAD
53+
--mod-progress-circle-position: absolute;
54+
=======
55+
/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
56+
--spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
57+
>>>>>>> 5a532e656 (feat(downstate): docs + implementation for example components (#2520))
58+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
5059
}
5160

5261
.spectrum-Button--sizeS {
@@ -64,9 +73,42 @@
6473
--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
6574
--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
6675

76+
<<<<<<< HEAD
6777
&.spectrum-Button--iconOnly {
6878
--spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down);
6979
}
80+
=======
81+
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width));
82+
--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
83+
--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
84+
--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75);
85+
--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
86+
--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
87+
--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
88+
--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
89+
90+
&.spectrum-Button--iconOnly {
91+
--spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down);
92+
}
93+
}
94+
95+
.spectrum-Button--sizeM {
96+
--spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier));
97+
98+
--spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100);
99+
--spectrum-button-height: var(--spectrum-component-height-100);
100+
101+
--spectrum-button-font-size: var(--spectrum-font-size-100);
102+
103+
--spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width));
104+
--spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
105+
--spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
106+
--spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
107+
--spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
108+
--spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
109+
--spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
110+
--spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
111+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
70112
}
71113

72114
.spectrum-Button--sizeL {
@@ -358,8 +400,22 @@
358400
margin-inline-end: var(--mod-button-margin-right);
359401
margin-inline-start: var(--mod-button-margin-left);
360402

403+
<<<<<<< HEAD
361404
.spectrum-Icon {
362405
/* Any block-size difference between the intended workflow icon size and actual icon used.
406+
=======
407+
&:hover,
408+
&:active {
409+
box-shadow: none;
410+
}
411+
412+
&:active {
413+
transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
414+
}
415+
416+
.spectrum-Icon {
417+
/* Any block-size difference between the intended workflow icon size and actual icon used.
418+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
363419
Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
364420
--spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
365421

‎components/button/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"name": "@spectrum-css/button",
3+
<<<<<<< HEAD
34
"version": "14.0.0-next.7",
5+
=======
6+
"version": "14.0.0-next.2",
7+
>>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
48
"description": "The Spectrum CSS button component",
59
"license": "Apache-2.0",
610
"author": "Adobe",

0 commit comments

Comments
 (0)