Tooltip no longer accepts styled system props (#1577)

primer · Nov 22, 2021 · 79f3133 · 79f3133
1 parent 84d5f3b
commit 79f3133
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/.changeset/silver-worms-talk.md b/.changeset/silver-worms-talk.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': major
+---
+
+Tooltip no longer accepts styled-system props. Please use the `sx` prop to extend Primer component styling instead. See also https://primer.style/react/overriding-styles for information about `sx` and https://primer.style/react/system-props for context on the removal.
diff --git a/docs/content/Tooltip.md b/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                                                                                |
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
@@ -1,11 +1,11 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled from 'styled-components'
-import {COMMON, get, SystemCommonProps} from './constants'
+import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const TooltipBase = styled.span<SystemCommonProps & SxProp>`
+const TooltipBase = styled.span<SxProp>`
   position: relative;
 
   &::before {
@@ -229,7 +229,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
   &.tooltipped-align-left-2::before {
     left: 10px;
   }
-  ${COMMON};
+
   ${sx};
 `
 

diff --git a/src/__tests__/Tooltip.types.test.tsx b/src/__tests__/Tooltip.types.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import Tooltip from '../Tooltip'
+
+export function shouldAcceptCallWithNoProps() {
+  return <Tooltip />
+}
+
+export function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Tooltip backgroundColor="thistle" />
+}