Skip to content

Commit

Permalink
feat(docs): Update modal page to use new layout (#713)
Browse files Browse the repository at this point in the history 
* feat(docs): update modal page to use new layout

* feat(docs): update sentence in dos section
  • Loading branch information
@MariaJose
MariaJose authored Feb 15, 2022
1 parent d1d442b commit f489736
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 15 deletions.
25 changes: 16 additions & 9 deletions packages/docs/pages/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ const ButtonPage = () => {

<Panel header="Overview" headerId="overview">
<Text>
Buttons trigger an immediate action, which can continue within the current page, a new page or modal.
<Code primary>Buttons</Code> trigger an immediate action, which can continue within the current page, a new
page or modal.
</Text>
<Text bold>When to use:</Text>
<List>
Expand Down Expand Up @@ -44,7 +45,9 @@ const ButtonPage = () => {
title: 'Basic',
render: () => (
<Fragment key="basic">
<Text>Buttons are calls to action used throughout the product experience.</Text>
<Text>
<Code primary>Buttons</Code> are calls to action used throughout the product experience.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
<Button actionType="normal" isLoading={false} variant="primary">
Expand Down Expand Up @@ -85,7 +88,7 @@ const ButtonPage = () => {
<Fragment key="action-types">
<Text>
There are two action types: <Code>normal</Code> &amp; <Code>destructive</Code>. They are used to
indicate the nature of the action when clicking on the button.
indicate the nature of the action when clicking on the <Code primary>Button</Code>.
</Text>

<CodePreview>
Expand All @@ -104,7 +107,10 @@ const ButtonPage = () => {
title: 'Loading',
render: () => (
<Fragment key="loading">
<Text>The loading state is used when clicking a button will perform a asyncronous action.</Text>
<Text>
The loading state is used when clicking a <Code primary>Button</Code> will perform a asyncronous
action.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
Expand Down Expand Up @@ -142,8 +148,8 @@ const ButtonPage = () => {
render: () => (
<Fragment key="disabled">
<Text>
A disabled state is used to indicate no action can be done using the button by passing a{' '}
<Code primary>disabled</Code> prop.
A disabled state is used to indicate no action can be done using the <Code primary>Button</Code> by
passing a <Code primary>disabled</Code> prop.
</Text>

<CodePreview>
Expand All @@ -168,8 +174,8 @@ const ButtonPage = () => {
render: () => (
<Fragment key="icons">
<Text>
A button can also include icons on either side of the text (or both). When using{' '}
<Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp;{' '}
A <Code primary>Button</Code> can also include icons on either side of the text (or both). When
using <Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp;{' '}
<Code primary>iconRight</Code> components will be removed.
</Text>

Expand Down Expand Up @@ -201,7 +207,8 @@ const ButtonPage = () => {
recommended={[
<>Keep button labels short and concise.</>,
<>
Where there are multiple buttons together, ensure the “default” action is the <Code>primary</Code> button.
Where there are multiple <Code primary>Buttons</Code> together, ensure the “default” action is the{' '}
<Code>primary</Code> button.
</>,
<>
<Code>primary</Code> button should only appear once per page.
Expand Down
44 changes: 38 additions & 6 deletions packages/docs/pages/modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Button, H1, Modal, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';

import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { ModalPropTable } from '../PropTables';

const ModalPage = () => {
Expand Down Expand Up @@ -29,7 +29,7 @@ const ModalPage = () => {
id: 'modal',
title: 'Modal',
render: () => (
<>
<Fragment key="modal">
<Text>
A <Code primary>Modal</Code> appears as a layer on top of the primary interface.{' '}
<Code primary>Modals</Code> disrupt users from interacting with the page until they complete a
Expand Down Expand Up @@ -68,14 +68,14 @@ const ModalPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'dialog',
title: 'Dialog',
render: () => (
<>
<Fragment key="dialog">
<Text>
Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a{' '}
<Code primary>Modal</Code>. The purpose of a dialog is to act as a safety net for a user attempting
Expand Down Expand Up @@ -113,7 +113,7 @@ const ModalPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand All @@ -123,6 +123,38 @@ const ModalPage = () => {
<Panel header="Props" headerId="props">
<ModalPropTable renderPanel={false} />
</Panel>

<Panel header="Do's and Don'ts" headerId="props">
<GuidelinesTable
recommended={[
<>
<Code primary>Modals</Code> should require that users take an action.
</>,
<>
<Code primary>Modals</Code> should close when users press an action button, not when merchants click or
tap the area outside the <Code primary>Modal</Code>.
</>,
<>
It should be clear why the <Code primary>Modal</Code> was opened.
</>,
<>
<Code primary>Modals</Code> should block other content on a page.
</>,
<>
User should have the option to come back without any <Code primary>actions</Code>.{' '}
</>,
<>Header and content should be left aligned, footer right aligned.</>,
<>
<Code primary>Modals</Code> should be positioned in the middle of the screen.
</>,
]}
discouraged={[
<>
<Code primary>Modals</Code> shouldn’t have more than two buttons (primary and secondary) at the bottom.
</>,
]}
/>
</Panel>
</>
);
};
Expand Down

0 comments on commit f489736

Please sign in to comment.