From 219696636c990e558a47ace60c15d8e3e05ca1af Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 18 Oct 2024 15:09:06 +0100 Subject: [PATCH] Add foundations:elevation to storybook (#66124) Co-authored-by: jameskoster Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo Co-authored-by: tyxla --- .../foundations/design-language/elevation.mdx | 87 ++++++++ .../static/elevation-examples.svg | 170 ++++++++++++++ .../design-language/static/elevation.svg | 208 ++++++++++++++++++ .../design-language/static/wp-logo@2x.png | Bin 0 -> 5395 bytes storybook/stories/tokens/elevation.mdx | 2 +- 5 files changed, 466 insertions(+), 1 deletion(-) create mode 100644 storybook/stories/foundations/design-language/elevation.mdx create mode 100644 storybook/stories/foundations/design-language/static/elevation-examples.svg create mode 100644 storybook/stories/foundations/design-language/static/elevation.svg create mode 100644 storybook/stories/foundations/design-language/static/wp-logo@2x.png diff --git a/storybook/stories/foundations/design-language/elevation.mdx b/storybook/stories/foundations/design-language/elevation.mdx new file mode 100644 index 00000000000000..11591568b3600c --- /dev/null +++ b/storybook/stories/foundations/design-language/elevation.mdx @@ -0,0 +1,87 @@ +import { Meta, Typeset } from '@storybook/addon-docs/blocks'; +import elevation from './static/elevation.svg'; +import elevationExamples from './static/elevation-examples.svg'; + + + +# Elevation + +{/* Leaving alt text empty since this image is presentational */} + + + +Elevation, through the use of shadows, visually indicates the layers where overlapping UI elements reside. Shadows create the illusion of depth, showing how one UI element is positioned above another on the z-axis. Elevation should be used to organize elements, establish a clear hierarchy, and draw focus to key components. + +In the WordPress Design System there are four levels of elevation correlating to specific uses: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElevationUsageExamples
Extra small + Applied to large sections and containers that group related content + and controls. These containers may shift or overlap other content + without causing too much visual disruption + Preview Frame, Content Frame
Small + Used for components that provide contextual feedback without being + overly intrusive. Small elevation is ideal for non-interruptive elements + that subtly surface additional information or actions. + Tooltips, Snackbars
Medium + Applied to components that offer additional actions to the user. This + elevation level helps differentiate actionable elements that appear in + context without requiring major focus shifts. + Menus, Command Palette
Large + Reserved for components that confirm actions or require decisions, large + elevation is used for more interruptive elements that demand user attention + to complete important tasks. + Modals
+ +## Accessibility considerations + +* Interactive Elements: Elevation can be an important visual cue to indicate which elements are interactive, +particularly for folks with monochromatic color blindness. Elevating buttons, handles, and other interactive +elements makes them stand out, helping users quickly identify where they can take action. +* Focus: Higher levels of elevation can be used to draw attention to components that require user interaction +or confirmation, such as modals, guides, and decision-based tasks, enhancing accessibility by reducing +cognitive load. + +## Examples + +The diagram below visually demonstrates the examples outlined in the table above. + +Diagram illustrating elevation levels + +1. Content frame and Preview frame +2. Snackbar +3. Menu +4. Modal + +## Tokens + +Use tokens to apply elevation in your work. Please refer to the [Tokens section](?path=/docs/tokens-elevation--page) to learn more. diff --git a/storybook/stories/foundations/design-language/static/elevation-examples.svg b/storybook/stories/foundations/design-language/static/elevation-examples.svg new file mode 100644 index 00000000000000..516313cbca4df3 --- /dev/null +++ b/storybook/stories/foundations/design-language/static/elevation-examples.svg @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/storybook/stories/foundations/design-language/static/elevation.svg b/storybook/stories/foundations/design-language/static/elevation.svg new file mode 100644 index 00000000000000..737e7955ad9df6 --- /dev/null +++ b/storybook/stories/foundations/design-language/static/elevation.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/storybook/stories/foundations/design-language/static/wp-logo@2x.png b/storybook/stories/foundations/design-language/static/wp-logo@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a95cd961902b01cbd7635676f703ba9da135642d GIT binary patch literal 5395 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 literal 0 HcmV?d00001 diff --git a/storybook/stories/tokens/elevation.mdx b/storybook/stories/tokens/elevation.mdx index d00de6dbde7fab..5bd7dbf79a2622 100644 --- a/storybook/stories/tokens/elevation.mdx +++ b/storybook/stories/tokens/elevation.mdx @@ -5,7 +5,7 @@ import { ElevationTable } from './components.tsx'; # Elevation tokens -This document outlines the various tokens relating to elevation in the WordPress design system. +This document outlines the various tokens relating to [elevation](?path=/docs/foundations-design-language-elevation--page) in the WordPress design system. ## Values