No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

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:

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:

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.