-
Notifications
You must be signed in to change notification settings - Fork 340
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.
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
Docs: Updated Status docs to include design guidelines #1940
Changes from 2 commits
71903fb
ae5fe8d
55dd499
f154783
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 the status subject in question 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 a title when the status it represents is unique, specific and critical for the user to know." | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. props should be denoted with backticks and don't need an article, so
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was some initial feedback that utilizing prop names may not necessarily be as clear to designers, so we decided to pull is back to something less technical. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done! |
||
defaultCode={` | ||
<Status type="inProgress" title="Pending review" /> | ||
`} | ||
/> | ||
<MainSection.Card | ||
cardSize="md" | ||
type="don't" | ||
description="Use Status' sub text to display extraneous messaging." | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ditto here: There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same comment for this one. I think there's solid arguments on both sides here and I don't know if I have an informed opinion of how much friction this would cause designers. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Done! |
||
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." | ||
|
@@ -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. | ||
`} | ||
|
@@ -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> | ||
); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kinda wordy…instead of "to the status subject in question", how about "to its subject"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍