From 557bbd4b461034135df187df7bd565ad499b323e Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Thu, 20 Feb 2025 15:17:51 +0800
Subject: [PATCH] Fix disabled state

---
 .../experiments/toolbar/triggers.module.css         |  9 +++++++++
 .../app/(private)/experiments/toolbar/triggers.tsx  |  2 ++
 packages/react/src/toolbar/button/ToolbarButton.tsx | 13 ++++++++-----
 packages/react/src/toolbar/input/ToolbarInput.tsx   |  2 +-
 .../react/src/toolbar/root/ToolbarRoot.test.tsx     |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/docs/src/app/(private)/experiments/toolbar/triggers.module.css b/docs/src/app/(private)/experiments/toolbar/triggers.module.css
index ffc343bfd7..34b755bdda 100644
--- a/docs/src/app/(private)/experiments/toolbar/triggers.module.css
+++ b/docs/src/app/(private)/experiments/toolbar/triggers.module.css
@@ -41,3 +41,12 @@
   justify-content: center;
   align-items: center;
 }
+
+.Switch[data-disabled] {
+  cursor: not-allowed !important;
+  background-image: linear-gradient(
+    to right,
+    color-mix(in srgb, var(--color-gray-700) 30%, transparent) 35%,
+    color-mix(in srgb, var(--color-gray-200) 30%, transparent) 65%
+  );
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/triggers.tsx b/docs/src/app/(private)/experiments/toolbar/triggers.tsx
index 38974e9150..9a29bfa867 100644
--- a/docs/src/app/(private)/experiments/toolbar/triggers.tsx
+++ b/docs/src/app/(private)/experiments/toolbar/triggers.tsx
@@ -54,10 +54,12 @@ export const settingsMetadata: SettingsMetadata<Settings> = {
   switchDisabled: {
     type: 'boolean',
     label: 'Switch disabled',
+    default: false,
   },
   toolbarDisabled: {
     type: 'boolean',
     label: 'Everything disabled',
+    default: false,
   },
 };
 
diff --git a/packages/react/src/toolbar/button/ToolbarButton.tsx b/packages/react/src/toolbar/button/ToolbarButton.tsx
index 294a4fe8e1..406ccffbf8 100644
--- a/packages/react/src/toolbar/button/ToolbarButton.tsx
+++ b/packages/react/src/toolbar/button/ToolbarButton.tsx
@@ -19,7 +19,13 @@ const ToolbarButton = React.forwardRef(function ToolbarButton(
   props: ToolbarButton.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const { className, focusableWhenDisabled = true, render, ...otherProps } = props;
+  const {
+    className,
+    disabled: disabledProp = false,
+    focusableWhenDisabled = true,
+    render,
+    ...otherProps
+  } = props;
 
   const { disabled: toolbarDisabled, orientation } = useToolbarRootContext();
 
@@ -27,8 +33,7 @@ const ToolbarButton = React.forwardRef(function ToolbarButton(
 
   const itemMetadata = React.useMemo(() => ({ focusableWhenDisabled }), [focusableWhenDisabled]);
 
-  const disabled =
-    toolbarDisabled || (groupContext?.disabled ?? false) || (otherProps.disabled ?? false);
+  const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
 
   const { getButtonProps } = useButton({
     buttonRef: forwardedRef,
@@ -46,8 +51,6 @@ const ToolbarButton = React.forwardRef(function ToolbarButton(
     [disabled, focusableWhenDisabled, orientation],
   );
 
-  otherProps.disabled = disabled;
-
   const { renderElement } = useComponentRenderer({
     propGetter: getButtonProps,
     render: render ?? 'button',
diff --git a/packages/react/src/toolbar/input/ToolbarInput.tsx b/packages/react/src/toolbar/input/ToolbarInput.tsx
index e9c687164c..f54ed87ac7 100644
--- a/packages/react/src/toolbar/input/ToolbarInput.tsx
+++ b/packages/react/src/toolbar/input/ToolbarInput.tsx
@@ -66,7 +66,7 @@ export namespace ToolbarInput {
     focusable: boolean;
   }
 
-  export interface Props extends BaseUIComponentProps<'button', ToolbarRoot.State> {
+  export interface Props extends BaseUIComponentProps<'input', ToolbarRoot.State> {
     /**
      * When `true` the item is disabled.
      * @default false
diff --git a/packages/react/src/toolbar/root/ToolbarRoot.test.tsx b/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
index ddd89eaa1b..648f8a8127 100644
--- a/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
+++ b/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
@@ -127,7 +127,7 @@ describe('<Toolbar.Root />', () => {
     it('toolbar items can be focused when disabled by default', async () => {
       const { getAllByRole, getByRole, user } = await render(
         <Toolbar.Root>
-          <Toolbar.Button />
+          <Toolbar.Button disabled />
           <Toolbar.Group>
             <Toolbar.Button disabled />
             <Toolbar.Button disabled />