@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/docs/content/SideNav.md

@@ -1,171 +0,0 @@
----
-title: SideNav
----
-
-The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, **SideNav elements have no default width or positioning.**
-
-## Default example
-
-```jsx live
-<SideNav bordered maxWidth={360} aria-label="Main">
-  <SideNav.Link href="#account">
-    <Text>Account</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#home" selected>
-    <Text>Profile</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#emails">
-    <Text>Emails</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#notifications">
-    <Text>Notifications</Text>
-  </SideNav.Link>
-</SideNav>
-```
-
-Different kinds of content can be added inside a SideNav item. Use system props to further style them if needed.
-
-## Full variant
-
-Add the `variant='full'` prop to a `SideNav.Link` to spread child elements across the link, which is useful for status icons, labels, and the like.
-
-```jsx live
-<SideNav bordered maxWidth={360} aria-label="Main">
-  <SideNav.Link href="#url">
-    <Text>Text Only</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#url">
-    <Avatar size={16} mr={2} src="https://avatars.githubusercontent.com/hubot?s=32" />
-    <Text>With an avatar</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#url">
-    <StyledOcticon sx={{mr: 2}} size={16} icon={ZapIcon} />
-    <Text>With an Octicon</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#url" variant="full" selected>
-    <Text>With a status icon</Text>
-    <StyledOcticon sx={{mr: 2}} size={16} icon={DotIcon} color="success.fg" />
-  </SideNav.Link>
-  <SideNav.Link href="#url" variant="full">
-    <Text>With a label</Text>
-    <Label outline>label</Label>
-  </SideNav.Link>
-  <SideNav.Link href="#url" variant="full">
-    <Text>With a counter</Text>
-    <CounterLabel>16</CounterLabel>
-  </SideNav.Link>
-  <SideNav.Link href="#url">
-    <Heading as="h5" sx={{fontSize: 1}}>
-      A heading
-    </Heading>
-    <Text>and some more content</Text>
-  </SideNav.Link>
-</SideNav>
-```
-
-## Lightweight variant
-
-Add the `variant="lightweight"` prop to `SideNav` to render an alternative, more lightweight version that has items with no borders and are more condensed.
-
-```jsx live
-<Box
-  borderWidth="1px"
-  borderStyle="solid"
-  borderColor="border.default"
-  borderRadius={2}
-  p={3}
-  backgroundColor="canvas.subtle"
-  maxWidth={360}
->
-  <Box
-    borderStyle="solid"
-    borderColor="border.default"
-    borderWidth={0}
-    borderBottomWidth={1}
-    borderRadius={0}
-    mb={2}
-    pb={1}
-  >
-    <Heading as="h5" fontSize={1} color="fg.muted">
-      Menu
-    </Heading>
-  </Box>
-  <SideNav variant="lightweight">
-    <SideNav.Link href="#url">
-      <Text>Account</Text>
-    </SideNav.Link>
-    <SideNav.Link href="#url" selected>
-      <Text>Profile</Text>
-    </SideNav.Link>
-    <SideNav.Link href="#url">
-      <Text>Emails</Text>
-    </SideNav.Link>
-    <SideNav.Link href="#url">
-      <Text>Notifications</Text>
-    </SideNav.Link>
-  </SideNav>
-</Box>
-```
-
-It can also appear nested, as a sub navigation. Use margin/padding [System Props](/system-props) to add indentation.
-
-```jsx live
-<SideNav bordered maxWidth={360}>
-  <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={PersonIcon} />
-    <Text>Account</Text>
-  </SideNav.Link>
-  <SideNav.Link href="#url" selected>
-    <StyledOcticon mr={2} size={16} icon={OctofaceIcon} />
-    <Text>Profile</Text>
-  </SideNav.Link>
-
-  <SideNav bordered variant="lightweight" py={3} pl={6} backgroundColor="sidenav.selectedBg">
-    <SideNav.Link href="#url" selected>
-      <Text>Sub item 1</Text>
-    </SideNav.Link>
-    <SideNav.Link href="#url">
-      <Text>Sub item 2</Text>
-    </SideNav.Link>
-    <SideNav.Link href="#url">
-      <Text>Sub item 3</Text>
-    </SideNav.Link>
-  </SideNav>
-
-  <SideNav.Link href="#url">
-    <StyledOcticon mr={2} size={16} icon={MailIcon} />
-    <Text>Emails</Text>
-  </SideNav.Link>
-</SideNav>
-```
-
-## Usage with React Router
-
-If using React Router, you can use the `as` prop to render the element as a `NavLink`. React Router will automatically handle setting `aria-current="page"` for you.
-
-```
-<SideNav.Link as={NavLink} to="...">...</SideNav.Link>
-```
-
-## Component props
-
-### SideNav
-
-| Name     | Type              | Default  | Description                                                                    |
-| :------- | :---------------- | :------: | :----------------------------------------------------------------------------- |
-| as       | String            |  'nav'   | Sets the HTML tag for the component.                                           |
-| bordered | Boolean           |  false   | Renders the component with a border.                                           |
-| variant  | String            | 'normal' | Set to `lightweight` to render [in a lightweight style](#lightweight-variant). |
-| sx       | SystemStyleObject |    {}    | Style to be applied to the component                                           |
-
-### SideNav.Link
-
-| Name      | Type              | Default  | Description                                                                                       |
-| :-------- | :---------------- | :------: | :------------------------------------------------------------------------------------------------ |
-| as        | String            |   'a'    | Sets the HTML tag for the component.                                                              |
-| href      | String            |          | URL to be used for the Link                                                                       |
-| muted     | Boolean           |  false   | Uses a less prominent shade for Link color, and the default link shade on hover                   |
-| selected  | Boolean           |  false   | Sets the link as selected, giving it a different style and setting the `aria-current` attribute.  |
-| underline | Boolean           |  false   | Adds underline to the Link                                                                        |
-| variant   | String            | 'normal' | Set to `full` to render [a full variant](#full-variant), suitable for including icons and labels. |
-| sx        | SystemStyleObject |    {}    | Style to be applied to the component                                                              |

package/docs/content/Spinner.mdx

@@ -1,32 +0,0 @@
----
-title: Spinner
-status: Alpha
-description: Use spinners to let users know that content is being loaded.
-componentId: spinner
-source: https://github.com/primer/components/blob/main/src/Spinner.tsx
----
-
-import {Props} from '../src/props'
-import {Spinner} from '@primer/components'
-
-```jsx live
-<Spinner />
-```
-
-## Props
-
-<Props of={Spinner} />
-
-## Examples
-
-### Small
-
-```jsx live
-<Spinner size="small" />
-```
-
-### Large
-
-```jsx live
-<Spinner size="large" />
-```

package/docs/content/StateLabel.md

@@ -1,27 +0,0 @@
----
-title: StateLabel
----
-
-Use StateLabel components to show the status of an issue or pull request.
-
-## Default example
-
-```jsx live
-<>
-  <StateLabel status="issueOpened">Open</StateLabel>
-  <StateLabel status="issueClosed">Closed</StateLabel>
-  <StateLabel status="pullOpened">Open</StateLabel>
-  <StateLabel status="pullClosed">Closed</StateLabel>
-  <StateLabel status="pullMerged">Merged</StateLabel>
-  <StateLabel status="draft">Draft</StateLabel>
-  <StateLabel status="issueDraft">Draft</StateLabel>
-</>
-```
-
-## Component props
-
-| Name    | Type              | Default  | Description                                                                                                    |
-| :------ | :---------------- | :------: | :------------------------------------------------------------------------------------------------------------- |
-| variant | String            | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
-| status  | String            |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |
-| sx      | SystemStyleObject |    {}    | Style to be applied to the component                                                                           |

package/docs/content/StyledOcticon.md

@@ -1,27 +0,0 @@
----
-title: StyledOcticon
-tags: icon
----
-
-StyledOcticon renders an [Octicon](https://octicons.github.com) with common system props, including `color`, margin, and padding.
-
-## Default example
-
-```jsx live
-<>
-  <StyledOcticon icon={CheckIcon} size={32} color="success.fg" mr={2} />
-  <StyledOcticon icon={XIcon} size={32} color="danger.fg" />
-</>
-```
-
-## Component props
-
-StyledOcticon passes all of its props except the common system props down to the [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react#usage), including:
-
-| Name          | Type              |    Default    | Description                                                                                                  |
-| :------------ | :---------------- | :-----------: | :----------------------------------------------------------------------------------------------------------- |
-| ariaLabel     | String            |               | Specifies the `aria-label` attribute, which is read verbatim by screen readers                               |
-| icon          | Component         |               | [Octicon component](https://github.com/primer/octicons/tree/master/lib/octicons_react) used in the component |
-| size          | Number            |      16       | Sets the uniform `width` and `height` of the SVG element                                                     |
-| verticalAlign | String            | `text-bottom` | Sets the `vertical-align` CSS property                                                                       |
-| sx            | SystemStyleObject |      {}       | Style to be applied to the component                                                                         |

package/docs/content/SubNav.md

@@ -1,100 +0,0 @@
----
-title: SubNav
----
-
-Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
-
-To use SubNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
-**Attention:** Make sure to properly label your `SubNav` with an `aria-label` to provide context about the type of navigation contained in `SubNav`.
-
-## Default example
-
-```jsx live
-<SubNav aria-label="Main">
-  <SubNav.Links>
-    <SubNav.Link href="#home" selected>
-      Home
-    </SubNav.Link>
-    <SubNav.Link href="#documentation">Documentation</SubNav.Link>
-    <SubNav.Link href="#support">Support</SubNav.Link>
-  </SubNav.Links>
-</SubNav>
-```
-
-## SubNav with search example
-
-```jsx live
-<SubNav aria-label="Main">
-  <SubNav.Links>
-    <SubNav.Link href="#home" selected>
-      Home
-    </SubNav.Link>
-    <SubNav.Link href="#documentation">Documentation</SubNav.Link>
-    <SubNav.Link href="#support">Support</SubNav.Link>
-  </SubNav.Links>
-
-  <TextInput type="search" icon={SearchIcon} sx={{width: 320}} />
-</SubNav>
-```
-
-## SubNav with filtered search example
-
-```jsx live
-<SubNav aria-label="Main">
-  <FilteredSearch>
-    <Dropdown>
-      <Dropdown.Button>Filter</Dropdown.Button>
-      <Dropdown.Menu direction="sw">
-        <Dropdown.Item>
-          <a href="#">Item 1</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 2</a>
-        </Dropdown.Item>
-        <Dropdown.Item>
-          <a href="#">Item 3</a>
-        </Dropdown.Item>
-      </Dropdown.Menu>
-    </Dropdown>
-    <TextInput type="search" icon={SearchIcon} width={320} />
-  </FilteredSearch>
-  <SubNav.Links>
-    <SubNav.Link href="#home" selected>
-      Home
-    </SubNav.Link>
-    <SubNav.Link href="#documentation">Documentation</SubNav.Link>
-    <SubNav.Link href="#support">Support</SubNav.Link>
-  </SubNav.Links>
-</SubNav>
-```
-
-## Component props
-
-### SubNav
-
-| Name       | Type              | Default | Description                                                                            |
-| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------- |
-| actions    | Node              |         | Place another element, such as a button, to the opposite side of the navigation items. |
-| align      | String            |         | Use `right` to have navigation items aligned right.                                    |
-| full       | Boolean           |         | Used to make navigation fill the width of the container.                               |
-| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element.                         |
-| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                   |
-
-### SubNav.Link
-
-| Name     | Type              | Default | Description                                      |
-| :------- | :---------------- | :-----: | :----------------------------------------------- |
-| as       | String            |         | sets the HTML tag for the component              |
-| href     | String            |         | URL to be used for the Link                      |
-| selected | Boolean           |         | Used to style the link as selected or unselected |
-| sx       | SystemStyleObject |   {}    | Style to be applied to the component             |
-
-### SubNav.Links
-
-| Name | Type              | Default | Description                          |
-| :--- | :---------------- | :-----: | :----------------------------------- |
-| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/TabNav.md

@@ -1,42 +0,0 @@
----
-title: TabNav
----
-
-Use the TabNav component to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
-
-To use TabNav with [react-router](https://github.com/ReactTraining/react-router) or
-[react-router-dom](https://www.npmjs.com/package/react-router-dom), pass
-`as={NavLink}` and omit the `selected` prop.
-This ensures that the NavLink gets `activeClassName='selected'`
-
-**Attention:** Make sure to properly label your `TabNav` with an `aria-label` to provide context about the type of navigation contained in `TabNav`.
-
-## Default example
-
-```jsx live
-<TabNav aria-label="Main">
-  <TabNav.Link href="#home" selected>
-    Home
-  </TabNav.Link>
-  <TabNav.Link href="#documentation">Documentation</TabNav.Link>
-  <TabNav.Link href="#support">Support</TabNav.Link>
-</TabNav>
-```
-
-## Component props
-
-### TabNav
-
-| Name       | Type              | Default | Description                                                    |
-| :--------- | :---------------- | :-----: | :------------------------------------------------------------- |
-| aria-label | String            |         | Used to set the `aria-label` on the top level `<nav>` element. |
-| sx         | SystemStyleObject |   {}    | Style to be applied to the component                           |
-
-### TabNav.Link
-
-| Name     | Type              | Default | Description                                      |
-| :------- | :---------------- | :-----: | :----------------------------------------------- |
-| as       | String            |         | sets the HTML tag for the component              |
-| href     | String            |         | URL to be used for the Link                      |
-| selected | Boolean           |         | Used to style the link as selected or unselected |
-| sx       | SystemStyleObject |   {}    | Style to be applied to the component             |

package/docs/content/Text.md

@@ -1,31 +0,0 @@
----
-title: Text
----
-
-The Text component is a wrapper component that will apply typography styles to the text inside.
-
-## Default example
-
-```jsx live
-<>
-  <Text as='p' fontWeight="bold">bold</Text>
-  <Text as='p' color="danger.fg">danger color</Text>
-  <Text as='p' color="fg.onEmphasis" bg="neutral.emphasis" p={2}>inverse colors</Text>
-</>
-```
-
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Text components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
-## Component props
-
-| Name | Type   | Default | Description                         |
-| :--- | :----- | :-----: | :---------------------------------- |
-| as   | String | `span`  | Sets the HTML tag for the component |

package/docs/content/TextInput.md

@@ -1,34 +0,0 @@
----
-title: TextInput
----
-
-TextInput is a form component to add default styling to the native text input.
-
-**Note:** Don't forget to set `aria-label` to make the TextInput accessible to screen reader users.
-
-## Default example
-
-```jsx live
-<>
-  <TextInput aria-label="Zipcode" name="zipcode" placeholder="Zipcode" autoComplete="postal-code" />
-
-  <TextInput sx={{ml: 4}} aria-label="City" name="city" placeholder="City" contrast />
-
-  <TextInput sx={{ml: 4}} icon={SearchIcon} aria-label="Zipcode" name="zipcode" placeholder="Find user" autoComplete="postal-code" />
-</>
-```
-
-## Component props
-
-Native `<input>` attributes are forwarded to the underlying React `input` component and are not listed below.
-
-| Name       | Type                                                                      | Default | Description                                                                           |
-| :--------- | :------------------------------------------------------------------------ | :-----: | :------------------------------------------------------------------------------------ |
-| aria-label | String                                                                    |         | Required. Allows input to be accessible.                                              |
-| block      | Boolean                                                                   |         | Adds `display: block` to element                                                      |
-| contrast   | Boolean                                                                   |         | Changes background color to a higher contrast color                                   |
-| variant    | String                                                                    |         | Can be either `small` or `large`. Creates a smaller or larger input than the default. |
-| width      | String or Number                                                          |         | Set the width of the input                                                            |
-| maxWidth   | String or Number or [Array](https://styled-system.com/guides/array-props) |         | Set the maximum width of the input                                                    |
-| minWidth   | String or Number or [Array](https://styled-system.com/guides/array-props) |         | Set the minimum width of the input                                                    |
-| icon       | Node (pass Octicon react component)                                       |         | Icon to be used inside of input. Positioned on the left edge.                         |

package/docs/content/TextInputTokens.mdx

@@ -1,89 +0,0 @@
----
-title: TextInputWithTokens
-status: Alpha
-source: https://github.com/primer/react/tree/main/src/TextInputWithTokens.tsx
----
-
-import {Props} from '../src/props'
-import {TextInputWithTokens} from '@primer/components'
-
-A `TextInputWithTokens` component is used to show multiple values in one field.
-
-It supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
-
-## Basic Example
-
-```javascript live noinline
-const BasicExample = () => {
-  const [tokens, setTokens] = React.useState([
-    {text: 'zero', id: 0},
-    {text: 'one', id: 1},
-    {text: 'two', id: 2}
-  ])
-  const onTokenRemove = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <>
-      <Box as="label" display="block" htmlFor="inputWithTokens-basic">
-        Basic example tokens
-      </Box>
-      <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="inputWithTokens-basic" />
-    </>
-  )
-}
-
-render(BasicExample)
-```
-
-## Component Props
-
-<Props of={TextInputWithTokens} />
-
-## Adding and removing tokens
-
-The array passed to the `tokens` prop needs to be manually updated to add and remove tokens.
-
-The function passed to the `onRemoveToken` prop is called when:
-
-- Clicking the remove button in the token
-- Pressing the `Backspace` key when the input is empty
-- Selecting a token using the arrow keys or by clicking on a token and then pressing the `Backspace` key
-
-There is no function that gets called to "add" a token, so the user needs to be provided with a UI to select tokens.
-
-## Custom token rendering
-
-By default, the `Token` component is used to render the tokens in the input. If this component does not make sense for the kinds of tokens you're rendering, you can pass a component to the `tokenComponent` prop
-
-Example: a `TextInputWithTokens` that renders tokens as `IssueLabelToken`:
-
-```javascript live noinline
-const UsingIssueLabelTokens = () => {
-  const [tokens, setTokens] = React.useState([
-    {text: 'enhancement', id: 1, fillColor: '#a2eeef'},
-    {text: 'bug', id: 2, fillColor: '#d73a4a'},
-    {text: 'good first issue', id: 3, fillColor: '#0cf478'}
-  ])
-  const onTokenRemove = tokenId => {
-    setTokens(tokens.filter(token => token.id !== tokenId))
-  }
-
-  return (
-    <>
-      <Box as="label" display="block" htmlFor="inputWithTokens-issueLabels">
-        Issue labels
-      </Box>
-      <TextInputWithTokens
-        tokenComponent={IssueLabelToken}
-        tokens={tokens}
-        onTokenRemove={onTokenRemove}
-        id="inputWithTokens-issueLabels"
-      />
-    </>
-  )
-}
-
-render(<UsingIssueLabelTokens />)
-```