Skip to content

Commit

Permalink
Merge pull request #5806 from matuzalemsteles/LPD-17461
Browse files Browse the repository at this point in the history 
docs(@clayui/form): remove readonly checkbox examples
  • Loading branch information
@pat270
pat270 committed Apr 17, 2024
2 parents 93f86a5 + eb25c0f commit 5198e84
Show file tree
Hide file tree
Showing 3 changed files with 0 additions and 205 deletions.
21 changes: 0 additions & 21 deletions packages/clay-form/docs/checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,6 @@ import Editor from '$clayui.com/src/components/Editor';
import {ClayCheckbox} from '@clayui/form';
import React from 'react';

const checkboxImportsCode = `import {ClayCheckbox} from '@clayui/form';
`;

export const Checkbox = () => {
const scope = {ClayCheckbox};
const code = `const Component = () => {
return (
<ClayCheckbox
aria-label="hello! Can you see me?"
checked={true}
readOnly
/>
);
}
render(<Component />)`;

return <Editor code={code} imports={checkboxImportsCode} scope={scope} />;
};

const checkboxContainerPropsImportsCode = `import {ClayCheckbox} from '@clayui/form';
`;

Expand Down
7 changes: 0 additions & 7 deletions packages/clay-form/docs/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ storybookPath: 'design-system-components-checkbox'
---

import {
Checkbox,
CheckboxContainerProps,
CheckboxIndeterminate,
CheckboxesInline,
Expand Down Expand Up @@ -38,12 +37,6 @@ To set a callback function when the value of the checkbox is changed, use [`onCh

Here you can see some options or ideas on how to extend our Checkbox component to fit your use:

## Read Only

If you want a checkbox without actions on change(or just not use onChange property), use <code class="gatsby-code-text">readOnly</code> property.

<Checkbox />

## Container Props

If you want to modify the container that wraps the checkbox, use [`containerProps`](#api-containerProps):
Expand Down
177 changes: 0 additions & 177 deletions packages/clay-form/docs/markup-checkbox-radio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ mainTabURL: 'docs/components/checkbox.html'
- [Custom](#css-custom)
- [Checkboxes](#css-custom-checkboxes)
- [Indeterminate](#css-custom-checkbox-indeterminate)
- [Readonly](#css-custom-checkbox-readonly)
- [Readonly Disabled](#css-custom-checkbox-readonly-disabled)
- [Radios](#css-custom-radios)

</div>
Expand Down Expand Up @@ -402,181 +400,6 @@ Custom checkboxes can also utilize the `:indeterminate` pseudo class when manual
</div>
</div>

#### Custom Checkbox Readonly(#css-custom-checkbox-readonly)

<div class="clay-site-alert alert alert-warning">
This uses the non-standard <code>readonly</code> and <code>onclick="return false;"</code> attributes on the <code>input[type="checkbox"]</code> element. The <code>readonly</code> attribute is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly" rel="noopener noreferrer" target="_blank">only supported in text controls</a>.
</div>

The `onclick="return false;"` attribute must be used on the `custom-control-input` to prevent the state of the checkbox from being changed on click.

<div class="sheet-example">
<div class="custom-control custom-checkbox">
<label>
<input aria-disabled="true" class="custom-control-input" onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Unchecked Readonly</span>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input aria-disabled="true" checked class="custom-control-input" onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Checked Readonly</span>
</span>
</label>
</div>
<div class="clay-site-custom-checkbox-indeterminate">
<div class="custom-control custom-checkbox">
<label>
<input aria-disabled="true" class="custom-control-input" onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Indeterminate Readonly</span>
</span>
</label>
</div>
</div>
</div>

```html
<div class="custom-control custom-checkbox">
<label>
<input
aria-disabled="true"
class="custom-control-input"
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text">Unchecked Readonly</span>
</span>
</label>
</div>

<div class="custom-control custom-checkbox">
<label>
<input
aria-disabled="true"
checked
class="custom-control-input"
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text">Checked Readonly</span>
</span>
</label>
</div>

<div class="custom-control custom-checkbox">
<label>
<input
aria-disabled="true"
class="custom-control-input"
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Indeterminate Readonly</span
>
</span>
</label>
</div>
```

#### Custom Checkbox Readonly Disabled(#css-custom-checkbox-readonly-disabled)

<div class="sheet-example">
<div class="form-group">
<div class="custom-control custom-checkbox">
<label>
<input aria-hidden="true" class="custom-control-input" disabled onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Unchecked Disabled Readonly</span>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input aria-hidden="true" checked class="custom-control-input" disabled onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Checked Disabled Readonly</span>
</span>
</label>
</div>
<div class="clay-site-custom-checkbox-indeterminate">
<div class="custom-control custom-checkbox">
<label>
<input aria-hidden="true" class="clay-site-custom-checkbox-indeterminate custom-control-input" disabled onclick="return false;" readonly type="checkbox" />
<span class="custom-control-label">
<span class="custom-control-label-text">Indeterminate Disabled Readonly</span>
</span>
</label>
</div>
</div>
</div>
</div>

```html
<div class="custom-control custom-checkbox">
<label>
<input
aria-hidden="true"
class="custom-control-input"
disabled
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Unchecked Disabled Readonly</span
>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input
aria-hidden="true"
checked
class="custom-control-input"
disabled
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Checked Disabled Readonly</span
>
</span>
</label>
</div>
<div class="custom-control custom-checkbox">
<label>
<input
aria-hidden="true"
class="clay-site-custom-checkbox-indeterminate custom-control-input"
disabled
onclick="return false;"
readonly
type="checkbox"
/>
<span class="custom-control-label">
<span class="custom-control-label-text"
>Indeterminate Disabled Readonly</span
>
</span>
</label>
</div>
```

### Radios(#css-custom-radios)

<div class="sheet-example">
Expand Down

0 comments on commit 5198e84

Please sign in to comment.