-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'spectrum-two' into jawinn/css-616-s2-button
- Loading branch information
Showing
250 changed files
with
3,799 additions
and
3,338 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| export const withDownStateDimensionCapture = (selector) => (Story, context) => { | ||
| const captureDownStateDimensions = () => { | ||
| const components = document.querySelectorAll(selector); | ||
| components.forEach((component) => { | ||
| const { width, height } = component.getBoundingClientRect(); | ||
| component.style.setProperty('--spectrum-downstate-width', `${width}px`); | ||
| component.style.setProperty('--spectrum-downstate-height', `${height}px`); | ||
| }); | ||
| }; | ||
|
|
||
| document.addEventListener("DOMContentLoaded", () => { | ||
| // Wait to make sure the story is fully rendered (otherwise width/height can be wrong) | ||
| setTimeout(() => { | ||
| captureDownStateDimensions(); | ||
| }, 100); | ||
| }); | ||
|
|
||
| return Story(context); | ||
| }; |
32 changes: 32 additions & 0 deletions
32
.storybook/foundations/down-state/button-down-state.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Template } from "../../../components/button/stories/template"; | ||
|
|
||
| export default { | ||
| title: "Foundations/Down state", | ||
| description: | ||
| "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.", | ||
| component: "Button", | ||
| args: { | ||
| rootClass: "spectrum-Button", | ||
| }, | ||
| parameters: { | ||
| actions: { | ||
| handles: ['click .spectrum-Button'], | ||
| }, | ||
| status: { | ||
| type: process.env.MIGRATED_PACKAGES.includes("button") | ||
| ? "migrated" | ||
| : undefined, | ||
| }, | ||
| }, | ||
| tags: ['foundation'], | ||
| }; | ||
|
|
||
| export const ButtonDownState = Template.bind({}); | ||
| ButtonDownState.args = { | ||
| label: "Edit", | ||
| variant: "accent", | ||
| customStyles: { | ||
| "--spectrum-downstate-width": "72px", | ||
| "--spectrum-downstate-height": "32px" | ||
| } | ||
| }; |
27 changes: 27 additions & 0 deletions
27
.storybook/foundations/down-state/checkbox-down-state.stories.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { Template } from "../../../components/checkbox/stories/template"; | ||
|
|
||
| export default { | ||
| title: "Foundations/Down state", | ||
| description: | ||
| "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", | ||
| component: "Checkbox", | ||
| args: { | ||
| rootClass: "spectrum-Checkbox", | ||
| }, | ||
| parameters: { | ||
| actions: { | ||
| handles: ['click input[type="checkbox"]'], | ||
| }, | ||
| status: { | ||
| type: process.env.MIGRATED_PACKAGES.includes("checkbox") | ||
| ? "migrated" | ||
| : undefined, | ||
| }, | ||
| }, | ||
| tags: ['foundation'], | ||
| }; | ||
|
|
||
| export const CheckboxDownState = Template.bind({}); | ||
| CheckboxDownState.args = { | ||
| label: "Checkbox", | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { Meta, Story } from '@storybook/blocks'; | ||
| import * as Checkbox from './checkbox-down-state.stories.js'; | ||
| import * as Button from './button-down-state.stories.js'; | ||
|
|
||
| <Meta title="Foundations/Down state" /> | ||
|
|
||
| # Down state | ||
|
|
||
| Down state is a Spectrum 2 feature that creates the illusion of components being pressed-in when active. This functionality is already included in Spectrum 2 components that require down state in this project. It is implemented with a CSS transform. The implementation depends on the size of the interactable element, as shown in the examples below. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Minimum perspective | ||
|
|
||
| For elements that have a width of 24px or less, the minimum perspective token is used to apply the down state. One example of a component that uses this token is the checkbox: | ||
|
|
||
| <Story of={Checkbox.CheckboxDownState} /> | ||
|
|
||
| In this case, we use the minimum perspective token: | ||
|
|
||
| ``` | ||
| transform: | ||
| perspective(var(--spectrum-component-size-minimum-perspective-down)) | ||
| translateZ(var(--spectrum-component-size-difference-down)); | ||
| ``` | ||
|
|
||
| ### Calculated perspective | ||
|
|
||
| For elements that have a width of greater than 24px, we need to use the component's width and height to apply the down state. One example of a component that uses this logic is the button: | ||
|
|
||
| <Story of={Button.ButtonDownState} /> | ||
|
|
||
| In this case, we use a max formula to calculate the perspective based on component width and height (this helps us account for components that may be very wide): | ||
|
|
||
| ``` | ||
| transform: | ||
| perspective(max( | ||
| var(--spectrum-downstate-height), | ||
| var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down) | ||
| )) | ||
| translateZ(var(--spectrum-component-size-difference-down)); | ||
| ``` | ||
|
|
||
| *Note that in this case, users are required to develop an implementation to determine the width and height of the component. Assign these values to the `--spectrum-downstate-width` and `--spectrum-downstate-height` custom properties in a `style` attribute on the HTML element to expose them for use in the CSS.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.