Align status component table to primer.style/status table (#2467)

* Align react statuses table to primer.style/status
primer · Oct 26, 2022 · d396c89 · d396c89
1 parent 9ff856d
commit d396c89
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/.changeset/orange-chairs-add.md b/.changeset/orange-chairs-add.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Align status components table to primer.style/status table
diff --git a/docs/content/deprecated/Buttons.mdx b/docs/content/deprecated/Buttons.mdx
@@ -1,6 +1,6 @@
 ---
 title: Button (legacy)
-status: deprecated
+status: Deprecated
 source: https://github.com/primer/react/blob/main/src/Button
 storybook: '/react/storybook?path=/story/composite-components-button--default-button'
 ---

diff --git a/docs/content/status.mdx b/docs/content/status.mdx
@@ -1,10 +1,14 @@
 ---
 title: Component status
-description: Check the current status of Primer React components
+description: Check the current status of Primer React components.
 ---
 
 import {ComponentStatuses} from '../src/component-statuses'
 
+<Note>
+
 See the [component lifecycle](https://primer.style/contribute/component-lifecycle) for more information about each status.
 
+</Note>
+
 <ComponentStatuses />
diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js
@@ -1,5 +1,6 @@
 import componentMetadata from '@primer/component-metadata'
-import {Link, Label, Text} from '@primer/react'
+import {Link, Label, StyledOcticon} from '@primer/react'
+import {AccessibilityInsetIcon} from '@primer/octicons-react'
 import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label'
 import Table from '@primer/gatsby-theme-doctocat/src/components/table'
 import {graphql, Link as GatsbyLink, useStaticQuery} from 'gatsby'
@@ -63,13 +64,35 @@ export function ComponentStatuses() {
                   </Link>
                 </td>
                 <td align="center" valign="top" style={{whiteSpace: 'nowrap'}}>
-                  <StatusLabel status={status} />
+                  <StatusLabel size="large" status={status} />
                 </td>
                 <td align="center" valign="top" style={{whiteSpace: 'nowrap'}}>
                   {a11yReviewed ? (
-                    <Label variant="primary">Reviewed</Label>
+                    <Label
+                      size="large"
+                      sx={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        backgroundColor: 'done.subtle',
+                        fontWeight: 'normal',
+                        borderColor: 'transparent'
+                      }}
+                    >
+                      <StyledOcticon icon={AccessibilityInsetIcon} sx={{fill: 'done.fg'}} />
+                      Reviewed
+                    </Label>
                   ) : (
-                    <Text sx={{color: 'fg.subtle'}}>Review pending</Text>
+                    <Label
+                      size="large"
+                      sx={{
+                        backgroundColor: 'neutral.subtle',
+                        fontWeight: 'normal',
+                        borderColor: 'transparent'
+                      }}
+                    >
+                      Not reviewed
+                    </Label>
                   )}
                 </td>
                 <td>{description}</td>