[@mantine/core, @mantine/dates, @mantine/docs] Input components: Modify existing disabled style

docs/src/docs/core/FileInput.mdx

@@ -51,6 +51,10 @@ Set `multiple` to allow user to pick more than one file:
 
 <Demo data={FileInputDemos.multiple} />
 
+## Disabled state
+
+<Demo data={FileInputDemos.disabled} />
+
 ## Accept
 
 Set `accept` prop to restrict files selection to specific mime types:

docs/src/docs/core/JsonInput.mdx

@@ -33,6 +33,9 @@ function Demo() {
   return <JsonInput value={value} onChange={setValue} />;
 }
 ```
+## Disabled state
+
+<Demo data={JsonInputDemos.disabled} />
 
 ## Input props
 

docs/src/docs/core/MultiSelect.mdx

@@ -130,6 +130,10 @@ Note that you will need to handle data state to manage item creation correctly:
 
 <Demo data={MultiSelectDemos.groups} />
 
+## Disabled state
+
+<Demo data={MultiSelectDemos.disabled} />
+
 ## Disable items
 
 <Demo data={MultiSelectDemos.disabledItems} />

docs/src/docs/core/PinInput.mdx

@@ -45,7 +45,7 @@ Set `placeholder` to change placeholder of all fields. Note that it only accepts
 
 <Demo data={PinInputDemos.placeholder} />
 
-## Disabled
+## Disabled state
 
 <Demo data={PinInputDemos.disabled} />
 

docs/src/docs/core/Radio.mdx

@@ -32,6 +32,10 @@ function Demo() {
 }
 ```
 
+## Disabled state
+
+<Demo data={RadioDemos.disabled} />
+
 ## Radio.Group component
 
 <Demo data={RadioDemos.groupConfigurator} />

docs/src/docs/core/SegmentedControl.mdx

@@ -68,7 +68,7 @@ SegmentedControl support two different data formats:
 ]} />
 ```
 
-## Disabled
+## Disabled state
 
 <Demo data={SegmentedControlDemos.disabled} />
 

docs/src/docs/core/Slider.mdx

@@ -40,7 +40,7 @@ function Demo() {
 }
 ```
 
-## Disabled
+## Disabled state
 
 <Demo data={SliderDemos.disabled} />
 

docs/src/docs/core/Switch.mdx

@@ -32,6 +32,10 @@ function Demo() {
 }
 ```
 
+## Disabled state
+
+<Demo data={SwitchDemos.disabled} />
+
 ## Inner Labels
 
 <Demo data={SwitchDemos.labels} />

docs/src/docs/core/Textarea.mdx

@@ -38,6 +38,10 @@ function Demo() {
 }
 ```
 
+## Disabled state
+
+<Demo data={TextareaDemos.disabled} />
+
 ## Invalid state and error
 
 <Demo data={TextareaDemos.validation} />

docs/src/docs/dates/DateInput.mdx

@@ -57,6 +57,10 @@ to last known valid date value.
 
 <Demo data={DateInputDemos.minMax} />
 
+## Disabled state
+
+<Demo data={DateInputDemos.disabled} />
+
 ## Input props
 
 <Demo data={DateInputDemos.configurator} />

docs/src/docs/dates/DatePickerInput.mdx

@@ -55,6 +55,10 @@ prop, clear button will not be displayed.
 
 <Demo data={DatePickerInputDemos.clearable} />
 
+## Disabled state
+
+<Demo data={DatePickerInputDemos.disabled} />
+
 ## Input props
 
 `DatePickerInput` supports all props from [Input and Input.Wrapper](/core/input/)

docs/src/docs/dates/DateTimePicker.mdx

@@ -33,6 +33,10 @@ Use `valueFormat` prop to change [dayjs format](https://day.js.org/docs/en/displ
 
 <Demo data={DateTimePickerDemos.format} />
 
+## Disabled state
+
+<Demo data={DateTimePickerDemos.disabled} />
+
 ## Input props
 
 <Demo data={DateTimePickerDemos.configurator} />

docs/src/docs/dates/MonthPickerInput.mdx

@@ -55,6 +55,10 @@ prop, clear button will not be displayed.
 
 <Demo data={MonthPickerInputDemos.clearable} />
 
+## Disabled state
+
+<Demo data={MonthPickerInputDemos.disabled} />
+
 ## Input props
 
 `MonthPickerInput` supports all props from [Input and Input.Wrapper](/core/input/)

docs/src/docs/dates/TimeInput.mdx

@@ -34,6 +34,10 @@ You can show browser picker by calling `showPicker` method of input element:
 
 <Demo data={TimeInputDemos.icon} />
 
+## Disabled state
+
+<Demo data={TimeInputDemos.disabled} />
+
 ## Accessibility
 
 Provide `aria-label` in case you use component without label for screen reader support:

docs/src/docs/dates/YearPickerInput.mdx

@@ -55,6 +55,10 @@ prop, clear button will not be displayed.
 
 <Demo data={YearPickerInputDemos.clearable} />
 
+## Disabled state
+
+<Demo data={YearPickerInputDemos.disabled} />
+
 ## Input props
 
 `YearPickerInput` supports all props from [Input and Input.Wrapper](/core/input/)

src/mantine-core/src/Autocomplete/Autocomplete.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import {
+  itDisablesInputInsideDisabledFieldset,
   itSupportsSystemProps,
   itSupportsInputProps,
   checkAccessibility,
@@ -42,6 +43,7 @@ describe('@mantine/core/Autocomplete', () => {
     othersSelector: '.mantine-Autocomplete-input',
     providerName: 'Autocomplete',
   });
+  itDisablesInputInsideDisabledFieldset(Autocomplete, defaultProps);
 
   it('renders dropdown when value has both full match and partial match', () => {
     const { container } = render(

src/mantine-core/src/Checkbox/Checkbox.styles.ts

@@ -104,6 +104,7 @@ export default createStyles(
             theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
           borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],
           cursor: 'not-allowed',
+          pointerEvents: 'none',
 
           [`& + .${getStylesRef('icon')}`]: {
             color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],

src/mantine-core/src/Checkbox/Checkbox.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import {
   checkAccessibility,
+  itDisablesInputInsideDisabledFieldset,
   itSupportsSystemProps,
   itSupportsWrapperProps,
   itConnectsLabelAndInput,
@@ -38,6 +39,8 @@ describe('@mantine/core/Checkbox', () => {
     providerName: 'Checkbox',
   });
 
+  itDisablesInputInsideDisabledFieldset(Checkbox, defaultProps);
+
   it('sets disabled attribute on input based on disabled prop', () => {
     render(<Checkbox disabled />);
     expect(screen.getByRole('checkbox')).toBeDisabled();

src/mantine-core/src/Chip/Chip.styles.ts

@@ -145,6 +145,7 @@ export default createStyles((theme, { radius, color }: ChipStylesParams, { size,
         borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
         color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
         cursor: 'not-allowed',
+        pointerEvents: 'none',
 
         ...theme.fn.hover({
           backgroundColor:
@@ -196,6 +197,35 @@ export default createStyles((theme, { radius, color }: ChipStylesParams, { size,
       opacity: 0,
       margin: 0,
 
+      '&:disabled + label': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+
+        ...theme.fn.hover({
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+        }),
+
+        [`& .${getStylesRef('iconWrapper')}`]: {
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+        },
+
+        '&[data-checked]': {
+          paddingLeft: getSize({ size, sizes: checkedPadding }),
+          paddingRight: getSize({ size, sizes: checkedPadding }),
+
+          '&:not([data-disabled])': {
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+          },
+        },
+      },
+
       '&:focus': {
         outline: 'none',
 

src/mantine-core/src/Chip/Chip.test.tsx

@@ -10,6 +10,7 @@ import {
   itSupportsFocusEvents,
   itSupportsProviderSize,
   itSupportsProviderVariant,
+  itDisablesInputInsideDisabledFieldset,
 } from '@mantine/tests';
 import { Chip, ChipProps } from './Chip';
 
@@ -35,6 +36,7 @@ describe('@mantine/core/Chip', () => {
     othersSelector: 'input',
     providerName: 'Chip',
   });
+  itDisablesInputInsideDisabledFieldset(Chip, defaultProps);
 
   it('displays checked icon when input is checked', () => {
     const { container: checked } = render(<Chip {...defaultProps} checked />);

src/mantine-core/src/ColorInput/ColorInput.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   checkAccessibility,
+  itDisablesInputInsideDisabledFieldset,
   itSupportsSystemProps,
   itSupportsWrapperProps,
   itSupportsInputProps,
@@ -34,6 +35,7 @@ describe('@mantine/core/ColorInput', () => {
     othersSelector: 'input',
     providerName: 'ColorInput',
   });
+  itDisablesInputInsideDisabledFieldset(ColorInput, defaultProps);
 
   it('does not trigger onChange after onBlur', () => {
     const executions: ('change' | 'blur')[] = [];

src/mantine-core/src/FileInput/FileInput.test.tsx

@@ -6,6 +6,7 @@ import {
   itSupportsInputProps,
   itSupportsProviderVariant,
   itSupportsProviderSize,
+  itDisablesInputInsideDisabledFieldset,
 } from '@mantine/tests';
 import { FileInput, FileInputProps } from './FileInput';
 
@@ -30,4 +31,5 @@ describe('@mantine/core/FileInput', () => {
     othersSelector: 'button',
     providerName: 'FileInput',
   });
+  itDisablesInputInsideDisabledFieldset(FileInput, defaultProps);
 });

src/mantine-core/src/InlineInput/InlineInput.styles.ts

@@ -17,6 +17,10 @@ export default createStyles((theme, { labelPosition }: InlineInputStylesParams,
 
   body: {
     display: 'flex',
+
+    '&:has(input:disabled) label': {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+    },
   },
 
   labelWrapper: {
@@ -45,7 +49,7 @@ export default createStyles((theme, { labelPosition }: InlineInputStylesParams,
     cursor: theme.cursorType,
     [labelPosition === 'left' ? 'paddingRight' : 'paddingLeft']: theme.spacing.sm,
 
-    '&[data-disabled]': {
+    '&:disabled, &[data-disabled]': {
       color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
     },
   },

src/mantine-core/src/Input/Input.styles.ts

@@ -115,6 +115,12 @@ export default createStyles(
         position: 'relative',
         marginTop: offsetTop ? `calc(${theme.spacing.xs} / 2)` : undefined,
         marginBottom: offsetBottom ? `calc(${theme.spacing.xs} / 2)` : undefined,
+
+        '&:has(input:disabled)': {
+          '& .mantine-Input-rightSection': {
+            display: 'none',
+          },
+        },
       },
 
       input: {
@@ -144,6 +150,7 @@ export default createStyles(
           color: theme.colors.dark[2],
           opacity: 0.6,
           cursor: 'not-allowed',
+          pointerEvents: 'none',
 
           '&::placeholder': {
             color: theme.colors.dark[2],

src/mantine-core/src/Input/Input.test.tsx

@@ -9,6 +9,7 @@ import {
   itSupportsInputRightSection,
   itSupportsProviderVariant,
   itSupportsProviderSize,
+  itDisablesInputInsideDisabledFieldset,
 } from '@mantine/tests';
 import { InputWrapper } from './InputWrapper/InputWrapper';
 import { InputDescription } from './InputDescription/InputDescription';
@@ -40,6 +41,8 @@ describe('@mantine/core/Input', () => {
     excludeOthers: true,
   });
 
+  itDisablesInputInsideDisabledFieldset(Input, defaultProps);
+
   it('handles disabled state', () => {
     render(<Input disabled />);
     expect(screen.getByRole('textbox')).toBeDisabled();

src/mantine-core/src/JsonInput/JsonInput.test.tsx

@@ -6,6 +6,7 @@ import {
   checkAccessibility,
   itSupportsProviderVariant,
   itSupportsProviderSize,
+  itDisablesInputInsideDisabledFieldset,
 } from '@mantine/tests';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -37,6 +38,8 @@ describe('@mantine/core/JsonInput', () => {
     excludeOthers: true,
   });
 
+  itDisablesInputInsideDisabledFieldset(JsonInput, defaultProps, 'JsonInput');
+
   it('marks invalid JSON strings as invalid', async () => {
     render(<JsonInput />);
     await enterText('test');