Removing global styles and fixing tooltip activator

Shopify · Feb 3, 2021 · b3da2f3 · b3da2f3
1 parent 4f556ce
commit b3da2f3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 25 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -6,8 +6,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- Added `flush` prop to `Card.Section` ([#3645](https://github.com/Shopify/polaris-react/pull/3645))
-- Added `stretchContent` prop for `Button` ([#3664](https://github.com/Shopify/polaris-react/pull/3664))
 - Added `focus-visible` polyfill and default styles ([#3695](https://github.com/Shopify/polaris-react/pull/3695))
 
 ### Bug fixes

diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
@@ -62,29 +62,6 @@ body {
   box-sizing: border-box;
 }
 
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
-  border-radius: var(--p-border-radius-base);
-}
-
-[data-js-focus-visible] {
-  :focus:not([data-focus-visible-added]) {
-    outline: none;
-  }
-
-  // stylelint-disable-next-line selector-max-attribute
-  [data-focus-visible-added] {
-    outline: none;
-    box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
-    border-radius: var(--p-border-radius-base);
-  }
-}
-
 h1,
 h2,
 h3,

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -60,6 +60,7 @@ export function Tooltip({
 
     accessibilityNode.tabIndex = 0;
     accessibilityNode.setAttribute('aria-describedby', id);
+    accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');
   }, [id, children]);
 
   const handleKeyUp = useCallback(

diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -34,3 +34,17 @@ $content-max-width: rem(200px);
   padding: spacing(extra-tight) spacing(tight);
   word-break: break-word;
 }
+
+[data-polaris-tooltip-activator] {
+  outline: 0;
+  @include focus-ring;
+
+  &:focus-visible {
+    @include focus-ring($style: 'focused');
+  }
+}
+
+// stylelint-disable-next-line selector-max-attribute
+[data-polaris-tooltip-activator][data-focus-visible-added] {
+  @include focus-ring($style: 'focused');
+}