Merge pull request #207 from element-hq/t3chguy/IconButton-subtleBg

element-hq · Jul 12, 2024 · 5213319 · 5213319
2 parents ae928d1 + 4b3d867
commit 5213319
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 0 deletions.
diff --git a/...test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png b/...test.ts-snapshots/Button-IconButton-With-Subtle-Background-1-chromium-linux.png
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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