Skip to content

Commit

Permalink
[@mantine/docs, @mantine/demos]: Remove fieldset code from disabled s…
Browse files Browse the repository at this point in the history
…tate section
  • Loading branch information
agong-coveo committed May 15, 2023
1 parent 3ea4cf6 commit e167062
Show file tree
Hide file tree
Showing 30 changed files with 39 additions and 663 deletions.
4 changes: 0 additions & 4 deletions docs/src/docs/core/Rating.mdx
Expand Up @@ -35,10 +35,6 @@ function Demo() {

<Demo data={RatingDemos.readOnly} />

## Disabled state

<Demo data={RatingDemos.disabled} />

## Fractions

<Demo data={RatingDemos.fractions} />
Expand Down
4 changes: 0 additions & 4 deletions docs/src/docs/core/TransferList.mdx
Expand Up @@ -51,10 +51,6 @@ 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.
Expand Down
Expand Up @@ -6,15 +6,7 @@ const code = `
import { Autocomplete } from '@mantine/core';
function Demo() {
return (
<>
<Autocomplete disabled data={['React', 'Angular', 'Svelte', 'Vue']} />
<fieldset disabled>
<Autocomplete data={['React', 'Angular', 'Svelte', 'Vue']} />
</fieldset>
/<>
);
return <Autocomplete disabled data={['React', 'Angular', 'Svelte', 'Vue']} />;
}
`;

Expand All @@ -36,25 +28,6 @@ function Demo() {
disabled
value="React"
/>

<br />

<fieldset disabled>
<Autocomplete
data={['React', 'Angular', 'Svelte', 'Vue']}
label="Disabled by fieldset without value"
placeholder="Pick all that you like"
/>

<Autocomplete
mt="md"
data={['React', 'Angular', 'Svelte', 'Vue']}
label="Disabled by fieldset with value"
placeholder="Pick all that you like"
disabled
value="React"
/>
</fieldset>
</Box>
);
}
Expand Down
14 changes: 0 additions & 14 deletions src/mantine-demos/src/demos/core/Checkbox/Checkbox.demo.states.tsx
Expand Up @@ -15,12 +15,6 @@ function Demo() {
<Checkbox disabled />
<Checkbox disabled checked />
<Checkbox disabled indeterminate />
<fieldset disabled>
<Checkbox />
<Checkbox checked />
<Checkbox indeterminate />
</fieldset>
</>
);
}
Expand All @@ -36,14 +30,6 @@ function Demo() {
<Checkbox disabled label="Disabled checkbox" />
<Checkbox disabled checked label="Disabled checked checkbox" />
<Checkbox disabled indeterminate label="Disabled indeterminate checkbox" />

<fieldset disabled>
<Stack>
<Checkbox label="Disabled checkbox by fieldset" />
<Checkbox checked label="Disabled checked checkbox by fieldset" />
<Checkbox indeterminate label="Disabled indeterminate checkbox by fieldset" />
</Stack>
</fieldset>
</Stack>
);
}
Expand Down
79 changes: 0 additions & 79 deletions src/mantine-demos/src/demos/core/Chip/Chip.demo.states.tsx
Expand Up @@ -2,66 +2,6 @@ import React from 'react';
import { MantineDemo } from '@mantine/ds';
import { Chip, Group } from '@mantine/core';

const code = `
import { Chip } from '@mantine/core';
function Demo() {
return (
<>
<Chip.Group multiple value={['checked', 'checked-disabled']}>
<Group position="center">
<Chip value="default" variant="outline">
Outline default
</Chip>
<Chip value="checked" variant="outline">
Outline checked
</Chip>
<Chip value="checked-disabled" disabled variant="outline">
Outline checked disabled
</Chip>
<Chip value="default" variant="light">
Light default
</Chip>
<Chip value="checked" variant="light">
Light checked
</Chip>
<Chip value="checked-disabled" disabled variant="light">
Light checked disabled
</Chip>
<Chip value="default" variant="filled">
Filled default
</Chip>
<Chip value="checked" variant="filled">
Filled checked
</Chip>
<Chip value="checked-disabled" disabled variant="filled">
Filled checked disabled
</Chip>
</Group>
</Chip.Group>
<fieldset disabled>
<Chip.Group multiple>
<Group position="center">
<Chip checked variant="outline">
Outline checked disabled by fieldset
</Chip>
<Chip checked variant="light">
Light checked disabled by fieldset
</Chip>
<Chip checked variant="filled">
Filled checked disabled by fieldset
</Chip>
</Group>
</Chip.Group>
</fieldset>
</>
);
}
`;

function Demo() {
return (
<>
Expand Down Expand Up @@ -106,30 +46,11 @@ function Demo() {
</Chip>
</Group>
</Chip.Group>

<br />

<fieldset disabled>
<Chip.Group multiple>
<Group position="center">
<Chip checked variant="outline">
Outline checked disabled by fieldset
</Chip>
<Chip checked variant="light">
Light checked disabled by fieldset
</Chip>
<Chip checked variant="filled">
Filled checked disabled by fieldset
</Chip>
</Group>
</Chip.Group>
</fieldset>
</>
);
}

export const states: MantineDemo = {
type: 'demo',
component: Demo,
code,
};
Expand Up @@ -6,15 +6,7 @@ const code = `
import { ColorInput } from '@mantine/core';
function Demo() {
return (
<>
<ColorInput disabled />
<fieldset disabled>
<ColorInput />
</fieldset>
</>
);
return <ColorInput disabled />;
}
`;

Expand All @@ -30,23 +22,6 @@ function Demo() {
disabled
value="#EFD679"
/>

<br />

<fieldset disabled>
<ColorInput
label="Disabled by fieldset without value"
placeholder="Your favorite color"
disabled
/>
<ColorInput
mt="md"
label="Disabled by fieldset with value"
placeholder="Your favorite color"
disabled
value="#EFD679"
/>
</fieldset>
</Box>
);
}
Expand Down
Expand Up @@ -6,27 +6,13 @@ const code = `
import { FileInput } from '@mantine/core';
function Demo() {
return (
<>
<FileInput disabled />
<fieldset disabled>
<FileInput />
</fieldset>
</>
);
return <FileInput disabled />;
`;

function Demo() {
return (
<Box maw={320} mx="auto">
<FileInput disabled label="Disabled" placeholder="Upload files" />

<br />

<fieldset disabled>
<FileInput label="Disabled by fieldset" placeholder="Upload files" />
</fieldset>
</Box>
);
}
Expand Down
Expand Up @@ -6,15 +6,7 @@ const code = `
import { JsonInput } from '@mantine/core';
function Demo() {
return (
<>
<JsonInput disabled />
<fieldset disabled>
<JsonInput />
</fieldset>
</>
);
return <JsonInput disabled />;
}
`;

Expand All @@ -28,17 +20,6 @@ function Demo() {
formatOnBlur
disabled
/>

<br />

<fieldset disabled>
<JsonInput
defaultValue='{ "a": 1, "B": 2 }'
label="Disabled by fieldset"
placeholder="Disabled by fieldset"
formatOnBlur
/>
</fieldset>
</Box>
);
}
Expand Down
Expand Up @@ -7,15 +7,7 @@ const code = `
import { MultiSelect } from '@mantine/core';
function Demo() {
return (
<>
<MultiSelect disabled />
<fieldset disabled>
<MultiSelect />
</fieldset>
</>
)
return <MultiSelect disabled />;
}
`;

Expand All @@ -38,25 +30,6 @@ function Demo() {
disabled
defaultValue={['react', 'vue']}
/>

<br />

<fieldset disabled>
<MultiSelect
data={data}
label="Disabled by fieldset without value"
placeholder="Won't pick anything"
defaultValue={[]}
/>

<MultiSelect
mt="md"
data={data}
label="Disabled by fieldset with values"
placeholder="Won't pick anything"
defaultValue={['react', 'vue']}
/>
</fieldset>
</Box>
);
}
Expand Down
Expand Up @@ -6,15 +6,7 @@ const code = `
import { NativeSelect } from '@mantine/core';
function Demo() {
return (
<>
<NativeSelect disabled data={[]} />
<fieldset disabled>
<NativeSelect data={[]} />
</fieldset>
</>
)
return <NativeSelect disabled data={[]} />;
}
`;

Expand All @@ -27,17 +19,6 @@ function Demo() {
placeholder="Pick one that you like"
disabled
/>

<br />

<fieldset disabled>
<NativeSelect
data={['React', 'Angular', 'Svelte', 'Vue']}
label="Disabled select with fieldset"
placeholder="Pick one that you like"
disabled
/>
</fieldset>
</Box>
);
}
Expand Down

0 comments on commit e167062

Please sign in to comment.