-
Notifications
You must be signed in to change notification settings - Fork 322
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Modal): modal improvements, add stories for main Modal and modal…
…'s layouts (#2627)
- Loading branch information
1 parent
e8d093e
commit bead0ba
Showing
61 changed files
with
2,054 additions
and
93 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
136 changes: 136 additions & 0 deletions
136
packages/core/src/components/ModalNew/Modal/__stories__/Modal.mdx
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,136 @@ | ||
| import { Canvas, Meta } from "@storybook/blocks"; | ||
| import { ModalTip } from "./Modal.stories.helpers"; | ||
| import { Overview as BasicModalPreview } from "../../layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories"; | ||
| import { Overview as SideBySideModalPreview } from "../../layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories"; | ||
| import { Overview as MediaModalPreview } from "../../layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories"; | ||
| import backdropDo from "./assets/backdrop-do.png"; | ||
| import backdropDont from "./assets/backdrop-dont.png"; | ||
| import loadingDo from "./assets/loading-do.png"; | ||
| import loadingDont from "./assets/loading-dont.png"; | ||
| import ctaDo from "./assets/cta-do.png"; | ||
| import ctaDont from "./assets/cta-dont.png"; | ||
| import styles from "./Modal.stories.module.scss"; | ||
| import { StorybookLink } from "vibe-storybook-components"; | ||
| import { | ||
| DIALOG, | ||
| TIPSEEN, | ||
| TOOLTIP | ||
| } from "../../../../storybook/components/related-components/component-description-map"; | ||
|
|
||
| <Meta title="Internal/Components/Modal [New]" /> | ||
|
|
||
| # Modal | ||
|
|
||
| - [Overview](#overview) | ||
| - [Props](#props) | ||
| - [Usage](#usage) | ||
| - [Do's and dont's](do's-and-don'ts) | ||
| - [Related components](#related-components) | ||
| - [Feedback](#feedback) | ||
|
|
||
| ## Overview | ||
|
|
||
| Modals help users focus on a single task or a piece of information by popping up and blocking the rest of the page’s content. Modals disappear when user complete a required action or dismiss it. Use modals for quick, infrequent tasks. | ||
|
|
||
| We have 3 different modal component, each one provide a different layout for a different use case: | ||
|
|
||
| ### Basic modal | ||
|
|
||
| The Basic Modal is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos. | ||
|
|
||
| <Canvas of={BasicModalPreview} sourceState="none" /> | ||
|
|
||
| ### Side by side modal | ||
|
|
||
| The Side-by-Side Modal offers two distinct sections: the left for text or inputs, and the right for supporting visuals. | ||
| It's ideal when users need to reference media alongside information. | ||
|
|
||
| <Canvas of={SideBySideModalPreview} sourceState="none" /> | ||
|
|
||
| ### Media modal | ||
|
|
||
| The Media Modal includes a highlighted media section followed by text, perfect for grabbing attention with visuals before users interact with the content. Ideal for introducing new features or onboarding. | ||
|
|
||
| <Canvas of={MediaModalPreview} sourceState="none" /> | ||
|
|
||
| ## Usage | ||
|
|
||
| <UsageGuidelines | ||
| guidelines={[ | ||
| "Use modals only when you need the user's full, immediate attention.", | ||
| "Modals are centered on the page. To put the modal in focus, the rest of the page is dimmed.", | ||
| "All modals must have a title, a call to action, and a close button. The title and call to action should be simple and clear.", | ||
| "By default, users can close modals by clicking the close button, clicking outside the modal, or pressing the ESC key." | ||
| ]} | ||
| /> | ||
|
|
||
| <ModalTip /> | ||
|
|
||
| ## Do's and don'ts | ||
|
|
||
| <ComponentRules | ||
| rules={[ | ||
| { | ||
| componentContainerClassName: styles.largeComponentRule, | ||
| positive: { | ||
| component: <img src={backdropDo} alt="modal with a backdrop" style={{ maxWidth: "100%" }} />, | ||
| description: "Modal must include backdrop element." | ||
| }, | ||
| negative: { | ||
| component: <img src={backdropDont} alt="modal without a backdrop" style={{ maxWidth: "100%" }} />, | ||
| description: "Don't remove the backdrop element of the modal or the modal's title." | ||
| } | ||
| }, | ||
| { | ||
| componentContainerClassName: styles.largeComponentRule, | ||
| positive: { | ||
| component: ( | ||
| <img | ||
| src={loadingDo} | ||
| alt="modal with skeleton components as a loading experience" | ||
| style={{ maxWidth: "100%" }} | ||
| /> | ||
| ), | ||
| description: ( | ||
| <> | ||
| Use our <StorybookLink page="Feedback/Skeleton">Skeleton</StorybookLink> component if loading is needed. Try | ||
| that at least the actions will appear immediately. | ||
| </> | ||
| ) | ||
| }, | ||
| negative: { | ||
| component: ( | ||
| <img | ||
| src={loadingDont} | ||
| alt="modal with a spinner loading components as a loading experience" | ||
| style={{ maxWidth: "100%" }} | ||
| /> | ||
| ), | ||
| description: "Don't use Loader component in case of necessary loading." | ||
| } | ||
| }, | ||
| { | ||
| componentContainerClassName: styles.largeComponentRule, | ||
| positive: { | ||
| component: ( | ||
| <img | ||
| src={ctaDo} | ||
| alt="modal with a footer that includes one primary action and one tertiary action" | ||
| style={{ maxWidth: "100%" }} | ||
| /> | ||
| ), | ||
| description: "Use one primary button as your main call to action, for extra buttons use the tertiary button." | ||
| }, | ||
| negative: { | ||
| component: ( | ||
| <img src={ctaDont} alt="modal with a footer that includes two primary actions" style={{ maxWidth: "100%" }} /> | ||
| ), | ||
| description: "Don't use more than one primary button, we don't want to distract the user from the main action." | ||
| } | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| ## Related components | ||
|
|
||
| <RelatedComponents componentsNames={[TOOLTIP, DIALOG, TIPSEEN]} /> |
Oops, something went wrong.