From 4b3d867e37abd0a23014b01cd89ada610a03ba66 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Fri, 12 Jul 2024 10:54:44 +0100
Subject: [PATCH] Add subtle-bg variant to IconButton

To match Figma https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=656-7159&t=YyxhzkrG2nuC13Zk-1
---
 ...ith-Subtle-Background-1-chromium-linux.png | Bin 0 -> 5328 bytes
 .../Button/IconButton/IconButton.module.css   |   5 +++
 .../Button/IconButton/IconButton.stories.tsx  |   5 +++
 .../Button/IconButton/IconButton.test.tsx     |   5 +++
 .../Button/IconButton/IconButton.tsx          |   3 ++
 .../__snapshots__/IconButton.test.tsx.snap    |  36 ++++++++++++++++++
 6 files changed, 54 insertions(+)
 create mode 100644 playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png

diff --git a/playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..8efb7dfc7cdd9d84809ab60b64e177e74c091608
GIT binary patch
literal 5328
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

literal 0
HcmV?d00001

diff --git a/src/components/Button/IconButton/IconButton.module.css b/src/components/Button/IconButton/IconButton.module.css
index b5ae6d66..4fd54411 100644
--- a/src/components/Button/IconButton/IconButton.module.css
+++ b/src/components/Button/IconButton/IconButton.module.css
@@ -35,6 +35,11 @@ limitations under the License.
   line-height: 0px;
 }
 
+.subtle-bg {
+  color: var(--cpd-color-icon-secondary);
+  background: var(--cpd-color-bg-subtle-secondary);
+}
+
 .icon-button[aria-disabled="true"] {
   color: var(--cpd-color-icon-disabled);
   cursor: not-allowed;
diff --git a/src/components/Button/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
index 038822c1..0957bae2 100644
--- a/src/components/Button/IconButton/IconButton.stories.tsx
+++ b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -83,6 +83,11 @@ export const WithCriticalIndicator = {
     indicator: "critical",
   },
 };
+export const WithSubtleBackground = {
+  args: {
+    subtleBackground: true,
+  },
+};
 
 export const WithLabel = {
   args: {
diff --git a/src/components/Button/IconButton/IconButton.test.tsx b/src/components/Button/IconButton/IconButton.test.tsx
index 8a716878..92c9f973 100644
--- a/src/components/Button/IconButton/IconButton.test.tsx
+++ b/src/components/Button/IconButton/IconButton.test.tsx
@@ -28,6 +28,7 @@ const {
   WithSuccessIndicator,
   WithCriticalIndicator,
   WithIndicatorDisabled,
+  WithSubtleBackground,
 } = composeStories(stories);
 
 describe("IconButton", () => {
@@ -55,4 +56,8 @@ describe("IconButton", () => {
     const { container } = render(<WithIndicatorDisabled />);
     expect(container).toMatchSnapshot();
   });
+  it("renders a WithSubtleBackground IconButton", () => {
+    const { container } = render(<WithSubtleBackground />);
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Button/IconButton/IconButton.tsx b/src/components/Button/IconButton/IconButton.tsx
index 87bc92ff..4c8f7840 100644
--- a/src/components/Button/IconButton/IconButton.tsx
+++ b/src/components/Button/IconButton/IconButton.tsx
@@ -53,6 +53,7 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> &
      * Optional tooltip for the button
      */
     tooltip?: string;
+    subtleBackground?: boolean;
   };
 
 /**
@@ -71,12 +72,14 @@ export const IconButton = forwardRef<
     disabled,
     destructive,
     tooltip,
+    subtleBackground,
     ...props
   },
   ref,
 ) {
   const classes = classnames(styles["icon-button"], className, {
     [styles.destructive]: destructive,
+    [styles["subtle-bg"]]: subtleBackground,
   });
 
   const button = (
diff --git a/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
index b1cadf39..e6182686 100644
--- a/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -186,6 +186,42 @@ exports[`IconButton > renders a WithIndicatorDisabled IconButton 1`] = `
 </div>
 `;
 
+exports[`IconButton > renders a WithSubtleBackground IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    class="_icon-button_e3253e _subtle-bg_e3253e"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <div
+      class="_indicator-icon_ab1fc6"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        class="cpd-icon"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.175 13.825C9.958 14.608 10.9 15 12 15s2.042-.392 2.825-1.175C15.608 13.042 16 12.1 16 11s-.392-2.042-1.175-2.825C14.042 7.392 13.1 7 12 7s-2.042.392-2.825 1.175C8.392 8.958 8 9.9 8 11s.392 2.042 1.175 2.825Zm4.237-1.412A1.926 1.926 0 0 1 12 13c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 11c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 9c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412Z"
+        />
+        <path
+          d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+        />
+        <path
+          d="M16.23 18.792a12.47 12.47 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0c-.487.12-.972.271-1.455.455a8.04 8.04 0 0 1-1.729-1.454c.89-.412 1.794-.729 2.709-.95A13.76 13.76 0 0 1 12 16c1.1 0 2.183.13 3.25.387a14.78 14.78 0 0 1 2.709.95 8.042 8.042 0 0 1-1.73 1.455Z"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
 exports[`IconButton > renders a WithSuccessIndicator IconButton 1`] = `
 <div>
   <button