Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Updated Status docs to include design guidelines #1940

Merged
merged 4 commits into from Feb 17, 2022
Merged

Docs: Updated Status docs to include design guidelines #1940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71903fb
Docs: Updated Status docs to include design guidelines
ponori Feb 15, 2022
ae5fe8d
Added accessibilityLabel props to examples
ponori Feb 15, 2022
55dd499
Copy change to one of the best practices
ponori Feb 15, 2022
f154783
Converted best practice references to props to actual prop names
ponori Feb 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
74 changes: 73 additions & 1 deletion docs/pages/status.js
View file
Open in desktop
Expand Up @@ -43,7 +43,65 @@ export default function SearchFieldPage({ generatedDocGen }: {| generatedDocGen:
/>
</MainSection.Subsection>
</MainSection>
<MainSection name="Best practices">
<MainSection.Subsection columns={2}>
<MainSection.Card
cardSize="md"
type="do"
description="Use Status to communicate a step in a workflow or the state of an item."
defaultCode={`
<Status type="ok" accessibilityLabel="This item is ok" />
`}
/>
<MainSection.Card
cardSize="md"
type="don't"
description="Use SVGs or images that resemble the Status’ symbols to denote status."
defaultCode={`
<Icon icon="workflow-status-problem" size="24" accessibilityLabel="This item has an error" />
`}
/>
<MainSection.Card
cardSize="md"
type="do"
description="Place Status close to its subject to provide context and reference. It can be placed as an inline element or paired side by side as needed."
defaultCode={`
<Flex gap={1} alignItems="center">
<Status accessibilityLabel="This item is complete" type="ok" />
<Text weight="bold" size="300">Campaign complete</Text>
</Flex>
`}
/>
<MainSection.Card
cardSize="md"
type="don't"
description="Place Status far away from its subject. "
defaultCode={`
<Flex gap={12} direction="column" alignItems="center">
<Status accessibilityLabel="This item is paused" type="halted" />
<Text weight="bold" size="300">Campaign paused</Text>
</Flex>

`}
/>
<MainSection.Card
cardSize="md"
type="do"
description="Use `title` when the status it represents is unique, specific and critical for the user to know."
defaultCode={`
<Status type="inProgress" title="Pending review" />
`}
/>
<MainSection.Card
cardSize="md"
type="don't"
description="Use Status' `subText` to display extraneous messaging."
defaultCode={`
<Status type="problem" title="Error" subtext="Please try again" />
`}
/>
</MainSection.Subsection>
</MainSection>
<MainSection
name="Accessibility"
description="Icons are a great way to help users who have difficulties with reading, focus attention, and low vision impairments. For such use cases, Status can be used without accompanying `title` text."
Expand All @@ -54,7 +112,7 @@ export default function SearchFieldPage({ generatedDocGen }: {| generatedDocGen:
description={`
If Status appears without \`title\` text, \`accessibilityLabel\` should be used to provide a text description for screen readers to announce and communicate the represented icon, as shown in the first example.

Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: "there is a problem with this item".
Avoid using the generic words like "image" or "icon"; instead, use verbs that describe the meaning of the icon, for example: "Upload in progress".

If using \`title\` to describe what the icon represents, \`accessibilityLabel\` does not need to be provided, as shown in the second example.
`}
Expand Down Expand Up @@ -111,6 +169,20 @@ If using \`title\` to describe what the icon represents, \`accessibilityLabel\`
/>
</MainSection.Subsection>
</MainSection>
<MainSection name="Related">
<MainSection.Subsection
description={`
**[Icon](/icon)**
Icon should be used to display a symbol that does not represent the state or status of an item.

**[Badge](/badge)**
Use Badge to label or mark an item with a designation or category.

**[Callout](/callout)**
Use Callout to communicate page-level status, such as an error, and to provide actionable next steps.
`}
/>
</MainSection>
</Page>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/gestalt/src/Status.js
View file
Open in desktop
Expand Up @@ -58,7 +58,7 @@ type Props = {|
|};

/**
* [Status](https://gestalt.pinterest.systems/status) is an indicator with an icon that provides information to a user.
* [Status](https://gestalt.pinterest.systems/status) is a graphic indicator of an element’s state.
*/
export default function Status({ accessibilityLabel, subtext, title, type }: Props): Node {
const { icon, color } = ICON_COLOR_MAP[type];
Expand Down