Update component docs to use `PropsTable` and `ComponentChecklist`

[colebemis]

Problems

• Component props are not documented consistently across pages on https://primer.style/react
• Not all component documentation pages include a component status checklist

Goals

• Use the new PropsTable component, to render prop documentation consistently across all component pages on https://primer.style/react
• The props table should not reference internal types. For example, if you have a string union called Variants, you should show each string ('danger' | 'success' | 'warning')
• Add a component status checklist to every component page

Consistency nice-to-haves ✨

• Every component page should have source frontmatter that links to the source code for that component (example)
• Every component page should have an Examples, Props, and Status heading (in that order)
• The top of every component page should show how to import the component (example)

  import {Box} from '@primer/react'
  

Non-goals

The props API of many of our components could be improved. However, changing the props of any component is out of scope for this issue.

Example

An example of how to use PropsTable and ComponentChecklist in an .mdx file:

---
title: ExampleComponent
status: Alpha
---

...

## Props

<PropsTable>
  {/* normal prop */}
  <PropTableRow
    name="variant"
    type="'default' | 'danger'"
    defaultValue="'inset'"
    description={<>...use a string or JSX to describe this prop...</>}
  />

  {/* required prop */}
  <PropTableRow
    name="children"
    required={true}
    type="React.ReactNode"
    description="..."
  />

  {/* deprecated prop */}
  <PropTableRow
    name="scheme"
    deprecated
    type="'default' | 'danger'"
    defaultValue="'inset'"
    description={<>Use <InlineCode>variant</InlineCode> instead</>}
  />

  {/* sx prop */}
  <PropsTableSxRow />

  {/* as prop */}
  <PropsTablePassthroughProps
    defaultElementType="a"
  />

  {/* ref prop */}
  <PropsTablePassthroughProps
    elementType="a"
    isPolymorphic={true}
    refType="HTMLAnchorElement"
  />

  {/* passthrough props */}
  <PropsTablePassthroughProps
    elementType="a"
    isPolymorphic={true}
    passthroughPropsLink={
      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
    }
  />
    
  {/* base props (combines sx, as, ref, and passthrough props) */}
  <PropsTableBasePropRows
    elementType="a"
    isPolymorphic={true}
    refType="HTMLAnchorElement"
    passthroughPropsLink={
      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes">MDN</Link>
    }
  />
</PropsTable>

## Status

<ComponentChecklist
  items={{
    propsDocumented: true,
    noUnnecessaryDeps: true,
    adaptsToThemes: true,
    adaptsToScreenSizes: true,
    fullTestCoverage: true,
    usedInProduction: true,
    usageExamplesDocumented: true,
    hasStorybookStories: true
    designReviewed: null,
    a11yReviewed: null,
    stableApi: false,
    addressedApiFeedback: false,
    hasDesignGuidelines: null,
    hasFigmaComponent: null
  }}
/>

Components

👋 If you want to update any of the pages listed below, add your username next to the component name so we can avoid duplicating effort

• [ ] ActionList
• [x] ActionList v2
• [ ] ActionMenu
• [ ] ActionMenu v2
• [x] AnchoredOverlay
• [ ] Autocomplete @mperrotti
• [x] Avatar
• [x] AvatarPair
• [x] AvatarStack
• [ ] ~~BorderBox~~
• [x] Box
• [x] BranchName
• [x] Breadcrumbs
• [ ] Button @mperrotti
• [ ] CircleBadge
• [ ] ~~CircleOcticon~~
• [ ] CounterLabel @mperrotti
• [ ] Details
• [ ] Dialog
• [ ] Dialog v2
• [ ] Dropdown
• [ ] DropdownMenu
• [ ] FilteredSearch
• [ ] FilterList
• [ ] Flash
• [ ] ~~Flex~~
• [ ] FormGroup

☝️ @colebemis doing above unless indicated otherwise

---

👇 @rezrah doing below unless indicated otherwise

• [ ] ~~Grid~~
• [x] Checkbox https://github.com/primer/react/pull/1708
• [x] Header https://github.com/primer/react/pull/1708
• [x] Heading https://github.com/primer/react/pull/1708
• [x] Label https://github.com/primer/react/pull/1708
• [x] LabelGroup https://github.com/primer/react/pull/1708
• [x] Link https://github.com/primer/react/pull/1744
• [x] Overlay https://github.com/primer/react/pull/1805
• [x] Pagehead https://github.com/primer/react/pull/1805
• [x] Pagination https://github.com/primer/react/pull/1805
• [x] PointerBox https://github.com/primer/react/pull/1804
• [x] Popover https://github.com/primer/react/pull/1805
• [x] Portal https://github.com/primer/react/pull/1805
• [ ] ~~Position~~
• [x] ProgressBar https://github.com/primer/react/pull/1805
• [x] Radio https://github.com/primer/react/pull/1708
• [ ] ~~SelectMenu~~
• [ ] SelectPanel
• [ ] SideNav
• [ ] Spinner
• [ ] StateLabel
• [ ] StyledOcticon
• [ ] SubNav
• [ ] TabNav
• [ ] Text
• [ ] TextInput
• [ ] TextInputWithTokens @mperrotti
• [ ] Timeline
• [ ] Token @mperrotti
• [ ] Tooltip
• [ ] Truncate
• [ ] UnderlineNav

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[lesliecdubs]

👋🏻 Saw this start to go stale. @colebemis @pksjce might this be a good sand or pebble onboarding task for our new PRC joiners to look at?

[colebemis]

Yeah, these would make great onboarding tasks 👍

[broccolinisoup]

👋🏼 I wonder if we will still be able to leverage these components in the new docs site? I was going to look into refactoring PropsTableBasePropRows function because when all the params are provided sx, as, ref are rendered but they don't meet our new "alphabetically ordered props criteria". I think It would worth the fix if we are going to use them in the new docs site. cc @colebemis as he is looking into the tech stack of the new site.

[govind15496]

Hey guys can you guid me I am newcomer and I want to contribute

[govind15496]

I have cloned it this repo but don't know where to start

[govind15496]

Hello @colebemis , I am reading Problems and Goals above you have mentioned can you explain it ? thanks.

[colebemis]

Since we're moving towards a unified docs IA, we no longer need to do this work.