From 3f532ad20c6b872990c5122d93774ab6c87ee667 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Wed, 16 Oct 2024 12:08:10 -0400
Subject: [PATCH] feat(ButtonToggle): implement new icon variant of toggle
 (#860)

* feat(buttontoggle): first implementation of the ButtonToggle component

* test(buttontoggle): added tests

* fix(buttontoggle): fix A11y errors

* refactor(buttontoggle): fix styling bugs in CellBasic
---
 packages/components/src/common/warnings.ts    |  7 +-
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../__snapshots__/banner.test.tsx.snap        |  2 +-
 .../Button/__storybook__/index.stories.tsx    |  2 +-
 .../__storybook__/index.stories.tsx           |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../components/src/core/ButtonIcon/style.ts   | 12 +++
 .../ButtonToggle/__storybook__/constants.tsx  | 29 ++++++
 .../__storybook__/index.stories.tsx           | 76 ++++++++++++++++
 .../__storybook__/stories/default.tsx         |  8 ++
 .../__storybook__/stories/test.tsx            | 15 ++++
 .../__tests__/ButtonToggle.namespace-test.tsx | 13 +++
 .../__snapshots__/index.test.tsx.snap         | 30 +++++++
 .../ButtonToggle/__tests__/index.test.tsx     | 90 +++++++++++++++++++
 .../src/core/ButtonToggle/index.tsx           | 50 +++++++++++
 .../components/src/core/ButtonToggle/style.ts | 30 +++++++
 .../src/core/CellBasic/__storybook__/style.ts | 14 +--
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../src/core/Panel/__storybook__/constants.ts |  3 +
 .../Panel/__storybook__/stories/default.tsx   | 15 ++--
 .../__snapshots__/index.test.tsx.snap         |  1 -
 packages/components/src/core/Panel/style.ts   |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 packages/components/src/index.ts              |  2 +
 26 files changed, 390 insertions(+), 37 deletions(-)
 create mode 100644 packages/components/src/core/ButtonToggle/__storybook__/constants.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/__storybook__/index.stories.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/__storybook__/stories/default.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/__storybook__/stories/test.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/__tests__/ButtonToggle.namespace-test.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/components/src/core/ButtonToggle/__tests__/index.test.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/index.tsx
 create mode 100644 packages/components/src/core/ButtonToggle/style.ts

diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts
index 9d18c003f..26b9957f6 100644
--- a/packages/components/src/common/warnings.ts
+++ b/packages/components/src/common/warnings.ts
@@ -2,6 +2,7 @@ export enum SDSWarningTypes {
   ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps",
   ButtonMissingSDSProps = "buttonMissingProps",
   ButtonIconMissingIconProp = "buttonIconMissingIconProp",
+  ButtonToggleMissingIconProp = "buttonToggleMissingIconProp",
   ChipDeprecated = "chipDeprecated",
   MenuSelectDeprecated = "menuSelectDeprecated",
   TooltipSubtitle = "tooltipSubtitle",
@@ -9,7 +10,7 @@ export enum SDSWarningTypes {
   TooltipInverted = "tooltipInverted",
 }
 
-const SDS_WARNINGS = {
+export const SDS_WARNINGS = {
   [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
     hasWarned: false,
     message:
@@ -25,6 +26,10 @@ const SDS_WARNINGS = {
     message:
       "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
   },
+  [SDSWarningTypes.ButtonToggleMissingIconProp]: {
+    hasWarned: false,
+    message: "Warning: Button Toggles require an icon prop to be provided.",
+  },
   [SDSWarningTypes.ChipDeprecated]: {
     hasWarned: false,
     message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
index f00aeed5f..f4133fb52 100644
--- a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </span>
           <button
             aria-label="search-button"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
             icon="Search"
             tabindex="0"
             type="button"
@@ -160,7 +160,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-9z0etm-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -575,7 +575,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-9z0etm-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -1001,7 +1001,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             <button
               aria-hidden="false"
               aria-label="Search Button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
               icon="Search"
               tabindex="0"
               type="button"
diff --git a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
index 56df00d0f..c54f159c4 100644
--- a/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
+++ b/packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-72jt6e-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-14btmof-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
diff --git a/packages/components/src/core/Button/__storybook__/index.stories.tsx b/packages/components/src/core/Button/__storybook__/index.stories.tsx
index cf64a6c34..791faa71c 100644
--- a/packages/components/src/core/Button/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/Button/__storybook__/index.stories.tsx
@@ -73,7 +73,7 @@ export default {
   parameters: {
     badges: [BADGE.STABLE],
   },
-  title: "Components/Button",
+  title: "Components/Buttons/Button",
 } as Meta;
 
 // Default
diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
index f66367587..8b6bd3421 100644
--- a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
+++ b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
@@ -45,7 +45,7 @@ export default {
   parameters: {
     badges: [BADGE.STABLE],
   },
-  title: "Components/ButtonDropdown",
+  title: "Components/Buttons/ButtonDropdown",
 } as Meta;
 
 // Default
diff --git a/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
index b7c9649ea..64e587c37 100644
--- a/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
 <button
   aria-label="info"
-  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zkd9l9-MuiButtonBase-root-MuiIconButton-root"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sh3t66-MuiButtonBase-root-MuiIconButton-root"
   icon="InfoCircle"
   tabindex="0"
   type="button"
diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts
index 2c4b3ca63..327419d27 100644
--- a/packages/components/src/core/ButtonIcon/style.ts
+++ b/packages/components/src/core/ButtonIcon/style.ts
@@ -123,6 +123,10 @@ const small = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -137,6 +141,10 @@ const medium = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.l.height}px;
       width: ${iconSizes?.l.width}px;
@@ -151,6 +159,10 @@ const large = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.s}px ${spaces?.s}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.xl.height}px;
       width: ${iconSizes?.xl.height}px;
diff --git a/packages/components/src/core/ButtonToggle/__storybook__/constants.tsx b/packages/components/src/core/ButtonToggle/__storybook__/constants.tsx
new file mode 100644
index 000000000..a92b92ff8
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__storybook__/constants.tsx
@@ -0,0 +1,29 @@
+import CustomSdsIcon from "src/common/storybook/customSdsIcon";
+import CustomSvgIcon from "src/common/storybook/customSvgIcon";
+
+export const BUTTON_TOGGLE_EXCLUDED_CONTROLS = [
+  "sdsSize",
+  "icon",
+  "sdsStage",
+  "sdsType",
+];
+
+export const BUTTON_TOGGLE_ICON_OPTIONS = [
+  "InfoCircle",
+  "SlidersHorizontal",
+  "Filter",
+  "DotsHorizontal",
+  "LinesHorizontal3",
+  <CustomSdsIcon key="customSdsIcon" />,
+  <CustomSvgIcon key="customIcon" />,
+];
+
+export const BUTTON_TOGGLE_ICON_LABELS = [
+  "SDS Icon: InfoCircle (s/m/l)",
+  "SDS Icon: SlidersHorizontal (m/l)",
+  "SDS Icon: Filter (s)",
+  "SDS Icon: DotsHorizontal (s/m/l)",
+  "SDS Icon: LinesHorizontal3 (s/m/l)",
+  "Custom SDS Icon (s/m/l)",
+  "Custom SVG Icon (s/m/l)",
+];
diff --git a/packages/components/src/core/ButtonToggle/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonToggle/__storybook__/index.stories.tsx
new file mode 100644
index 000000000..2dd187d22
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__storybook__/index.stories.tsx
@@ -0,0 +1,76 @@
+import { Args, Meta } from "@storybook/react";
+import { BADGE } from "@geometricpanda/storybook-addon-badges";
+import { ButtonToggle } from "./stories/default";
+import {
+  BUTTON_TOGGLE_EXCLUDED_CONTROLS,
+  BUTTON_TOGGLE_ICON_LABELS,
+  BUTTON_TOGGLE_ICON_OPTIONS,
+} from "./constants";
+import { TestDemo } from "./stories/test";
+
+export default {
+  argTypes: {
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    icon: {
+      control: {
+        labels: BUTTON_TOGGLE_ICON_LABELS,
+        type: "select",
+      },
+      mapping: BUTTON_TOGGLE_ICON_OPTIONS,
+      options: Object.keys(BUTTON_TOGGLE_ICON_OPTIONS),
+    },
+    sdsSize: {
+      control: {
+        type: "select",
+      },
+      options: ["small", "medium", "large"],
+    },
+    sdsStage: {
+      control: {
+        type: "radio",
+      },
+      options: ["on", "off"],
+    },
+    sdsType: {
+      control: {
+        type: "radio",
+      },
+      options: ["primary", "secondary"],
+    },
+  },
+  component: ButtonToggle,
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+  title: "Components/Buttons/ButtonToggle",
+} as Meta;
+
+// Default
+
+export const Default = {
+  args: {
+    disabled: false,
+    icon: "InfoCircle",
+    sdsSize: "medium",
+    sdsStage: "off",
+    sdsType: "primary",
+  },
+};
+
+// Test
+
+export const Test = {
+  parameters: {
+    controls: {
+      exclude: BUTTON_TOGGLE_EXCLUDED_CONTROLS,
+    },
+    snapshot: {
+      skip: true,
+    },
+  },
+  render: (args: Args) => <TestDemo icon="InfoCircle" {...args} />,
+};
diff --git a/packages/components/src/core/ButtonToggle/__storybook__/stories/default.tsx b/packages/components/src/core/ButtonToggle/__storybook__/stories/default.tsx
new file mode 100644
index 000000000..37eb33932
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__storybook__/stories/default.tsx
@@ -0,0 +1,8 @@
+import { Args } from "@storybook/react";
+import RawButtonToggle from "src/core/ButtonToggle";
+
+export const ButtonToggle = (props: Args): JSX.Element => {
+  const { icon } = props;
+
+  return <RawButtonToggle aria-label="button-toggle" icon={icon} {...props} />;
+};
diff --git a/packages/components/src/core/ButtonToggle/__storybook__/stories/test.tsx b/packages/components/src/core/ButtonToggle/__storybook__/stories/test.tsx
new file mode 100644
index 000000000..744ca119e
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__storybook__/stories/test.tsx
@@ -0,0 +1,15 @@
+import { Args } from "@storybook/react";
+import ButtonToggle from "src/core/ButtonToggle";
+
+export const TestDemo = (props: Args): JSX.Element => {
+  const { icon } = props;
+
+  return (
+    <ButtonToggle
+      data-testid="button-toggle"
+      aria-label="button-toggle"
+      icon={icon}
+      {...props}
+    />
+  );
+};
diff --git a/packages/components/src/core/ButtonToggle/__tests__/ButtonToggle.namespace-test.tsx b/packages/components/src/core/ButtonToggle/__tests__/ButtonToggle.namespace-test.tsx
new file mode 100644
index 000000000..1078681f4
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__tests__/ButtonToggle.namespace-test.tsx
@@ -0,0 +1,13 @@
+import { ButtonToggle, ButtonToggleProps } from "@czi-sds/components";
+
+const ButtonToggleNameSpaceTest = (props: ButtonToggleProps) => {
+  return (
+    <ButtonToggle
+      sdsSize="medium"
+      sdsType="primary"
+      sdsStage="off"
+      icon="InfoCircle"
+      disabled={false}
+    />
+  );
+};
diff --git a/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..f5bb55c8b
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonToggle /> Default story renders snapshot 1`] = `
+<button
+  aria-label="button-toggle"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-ul4hcs-MuiButtonBase-root-MuiIconButton-root"
+  icon="InfoCircle"
+  tabindex="0"
+  type="button"
+>
+  <div
+    class="css-1ft6wgl"
+  >
+    <svg
+      aria-hidden="true"
+      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+      data-file-name="IconInfoCircleLarge"
+      data-testid="IconInfoCircleLarge"
+      fillcontrast="white"
+      focusable="false"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+    />
+  </div>
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
+</button>
+`;
diff --git a/packages/components/src/core/ButtonToggle/__tests__/index.test.tsx b/packages/components/src/core/ButtonToggle/__tests__/index.test.tsx
new file mode 100644
index 000000000..26799bf00
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/__tests__/index.test.tsx
@@ -0,0 +1,90 @@
+import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { composeStories } from "@storybook/react";
+import { cleanup, render, screen } from "@testing-library/react";
+import * as stories from "../__storybook__/index.stories";
+import { SDS_WARNINGS, SDSWarningTypes } from "src/common/warnings";
+
+const { Test } = composeStories(stories);
+
+const BUTTON_TOGGLE_TEST_ID = "button-toggle";
+
+describe("<ButtonToggle />", () => {
+  generateSnapshots(stories);
+
+  it("renders ButtonToggle component", () => {
+    render(<Test {...Test.args} />);
+    const panelElement = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(panelElement).not.toBeNull();
+  });
+
+  it("renders with different sdsSize values", () => {
+    render(<Test {...Test.args} sdsSize="small" />);
+    const smallButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(smallButton).toBeInTheDocument();
+
+    // (masoudmanson): cleanup is necessary to avoid having
+    // multiple elements with the same test id in the DOM
+    cleanup();
+
+    render(<Test {...Test.args} sdsSize="large" />);
+    const largeButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(largeButton).toBeInTheDocument();
+  });
+
+  it("renders with different sdsStage values", () => {
+    render(<Test {...Test.args} sdsStage="on" />);
+    const onStageButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(onStageButton).toBeInTheDocument();
+
+    cleanup();
+
+    render(<Test {...Test.args} sdsStage="off" />);
+    const offStageButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(offStageButton).toBeInTheDocument();
+  });
+
+  it("renders with different sdsType values", () => {
+    render(<Test {...Test.args} sdsType="primary" />);
+    const primaryButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(primaryButton).toBeInTheDocument();
+
+    cleanup();
+
+    render(<Test {...Test.args} sdsType="secondary" />);
+    const secondaryButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(secondaryButton).toBeInTheDocument();
+  });
+
+  it("displays warning when icon is missing", () => {
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+    render(<Test {...Test.args} icon={undefined} />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        SDS_WARNINGS[SDSWarningTypes.ButtonToggleMissingIconProp].message
+      )
+    );
+    warnSpy.mockRestore();
+  });
+
+  it("displays an error when an icon doesn't support the ButtonToggle size", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+    // (masoudmanson): SlidersHorizontal icon doesn't support the small size
+    // make sure to change this to another icon if the SlidersHorizontal icon is updated
+    const SdsIconWithoutSmallSize = "SlidersHorizontal";
+    render(
+      <Test {...Test.args} sdsSize="small" icon={SdsIconWithoutSmallSize} />
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      expect.stringContaining(
+        `Error: Icon ${SdsIconWithoutSmallSize} not found for size s. This is a @czi-sds/components problem.`
+      )
+    );
+    errorSpy.mockRestore();
+  });
+
+  it("renders with disabled state", () => {
+    render(<Test {...Test.args} disabled={true} />);
+    const disabledButton = screen.getByTestId(BUTTON_TOGGLE_TEST_ID);
+    expect(disabledButton).toBeDisabled();
+  });
+});
diff --git a/packages/components/src/core/ButtonToggle/index.tsx b/packages/components/src/core/ButtonToggle/index.tsx
new file mode 100644
index 000000000..80e06641f
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { ButtonProps } from "@mui/material";
+import { IconNameToSizes } from "../Icon";
+import {
+  SDSWarningTypes,
+  showWarningIfFirstOccurence,
+} from "src/common/warnings";
+import { StyledButtonToggle } from "./style";
+
+export interface ButtonToggleProps extends ButtonProps {
+  disabled?: boolean;
+  icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
+  sdsSize?: "small" | "medium" | "large";
+  sdsStage?: "on" | "off";
+  sdsType?: "primary" | "secondary";
+}
+
+/**
+ * @see https://mui.com/material-ui/react-button/
+ */
+
+const ButtonToggle = React.forwardRef<HTMLButtonElement, ButtonToggleProps>(
+  (props, ref) => {
+    const {
+      icon,
+      sdsSize = "medium",
+      sdsStage = "off",
+      sdsType = "primary",
+      ...rest
+    } = props;
+
+    if (icon !== undefined) {
+      return (
+        <StyledButtonToggle
+          icon={icon}
+          sdsType={sdsType}
+          sdsSize={sdsSize}
+          sdsStage={sdsStage}
+          ref={ref}
+          {...rest}
+        />
+      );
+    } else {
+      showWarningIfFirstOccurence(SDSWarningTypes.ButtonToggleMissingIconProp);
+      return null;
+    }
+  }
+);
+
+export default ButtonToggle;
diff --git a/packages/components/src/core/ButtonToggle/style.ts b/packages/components/src/core/ButtonToggle/style.ts
new file mode 100644
index 000000000..1effb6933
--- /dev/null
+++ b/packages/components/src/core/ButtonToggle/style.ts
@@ -0,0 +1,30 @@
+import styled from "@emotion/styled";
+import ButtonIcon from "../ButtonIcon";
+import { CommonThemeProps, getSemanticColors } from "../styles";
+import { ButtonToggleProps } from ".";
+
+/**
+ * (masoudmanson): Since StyledButtonToggle is built on top of ButtonIcon,
+ * we only need to exclude the `sdsStage` prop from being forwarded,
+ * as it is not a valid prop for ButtonIcon.
+ * All other props should be passed down to ButtonIcon; otherwise,
+ * the component won’t function as expected.
+ */
+const doNotForwardProps = ["sdsStage"];
+
+interface ButtonToggleExtraProps extends CommonThemeProps {
+  sdsStage?: ButtonToggleProps["sdsStage"];
+}
+
+export const StyledButtonToggle = styled(ButtonIcon, {
+  shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
+})`
+  ${(props: ButtonToggleExtraProps) => {
+    const { sdsStage } = props;
+    const semanticColors = getSemanticColors(props);
+
+    return `
+      background-color: ${sdsStage === "on" ? semanticColors?.base?.fillHover : "transparent"};
+    `;
+  }}
+`;
diff --git a/packages/components/src/core/CellBasic/__storybook__/style.ts b/packages/components/src/core/CellBasic/__storybook__/style.ts
index ad7abc929..546666d1f 100644
--- a/packages/components/src/core/CellBasic/__storybook__/style.ts
+++ b/packages/components/src/core/CellBasic/__storybook__/style.ts
@@ -16,7 +16,6 @@ export const ButtonIconsGroupRight = styled("div")`
     return `
       align-items: center;
       display: inline-flex;
-      gap: ${spaces?.xxxs}px;
       height: 100%;
       border-left: solid 1px ${semanticColors?.base?.divider};
       padding-left: ${spaces?.xs}px;
@@ -25,14 +24,7 @@ export const ButtonIconsGroupRight = styled("div")`
 `;
 
 export const ButtonIconsGroupBottom = styled("div")`
-  ${(props: CommonThemeProps) => {
-    const spaces = getSpaces(props);
-
-    return `
-      display: inline-flex;
-      gap: ${spaces?.xs}px;
-    `;
-  }}
+  display: inline-flex;
 `;
 
 export const StyledButton = styled(Button)`
@@ -95,8 +87,8 @@ export const StyledCellBasic = styled(CellBasic)`
     return `
       border: dashed 1px ${semanticColors?.base?.divider};
       height: 70px;
-      maxWidth: 250px;
-      width: 250px;
+      max-width: 300px;
+      width: 300px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
index a97786750..8339b6ff5 100644
--- a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1248kqk-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1y737h3-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -109,7 +109,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-113gqae-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-eu9ld9-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -196,7 +196,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1hk74hd-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-48ut0w-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -283,7 +283,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1hk74hd-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-48ut0w-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
diff --git a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
index 5c3185e6b..b69bc75c1 100644
--- a/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Pagination/__tests__/__snapshots__/index.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<Pagination /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="Go to a page"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-on67dm-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-navga8-MuiButtonBase-root-MuiIconButton-root"
       icon="DotsHorizontal"
       tabindex="0"
       type="button"
diff --git a/packages/components/src/core/Panel/__storybook__/constants.ts b/packages/components/src/core/Panel/__storybook__/constants.ts
index 594509c77..9e984bebf 100644
--- a/packages/components/src/core/Panel/__storybook__/constants.ts
+++ b/packages/components/src/core/Panel/__storybook__/constants.ts
@@ -3,4 +3,7 @@ export const PANEL_EXCLUDED_CONTROLS = [
   "position",
   "width",
   "disableScrollLock",
+  "HeaderComponent",
+  "CloseButtonComponent",
+  "closeButtonOnClick",
 ];
diff --git a/packages/components/src/core/Panel/__storybook__/stories/default.tsx b/packages/components/src/core/Panel/__storybook__/stories/default.tsx
index 4f67f3afc..bba3eee50 100644
--- a/packages/components/src/core/Panel/__storybook__/stories/default.tsx
+++ b/packages/components/src/core/Panel/__storybook__/stories/default.tsx
@@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material";
 import { Args } from "@storybook/react";
 import React, { useState } from "react";
 import { LONG_LOREM_IPSUM } from "src/common/storybook/loremIpsum";
-import Button from "src/core/Button";
+import ButtonToggle from "src/core/ButtonToggle";
 import Callout from "src/core/Callout";
 import CalloutTitle from "src/core/Callout/components/CalloutTitle";
 import RawPanel, { PanelProps } from "src/core/Panel";
@@ -105,15 +105,14 @@ export const Panel = (props: Args): JSX.Element => {
       </RawPanel>
 
       <Main open={open} {...props}>
-        <Button
-          sdsType="primary"
-          sdsStyle="icon"
+        <ButtonToggle
+          aria-label="button-toggle"
           icon="InfoCircle"
+          sdsSize="medium"
+          sdsType="primary"
           onClick={() => setOpen((prev) => !prev)}
-          aria-label="Panel Toggle"
-        >
-          Toggle Panel
-        </Button>
+          sdsStage={open ? "on" : "off"}
+        />
 
         <p>{LONG_LOREM_IPSUM}</p>
         <p>{LONG_LOREM_IPSUM}</p>
diff --git a/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
index 07ef7858d..2e49b56ce 100644
--- a/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Panel/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`<Panel /> Default story renders snapshot 1`] = `
 <div
   class="MuiDrawer-root MuiDrawer-docked css-1mn3xem-MuiDrawer-docked"
-  headercomponent="[object Object]"
 >
   <div
     class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper"
diff --git a/packages/components/src/core/Panel/style.ts b/packages/components/src/core/Panel/style.ts
index e430cfd99..71fd14085 100644
--- a/packages/components/src/core/Panel/style.ts
+++ b/packages/components/src/core/Panel/style.ts
@@ -19,7 +19,7 @@ const doNotForwardProps = [
   "sdsType",
   "position",
   "width",
-  "headerComponent",
+  "HeaderComponent",
   "onClick",
   "disableScrollLock",
   "closeButtonOnClick",
diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
index d7b86cf14..5c3cc7bda 100644
--- a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
       </span>
       <button
         aria-label="Delete Tag"
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
         icon="XMark"
         tabindex="0"
         type="button"
diff --git a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
index 212b3678e..bb00cee13 100644
--- a/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tooltip/__tests__/__snapshots__/index.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Tooltip /> Default story renders snapshot 1`] = `
   >
     <button
       aria-label="tooltip test button"
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium  css-zkd9l9-MuiButtonBase-root-MuiIconButton-root"
+      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium  css-1sh3t66-MuiButtonBase-root-MuiIconButton-root"
       data-mui-internal-clone-element="true"
       icon="ExclamationMarkCircle"
       tabindex="0"
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 4f90c7cd0..395238dac 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -16,6 +16,8 @@ export * from "./core/ButtonDropdown";
 export { default as ButtonDropdown } from "./core/ButtonDropdown";
 export * from "./core/ButtonIcon";
 export { default as ButtonIcon } from "./core/ButtonIcon";
+export * from "./core/ButtonToggle";
+export { default as ButtonToggle } from "./core/ButtonToggle";
 export * from "./core/Callout";
 export { default as Callout } from "./core/Callout";
 export { default as CalloutTitle } from "./core/Callout/components/CalloutTitle";