From ce112c1b5f585fb0bd6ca9c364a602e677a7fe4f Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Mon, 4 Dec 2023 08:30:07 +1300
Subject: [PATCH 1/2] Button refactor: use shared functional component for
 IconButton and Button (#133)

* use shared internal button for Button and IconButton

* comment

* update disabled styles and tests for IconButton
---
 src/components/Alert/Alert.tsx                |   2 +-
 .../Alert/__snapshots__/Alert.test.tsx.snap   |  12 +-
 src/components/Button/Button.tsx              |  35 +---
 .../IconButton/IconButton.module.css          |  10 +-
 .../IconButton/IconButton.stories.tsx         |  44 +++--
 .../Button/IconButton/IconButton.test.tsx     |  53 ++++++
 .../{ => Button}/IconButton/IconButton.tsx    |  38 ++--
 .../__snapshots__/IconButton.test.tsx.snap    | 174 ++++++++++++++++++
 .../IconButton/indicator-mask.svg             |   0
 src/components/Button/UnstyledButton.tsx      |  89 +++++++++
 .../IconButton.test.tsx => Button/index.ts}   |  22 +--
 .../__snapshots__/IconButton.test.tsx.snap    |  32 ----
 src/components/Tooltip/Tooltip.stories.tsx    |   2 +-
 src/components/Tooltip/Tooltip.test.tsx       |   2 +-
 .../__snapshots__/Tooltip.test.tsx.snap       |   8 +-
 src/index.ts                                  |   3 +-
 16 files changed, 404 insertions(+), 122 deletions(-)
 rename src/components/{ => Button}/IconButton/IconButton.module.css (89%)
 rename src/components/{ => Button}/IconButton/IconButton.stories.tsx (67%)
 create mode 100644 src/components/Button/IconButton/IconButton.test.tsx
 rename src/components/{ => Button}/IconButton/IconButton.tsx (69%)
 create mode 100644 src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
 rename src/components/{ => Button}/IconButton/indicator-mask.svg (100%)
 create mode 100644 src/components/Button/UnstyledButton.tsx
 rename src/components/{IconButton/IconButton.test.tsx => Button/index.ts} (51%)
 delete mode 100644 src/components/IconButton/__snapshots__/IconButton.test.tsx.snap

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 39261532..6ce5b008 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -24,7 +24,7 @@ import CloseIcon from "@vector-im/compound-design-tokens/icons/close.svg";
 
 import styles from "./Alert.module.css";
 import { Text } from "../Typography/Text";
-import { IconButton } from "../IconButton/IconButton";
+import { IconButton } from "../Button";
 
 type AlertProps = {
   /**
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
index 863dc3a1..d6c3e50e 100644
--- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap
+++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -72,9 +72,10 @@ exports[`Alert > renders actions 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="_icon-button_1d4528 _close_6cfd7b"
+      class="_icon-button_e3253e _close_6cfd7b"
       role="button"
       style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
     >
       <svg
         class="cpd-icon"
@@ -134,9 +135,10 @@ exports[`Alert > renders critical 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="_icon-button_1d4528 _close_6cfd7b"
+      class="_icon-button_e3253e _close_6cfd7b"
       role="button"
       style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
     >
       <svg
         class="cpd-icon"
@@ -206,9 +208,10 @@ exports[`Alert > renders info 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="_icon-button_1d4528 _close_6cfd7b"
+      class="_icon-button_e3253e _close_6cfd7b"
       role="button"
       style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
     >
       <svg
         class="cpd-icon"
@@ -268,9 +271,10 @@ exports[`Alert > renders success 1`] = `
     </div>
     <button
       aria-label="Close"
-      class="_icon-button_1d4528 _close_6cfd7b"
+      class="_icon-button_e3253e _close_6cfd7b"
       role="button"
       style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
     >
       <svg
         class="cpd-icon"
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 813d0f58..bcec8199 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -23,6 +23,7 @@ import React, {
   Ref,
 } from "react";
 import styles from "./Button.module.css";
+import { UnstyledButton, UnstyledButtonPropsFor } from "./UnstyledButton";
 
 interface ButtonComponent {
   // With the explicit `as` prop
@@ -46,18 +47,10 @@ type ButtonOwnProps = PropsWithChildren<{
    * An icon to display within the button.
    */
   Icon?: ComponentType<React.SVGAttributes<SVGElement>>;
-  /**
-   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.
-   * `aria-disabled` attribute is used to indicate button is disabled.
-   * Event handlers are not passed to disabled buttons (onClick, onSubmit).
-   */
-  disabled?: boolean;
 }>;
 
 type ButtonPropsFor<C extends React.ElementType> = ButtonOwnProps &
-  Omit<React.ComponentPropsWithoutRef<C>, keyof ButtonOwnProps | "as"> & {
-    ref?: React.Ref<React.ComponentRef<C>>;
-  };
+  UnstyledButtonPropsFor<C>;
 
 /**
  * A button component that can be transformed into a link, but keep the button
@@ -78,32 +71,20 @@ export const Button = forwardRef(function Button<
   }: ButtonPropsFor<C> & { as?: C },
   ref: ForwardedRef<C>,
 ): React.ReactElement {
-  const Component = as || ("button" as const);
   const classes = classNames(styles.button, className, {
     [styles["has-icon"]]: Icon,
   });
 
-  const { onClick, onSubmit, ...restProps } = props;
-  const eventHandlers = disabled
-    ? {}
-    : {
-        onClick,
-        onSubmit,
-      };
-
   return (
-    <Component
-      {...restProps}
+    <UnstyledButton
+      {...props}
+      as={as || ("button" as const)}
       ref={ref as Ref<C>}
       className={classes}
-      data-kind={kind}
       data-size={size}
-      // All elements roles should be overriden at the exceptions of anchors
-      // We want them to behave like links but look like buttons
-      role={as === "a" ? "link" : "button"}
+      data-kind={kind}
       tabIndex={0}
-      {...eventHandlers}
-      aria-disabled={disabled}
+      disabled={disabled}
     >
       {Icon && (
         <Icon
@@ -114,6 +95,6 @@ export const Button = forwardRef(function Button<
         />
       )}
       {children}
-    </Component>
+    </UnstyledButton>
   );
 }) as ButtonComponent;
diff --git a/src/components/IconButton/IconButton.module.css b/src/components/Button/IconButton/IconButton.module.css
similarity index 89%
rename from src/components/IconButton/IconButton.module.css
rename to src/components/Button/IconButton/IconButton.module.css
index f6555747..c4d9d093 100644
--- a/src/components/IconButton/IconButton.module.css
+++ b/src/components/Button/IconButton/IconButton.module.css
@@ -33,7 +33,7 @@ limitations under the License.
   line-height: 0;
 }
 
-.icon-button:disabled {
+.icon-button[aria-disabled="true"] {
   color: var(--cpd-color-icon-disabled);
   cursor: not-allowed;
 }
@@ -70,19 +70,19 @@ limitations under the License.
  */
 
 @media (hover) {
-  .icon-button:not(:disabled):hover {
+  .icon-button:not([aria-disabled="true"]):hover {
     color: var(--cpd-color-icon-primary);
     background: var(--cpd-color-bg-subtle-primary);
   }
 }
 
-.icon-button:not(:disabled):active {
+.icon-button:not([aria-disabled="true"]):active {
   color: var(--cpd-color-icon-primary);
   background: var(--cpd-color-bg-subtle-primary);
 }
 
 @media (hover) {
-  .icon-button[data-indicator]:is(:hover)::before {
+  .icon-button:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
     /* Same colour as the background */
     border: var(--cpd-icon-button-indicator-border-size) solid
       var(--cpd-color-bg-subtle-primary);
@@ -91,7 +91,7 @@ limitations under the License.
   }
 }
 
-.icon-button[data-indicator]:is(:active)::before {
+.icon-button:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
   /* Same colour as the background */
   border: var(--cpd-icon-button-indicator-border-size) solid
     var(--cpd-color-bg-subtle-primary);
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/Button/IconButton/IconButton.stories.tsx
similarity index 67%
rename from src/components/IconButton/IconButton.stories.tsx
rename to src/components/Button/IconButton/IconButton.stories.tsx
index 2225d4f3..848602b7 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/components/Button/IconButton/IconButton.stories.tsx
@@ -25,8 +25,18 @@ export default {
   title: "Button/IconButton",
   component: IconButtonComponent,
   tags: ["autodocs"],
-  argTypes: {},
-  args: {},
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+  },
+  argTypes: {
+    control: { type: "boolean" },
+    onClick: { action: "onClick" },
+  },
+  args: {
+    size: "32px",
+    disabled: false,
+    children: <UserIcon />,
+  },
 } as Meta<typeof IconButtonComponent>;
 
 const Template: StoryFn<typeof IconButtonComponent> = (args) => (
@@ -45,15 +55,27 @@ const Template: StoryFn<typeof IconButtonComponent> = (args) => (
   </>
 );
 
-export const Normal = Template.bind({});
-Normal.args = {};
+export const Demo = Template.bind({});
 
-export const WithIndicator = Template.bind({});
-WithIndicator.args = {
-  indicator: "default",
+export const Default = { args: {} };
+export const DefaultDisabled = {
+  args: {
+    disabled: true,
+  },
 };
-
-export const WithHighlightIndicator = Template.bind({});
-WithHighlightIndicator.args = {
-  indicator: "highlight",
+export const WithIndicator = {
+  args: {
+    indicator: "default",
+  },
+};
+export const WithIndicatorDisabled = {
+  args: {
+    indicator: "default",
+    disabled: true,
+  },
+};
+export const WithHighlightIndicator = {
+  args: {
+    indicator: "highlight",
+  },
 };
diff --git a/src/components/Button/IconButton/IconButton.test.tsx b/src/components/Button/IconButton/IconButton.test.tsx
new file mode 100644
index 00000000..7e6a3ebe
--- /dev/null
+++ b/src/components/Button/IconButton/IconButton.test.tsx
@@ -0,0 +1,53 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import React from "react";
+import { composeStories } from "@storybook/react";
+
+import * as stories from "./IconButton.stories";
+
+const {
+  Default,
+  DefaultDisabled,
+  WithIndicator,
+  WithHighlightIndicator,
+  WithIndicatorDisabled,
+} = composeStories(stories);
+
+describe("IconButton", () => {
+  it("renders a Default IconButton", () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a DefaultDisabled IconButton", () => {
+    const { container } = render(<DefaultDisabled />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a WithIndicator IconButton", () => {
+    const { container } = render(<WithIndicator />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a WithHighlightIndicator IconButton", () => {
+    const { container } = render(<WithHighlightIndicator />);
+    expect(container).toMatchSnapshot();
+  });
+  it("renders a WithIndicatorDisabled IconButton", () => {
+    const { container } = render(<WithIndicatorDisabled />);
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/Button/IconButton/IconButton.tsx
similarity index 69%
rename from src/components/IconButton/IconButton.tsx
rename to src/components/Button/IconButton/IconButton.tsx
index 017f1c20..9d22044a 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/Button/IconButton/IconButton.tsx
@@ -18,22 +18,25 @@ import React, { PropsWithChildren, forwardRef } from "react";
 import classnames from "classnames";
 
 import styles from "./IconButton.module.css";
+import { UnstyledButton } from "../UnstyledButton";
+import { UnstyledButtonPropsFor } from "../UnstyledButton";
 
-type IconButtonProps = JSX.IntrinsicElements["button"] & {
-  /**
-   * The CSS class name.
-   */
-  className?: string;
-  /**
-   * The avatar size in CSS units, e.g. `"24px"`.
-   * @default 32px
-   */
-  size?: CSSStyleDeclaration["height"];
-  /**
-   * The icon button indicator displayed on the top right
-   */
-  indicator?: "default" | "highlight";
-};
+type IconButtonProps = UnstyledButtonPropsFor<"button"> &
+  JSX.IntrinsicElements["button"] & {
+    /**
+     * The CSS class name.
+     */
+    className?: string;
+    /**
+     * The avatar size in CSS units, e.g. `"24px"`.
+     * @default 32px
+     */
+    size?: CSSStyleDeclaration["height"];
+    /**
+     * The icon button indicator displayed on the top right
+     */
+    indicator?: "default" | "highlight";
+  };
 
 /**
  * Display an icon as a button. Can render an indicator
@@ -47,7 +50,8 @@ export const IconButton = forwardRef<
 ) {
   const classes = classnames(styles["icon-button"], className);
   return (
-    <button
+    <UnstyledButton
+      as="button"
       ref={ref}
       className={classes}
       style={
@@ -60,6 +64,6 @@ export const IconButton = forwardRef<
       data-indicator={indicator}
     >
       {React.Children.only(children)}
-    </button>
+    </UnstyledButton>
   );
 });
diff --git a/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
new file mode 100644
index 00000000..356bcd2b
--- /dev/null
+++ b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -0,0 +1,174 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`IconButton > renders a Default IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    class="_icon-button_e3253e"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <svg
+      class="cpd-icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`IconButton > renders a DefaultDisabled IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    class="_icon-button_e3253e"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <svg
+      class="cpd-icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`IconButton > renders a WithHighlightIndicator IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    class="_icon-button_e3253e"
+    data-indicator="highlight"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <svg
+      class="cpd-icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`IconButton > renders a WithIndicator IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    class="_icon-button_e3253e"
+    data-indicator="default"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <svg
+      class="cpd-icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`IconButton > renders a WithIndicatorDisabled IconButton 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    class="_icon-button_e3253e"
+    data-indicator="default"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <svg
+      class="cpd-icon"
+      fill="none"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
+        fill="currentColor"
+      />
+    </svg>
+  </button>
+</div>
+`;
diff --git a/src/components/IconButton/indicator-mask.svg b/src/components/Button/IconButton/indicator-mask.svg
similarity index 100%
rename from src/components/IconButton/indicator-mask.svg
rename to src/components/Button/IconButton/indicator-mask.svg
diff --git a/src/components/Button/UnstyledButton.tsx b/src/components/Button/UnstyledButton.tsx
new file mode 100644
index 00000000..bce30306
--- /dev/null
+++ b/src/components/Button/UnstyledButton.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2023  New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { PropsWithChildren, forwardRef, ForwardedRef, Ref } from "react";
+
+interface ButtonComponent {
+  // With the explicit `as` prop
+  <C extends React.ElementType>(
+    props: { as: C } & UnstyledButtonPropsFor<C>,
+  ): React.ReactElement;
+  // Without the explicit `as` prop, defaulting to a <button>
+  (props: UnstyledButtonPropsFor<"button">): React.ReactElement;
+}
+
+type UnstyledButtonProps = PropsWithChildren<{
+  /**
+   * Note that disabled attribute is not added to buttons, so that disabled buttons are discoverable by keyboard.
+   * `aria-disabled` attribute is used to indicate button is disabled.
+   * Event handlers are not passed to disabled buttons (onClick, onSubmit).
+   */
+  disabled?: boolean;
+}>;
+
+export type UnstyledButtonPropsFor<C extends React.ElementType> =
+  UnstyledButtonProps &
+    Omit<
+      React.ComponentPropsWithoutRef<C>,
+      keyof UnstyledButtonProps | "as"
+    > & {
+      ref?: React.Ref<React.ComponentRef<C>>;
+    };
+
+/**
+ * Unstyled button component. Can be disabled and optionalally rendered as an anchor.
+ * Intended to be wrapped with styles and exported as new button type - eg `IconButton` or `Button`.
+ *
+ * Not to be used externally.
+ */
+export const UnstyledButton = forwardRef(function UnstyledButton<
+  C extends React.ElementType = "button",
+>(
+  {
+    as,
+    children,
+    className,
+    disabled,
+    ...props
+  }: UnstyledButtonPropsFor<C> & { as?: C },
+  ref: ForwardedRef<C>,
+): React.ReactElement {
+  const Component = as || ("button" as const);
+
+  const { onClick, onSubmit, ...restProps } = props;
+  const eventHandlers = disabled
+    ? {}
+    : {
+        onClick,
+        onSubmit,
+      };
+
+  return (
+    <Component
+      {...restProps}
+      ref={ref as Ref<C>}
+      className={className}
+      // All elements roles should be overriden at the exceptions of anchors
+      // We want them to behave like links but look like buttons
+      role={as === "a" ? "link" : "button"}
+      tabIndex={0}
+      {...eventHandlers}
+      aria-disabled={disabled}
+    >
+      {children}
+    </Component>
+  );
+}) as ButtonComponent;
diff --git a/src/components/IconButton/IconButton.test.tsx b/src/components/Button/index.ts
similarity index 51%
rename from src/components/IconButton/IconButton.test.tsx
rename to src/components/Button/index.ts
index d967a396..567209b7 100644
--- a/src/components/IconButton/IconButton.test.tsx
+++ b/src/components/Button/index.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2023  New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,21 +14,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import React from "react";
-
-import { IconButton } from "./IconButton";
-
-import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
-
-describe("IconButton", () => {
-  it("renders", () => {
-    const { asFragment } = render(
-      <IconButton>
-        <UserIcon />
-      </IconButton>,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
+export { Button } from "./Button";
+export { IconButton } from "./IconButton/IconButton";
diff --git a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
deleted file mode 100644
index 4b3d112f..00000000
--- a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`IconButton > renders 1`] = `
-<DocumentFragment>
-  <button
-    class="_icon-button_1d4528"
-    style="--cpd-icon-button-size: 32px;"
-  >
-    <svg
-      class="cpd-icon"
-      fill="none"
-      height="1em"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
-        fill="currentColor"
-      />
-      <path
-        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
-        fill="currentColor"
-      />
-      <path
-        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
-        fill="currentColor"
-      />
-    </svg>
-  </button>
-</DocumentFragment>
-`;
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 320b20f4..d882278d 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -18,7 +18,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Tooltip as TooltipComponent } from "./Tooltip";
-import { IconButton } from "../IconButton/IconButton";
+import { IconButton } from "../Button";
 
 import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
 
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 8b460644..42c9384f 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -19,7 +19,7 @@ import { render } from "@testing-library/react";
 import React from "react";
 
 import { Tooltip } from "./Tooltip";
-import { IconButton } from "../IconButton/IconButton";
+import { IconButton } from "../Button";
 
 describe("Tooltip", () => {
   beforeAll(() => {
diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 2369ce34..7a42e8b2 100644
--- a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -3,9 +3,11 @@
 exports[`Tooltip > renders 1`] = `
 <DocumentFragment>
   <button
-    class="_icon-button_1d4528"
+    class="_icon-button_e3253e"
     data-state="closed"
+    role="button"
     style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
   >
     <svg />
   </button>
@@ -16,9 +18,11 @@ exports[`Tooltip > renders open by default 1`] = `
 <DocumentFragment>
   <button
     aria-describedby="radix-:r0:"
-    class="_icon-button_1d4528"
+    class="_icon-button_e3253e"
     data-state="instant-open"
+    role="button"
     style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
   >
     <svg />
   </button>
diff --git a/src/index.ts b/src/index.ts
index 239e00d8..25be450b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,7 +22,7 @@ export { Alert } from "./components/Alert/Alert";
 export { Avatar } from "./components/Avatar/Avatar";
 export { AvatarStack } from "./components/Avatar/AvatarStack";
 export { Badge } from "./components/Badge/Badge";
-export { Button } from "./components/Button/Button";
+export { Button, IconButton } from "./components/Button";
 export { Body } from "./components/Typography/Body";
 export { Text } from "./components/Typography/Text";
 export { Glass } from "./components/Glass/Glass";
@@ -35,7 +35,6 @@ export {
   H5,
   H6,
 } from "./components/Typography/Heading";
-export { IconButton } from "./components/IconButton/IconButton";
 export { Link } from "./components/Link/Link";
 export { Menu } from "./components/Menu/Menu";
 export { MenuItem } from "./components/Menu/MenuItem";

From 964280ee2a29fbeef5e6a11d887388c878925a01 Mon Sep 17 00:00:00 2001
From: ElementRobot <releases@riot.im>
Date: Sun, 3 Dec 2023 19:34:15 +0000
Subject: [PATCH 2/2] patch version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b3aabae7..f7579b8f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/compound-web.js",