@wix/design-system

## Feature Examples ### Skin - description: Use different <code>skin</code> to set the overall look of the modal and its action buttons:<li>For general cases use <code>standard</code>(default).</li><li>Promote Premium features with <code>premium</code>.</li><li>To inform users of the negative implications of an action, like loss of data, use <code>destructive</code> .</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <MessageModalLayout skin="standard" onCloseButtonClick={() => {}} primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" content={ <Text>When you leave this page, you'll lose unsaved changes.</Text> } /> <MessageModalLayout skin="premium" onCloseButtonClick={() => {}} primaryButtonText="Upgrade" secondaryButtonText="Not Now" title="Upgrade to accept payments" content={ <Text>To accept payments, upgrade to the Business Basic plan.</Text> } /> <MessageModalLayout skin="destructive" onCloseButtonClick={() => {}} primaryButtonText="Delete" secondaryButtonText="Cancel" title="Delete category?" content={ <Text> You're about to delete the Yoga category. Posts inside this category will also be deleted. </Text> } /> </StorybookComponents.Stack>; ``` ### Help and close buttons - description: Add a help button with the <code>onHelpButtonClick</code> prop. Use it to direct users to support.Close button is required for all modals. Control its function with the<code>onCloseButtonClick</code> prop.Both can be customised with <code>closeButtonProps</code> and <code>helpButtonProps</code>. - example: ```jsx <MessageModalLayout onCloseButtonClick={() => {}} onHelpButtonClick={() => {}} primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" content={<Text>When you leave this page, you'll lose unsaved changes.</Text>} />; ``` ### Illustration - description: Add visuals to the left side of the content to support main modal messages using the <code>illustration</code> prop.Use 120x120 px illustrations and coordinate the skin with the theme of the modal. Note: For Wix products, browse all available illustrations or request a new one on <a href="https://www.wixuxillustrations.com/">Wix UX Illustrations</a>. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <MessageModalLayout illustration="generic_report.svg" onCloseButtonClick={() => {}} primaryButtonText="Report" secondaryButtonText="Cancel" title="Report as spam?" content={<Text>Messages marked as spam are blocked from your inbox.</Text>} /> <MessageModalLayout illustration="generic_upgrade.svg" theme={'premium'} onCloseButtonClick={() => {}} primaryButtonText="Upgrade" secondaryButtonText="Not Now" title="Start accepting online payments" content={ <Text> Upgrade your site to a Business Basic plan to start accepting payments. </Text> } /> <MessageModalLayout illustration="generic_trash.svg" theme={'destructive'} onCloseButtonClick={() => {}} primaryButtonText="Delete" secondaryButtonText="Cancel" title="Delete category" content={ <Text> You're about to delete the Yoga category. Posts inside this category will also be deleted. </Text> } /> </StorybookComponents.Stack>; ``` ### Side actions - description: Add supplementary actions in the <code>sideActions</code> container. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" content={ <Text>When you leave this page, you'll lose unsaved changes.</Text> } sideActions={ <StorybookComponents.Placeholder> Side actions </StorybookComponents.Placeholder> } /> <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" content={ <Text>When you leave this page, you'll lose unsaved changes.</Text> } sideActions={<Checkbox>Don't show this again</Checkbox>} /> </StorybookComponents.Stack>; ``` ### Footnote - description: Add supplementary text and/or links into the <code>footnote</code> container.Use the <code>footnoteSkin</code> prop to define it as <code>neutral</code> (default) or <code>light</code>. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Invite All" secondaryButtonText="Cancel" title="Invite all site members" content={<Text>You're about to send invites to all site members.</Text>} footnote={ <StorybookComponents.Placeholder> Footnote </StorybookComponents.Placeholder> } /> <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Invite All" secondaryButtonText="Cancel" title="Invite all site members" content={<Text>You're about to send invites to all site members.</Text>} footnote={ <Text size="small"> By sending an invite, you agree to the <a>Wix Terms of Use.</a> </Text> } /> <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Invite All" secondaryButtonText="Cancel" title="Invite all site members" footnoteSkin="light" footnote={ <Text size="small"> By sending an invite, you agree to the <a>Terms of Use</a>. </Text> } content={ <Text> You're about to send invites to all site members. </Text> } /> </StorybookComponents.Stack>; ``` ### Title and subtitle - description: Add short text to summarize modal content using the <code>title</code> prop.Use optional <code>subtitle</code> prop to add secondary text below the modal title. - example: ```jsx <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" content={<Text>When you leave this page, you'll lose unsaved changes.</Text>} />; ``` ### Action buttons - description: Specify labels for primary and secondary actions with <code>primaryButtonText</code> and <code>secondaryButtonText</code> props.For additional styling, like adding a prefix icon, use any available <code><Button/></code> props in <code>primaryButtonProps</code> and <code>secondaryButtonProps</code>.Use the <code>actionsSize</code> prop to control the size of the primary and secondary action buttons. - example: ```jsx <MessageModalLayout onCloseButtonClick={() => {}} primaryButtonText="Invite All" primaryButtonProps={{ prefixIcon: <Icons.EmailSendSmall /> }} secondaryButtonText="Cancel" title="Invite all site members" content={<Text>You're about to send invites to all site members.</Text>} />; ``` ## Developer Examples ### Mobile - description: On mobile, <code>MessageModal</code> maps to <code>Drawer</code> for context-sensitive confirmations (e.g., seeing what is being deleted). When context is less important, use <code>ModalMobileLayout</code> for standalone confirmations.To see the change, toggle 'Enable mobile support' in the top bar of Storybook. - example: ```jsx () => { const [contextOpen, setContextOpen] = React.useState(false); const [confirmOpen, setConfirmOpen] = React.useState(false); const { mobile } = React.useContext(WixDesignSystemContext); const deleteTitle = 'Delete category?'; const deleteContent = "You're about to delete the Yoga category. Posts inside this category will also be deleted."; const confirmTitle = 'Move 3 products?'; const confirmContent = 'You will change the location of the products. Once moved, the products will be found in New products category.'; return ( <Box gap="12px"> <Button skin="destructive" onClick={() => setContextOpen(true)}> Context is important </Button> <Button onClick={() => setConfirmOpen(true)}> Standalone confirmation </Button> {/* First modal: Drawer on mobile, MessageModalLayout on desktop */} {mobile ? ( <Drawer open={contextOpen} onClose={() => setContextOpen(false)} dismissible={false}> <Box direction="vertical" gap="SP4" padding="24px"> <Heading size="small">{deleteTitle}</Heading> <Text>{deleteContent}</Text> <Box direction="vertical" gap="SP2"> <Button skin="destructive" onClick={() => setContextOpen(false)} fullWidth> Delete </Button> <Button priority="secondary" onClick={() => setContextOpen(false)} fullWidth> Cancel </Button> </Box> </Box> </Drawer> ) : ( <Modal isOpen={contextOpen} onRequestClose={() => setContextOpen(false)} shouldCloseOnOverlayClick> <MessageModalLayout theme="destructive" title={deleteTitle} primaryButtonText="Delete" primaryButtonOnClick={() => setContextOpen(false)} secondaryButtonText="Cancel" secondaryButtonOnClick={() => setContextOpen(false)} onCloseButtonClick={() => setContextOpen(false)} > <Text>{deleteContent}</Text> </MessageModalLayout> </Modal> )} {/* Second modal: ModalMobileLayout on mobile, MessageModalLayout on desktop */} {mobile ? ( <Modal isOpen={confirmOpen} onRequestClose={() => setConfirmOpen(false)}> <ModalMobileLayout title={<Text weight="bold">{confirmTitle}</Text>} onCloseButtonClick={() => setConfirmOpen(false)} content={<Text>{confirmContent}</Text>} footer={ <Box direction="vertical" gap="SP2"> <Button onClick={() => setConfirmOpen(false)} fullWidth> Confirm </Button> <Button priority="secondary" onClick={() => setConfirmOpen(false)} fullWidth> Cancel </Button> </Box> } /> </Modal> ) : ( <Modal isOpen={confirmOpen} onRequestClose={() => setConfirmOpen(false)} shouldCloseOnOverlayClick> <MessageModalLayout title={confirmTitle} primaryButtonText="Confirm" primaryButtonOnClick={() => setConfirmOpen(false)} secondaryButtonText="Cancel" secondaryButtonOnClick={() => setConfirmOpen(false)} onCloseButtonClick={() => setConfirmOpen(false)} > <Text>{confirmContent}</Text> </MessageModalLayout> </Modal> )} </Box> ); }; ``` ## Common Use Case Examples ### Warn about destructive changes - description: Use the <code>destructive</code> theme to bring more attention to modals that confirm irreversible actions. Use the <code><Text/></code><a href="https://www.wix-style-react.com/storybook/?path=/story/components-typography-text--text"></a> component props to style the modal content. - example: ```jsx <MessageModalLayout theme={'destructive'} onCloseButtonClick={() => {}} primaryButtonText="Delete" secondaryButtonText="Cancel" title="Delete category?" > <Text> You're about to delete the Yoga category. Posts inside this category will also be deleted. </Text> </MessageModalLayout>; ``` ### Alert users to unsaved changes - description: Use a message modal to inform users that their changes won't be saved if the action is taken. - example: ```jsx <MessageModalLayout primaryButtonText="Leave Page" secondaryButtonText="Cancel" title="Leave page?" onCloseButtonClick={() => {}} > <Text>When you leave this page, you'll lose unsaved changes.</Text> </MessageModalLayout>; ``` ### Promote Premium features - description: Use the <code>illustration</code> prop to support upgrade messages. Illustrations can showcase the features available with upgrades. - example: ```jsx <MessageModalLayout onCloseButtonClick={() => {}} theme={'premium'} primaryButtonText="Upgrade" secondaryButtonText="Not Now" title="Upgrade to accept payments" illustration={'generic_upgrade.svg'} > <Text> Upgrade your site to a Business Basic plan to start accepting payments. </Text> </MessageModalLayout>; ```