fix: update hover events

ccontrols · Sep 18, 2020 · ac49d31 · ac49d31
1 parent 8efacdd
commit ac49d31
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -142,6 +142,6 @@ import { ColorBlock4Palette } from '@component-controls/design-tokens';
     Success: { value: '#18a761', name: 'Green500' },
     Info: { value: '#2270ee', name: 'Blue400' },
     Border: { value: '#dfe0e1', name: 'Neutral60' },
-    Accent: { value: '#f5f5f5', name: 'Neutral40' },
+    Black: { value: '#000000', name: 'Black40' },
   }}
 />
diff --git a/ui/design-tokens/src/Colors/ColorBlock2/ColorBlock2.tsx b/ui/design-tokens/src/Colors/ColorBlock2/ColorBlock2.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, useState } from 'react';
+import { FC, useState, useMemo } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { readableColor } from 'polished';
@@ -17,12 +17,23 @@ export const ColorBlock2: FC<ColorProps> = ({ name, color, hover }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   const textColor = readableColor(hex, '#000', '#fff', true);
+  const isContained = typeof hover !== 'undefined';
+  const onMouseEvents = useMemo(
+    () =>
+      isContained
+        ? {}
+        : {
+            onMouseOver: () => setHoverMe(true),
+            onMouseOut: () => setHoverMe(false),
+          },
+    [isContained],
+  );
+
   return (
     <Box sx={{ display: 'flex', flex: '1', width: 250 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
         <Box
-          onMouseOver={() => setHoverMe(true)}
-          onMouseOut={() => setHoverMe(false)}
+          {...onMouseEvents}
           sx={{
             display: 'flex',
             flexDirection: 'row',
@@ -49,7 +60,10 @@ export const ColorBlock2: FC<ColorProps> = ({ name, color, hover }) => {
           </Box>
           <Box
             className="item-text"
-            sx={hover || hoverMe ? undefined : { visibility: 'hidden' }}
+            sx={{
+              pointerEvents: 'none',
+              ...(hover || hoverMe ? {} : { visibility: 'hidden', width: 0 }),
+            }}
           >
             {!name
               ? `${rgba.red}, ${rgba.green}, ${rgba.blue}${

diff --git a/ui/design-tokens/src/Colors/ColorBlock3/ColorBlock3.tsx b/ui/design-tokens/src/Colors/ColorBlock3/ColorBlock3.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC, useState } from 'react';
+import { FC, useState, useMemo } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { readableColor } from 'polished';
@@ -17,12 +17,23 @@ export const ColorBlock3: FC<ColorProps> = ({ name, color, hover }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   const textColor = readableColor(hex, '#000', '#fff', true);
+  const isContained = typeof hover !== 'undefined';
+
+  const onMouseEvents = useMemo(
+    () =>
+      isContained
+        ? {}
+        : {
+            onMouseOver: () => setHoverMe(true),
+            onMouseOut: () => setHoverMe(false),
+          },
+    [isContained],
+  );
   return (
     <Box sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
         <Box
-          onMouseOver={() => setHoverMe(true)}
-          onMouseOut={() => setHoverMe(false)}
+          {...onMouseEvents}
           sx={{
             position: 'absolute',
             top: 0,
@@ -53,9 +64,10 @@ export const ColorBlock3: FC<ColorProps> = ({ name, color, hover }) => {
             {name || hex}
           </Box>
           <Box
-            sx={
-              hover || hoverMe ? undefined : { visibility: 'hidden', height: 0 }
-            }
+            sx={{
+              pointerEvents: 'none',
+              ...(hover || hoverMe ? {} : { visibility: 'hidden', height: 0 }),
+            }}
           >
             {!name
               ? `${rgba.red}, ${rgba.green}, ${rgba.blue}${

diff --git a/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx b/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx
@@ -16,7 +16,7 @@ export type ColorBlock4Props = { sx?: SxProps } & ColorProps;
 export const ColorBlock4: FC<ColorBlock4Props> = ({ name, color, sx }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex } = colorToStr(colorValue);
-  const textColor = readableColor(hex, '#000', '#fff', true);
+  const textColor = readableColor(hex);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', width: 180 }}>
       <CopyContainer value={hex} name={name}>