From 6f483f38362cbf153d9c09c025294da5de4f88c7 Mon Sep 17 00:00:00 2001
From: Daniel <danielrobertson733@gmail.com>
Date: Mon, 22 May 2023 15:01:03 -0500
Subject: [PATCH] fix(tag): copy button overlay fade alignment (#378)

---
 .changeset/witty-radios-own.md                |  5 +++
 apps/website/docs/data-display/tag.mdx        | 16 ++++-----
 .../react/src/components/Tag/Tag.styles.ts    | 16 +++++----
 packages/react/src/components/Tag/Tag.tsx     | 16 +++++----
 packages/react/stories/Tag.stories.tsx        | 34 ++++++++++++++-----
 5 files changed, 58 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/witty-radios-own.md

diff --git a/.changeset/witty-radios-own.md b/.changeset/witty-radios-own.md
new file mode 100644
index 00000000..f8f2264f
--- /dev/null
+++ 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
index 1f9f5d7a..87ff96ad 100644
--- 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,18 +19,16 @@ 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
 
@@ -38,7 +36,7 @@ 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>
 ```
 
 ### Disabled
@@ -46,7 +44,7 @@ Backspace/Delete key.
 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
index 78d10c58..9e20fdc4 100644
--- 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
index 3c98c06f..6296c224 100644
--- 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
index 55cd891e..bacfe3c4 100644
--- 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 = () => (