From 79f3133286061ae03cbb00849eb376c27f825460 Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Tue, 16 Nov 2021 15:00:02 -0800
Subject: [PATCH] Tooltip no longer accepts styled system props (#1577)

---
 .changeset/silver-worms-talk.md      |  5 +++++
 docs/content/Tooltip.md              | 25 ++++++++-----------------
 src/Tooltip.tsx                      |  6 +++---
 src/__tests__/Tooltip.types.test.tsx | 11 +++++++++++
 4 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/silver-worms-talk.md
 create mode 100644 src/__tests__/Tooltip.types.test.tsx

diff --git a/.changeset/silver-worms-talk.md b/.changeset/silver-worms-talk.md
new file mode 100644
index 00000000000..09bd4d9ef34
--- /dev/null
+++ 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
index dc807d0008b..e0522d672fc 100644
--- 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
index 49be90525f4..0e3baa22b2d 100644
--- 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
new file mode 100644
index 00000000000..c9280121588
--- /dev/null
+++ 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" />
+}