fix: hover text class

ccontrols · Aug 29, 2020 · 3b41e0a · 3b41e0a
1 parent fe758e4
commit 3b41e0a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/ui/components/src/HoverBox/HoverBox.stories.tsx b/ui/components/src/HoverBox/HoverBox.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Donut } from 'theme-ui';
+import { Donut, Text } from 'theme-ui';
 import { HoverBox } from '.';
 
 export default {
@@ -9,6 +9,7 @@ export default {
 
 export const overview = () => (
   <HoverBox label="donut component">
-    <Donut value={1 / 2} />,
+    <Donut value={1 / 2} />
+    <Text>some text</Text>
   </HoverBox>
 );
diff --git a/ui/components/src/HoverBox/HoverBox.tsx b/ui/components/src/HoverBox/HoverBox.tsx
@@ -17,7 +17,9 @@ export const HoverBox: FC<HoverBoxProps> = ({ label, children }) => {
   return (
     <Box variant="hoverbox.container">
       <Box variant="hoverbox.inner">{children}</Box>
-      <Text variant="hoverbox.text">{label}</Text>
+      <Text variant="hoverbox.text" className="hoverbox-text">
+        {label}
+      </Text>
     </Box>
   );
 };
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -741,8 +741,8 @@ export const theme: ControlsTheme = {
       minHeight: '100%',
       minWidth: 'unset',
       pr: 4,
-      ':hover': {
-        '& > div': {
+      ':hover {': {
+        '& > .hoverbox-text': {
           color: 'mutedText',
         },
       },