From 636a48d135d25825a30db46878240bd3b50d01a8 Mon Sep 17 00:00:00 2001 From: Nora Krantz <75342690+nkrantz@users.noreply.github.com> Date: Tue, 22 Oct 2024 13:27:55 -0400 Subject: [PATCH] chore: update status pattern (#4110) * chore: update status pattern * chore: feedback from pr * chore: more feedback * chore: more feedback again * chore: another round of feedback and name change --- .../ObjectStatusPatternExamples.tsx | 669 ++++++++++++++++++ .../StatusPatternExamples.tsx | 444 ------------ .../{status => object-status}/index.mdx | 416 ++++++----- 3 files changed, 867 insertions(+), 662 deletions(-) create mode 100644 packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx delete mode 100644 packages/paste-website/src/component-examples/StatusPatternExamples.tsx rename packages/paste-website/src/pages/patterns/{status => object-status}/index.mdx (65%) diff --git a/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx new file mode 100644 index 0000000000..7a96d494c0 --- /dev/null +++ b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx @@ -0,0 +1,669 @@ +import { Box } from "@twilio-paste/box"; +import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon"; +import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon"; +import { ProcessErrorIcon } from "@twilio-paste/icons/esm/ProcessErrorIcon"; +import { ProcessInProgressIcon } from "@twilio-paste/icons/esm/ProcessInProgressIcon"; +import { ProcessNeutralIcon } from "@twilio-paste/icons/esm/ProcessNeutralIcon"; +import { ProcessSuccessIcon } from "@twilio-paste/icons/esm/ProcessSuccessIcon"; +import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; + +export const BannerExample = ` +const ObjectStatusPatternComponents = () => { + const [process, setProcess] = React.useState(ProcessObject.Success); + const menu = useStatusMenuState(); + const onClick = (status) => { + setProcess(ProcessObject[status]); + menu.hide(); + }; + return ( + + + + Success + + Success + Available + + + {process.children} + + + onClick('Success')} + variant="default" + > + {ProcessObject.Success.children} + + onClick('Neutral')} + variant="default" + > + {ProcessObject.Neutral.children} + + onClick('Warning')} + variant="default" + > + {ProcessObject.Warning.children} + + onClick('Error')} + variant="default" + > + {ProcessObject.Error.children} + + onClick('InProgress')} + variant="default" + > + {ProcessObject.InProgress.children} + + onClick('Disabled')} + variant="default" + > + {ProcessObject.Disabled.children} + + onClick('Draft')} + variant="default" + > + {ProcessObject.Draft.children} + + + + + ); +}; + +render( + +) +`.trim(); + +export const ProcessError = (): JSX.Element => { + return ; +}; + +export const ProcessWarning = (): JSX.Element => { + return ; +}; + +export const ProcessSuccess = (): JSX.Element => { + return ; +}; + +export const ProcessNeutral = (): JSX.Element => { + return ; +}; + +export const ProcessInProgress = (): JSX.Element => { + return ; +}; + +export const ProcessDisabled = (): JSX.Element => { + return ; +}; + +export const ProcessDraft = (): JSX.Element => { + return ; +}; + +export const ConnectivityAvailable = (): JSX.Element => { + return ; +}; + +export const ConnectivityBusy = (): JSX.Element => { + return ; +}; + +export const ConnectivityUnavailable = (): JSX.Element => { + return ; +}; + +export const ConnectivityOffline = (): JSX.Element => { + return ( + + ); +}; + +export const processStatusExamples = ` + + + + + Success + + + + Error + + + + Warning + + + + Neutral + + + + In progress + + + + Disabled + + + + Draft + + + + Success + Error + Warning + Neutral + In progress + Disabled + Draft + + + Success + Error + Warning + Neutral + In progress + Disabled + Draft + + +`.trim(); + +export const prefixSuffixTooltipExamples = ` + + + + + Failed to process + + + + Failed to process + + + +`.trim(); + +export const tableExample = ` +<> + + Exports + + + + + + + + + + + + + + + + + + +
StatusExport name
+ + + + Pre-registration needed + + + Fill out the registration form here + + + + Contacts who did not click +
+ + + + Successfully exported + Tuesday, February 2, 2021 + + + + All contacts +
+ + + IDs + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDUnique nameRegionStatusOrder Date
90294808908109537WE902990c21gjioGasdNorth America + Active + 2020-10-15
90294808908872345WE928471c21gjioGasdNorth America + Ready + 2020-10-15
+ +`.trim(); + +export const tableWithPlainTextExample = ` +<> + + Agent queues + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleMediaStatus
BewitchedSeries + Progress halted +
MulanFeatureReleased
Little WomenFeatureReleased
+ +`.trim(); + +export const connectivityStatusTableExample = ` +<> + + Reboots + + + + + + + + + + + + + + + + + + + + + + +
AgentsQueues
+ + + + Adaline Baxter + + + Available | 12:43 + + + + Queue name
+ + + + Jane Cooper + + + On break | 02:23 + + + + Queue name
+ + + + Dan Reynolds + + + Available | 10:21 + + + + Queue name
+ +`.trim(); + +export const linkInStatusExamples = ` + + + + + Pre-registration needed + + + + + + Pre-registration needed + + + Fill out the registration form here + + + + + + + + Pre-registration needed + + + + + + +`.trim(); + +export const otherCommonPlacements = ` + + + + + + Business Profile + + + Approved + + + Information about your business + + + +`.trim(); + +export const connectivityStatusExamples = ` + + + + + Available + + + + Busy + + + + Unavailable + + + + Neutral + + + + Offline + + + + + Available + + + Unavailable + + + Busy + + + Neutral + + + Offline + + + + + Available + + + Unavailable + + + Busy + + + Neutral + + + Offline + + + +`.trim(); + +export const compactPageHeaderExample = ` +const PageHeaderExample = () => { + return ( + + + + + Parker Smith + + + + + + + + Customer since June 11, 2009 + + Online + + + + + + + Customer details + + Customer history + + + + + ); +}; +render( + +) +`.trim(); diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx deleted file mode 100644 index 63739a74c1..0000000000 --- a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx +++ /dev/null @@ -1,444 +0,0 @@ -import { Box } from "@twilio-paste/box"; -import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon"; -import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon"; -import { ProcessErrorIcon } from "@twilio-paste/icons/esm/ProcessErrorIcon"; -import { ProcessInProgressIcon } from "@twilio-paste/icons/esm/ProcessInProgressIcon"; -import { ProcessNeutralIcon } from "@twilio-paste/icons/esm/ProcessNeutralIcon"; -import { ProcessSuccessIcon } from "@twilio-paste/icons/esm/ProcessSuccessIcon"; -import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; - -export const BannerExample = ` - - - Success - -`.trim(); - -export const ProcessError = (): JSX.Element => { - return ; -}; - -export const ProcessWarning = (): JSX.Element => { - return ; -}; - -export const ProcessSuccess = (): JSX.Element => { - return ; -}; - -export const ProcessNeutral = (): JSX.Element => { - return ; -}; - -export const ProcessInProgress = (): JSX.Element => { - return ; -}; - -export const ProcessDisabled = (): JSX.Element => { - return ; -}; - -export const ProcessDraft = (): JSX.Element => { - return ; -}; - -export const ConnectivityAvailable = (): JSX.Element => { - return ; -}; - -export const ConnectivityBusy = (): JSX.Element => { - return ; -}; - -export const ConnectivityUnavailable = (): JSX.Element => { - return ; -}; - -export const ConnectivityOffline = (): JSX.Element => { - return ( - - ); -}; - -export const processStatusExamples = ` - - - - Error - - - - Warning - - - - Success - - - - Neutral - - - - In-progress - - - - Disabled - - - - Draft - - -`.trim(); - -export const prefixSuffixTooltipExamples = ` - - - - - Failed to process - - - - Failed to process - - - -`.trim(); - -export const tableExample = ` -<> - - Exports - - - - - - - - - - - - - - - - - - -
StatusExport name
- - - - Successfully exported - Tuesday, January 2, 2021 - - - - Contacts who did not click -
- - - - Successfully exported - Tuesday, February 2, 2021 - - - - All contacts -
- - - IDs - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDUnique nameRegionStatusOrder Date
90294808908109537WE902990c21gjioGasdNorth America - Active - 2020-10-15
90294808908872345WE928471c21gjioGasdNorth America - Ready - 2020-10-15
- -`.trim(); - -export const tableWithPlainTextExample = ` -<> - - Reboots - - - - - - - - - - - - - - - - - - - - - - - - - - -
TitleMediaStatus
BewitchedSeries - Progress halted -
MulanFeatureReleased
Little WomenFeatureReleased
- -`.trim(); - -export const linkInStatusExamples = ` - - - - - Pre-registration needed - - - - - - Pre-registration needed - - - Fill out the registration form here - - - - - - - - Pre-registration needed - - - - - - -`.trim(); - -export const otherCommonPlacements = ` - - - - - - Business Profile - - - Approved - - - Information about your business - - - - - Account Security - - Connected - - - - Autopilot - - Connected - - - - Carrier Network - - Intermittent - - - - -`.trim(); - -export const connectivityStatusExamples = ` - - - - Available - - - - Busy - - - - Unavailable - - - - Neutral - - - - Offline - - -`.trim(); diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/object-status/index.mdx similarity index 65% rename from packages/paste-website/src/pages/patterns/status/index.mdx rename to packages/paste-website/src/pages/patterns/object-status/index.mdx index 9cd24a68fa..a44719c607 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/object-status/index.mdx @@ -1,31 +1,47 @@ export const meta = { - title: 'Status', - description: 'The status pattern informs the user of the dynamic state or condition of an object.', - slug: '/patterns/status/', + title: 'Object status', + description: 'The Object status pattern informs the user of the dynamic state or condition of an object.', + slug: '/patterns/object-status/', }; import {Alert} from '@twilio-paste/alert'; import {Anchor} from '@twilio-paste/anchor'; import {Avatar} from '@twilio-paste/avatar'; +import {Badge} from '@twilio-paste/badge'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; +import {ButtonGroup} from '@twilio-paste/button-group'; import {StatusBadge} from '@twilio-paste/status'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Card} from '@twilio-paste/card'; +import {DetailText} from '@twilio-paste/detail-text'; import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/disclosure'; import {Flex} from '@twilio-paste/flex'; import {Input} from '@twilio-paste/input'; +import {InPageNavigation, InPageNavigationItem} from '@twilio-paste/in-page-navigation'; import {Label} from '@twilio-paste/label'; import {HelpText} from '@twilio-paste/help-text'; import {Grid, Column} from '@twilio-paste/grid'; import {Heading} from '@twilio-paste/heading'; import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; import {Paragraph} from '@twilio-paste/paragraph'; +import {PageHeader, PageHeaderPrefix, PageHeaderMeta, PageHeaderActions, PageHeaderHeading, PageHeaderDetails, PageHeaderInPageNavigation} from '@twilio-paste/page-header'; import {Stack} from '@twilio-paste/stack'; +import { + StatusMenu, + StatusMenuBadge, + StatusMenuItem, + StatusMenuItemChild, + useStatusMenuState, + StatusMenuItemRadio, + StatusMenuItemCheckbox, +} from '@twilio-paste/status'; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {Text} from '@twilio-paste/text'; import {Tooltip} from '@twilio-paste/tooltip'; +import {UserIcon} from '@twilio-paste/icons/esm/UserIcon'; +import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; import {ProcessDisabledIcon} from '@twilio-paste/icons/esm/ProcessDisabledIcon'; import {ProcessDraftIcon} from '@twilio-paste/icons/esm/ProcessDraftIcon'; import {ProcessErrorIcon} from '@twilio-paste/icons/esm/ProcessErrorIcon'; @@ -59,7 +75,15 @@ import { otherCommonPlacements, BannerExample, connectivityStatusExamples, -} from '../../../component-examples/StatusPatternExamples.tsx'; + connectivityStatusTableExample, + compactPageHeaderExample +} from '../../../component-examples/ObjectStatusPatternExamples.tsx'; +import { + processStatusMenuExample, + availabilityStatusMenuExample, + ConnectivityObject, + ProcessObject, +} from '../../../component-examples/StatusMenuExamples'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; @@ -67,7 +91,7 @@ export default DefaultLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Status'); + const feature = await getFeature('Object status'); return { props: { data: { @@ -81,14 +105,15 @@ export const getStaticProps = async () => { - -{BannerExample} + + {BannerExample} + ## Ingredients @@ -96,31 +121,37 @@ export const getStaticProps = async () => { - Icon + Status Badge - Text + Status Menu - - Box - + + Component composition + + + Create a composition with Box,{' '} + Icon, and Text. + ```jsx -// import all components for Status patterns +// import all components for Object status patterns -import {​ Text } from "@twilio-paste/core/text"; import { Box } from "@twilio-paste/core/box"; +import {​ Text } from "@twilio-paste/core/text"; +import {​ StatusBadge } from "@twilio-paste/core/status-badge"; +import {​ StatusMenu } from "@twilio-paste/core/status-menu"; import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon"; import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon"; import { ProcessErrorIcon } from "@twilio-paste/icons/esm/ProcessErrorIcon"; @@ -135,14 +166,11 @@ import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; ### General usage -A Status is used to communicate the dynamic state of an object to a user. -Use them to help the user identify something that requires their attention and often, their action. -When a status is used to indicate to the user that they need to take action, be sure to provide -clear controls to take that action (e.g. a “Try again” button). +An Object status is used to communicate the dynamic state of an object. Use it to help a user identify something that requires their attention and often, their action. When a status is used to indicate to the user that they need to take action, be sure to provide clear controls to take that action (check out the example in [Process status](#process-status)). -Statuses are: +Object statuses are: -- Always related to an object. For example, a SIM can have a status, but a step in a wizard flow cannot. +- Always related to an object. For example, this pattern applies to SIMs and regulatory bundles, but not to a step in a wizard flow. Instead, use the [Error state pattern](/patterns/error-state) or [Progress Steps component](/components/progress-steps). - Not used for static attributes. For example, “SMS-capable” is not a status on a phone number. - Different from [notification and feedback messaging](/patterns/notifications-and-feedback), which is in direct response to a user action. - Different from [alert messaging](/components/alert), which is from the system. @@ -154,22 +182,18 @@ Non-text status indicators (such as icons or status dots) should be paired with possible and should always be given a `title` to give context and meaning to the icon or shape. Check out the [icon usage guidelines](/components/icon/usage-guidelines) for more detailed accessibility information. -## Variations +## Status types ### Process status -Process statuses indicate an object’s progress through a certain set of stages. There are generally 3 or more stages in a given process, -which may be considered “good”, “bad”, or “neutral”. Process statuses are composed of a status Icon and Text. - -**Process icons should be paired with text whenever possible.** When using process icons, try to limit the number of icons -used to 3 or 4 of the most important statuses. For statuses that are not as critical to a user’s workflow, consider -[plain text statuses](#plain-text-status). +Process statuses indicate an object’s progress through a set of stages. **Process statuses should always be paired with text.** +To determine how to show a process status: +- If additional information is needed about the status, use Icon, Text, and [Anchor](/components/anchor) (optional). +- If it’s in a Table and no additional information is needed, use a [borderless Status Badge](/components/status-badge#borderless-badges). +- Otherwise, use the default [Status Badge](/components/status-badge). + +Placement of the status in a Table should depend on the importance of the status to the given user flow and should be tested with users. + +For statuses that are not as critical to a user’s workflow, use [plain text statuses](#plain-text-status). + + + {tableExample} + + + + {otherCommonPlacements} + + #### Icon and token pairings @@ -191,6 +263,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + @@ -201,6 +274,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + @@ -209,6 +283,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + @@ -217,6 +292,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + @@ -225,6 +301,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + + @@ -244,6 +322,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit + @@ -252,22 +331,48 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit +
Icon Icon name TokenStatus Badge variant Usage
ProcessErrorIcon $color-text-icon-errorProcessError Indicates an error or that something went wrong.
ProcessWarningIcon $color-text-icon-warningProcessWarning Indicates a condition requiring corrective action.
ProcessSuccessIcon $color-text-icon-successProcessSuccess Indicates that something is stable, active, or successfully completed.
ProcessNeutralIcon $color-text-icon-neutralProcessNeutral Indicates a neutral / informative state. Can be used to fill any gaps that the more specific statuses don’t cover. @@ -236,6 +313,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessInProgressIcon $color-text-icon-neutralProcessInProgress Indicates that something is in progress, in review, or scheduled.
ProcessDisabledIcon $color-text-iconProcessDisabled Indicates that something is inactive, disabled, or paused.
ProcessDraftIcon $color-text-iconProcessDraft Indicates that something is a draft, unused, or not started.
+
-### Connectivity status +### Plain text status + +Not all object statuses need icons or shapes. In fact, giving every status an icon or a shape can make it difficult for a user to find and focus on the most critical information + +If some statuses—such as successes or failures—are critical, use plain text for the other statuses that a user doesn’t need to identify as quickly. + + + {tableWithPlainTextExample} + -Connectivity statuses are used to show if a user, object, or system is online or offline. Connectivity statuses are composed using a connectivity Icon and Text. +### Connectivity status -**Connectivity statuses should almost always be paired with accompanying text**, though Available and Offline can be used without text in cases where space is constrained, since there is a shape difference. +Connectivity statuses are used to show if a user, object, or system is online or offline. **Connectivity statuses should always be paired with text.** +To determine how to show a connectivity status: +- If additional information is needed to explain the status, use Icon, Text, and [Anchor](/components/anchor). +- If it’s in a Table and no additional information is needed, use a [borderless Status Badge](/components/status-badge#borderless-badges). +- Otherwise, use the default Status Badge. + + + {connectivityStatusTableExample} + + + + {compactPageHeaderExample} + + #### Connectivity icon and token pairings @@ -287,6 +428,7 @@ Connectivity statuses are used to show if a user, object, or system is online or + @@ -297,6 +439,7 @@ Connectivity statuses are used to show if a user, object, or system is online or + @@ -305,6 +448,7 @@ Connectivity statuses are used to show if a user, object, or system is online or + @@ -313,6 +457,7 @@ Connectivity statuses are used to show if a user, object, or system is online or + @@ -321,6 +466,7 @@ Connectivity statuses are used to show if a user, object, or system is online or + @@ -329,208 +475,46 @@ Connectivity statuses are used to show if a user, object, or system is online or +
Icon Icon name TokenStatus Badge variant Usage
ConnectivityAvailableIcon $color-text-icon-availableConnectivityAvailable Indicates that a person or entity is available or online.
ConnectivityBusyIcon $color-text-icon-busyConnectivityBusy Indicates that a person or entity is busy or away.
ConnectivityUnavailableIcon $color-text-icon-unavailableConnectivityUnavailable Indicates that a person or entity is unavailable or at capacity.
ConnectivityNeutralIcon $color-text-icon-neutralConnectivityNeutral Indicates that a person or entity is neutral.
ConnectivityOfflineIcon $color-text-icon-offlineConnectivityOffline Indicates that a person or entity is offline.
- - Connectivity statuses in Flex - - Connectivity statuses are used heavily throughout Flex, where the circle indicators should retain the same color - across the product on any background color (including the dark topmast). - - - Since icons must have high enough contrast with their background, Flex uses Box with a background color here instead - of using an icon. This gives more flexibility to the number of backgrounds a connectivity status can be placed on. - - - In general, Connectivity statuses should use the icons and tokens documented in this pattern, but if you have a use - case similar to Flex, you can follow their approach. - - - -### Plain text status - -Not all statuses need icons or shapes. In fact, giving every status an icon or a shape can make it difficult for a user to find and focus on the most critical information. -If some statuses—such as successes or failures—are highly critical, consider using plain text for the other statuses that a user may not need to identify as quickly. - -## Composition - -### Icon and text placement - -The status icon or dot should most often be placed as a prefix, before the status text, though some page layouts may benefit from placing the icon as a suffix. -A suffix icon is often beneficial when a status is right-aligned within a Card or List. - -For process statuses, the icon should generally be the same size as the line-height of the status text (e.g. use `$size-icon-20` for a status icon paired with text at `$line-height-20`) -to ensure that the icon and the text are vertically aligned. - - - {prefixSuffixTooltipExamples} - - -**It is strongly recommended that status icons be paired with text**, especially for statuses that are important for a user to understand. - -### Status badges - -Use the [`StatusBadge`](/components/status-badge) component to compose a status icon with a text label, usually when a status is shown outside of a Table. Common placements are near avatars (particularly for connectivity statuses), in cards, and in lists. - - - {` - - - Success - - - Error - - - Warning - - - Neutral - - - In-progress - - - Disabled - - - Draft - - - - - Available - - - Unavailable - - - Busy - - - Neutral - - - Offline - - - -`.trim()} - - -### Positioning in a table - -Statuses are most often used in tables across our products. -Placement of the status in the table should depend on the importance of the status to the given user flow and should be tested with users. - - - {tableExample} - - -### Pairing process statuses with plain text statuses - -Using plain text statuses for non-critical information and process statuses for critical information -is a great way to highlight information that is most important for a user to know. - - - {tableWithPlainTextExample} - - -### Providing additional information on a status - -It can often be beneficial to provide additional information on a status. The best way to do this is to provide description text directly below the status. -This makes the information easily discoverable and is the simplest way for screen reader users to access it. - -### Adding a link to a status +
-Linking out to additional information is a great way to add more context to a status and guide the user towards their next steps. +### Swapping statuses with Status Menu -[Anchors](/components/anchor) can be placed directly on status text or within help text below the status. -[Link-style buttons](/components/button/#link-style-button) can be used when clicking the text performs an in-page action, such as opening a modal. +Use a [Status Menu](/components/status-menu) to let users swap between statuses. - {linkInStatusExamples} + {processStatusMenuExample} -
-
- -### Other common placements - -Statuses are not always placed in tables. Other common placements are near avatars (particularly for connectivity statuses), in cards, and in lists. - - {otherCommonPlacements} + {availabilityStatusMenuExample} ## Dos and Don'ts @@ -643,10 +627,6 @@ Statuses are not always placed in tables. Other common placements are near avata -## Starter kits - -- [Figma](https://www.figma.com/file/S4z0Kqjb9AYosnkRQldLte/Paste-Patterns?node-id=531%3A8) - ## Related Discussions - [Adding text labels to status icons](https://github.com/twilio-labs/paste/discussions/1523)