Merge pull request #195 from element-hq/florianduros/icon-button

Add label and destructive props to `IconButton`
element-hq · Jun 24, 2024 · 2742ad1 · 2742ad1
2 parents 3b82efe + 81c390c
commit 2742ad1
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/...ght/visual.test.ts-snapshots/Button-IconButton-Destructive-1-chromium-linux.png b/...ght/visual.test.ts-snapshots/Button-IconButton-Destructive-1-chromium-linux.png
diff --git a/...ight/visual.test.ts-snapshots/Button-IconButton-With-Label-1-chromium-linux.png b/...ight/visual.test.ts-snapshots/Button-IconButton-With-Label-1-chromium-linux.png
diff --git a/src/components/Button/IconButton/IconButton.module.css b/src/components/Button/IconButton/IconButton.module.css
@@ -73,3 +73,14 @@ limitations under the License.
   inset-block-start: 0;
   inset-inline-end: 0;
 }
+
+@media (hover) {
+  .icon-button:not([aria-disabled="true"]).destructive:hover {
+    background: var(--cpd-color-bg-critical-subtle);
+    outline: 1px solid var(--cpd-color-border-critical-subtle);
+  }
+}
+
+.icon-button:not([aria-disabled="true"]).destructive > * {
+  color: var(--cpd-color-icon-critical-primary);
+}
diff --git a/src/components/Button/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -83,3 +83,15 @@ export const WithCriticalIndicator = {
     indicator: "critical",
   },
 };
+
+export const WithLabel = {
+  args: {
+    label: "label",
+  },
+};
+
+export const Destructive = {
+  args: {
+    destructive: "true",
+  },
+};
diff --git a/src/components/Button/IconButton/IconButton.tsx b/src/components/Button/IconButton/IconButton.tsx
@@ -21,6 +21,7 @@ import styles from "./IconButton.module.css";
 import { UnstyledButton } from "../UnstyledButton";
 import { UnstyledButtonPropsFor } from "../UnstyledButton";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
+import { Tooltip } from "../../Tooltip/Tooltip";
 
 type IconButtonProps = UnstyledButtonPropsFor<"button"> &
   JSX.IntrinsicElements["button"] & {
@@ -39,11 +40,19 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> &
      * As in IndicatorIcon
      */
     indicator?: "default" | "success" | "critical";
-
     /**
      * Whether the button is interactable
      */
     disabled?: boolean;
+    /**
+     * Whether this button triggers a destructive action.
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Optional tooltip for the button
+     */
+    tooltip?: string;
   };
 
 /**
@@ -53,11 +62,24 @@ export const IconButton = forwardRef<
   HTMLButtonElement,
   PropsWithChildren<IconButtonProps>
 >(function IconButton(
-  { children, className, indicator, size = "32px", style, disabled, ...props },
+  {
+    children,
+    className,
+    indicator,
+    size = "32px",
+    style,
+    disabled,
+    destructive,
+    tooltip,
+    ...props
+  },
   ref,
 ) {
-  const classes = classnames(styles["icon-button"], className);
-  return (
+  const classes = classnames(styles["icon-button"], className, {
+    [styles.destructive]: destructive,
+  });
+
+  const button = (
     <UnstyledButton
       as="button"
       ref={ref}
@@ -80,4 +102,6 @@ export const IconButton = forwardRef<
       </IndicatorIcon>
     </UnstyledButton>
   );
+
+  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;
 });