[⭐️][SpinButton]: Add SpinButton component

lib/Button/Button.tsx

@@ -35,9 +35,14 @@ type OwnProps = {
   className?: PropWithRenderContext<string, ClassNameProps>;
   /**
    * If `true`, the component will be disabled.
+   *
    * @default false
    */
   disabled?: boolean;
+  /**
+   * A value to replace `tabIndex` with.
+   */
+  overrideTabIndex?: number;
 };
 
 export type Props<E extends React.ElementType> = PolymorphicProps<E, OwnProps>;
@@ -51,6 +56,7 @@ const ButtonBase = <E extends React.ElementType, R extends HTMLElement>(
     children: childrenProp,
     id: idProp,
     as: RootNode = "button",
+    overrideTabIndex,
     onBlur,
     onFocus,
     onClick,
@@ -126,8 +132,13 @@ const ButtonBase = <E extends React.ElementType, R extends HTMLElement>(
       ? childrenProp(renderProps)
       : childrenProp;
 
+  let tabIndex = disabled ? -1 : 0;
+
+  if (overrideTabIndex) tabIndex = overrideTabIndex;
+
   return (
     <RootNode
+      {...otherProps}
       id={id}
       ref={refCallback}
       className={className}
@@ -138,8 +149,7 @@ const ButtonBase = <E extends React.ElementType, R extends HTMLElement>(
       onKeyDown={buttonBase.handleKeyDown}
       onKeyUp={buttonBase.handleKeyUp}
       data-slot={Slots.Root}
-      {...otherProps}
-      tabIndex={disabled ? -1 : 0}
+      tabIndex={tabIndex}
       data-disabled={disabled ? "" : undefined}
       data-focus-visible={buttonBase.isFocusedVisible ? "" : undefined}
     >

lib/Meter/Meter.tsx

@@ -51,7 +51,7 @@ type OwnProps = {
    */
   valueText: string;
   /**
-   * The label of the menu.
+   * The label of the component.
    */
   label:
     | {

lib/ProgressBar/ProgressBar.tsx

@@ -61,7 +61,7 @@ type OwnProps = {
    */
   indeterminated?: boolean;
   /**
-   * The label of the menu.
+   * The label of the component.
    */
   label:
     | {

lib/SpinButton/SpinButton.test.tsx

@@ -0,0 +1,323 @@
+import classNames from "classnames";
+import {
+  itShouldMount,
+  itSupportsDataSetProps,
+  itSupportsFocusEvents,
+  itSupportsRef,
+  itSupportsStyle,
+  render,
+  screen,
+  userEvent,
+} from "../../tests/utils";
+import * as SpinButton from "./index";
+
+describe("SpinButton", () => {
+  afterEach(jest.clearAllMocks);
+
+  const mockRequiredProps: SpinButton.RootProps = {
+    label: { screenReaderLabel: "Label" },
+    max: 100,
+    min: 0,
+    setValueText: v => String(v),
+  };
+
+  itShouldMount(SpinButton.Root, mockRequiredProps);
+  itSupportsStyle(SpinButton.Root, mockRequiredProps);
+  itSupportsRef(SpinButton.Root, mockRequiredProps, HTMLDivElement);
+  itSupportsFocusEvents(
+    SpinButton.Root,
+    mockRequiredProps,
+    "[role='spinbutton']",
+  );
+  itSupportsDataSetProps(SpinButton.Root, mockRequiredProps);
+
+  it("should have the required classNames", () => {
+    const { unmount } = render(
+      <SpinButton.Root
+        {...mockRequiredProps}
+        disabled
+        className={({ disabled, focusedVisible }) =>
+          classNames("spinbutton", {
+            "spinbutton--disabled": disabled,
+            "spinbutton--focus-visible": focusedVisible,
+          })
+        }
+      >
+        <SpinButton.DecrementButton
+          label={{ screenReaderLabel: "Decrement" }}
+          className={({ disabled }) =>
+            classNames("spinbutton__decrement", {
+              "spinbutton__decrement--disabled": disabled,
+            })
+          }
+        >
+          -
+        </SpinButton.DecrementButton>
+        <SpinButton.IncrementButton
+          label={{ screenReaderLabel: "Increment" }}
+          className={({ disabled }) =>
+            classNames("spinbutton__increment", {
+              "spinbutton__increment--disabled": disabled,
+            })
+          }
+        >
+          +
+        </SpinButton.IncrementButton>
+      </SpinButton.Root>,
+    );
+
+    expect(screen.getByRole("spinbutton")).toHaveClass(
+      "spinbutton",
+      "spinbutton--disabled",
+    );
+
+    expect(screen.getByRole("button", { name: "Decrement" })).toHaveClass(
+      "spinbutton__decrement",
+      "spinbutton__decrement--disabled",
+    );
+
+    expect(screen.getByRole("button", { name: "Increment" })).toHaveClass(
+      "spinbutton__increment",
+      "spinbutton__increment--disabled",
+    );
+
+    unmount();
+    render(
+      <SpinButton.Root
+        {...mockRequiredProps}
+        autoFocus
+        className={({ disabled, focusedVisible }) =>
+          classNames("spinbutton", {
+            "spinbutton--disabled": disabled,
+            "spinbutton--focus-visible": focusedVisible,
+          })
+        }
+      >
+        <SpinButton.DecrementButton
+          label={{ screenReaderLabel: "Decrement" }}
+          className={({ disabled }) =>
+            classNames("spinbutton__decrement", {
+              "spinbutton__decrement--disabled": disabled,
+            })
+          }
+        >
+          -
+        </SpinButton.DecrementButton>
+        <SpinButton.IncrementButton
+          label={{ screenReaderLabel: "Increment" }}
+          className={({ disabled }) =>
+            classNames("spinbutton__increment", {
+              "spinbutton__increment--disabled": disabled,
+            })
+          }
+        >
+          +
+        </SpinButton.IncrementButton>
+      </SpinButton.Root>,
+    );
+
+    expect(screen.getByRole("spinbutton")).toHaveClass(
+      "spinbutton",
+      "spinbutton--focus-visible",
+    );
+
+    expect(screen.getByRole("button", { name: "Decrement" })).toHaveClass(
+      "spinbutton__decrement",
+    );
+
+    expect(screen.getByRole("button", { name: "Increment" })).toHaveClass(
+      "spinbutton__increment",
+    );
+  });
+
+  it("should have the required aria and data attributes", () => {
+    render(
+      <SpinButton.Root {...mockRequiredProps}>
+        <SpinButton.DecrementButton label={{ screenReaderLabel: "Decrement" }}>
+          -
+        </SpinButton.DecrementButton>
+        <SpinButton.IncrementButton label={{ screenReaderLabel: "Increment" }}>
+          +
+        </SpinButton.IncrementButton>
+      </SpinButton.Root>,
+    );
+
+    const root = screen.getByRole("spinbutton");
+
+    expect(root).toHaveAttribute("aria-disabled", "false");
+    expect(root).toHaveAttribute("tabindex", "0");
+    expect(root).toHaveAttribute("aria-valuenow", "0");
+    expect(root).toHaveAttribute("aria-valuemin", "0");
+    expect(root).toHaveAttribute("aria-valuemax", "100");
+    expect(root).toHaveAttribute("aria-valuetext", "0");
+    expect(root).toHaveAttribute("aria-label", "Label");
+    expect(root).not.toHaveAttribute("data-disabled");
+
+    const dbtn = screen.getByRole("button", { name: "Decrement" });
+
+    expect(dbtn).toBeDisabled();
+    expect(dbtn).toHaveAttribute("tabindex", "-1");
+    expect(dbtn).toHaveAttribute("aria-label", "Decrement");
+    expect(dbtn).toHaveAttribute("data-disabled");
+
+    const ibtn = screen.getByRole("button", { name: "Increment" });
+
+    expect(ibtn).toBeEnabled();
+    expect(ibtn).toHaveAttribute("tabindex", "-1");
+    expect(ibtn).toHaveAttribute("aria-label", "Increment");
+    expect(ibtn).not.toHaveAttribute("data-disabled");
+  });
+
+  it("should work properly with controlled value using keyboard and mouse", async () => {
+    const handleValueChange = jest.fn<void, [number]>();
+
+    render(
+      <SpinButton.Root
+        {...mockRequiredProps}
+        autoFocus
+        value={0}
+        onValueChange={handleValueChange}
+      >
+        <SpinButton.DecrementButton label={{ screenReaderLabel: "Decrement" }}>
+          -
+        </SpinButton.DecrementButton>
+        <SpinButton.IncrementButton label={{ screenReaderLabel: "Increment" }}>
+          +
+        </SpinButton.IncrementButton>
+      </SpinButton.Root>,
+    );
+
+    const root = screen.getByRole("spinbutton");
+    const dbtn = screen.getByRole("button", { name: "Decrement" });
+    const ibtn = screen.getByRole("button", { name: "Increment" });
+
+    expect(root).toHaveFocus();
+
+    await userEvent.keyboard("[ArrowDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(0);
+
+    await userEvent.keyboard("[ArrowUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(1);
+    expect(handleValueChange.mock.calls[0]?.[0]).toBe(1);
+
+    await userEvent.keyboard("[PageUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(2);
+    expect(handleValueChange.mock.calls[1]?.[0]).toBe(5);
+
+    await userEvent.keyboard("[PageDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(2);
+
+    await userEvent.keyboard("[End]");
+
+    expect(handleValueChange.mock.calls.length).toBe(3);
+    expect(handleValueChange.mock.calls[2]?.[0]).toBe(100);
+
+    await userEvent.keyboard("[Home]");
+
+    expect(handleValueChange.mock.calls.length).toBe(3);
+
+    handleValueChange.mockReset();
+
+    await userEvent.click(dbtn);
+
+    expect(handleValueChange.mock.calls.length).toBe(0);
+
+    await userEvent.click(ibtn);
+
+    expect(handleValueChange.mock.calls.length).toBe(1);
+    expect(handleValueChange.mock.calls[0]?.[0]).toBe(1);
+  });
+
+  it("should work properly with uncontrolled value using keyboard and mouse", async () => {
+    const handleValueChange = jest.fn<void, [number]>();
+
+    render(
+      <SpinButton.Root
+        {...mockRequiredProps}
+        autoFocus
+        onValueChange={handleValueChange}
+      >
+        <SpinButton.DecrementButton label={{ screenReaderLabel: "Decrement" }}>
+          -
+        </SpinButton.DecrementButton>
+        <SpinButton.IncrementButton label={{ screenReaderLabel: "Increment" }}>
+          +
+        </SpinButton.IncrementButton>
+      </SpinButton.Root>,
+    );
+
+    const root = screen.getByRole("spinbutton");
+    const dbtn = screen.getByRole("button", { name: "Decrement" });
+    const ibtn = screen.getByRole("button", { name: "Increment" });
+
+    expect(root).toHaveFocus();
+
+    await userEvent.keyboard("[ArrowDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(0);
+
+    await userEvent.keyboard("[ArrowUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(1);
+    expect(handleValueChange.mock.calls[0]?.[0]).toBe(1);
+
+    await userEvent.keyboard("[PageUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(2);
+    expect(handleValueChange.mock.calls[1]?.[0]).toBe(6);
+
+    await userEvent.keyboard("[PageDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(3);
+    expect(handleValueChange.mock.calls[2]?.[0]).toBe(1);
+
+    await userEvent.keyboard("[PageDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(4);
+    expect(handleValueChange.mock.calls[3]?.[0]).toBe(0);
+
+    await userEvent.keyboard("[End]");
+
+    expect(handleValueChange.mock.calls.length).toBe(5);
+    expect(handleValueChange.mock.calls[4]?.[0]).toBe(100);
+
+    await userEvent.keyboard("[PageUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(5);
+
+    await userEvent.keyboard("[ArrowDown]");
+
+    expect(handleValueChange.mock.calls.length).toBe(6);
+    expect(handleValueChange.mock.calls[5]?.[0]).toBe(99);
+
+    await userEvent.keyboard("[PageUp]");
+
+    expect(handleValueChange.mock.calls.length).toBe(7);
+    expect(handleValueChange.mock.calls[6]?.[0]).toBe(100);
+
+    await userEvent.keyboard("[Home]");
+
+    expect(handleValueChange.mock.calls.length).toBe(8);
+    expect(handleValueChange.mock.calls[7]?.[0]).toBe(0);
+
+    handleValueChange.mockReset();
+
+    await userEvent.click(dbtn);
+
+    expect(handleValueChange.mock.calls.length).toBe(0);
+
+    await userEvent.click(ibtn);
+
+    expect(handleValueChange.mock.calls.length).toBe(1);
+    expect(handleValueChange.mock.calls[0]?.[0]).toBe(1);
+
+    await userEvent.click(dbtn);
+
+    expect(handleValueChange.mock.calls.length).toBe(2);
+    expect(handleValueChange.mock.calls[1]?.[0]).toBe(0);
+  });
+});