@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/docs/content/TextInputTokens.mdx

@@ -0,0 +1,89 @@
+---
+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 />)
+```

package/docs/content/getting-started.md

@@ -90,7 +90,7 @@ import {BaseStyles, Box, Heading} from '@primer/components'
 export default () => (
   <BaseStyles>
     <Box m={4}>
-      <Heading mb={2}>Hello, world!</Heading>
+      <Heading sx={{mb: 2}}>Hello, world!</Heading>
       <p>This will get Primer text styles.</p>
     </Box>
   </BaseStyles>

package/docs/content/overriding-styles.mdx

@@ -25,10 +25,11 @@ This example demonstrates applying a bottom border to `Heading`, a component tha
     pb={2}
     sx={{
       borderBottomWidth: 1,
-      borderBottomColor: 'border.primary',
+      borderBottomColor: 'border.default',
       borderBottomStyle: 'solid'
-    }}>
-      Heading with bottom border
+    }}
+  >
+    Heading with bottom border
   </Heading>
 </>
 ```
@@ -45,7 +46,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
   borderRadius={2}
   p={2}
   sx={{
-    bg: ['bg.primary', 'bg.info', 'bg.success', 'bg.warning', 'bg.danger']
+    bg: ['neutral.subtle', 'accent.subtle', 'success.subtle', 'attention.subtle', 'danger.subtle']
   }}
 >
   Responsive background color
@@ -61,7 +62,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
   sx={{
     '> *': {
       borderWidth: 1,
-      borderColor: "border.default",
+      borderColor: 'border.default',
       borderStyle: 'solid',
       borderBottomWidth: 0,
       padding: 2,
@@ -69,7 +70,7 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
         borderBottomWidth: 1
       },
       ':hover': {
-        bg: "neutral.muted"
+        bg: 'neutral.muted'
       }
     }
   }}

package/docs/content/theming.md

@@ -57,8 +57,8 @@ Some [system props](/system-props) and [`sx` prop](/overriding-styles) keys are
 ```jsx
 const theme = {
   colors: {
-    bg: {
-      primary: '#fff'
+    canvas: {
+      default: '#fff'
     }
   }
 }
@@ -67,7 +67,7 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <Box bg="canvas.default"></Box>
-      <Box sx={{bg: "canvas.default"}}></Box>
+      <Box sx={{bg: 'canvas.default'}}></Box>
     </ThemeProvider>
   )
 }
@@ -84,7 +84,7 @@ import {themeGet} from '@primer/components'
 import styled from 'styled-components'
 
 const Example = styled.div`
-  background-color: ${themeGet("colors.canvas.default")};
+  background-color: ${themeGet('colors.canvas.default')};
 `
 ```
 
@@ -97,7 +97,7 @@ import {ThemeProvider, useTheme} from '@primer/components'
 
 function Example() {
   const {theme} = useTheme()
-  // theme.colors.bg.primary
+  // theme.colors.canvas.default
 }
 
 function App() {