Disabled: keep the consumer className when isDisabled is false

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### Bug Fixes
 
+-   `Disabled`: Keep the `className` passed by the consumer on the wrapper when `isDisabled` is `false`. Only `components-disabled` and the disabled styling are conditional now, so the wrapper stays styleable and targetable in both states ([#82648](https://github.com/WordPress/gutenberg/pull/82648)).
 -   `ProgressBar`: Remove determinate transitions and use a slower, stepped indeterminate animation when reduced motion is preferred. ([#82490](https://github.com/WordPress/gutenberg/pull/82490))
 -   `ColorPalette`: Apply the computed contrast color to the selected checkmark now that the icon is stroke-based. ([#78812](https://github.com/WordPress/gutenberg/pull/78812))
 -   `CheckboxControl`: Color the checked and indeterminate icons with `color` rather than `fill`, so they stay visible now that those icons are stroke-based. ([#78812](https://github.com/WordPress/gutenberg/pull/78812))

packages/components/src/disabled/index.tsx

@@ -59,14 +59,14 @@ function Disabled( {
 			<div
 				// @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
 				inert={ isDisabled ? 'true' : undefined }
+				// Only the disabled styling is conditional. The consumer's own
+				// className has to stick around so the wrapper stays targetable
+				// whether or not it is currently disabled.
 				className={
-					isDisabled
-						? clsx(
-								styles.disabled,
-								className,
-								'components-disabled'
-						  )
-						: undefined
+					clsx(
+						className,
+						isDisabled && [ styles.disabled, 'components-disabled' ]
+					) || undefined
 				}
 				{ ...props }
 			>

packages/components/src/disabled/test/index.jsdom.test.tsx

@@ -68,6 +68,31 @@ describe( 'Disabled', () => {
 		);
 	} );
 
+	it( 'keeps the consumer className and toggles only the disabled classes', () => {
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled
+				isDisabled={ isDisabled }
+				className="my-wrapper"
+				data-testid="disabled-wrapper"
+			>
+				<Form />
+			</Disabled>
+		);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).not.toHaveClass( 'components-disabled' );
+		expect( wrapper ).not.toHaveClass( styles.disabled );
+	} );
+
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
 		const user = userEvent.setup();