🎨 xsmall variant for CopyButton (#1994)

navikt · May 22, 2023 · 444e905 · 444e905
1 parent b7a9733
commit 444e905
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/.changeset/twelve-carrots-build.md b/.changeset/twelve-carrots-build.md
@@ -0,0 +1,8 @@
+---
+"@navikt/ds-css": patch
+"@navikt/ds-react": patch
+---
+
+:tada: CopyButton har nå en `xsmall`-variant
+
+- Kan nå lettere brukes i tabeller
diff --git a/@navikt/core/css/copybutton.css b/@navikt/core/css/copybutton.css
@@ -27,6 +27,12 @@
   min-height: 2rem;
 }
 
+.navds-copybutton--xsmall {
+  --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  min-height: 1.5rem;
+}
+
 .navds-copybutton--icon-only {
   --__ac-copybutton-padding: var(--a-spacing-3);
 }
@@ -35,6 +41,14 @@
   --__ac-copybutton-padding: var(--a-spacing-1);
 }
 
+.navds-copybutton--xsmall.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-05);
+}
+
+.navds-copybutton--xsmall .navds-copybutton__icon {
+  font-size: 1.25rem;
+}
+
 .navds-copybutton__icon {
   font-size: 1.5rem;
   display: flex;
@@ -45,6 +59,10 @@
   margin: 0;
 }
 
+:where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
+  margin: -2px;
+}
+
 .navds-copybutton:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
@@ -108,6 +126,10 @@
   gap: var(--a-spacing-2);
 }
 
+.navds-copybutton--xsmall > .navds-copybutton__content {
+  gap: var(--a-spacing-1);
+}
+
 .navds-copybutton--active > .navds-copybutton__content {
   animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
 }

diff --git a/@navikt/core/react/src/copybutton/CopyButton.tsx b/@navikt/core/react/src/copybutton/CopyButton.tsx
@@ -14,8 +14,9 @@ export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   /**
    * @default "medium"
+   * xsmall should only be used in tables/
    */
-  size?: "medium" | "small";
+  size?: "medium" | "small" | "xsmall";
   /**
    * @default "neutral"
    */

diff --git a/@navikt/core/react/src/copybutton/copy-button.stories.tsx b/@navikt/core/react/src/copybutton/copy-button.stories.tsx
@@ -11,7 +11,7 @@ export default {
     size: {
       defaultValue: "medium",
       control: { type: "radio" },
-      options: ["small", "medium"],
+      options: ["small", "medium", "xsmall"],
     },
     variant: {
       defaultValue: undefined,
@@ -85,6 +85,22 @@ export const Sizes = {
           text="Kopier"
         />
       </div>
+      <div className="rowgap">
+        <CopyButton size="xsmall" copyText="3.14" variant="action" />
+        <CopyButton size="xsmall" copyText="3.14" variant="neutral" />
+        <CopyButton
+          size="xsmall"
+          copyText="3.14"
+          variant="action"
+          text="Kopier"
+        />
+        <CopyButton
+          size="xsmall"
+          copyText="3.14"
+          variant="neutral"
+          text="Kopier"
+        />
+      </div>
     </div>
   ),
 };
@@ -107,6 +123,14 @@ export const Texts = {
           activeText="Kopierte XYZ"
         />
       </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          text="Kopier XYZ"
+          activeText="Kopierte XYZ"
+        />
+      </div>
     </div>
   ),
 };
@@ -129,6 +153,14 @@ export const Icons = {
           activeIcon={<ThumbUpIcon title="Kopiert" />}
         />
       </div>
+      <div>
+        <CopyButton
+          copyText="3.14"
+          size="xsmall"
+          icon={<LinkIcon title="Kopier" />}
+          activeIcon={<ThumbUpIcon title="Kopiert" />}
+        />
+      </div>
     </div>
   ),
 };