fix(tag): copy button overlay fade alignment (#378)

project44 · May 22, 2023 · 6f483f3 · 6f483f3
1 parent 98ffc5f
commit 6f483f3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 29 deletions.
diff --git a/.changeset/witty-radios-own.md b/.changeset/witty-radios-own.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': patch
+---
+
+fix tag copy button overlay alignment
diff --git a/apps/website/docs/data-display/tag.mdx b/apps/website/docs/data-display/tag.mdx
@@ -8,7 +8,7 @@ sidebar_custom_props:
 Label, categorize, or organize items using keywords that describe them.
 
 ```jsx live
-<Tag>Tag</Tag>
+<Tag>Truckload</Tag>
 ```
 
 ## Usage
@@ -19,34 +19,32 @@ Set the `isRemovable` prop to render a remove button within the tag. Can also be
 Backspace/Delete key.
 
 ```jsx live
-<Tag isRemovable>Tag</Tag>
+<Tag isRemovable>Truckload</Tag>
 ```
 
 ### Click-to-copy
 
 Set the `isCopyable` prop to enable click-to-copy functionality.
 
-````jsx live
-
 ```jsx live
-<Tag isCopyable>Tag</Tag>
-````
+<Tag isCopyable>Truckload</Tag>
+```
 
 ### Removable
 
 Set the `isRemovable` prop to render a remove button within the tag. Can also be triggered by
 Backspace/Delete key.
 
 ```jsx live
-<Tag isRemovable>Tag</Tag>
+<Tag isRemovable>Truckload</Tag>
 ```
 
 ### Disabled
 
 To indicate that a tag is disabled, set the `isDisabled` prop.
 
 ```jsx live
-<Tag isDisabled>Tag</Tag>
+<Tag isDisabled>Truckload</Tag>
 ```
 
 ### Adornments
@@ -55,7 +53,7 @@ To add a leading adornment to a tag, set the `startAdornment` prop.
 
 ```jsx live
 <Tag isRemovable startAdornment={<Flatbed size="small" />}>
-  Tag
+  Truckload
 </Tag>
 ```
 

diff --git a/packages/react/src/components/Tag/Tag.styles.ts b/packages/react/src/components/Tag/Tag.styles.ts
@@ -120,24 +120,28 @@ export const useStyles = css({
       css: {
         background: '$background-secondary',
 
-        '.manifest-tag__copy-icon': {
-          display: 'block',
+        '.manifest-tag__copy-icon-container': {
+          isolation: 'isolate',
           position: 'absolute',
           top: '15%',
           right: pxToRem(4),
+        },
+
+        '.manifest-tag__copy-icon': {
+          display: 'block',
           color: '$text-secondary',
         },
 
-        '.manifest-tag__text::after': {
+        '.manifest-tag__copy-icon-fade::after': {
+          zIndex: -1,
           content: '',
           position: 'absolute',
           top: 0,
           right: 0,
-          width: '100%',
+          width: '110%',
           height: '100%',
           backgroundImage:
-            'linear-gradient(to right, rgba(245, 245, 245, 0) 60%, rgba(245, 245, 245, 1) 75%)',
-          borderRadius: '0 1px 1px 0',
+            'linear-gradient(to right, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 1) 18%)',
           pointerEvents: 'none',
         },
       },

diff --git a/packages/react/src/components/Tag/Tag.tsx b/packages/react/src/components/Tag/Tag.tsx
@@ -137,12 +137,16 @@ export const Tag = createComponent<TagOptions>((props, forwardedRef) => {
       >
         {children}
       </Typography>
-      {isCopyable &&
-        (isCopied ? (
-          <Check className="manifest-tag__copy-icon" size="small" />
-        ) : (
-          <CopyAll className="manifest-tag__copy-icon" size="small" />
-        ))}
+      {isCopyable && (
+        <div className="manifest-tag__copy-icon-container">
+          {isCopied ? (
+            <Check className="manifest-tag__copy-icon" size="small" />
+          ) : (
+            <CopyAll className="manifest-tag__copy-icon" size="small" />
+          )}
+          <span className="manifest-tag__copy-icon-fade" />
+        </div>
+      )}
       {isRemovable && (
         <button
           {...removeButtonCombinedProps}

diff --git a/packages/react/stories/Tag.stories.tsx b/packages/react/stories/Tag.stories.tsx
@@ -68,14 +68,32 @@ export const Removable = () => (
 );
 
 export const Copyable = () => (
-  <Tag
-    isCopyable
-    aria-label="truckload tag"
-    label="Truckload"
-    removeButtonProps={{ 'aria-label': 'remove truckload' }}
-  >
-    Truckload
-  </Tag>
+  <Stack gap="medium" style={{ alignItems: 'flex-start' }}>
+    <Tag
+      isCopyable
+      aria-label="truckload tag"
+      label="Truckload"
+      removeButtonProps={{ 'aria-label': 'remove truckload' }}
+    >
+      Truckload
+    </Tag>
+    <Tag
+      isCopyable
+      aria-label="truckload tag"
+      label="Tag"
+      removeButtonProps={{ 'aria-label': 'remove truckload' }}
+    >
+      Tag
+    </Tag>
+    <Tag
+      isCopyable
+      aria-label="truckload tag"
+      label="1"
+      removeButtonProps={{ 'aria-label': 'remove truckload' }}
+    >
+      1
+    </Tag>
+  </Stack>
 );
 
 export const StartAdornment = () => (