fix(Modal): animation update, new variant, close button always visible #1224
Conversation
…variant with component
|
Please chnage icon color to color: var(--content-basic-disabled); |
|
Spacing between title and Icon - spacing-3 |
|
CTA - always Large |
| contentClassName?: string; | ||
| } | ||
|
|
||
| export const ActionModalContent: React.FC<IActionModalProps> = ({ |
There was a problem hiding this comment.
Is it a new component for external usage? We need to document it in our docs: what its purpose, when and how it should be used.
There was a problem hiding this comment.
It's a sub-component used inside Modal (like Info or Interactive sub-components in Tooltip).
There was a problem hiding this comment.
(replied on priv)
TLDR: we need a docs describing sub-components and their use-cases.
| - <b>Invite</b> agents | ||
| - <b>Gather</b> necessary information for specific tasks | ||
|
|
||
| Modal includes: |
There was a problem hiding this comment.
| Modal includes: | |
| Modal should include: |
| - Submit (Primary button kind) and cancel buttons (Secondary, Plain buttons kinds) | ||
|
|
||
| <Canvas of={ModalStories.Modal} sourceState="none" /> | ||
|
|
||
| #### Example implementation | ||
|
|
||
| ```jsx |
There was a problem hiding this comment.
Please add the import statements
| - <b>Confirmation of actions</b> - Confirm that an action has been successfully completed (e.g., "Your changes have been saved"). | ||
| - <b>Educational content</b> - Offer tutorials, walkthroughs, or additional information about how to use a feature. | ||
|
|
||
| Info modal includes: |
There was a problem hiding this comment.
| Info modal includes: | |
| Info modal should include: |
|
|
||
| #### Example implementation | ||
|
|
||
| ```jsx |
There was a problem hiding this comment.
Please add the import statements
| - <b>Executing a Command</b>: Double-check significant commands (e.g., start/stop services). | ||
| - <b>Irreversible Actions</b>: Confirm actions that cannot be undone. | ||
|
|
||
| Confirmation modal includes: |
There was a problem hiding this comment.
| Confirmation modal includes: | |
| Confirmation modal should include: |
|
|
||
| <Canvas of={ModalStories.ModalWithFullSpaceContent} sourceState="none" /> | ||
|
|
||
| ```jsx |
There was a problem hiding this comment.
Please add the import statements
| @@ -51,7 +53,15 @@ const StoryTemplate: StoryFn<ModalProps> = ({ | |||
| const [isOpen, setIsOpen] = React.useState(true); | |||
|
|
|||
| return ( | |||
| <> | |||
| <div | |||
| style={{ | |||
There was a problem hiding this comment.
please move it to const, outside the component's body. Every inline object or a functions are recreated on each render and we do not want that :)
Resolves: #964
Description
ActionModalContentsub-component to use as a modal childrenStorybook
https://feature-964--613a8e945a5665003a05113b.chromatic.com
Checklist
Obligatory:
livechat/design-system)