Fix disabled state

mui · Feb 20, 2025 · 557bbd4 · 557bbd4
1 parent 3288348
commit 557bbd4
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git 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
@@ -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
@@ -19,16 +19,21 @@ 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();
 
   const groupContext = useToolbarGroupContext(true);
 
   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
@@ -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
@@ -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 />