Add hover state to IssueLabelToken (#3112)

* prototype color mix * add fallback * added examples and hover without colorMix * update snapshots * add changeset --------- Co-authored-by: Lukas Oppermann <lukasoppermann@github.com>
primer · Apr 13, 2023 · bd4e139 · bd4e139
1 parent 36dbb73
commit bd4e139
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 5 deletions.
diff --git a/.changeset/wild-llamas-appear.md b/.changeset/wild-llamas-appear.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds shadow and color change to IssueLabelToken on hover
diff --git a/src/Token/IssueLabelToken.tsx b/src/Token/IssueLabelToken.tsx
@@ -112,8 +112,24 @@ const IssueLabelToken = forwardRef((props, forwardedRef) => {
             },
           }
         : {}),
+      ...(isTokenInteractive(props)
+        ? {
+            '&:hover': {
+              ...(isLightScheme
+                ? {
+                    backgroundImage:
+                      'linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)), rgb(var(--label-r),var(--label-g),var(--label-b)))',
+                  }
+                : {
+                    background:
+                      'hsla(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);',
+                  }),
+              boxShadow: 'shadow.medium',
+            },
+          }
+        : {}),
     }
-  }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected])
+  }, [fillColor, resolvedColorScheme, hideRemoveButton, onRemove, isSelected, props])
 
   return (
     <TokenBase

diff --git a/src/Token/Token.features.stories.tsx b/src/Token/Token.features.stories.tsx
@@ -33,7 +33,7 @@ export const InteractiveToken = () => {
         gap: get('space.2'),
       }}
     >
-      <Token as="a" href="http://google.com/" text="Link" />
+      <Token as="a" href="/?path=/story/components-token-features--issue-label-token-custom-colors" text="Link" />
       <Token as="button" onClick={action('clicked')} text="Button" />
       <Token as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" />
     </Box>
@@ -54,7 +54,12 @@ export const TokenWithOnRemoveFn = () => {
       }}
     >
       <Token text="token" onRemove={action('remove me')} />
-      <Token as="a" href="http://google.com/" onRemove={action('remove me')} text="Link" />
+      <Token
+        as="a"
+        href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+        onRemove={action('remove me')}
+        text="Link"
+      />
       <Token as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
       <Token as="span" tabIndex={0} onFocus={action('focused')} onRemove={action('remove me')} text="Focusable Span" />
     </Box>
@@ -77,7 +82,11 @@ export const InteractiveIssueLabelToken = () => {
         gap: get('space.2'),
       }}
     >
-      <IssueLabelToken as="a" href="http://google.com/" text="Link" />
+      <IssueLabelToken
+        as="a"
+        href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+        text="Link"
+      />
       <IssueLabelToken as="button" onClick={action('clicked')} text="Button" />
       <IssueLabelToken as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" />
     </Box>
@@ -96,7 +105,12 @@ export const IssueLabelTokenWithOnRemoveFn = () => {
       }}
     >
       <IssueLabelToken text="token" onRemove={action('remove me')} />
-      <IssueLabelToken as="a" href="http://google.com/" onRemove={action('remove me')} text="Link" />
+      <IssueLabelToken
+        as="a"
+        href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+        onRemove={action('remove me')}
+        text="Link"
+      />
       <IssueLabelToken as="button" onClick={action('clicked')} onRemove={action('remove me')} text="Button" />
       <IssueLabelToken
         as="span"
@@ -114,3 +128,157 @@ IssueLabelTokenWithOnRemoveFn.storyName = 'IssueLabelToken with onRemove fn'
 export const SmallToken = () => <Token text="token" size="small" />
 export const LargeToken = () => <Token text="token" size="xlarge" />
 export const XLargeToken = () => <Token text="token" size="xlarge" />
+
+export const IssueLabelTokenCustomColors = () => {
+  return (
+    <Box
+      display="flex"
+      sx={{
+        flexDirection: 'column',
+        alignItems: 'start',
+        gap: get('space.2'),
+      }}
+    >
+      <Box
+        display="flex"
+        sx={{
+          alignItems: 'start',
+          gap: get('space.2'),
+        }}
+      >
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Link"
+          fillColor="#0366d6"
+        />
+        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="deeppink" />
+        <IssueLabelToken as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" fillColor="coral" />
+      </Box>
+      <h3>Color examples</h3>
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        sx={{
+          alignItems: 'start',
+          gap: get('space.2'),
+        }}
+      >
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="😀 Link"
+          fillColor="#8c50c8"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Token"
+          fillColor="#a9d3bc"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="🚨 Problem"
+          fillColor="#98afa7"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="📥 Inbox"
+          fillColor="#573807"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="deeppink"
+          fillColor="#b7b41e"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="👹 Link"
+          fillColor="#0f65b1"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Tiger"
+          fillColor="#e7bc68"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="🐛 coral"
+          fillColor="#D6F2DE"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Long label"
+          fillColor="#161E37"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="✅ Done"
+          fillColor="#232323"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Hello"
+          fillColor="#E0E0E0"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Lorem"
+          fillColor="#aed531"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Lorem"
+          fillColor="#d980fc"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Lorem"
+          fillColor="#e7f922"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="🚀 Lorem"
+          fillColor="#ef70e9"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Lorem"
+          fillColor="#72ea84"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="Lorem"
+          fillColor="#87e50b"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="🤷 Lorem"
+          fillColor="#fcf646"
+        />
+        <IssueLabelToken
+          as="a"
+          href="/?path=/story/components-token-features--issue-label-token-custom-colors"
+          text="💡 Light"
+          fillColor="#f2107d"
+        />
+      </Box>
+    </Box>
+  )
+}
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -17848,6 +17848,11 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   border-color: hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));
 }
 
+.c4:hover {
+  background-image: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0.15)),linear-gradient(rgb(var(--label-r),var(--label-g),var(--label-b)),rgb(var(--label-r),var(--label-g),var(--label-b)));
+  box-shadow: 0 3px 6px rgba(140,149,159,0.15);
+}
+
 .c6 {
   background-color: transparent;
   font-family: inherit;