@primer/components 31.2.1-rc.f73a0f8c → 32.0.1-rc.44e3df9b

package/docs/content/Timeline.md

@@ -13,10 +13,10 @@ The Timeline.Item component is used to display items on a vertical timeline, con
       <StyledOcticon icon={FlameIcon} />
     </Timeline.Badge>
     <Timeline.Body>
-      <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
+      <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
         Monalisa
       </Link>
-      created one <Link href="#" sx={{fontWeight: 'bold', color: "fg.default", mr: 1}} muted>
+      created one <Link href="#" sx={{fontWeight: 'bold', color: 'fg.default', mr: 1}} muted>
         hot potato
       </Link>
       <Link href="#" color="fg.muted" muted>
@@ -50,20 +50,20 @@ of the child `StyledOcticon` if necessary.
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
       <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background used when pull requests are merged</Timeline.Body>
   </Timeline.Item>
@@ -98,41 +98,51 @@ To create a visual break in the timeline, use Timeline.Break. This adds a horizo
 ```jsx live
 <Timeline>
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "danger.emphasis"}}>
+    <Timeline.Badge sx={{bg: 'danger.emphasis'}}>
       <StyledOcticon icon={FlameIcon} color="fg.onEmphasis" />
     </Timeline.Badge>
     <Timeline.Body>Background used when closed events occur</Timeline.Body>
   </Timeline.Item>
   <Timeline.Break />
   <Timeline.Item>
-    <Timeline.Badge sx={{bg: "success.emphasis"}}>
-      <StyledOcticon icon={FlameIcon} sx={{color: "fg.onEmphasis"}} />
+    <Timeline.Badge sx={{bg: 'success.emphasis'}}>
+      <StyledOcticon icon={FlameIcon} sx={{color: 'fg.onEmphasis'}} />
     </Timeline.Badge>
     <Timeline.Body>Background when opened or passed events occur</Timeline.Body>
   </Timeline.Item>
 </Timeline>
 ```
 
-## System props
+## Component props
 
-<Note variant="warning">
+### Timeline
 
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
+| Name        | Type              | Default | Description                                                                       |
+| :---------- | :---------------- | :-----: | :-------------------------------------------------------------------------------- |
+| clipSidebar | Boolean           |         | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
+| sx          | SystemStyleObject |   {}    | Style to be applied to the component                                              |
 
-</Note>
+### Timeline.Item
 
-Timeline and Timeline.Item components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+| Name      | Type              | Default | Description                                                           |
+| :-------- | :---------------- | :-----: | :-------------------------------------------------------------------- |
+| condensed | Boolean           |         | Reduces vertical padding and removes background from an item's badge. |
+| sx        | SystemStyleObject |   {}    | Style to be applied to the component                                  |
 
-## Component props
+### Timeline.Badge
 
-### Timeline
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
 
-| Prop name   | Type    | Description                                                                       |
-| :---------- | :------ | :-------------------------------------------------------------------------------- |
-| clipSidebar | Boolean | Hides the sidebar above the first Timeline.Item and below the last Timeline.Item. |
+### Timeline.Body
 
-### Timeline.Item
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |
+
+### Timeline.Break
 
-| Prop name | Type    | Description                                                           |
-| :-------- | :------ | :-------------------------------------------------------------------- |
-| condensed | Boolean | Reduces vertical padding and removes background from an item's badge. |
+| Name | Type              | Default | Description                          |
+| :--- | :---------------- | :-----: | :----------------------------------- |
+| sx   | SystemStyleObject |   {}    | Style to be applied to the component |

package/docs/content/Tooltip.md

@@ -20,22 +20,13 @@ Before adding a tooltip, please consider: Is this information essential and nece
 </Box>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Tooltip components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
-| Name       | Type    | Default | Description                                              |
-| :--------- | :------ | :-----: | :------------------------------------------------------- | --------------------------------------------------------- |
-| align      | String  |         | Can be either `left` or `right`.                         |
-| direction  | String  |         | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw` | Sets where the tooltip renders in relation to the target. |
-| noDelay    | Boolean |         | When set to `true`, tooltip appears without any delay    |
-| aria-label | String  |         | Text used in `aria-label` (for accessibility).           |
-| wrap       | Boolean |         | Use `true` to allow text within tooltip to wrap.         |
+| Name       | Type              | Default | Description                                                                                                         |
+| :--------- | :---------------- | :-----: | :------------------------------------------------------------------------------------------------------------------ |
+| align      | String            |         | Can be either `left` or `right`.                                                                                    |
+| direction  | String            |         | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw`. Sets where the tooltip renders in relation to the target. |
+| noDelay    | Boolean           |         | When set to `true`, tooltip appears without any delay                                                               |
+| aria-label | String            |         | Text used in `aria-label` (for accessibility).                                                                      |
+| wrap       | Boolean           |         | Use `true` to allow text within tooltip to wrap.                                                                    |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                                                                                |

package/docs/content/Truncate.md

@@ -44,21 +44,12 @@ You can use the `expandable` boolean prop to display the truncated text on hover
 </Truncate>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-Truncate 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  |  `div`  | Sets the HTML tag for the component                          |
-| maxWidth   | Number  |   125   | Sets the max-width of the text                               |
-| inline     | Boolean |  false  | displays text as inline block and vertical aligns to the top |
-| expandable | Boolean |  false  | allows the truncated text to be displayed on hover           |
+| Name       | Type              | Default | Description                                                  |
+| :--------- | :---------------- | :-----: | :----------------------------------------------------------- |
+| as         | String            |  `div`  | Sets the HTML tag for the component                          |
+| maxWidth   | Number            |   125   | Sets the max-width of the text                               |
+| inline     | Boolean           |  false  | displays text as inline block and vertical aligns to the top |
+| expandable | Boolean           |  false  | allows the truncated text to be displayed on hover           |
+| sx         | SystemStyleObject |   {}    | Style to be applied to the component                         |

package/docs/content/UnderlineNav.md

@@ -23,31 +23,23 @@ This ensures that the NavLink gets `activeClassName='selected'`
 </UnderlineNav>
 ```
 
-## System props
-
-<Note variant="warning">
-
-System props are deprecated in all components except [Box](/Box). Please use the [`sx` prop](/overriding-styles) instead.
-
-</Note>
-
-UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
-
 ## Component props
 
 ### UnderlineNav
 
-| Prop name  | Type    | 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.                         |
+| 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                                                   |
 
 ### UnderlineNav.Link
 
-| Prop name | Type    | 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 |
+| 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             |