[@mantine/docs] Input components: Add disabled state section

mantinedev · May 3, 2023 · e54cc17 · e54cc17
1 parent 75e4f83
commit e54cc17
Show file tree

Hide file tree

Showing 17 changed files with 57 additions and 3 deletions.
diff --git a/docs/src/docs/core/FileInput.mdx b/docs/src/docs/core/FileInput.mdx
@@ -51,6 +51,9 @@ 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:

diff --git a/docs/src/docs/core/JsonInput.mdx b/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
 

diff --git a/docs/src/docs/core/MultiSelect.mdx b/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} />

diff --git a/docs/src/docs/core/PinInput.mdx b/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} />
 

diff --git a/docs/src/docs/core/Radio.mdx b/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} />

diff --git a/docs/src/docs/core/Rating.mdx b/docs/src/docs/core/Rating.mdx
@@ -35,6 +35,10 @@ function Demo() {
 
 <Demo data={RatingDemos.readOnly} />
 
+## Disabled state
+
+<Demo data={RatingDemos.disabled} />
+
 ## Fractions
 
 <Demo data={RatingDemos.fractions} />

diff --git a/docs/src/docs/core/SegmentedControl.mdx b/docs/src/docs/core/SegmentedControl.mdx
@@ -68,7 +68,7 @@ SegmentedControl support two different data formats:
 ]} />
 ```
 
-## Disabled
+## Disabled state
 
 <Demo data={SegmentedControlDemos.disabled} />
 

diff --git a/docs/src/docs/core/Slider.mdx b/docs/src/docs/core/Slider.mdx
@@ -40,7 +40,7 @@ function Demo() {
 }
 ```
 
-## Disabled
+## Disabled state
 
 <Demo data={SliderDemos.disabled} />
 

diff --git a/docs/src/docs/core/Switch.mdx b/docs/src/docs/core/Switch.mdx
@@ -32,6 +32,10 @@ function Demo() {
 }
 ```
 
+## Disabled state
+
+<Demo data={SwitchDemos.disabled} />
+
 ## Inner Labels
 
 <Demo data={SwitchDemos.labels} />

diff --git a/docs/src/docs/core/Textarea.mdx b/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} />

diff --git a/docs/src/docs/core/TransferList.mdx b/docs/src/docs/core/TransferList.mdx
@@ -51,6 +51,10 @@ be a tuple of two strings, one for each list:
 
 <Demo data={TransferListDemos.controlledSearch} />
 
+## Disabled state
+
+<Demo data={TransferListDemos.disabled} />
+
 ## Transferring only found items
 
 By default, TransferList transfers **all** items when you click the `transferAll` button.

diff --git a/docs/src/docs/dates/DateInput.mdx b/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} />

diff --git a/docs/src/docs/dates/DatePickerInput.mdx b/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/)

diff --git a/docs/src/docs/dates/DateTimePicker.mdx b/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} />

diff --git a/docs/src/docs/dates/MonthPickerInput.mdx b/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/)

diff --git a/docs/src/docs/dates/TimeInput.mdx b/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:

diff --git a/docs/src/docs/dates/YearPickerInput.mdx b/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/)