From 4ed60f209588adf22d2ec79b2a12365d2ca9b928 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 26 Dec 2024 15:11:42 +0200 Subject: [PATCH 1/3] docs(Modal): improvements - add Confirmation story, change stories names --- .../__stories__/ModalBasicLayout.mdx | 22 +++++++++------ .../__stories__/ModalBasicLayout.stories.tsx | 27 +++++++++++++++++-- 2 files changed, 39 insertions(+), 10 deletions(-) diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx index 8529686dd1..c7ddf6be76 100644 --- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx +++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx @@ -20,7 +20,7 @@ import { BasicModalTip } from "./ModalBasicLayout.stories.helpers"; - [Variants](#variants) - [Scroll](#scroll) - [Use cases and examples](#use-cases-and-examples) -- [Do's and dont's](do's-and-don'ts) +- [Do's and dont's](#dos-and-donts) - [Related components](#related-components) - [Feedback](#feedback) @@ -69,28 +69,34 @@ When the content of the modal is too large to fit within the viewport, the modal ## Use cases and examples -### Wizard footer +### Wizard modal -When multi steps modal, use the ModalFooterWizard. +For modals with multiple steps, use the ModalFooterWizard. -### Footer with side action +### Confirmation modal + +Confirmation modal ensure that users acknowledge the outcomes of their actions. It is based on the small size modal and comes with predefine properties. To use a confirmation modal, simply copy the code provided below. + + + +### Footer with extra content The footer has an option to include additional content on the left side when needed. This extra content can consist of a button, checkbox, or simple text for notes. Note that this option is only available with the default footer. - + -### Header with extra icon button +### Header with icon button In case of a need of an icon button in the modal header, you can use our default header "Action slot". You can also use it as a menu button component. - + ### Animation -Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed. +Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed. diff --git a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx index c5696c7317..6eb787e49e 100644 --- a/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx @@ -276,7 +276,7 @@ export const Wizard: Story = { } }; -export const FooterWithSideAction: Story = { +export const FooterWithExtraContent: Story = { decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })], render: (_, { show, setShow, container }) => { return ( @@ -307,7 +307,30 @@ export const FooterWithSideAction: Story = { } }; -export const HeaderWithExtraIconButton: Story = { +export const Confirmation: Story = { + decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })], + render: (_, { show, setShow, container }) => { + return ( + setShow(false)} container={container}> + + + + + There are other tasks connected to this task. Deleting this task will remove any existing connections. It + will be kept in trash for 30 days. + + + + setShow(false) }} + secondaryButton={{ text: "Cancel", onClick: () => setShow(false) }} + /> + + ); + } +}; + +export const HeaderWithIconButton: Story = { decorators: [(Story, context) => withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })], render: (_, { show, setShow, container }) => { return ( From 96b4e705624db72ba44a7fab2047a4613b2853a4 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 26 Dec 2024 15:12:13 +0200 Subject: [PATCH 2/3] docs(Modal): improvements - add Announcement story, change stories names --- .../__stories__/ModalMediaLayout.mdx | 14 +++-- .../__stories__/ModalMediaLayout.stories.tsx | 62 +++++++++++++++++-- 2 files changed, 67 insertions(+), 9 deletions(-) diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx index 8428cb011b..b60174980b 100644 --- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx +++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx @@ -19,7 +19,7 @@ import { MediaModalTip } from "./ModalMediaLayout.stories.helpers"; - [Props](#props) - [Usage](#usage) - [Use cases and examples](#use-cases-and-examples) -- [Do's and dont's](do's-and-don'ts) +- [Do's and dont's](#dos-and-donts) - [Related components](#related-components) - [Feedback](#feedback) @@ -46,18 +46,24 @@ The Media Modal includes a highlighted media section, followed by a textual cont ## Use cases and examples -### Wizard footer +### Wizard modal -When multi steps modal, use the ModalFooterWizard. +For modals with multiple steps, use the ModalFooterWizard. +### Announcement modal + +Announcement modals used to effectively introduce new features or updates to users in a focused and engaging way. It is the media modal with predefine properties. To use an announcement modal, simply copy the code provided below. + + + ### Header with extra icon button In case of a need of an icon button in the modal header, you can use our default header "Action slot". You can also use it as a menu button component. - + ### Animation diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx index 370e90dcea..ffe81d0950 100644 --- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx @@ -92,7 +92,7 @@ export const Wizard: Story = { const steps = [ - media placeholder + media placeholder @@ -103,7 +103,31 @@ export const Wizard: Story = { , - media placeholder + media placeholder + + + + + Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an + animation. + + + , + + + media placeholder + + + + + Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an + animation. + + + , + + + media placeholder @@ -136,7 +160,35 @@ export const Wizard: Story = { } }; -export const HeaderWithExtraIconButton: Story = { +export const Announcement: Story = { + decorators: [ + (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" }) + ], + render: (_, { show, setShow, container }) => { + return ( + setShow(false)} container={container}> + + + media placeholder + + + + + Introducing our latest feature designed to make your workflow faster and easier. For more details{" "} + . + + + + setShow(false) }} + secondaryButton={{ text: "Dismiss", onClick: () => setShow(false) }} + /> + + ); + } +}; + +export const HeaderWithIconButton: Story = { decorators: [ (Story, context) => withOpenedModalPreview(Story, { size: "large", isDocsView: context.viewMode === "docs" }) ], @@ -179,7 +231,7 @@ export const Animation: Story = { const transitionSteps = [ - media placeholder + media placeholder @@ -190,7 +242,7 @@ export const Animation: Story = { , - media placeholder + media placeholder From 98e5622e4ecb406a05adca9638b5469eec449fe9 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 26 Dec 2024 15:12:59 +0200 Subject: [PATCH 3/3] docs(Modal): general improvements --- .../__stories__/ModalMediaLayout.stories.tsx | 24 ------------------- .../__stories__/ModalSideBySideLayout.mdx | 12 +++++----- .../ModalSideBySideLayout.stories.helpers.tsx | 2 +- 3 files changed, 7 insertions(+), 31 deletions(-) diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx index ffe81d0950..a8640eea45 100644 --- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx @@ -101,30 +101,6 @@ export const Wizard: Story = { , - - - media placeholder - - - - - Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an - animation. - - - , - - - media placeholder - - - - - Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an - animation. - - - , media placeholder diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx index 0ef5b754bb..92ded1b9f9 100644 --- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx +++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx @@ -22,7 +22,7 @@ import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers"; - [Props](#props) - [Usage](#usage) - [Use cases and examples](#use-cases-and-examples) -- [Do's and dont's](do's-and-don'ts) +- [Do's and dont's](#dos-and-donts) - [Related components](#related-components) - [Feedback](#feedback) @@ -50,22 +50,22 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side ## Use cases and examples -### Wizard footer +### Wizard modal -When multi steps modal, use the ModalFooterWizard. +For modals with multiple steps, use the ModalFooterWizard. You can use it to break down the tasks. Not every step must include an image. -### Header with extra icon button +### Header with icon button In case of a need of an icon button in the modal header, you can use our default header "Action slot". You can also use it as a menu button component. - + ### Animation -Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed. +Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed. diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx index 78e1aac6ff..7a49e71a83 100644 --- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx +++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx @@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; export const SideBySideModalTip = () => (
- If your content is scrollable consider using{" "} + If your content is scrollable, consider using{" "} Basic modal