Skip to content

Commit

Permalink
update docs; fixes shoelace-style#1315
Browse files Browse the repository at this point in the history
  • Loading branch information
@claviska @jeysonj2
claviska authored and jeysonj2 committed May 23, 2023
1 parent 3a9409c commit 271b6bb
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 41 deletions.
70 changes: 36 additions & 34 deletions docs/components/radio-button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,57 +78,59 @@ const App = () => (

### Sizes

Use the `size` attribute to change a radio button's size.
Add the `size` attribute to the [Radio Group](/components/radio-group) to change the size of the radio buttons.

```html preview
<sl-radio-group label="Select an option" name="a" value="1">
<sl-radio-button size="small" value="1">Option 1</sl-radio-button>
<sl-radio-button size="small" value="2">Option 2</sl-radio-button>
<sl-radio-button size="small" value="3">Option 3</sl-radio-button>
<sl-radio-group label="Select an option" size="small" value="1">
<sl-radio-button value="1">Option 1</sl-radio-button>
<sl-radio-button value="2">Option 2</sl-radio-button>
<sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
<sl-radio-button size="medium" value="1">Option 1</sl-radio-button>
<sl-radio-button size="medium" value="2">Option 2</sl-radio-button>
<sl-radio-button size="medium" value="3">Option 3</sl-radio-button>
<sl-radio-group label="Select an option" size="medium" value="1">
<sl-radio-button value="1">Option 1</sl-radio-button>
<sl-radio-button value="2">Option 2</sl-radio-button>
<sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" name="a" value="1">
<sl-radio-button size="large" value="1">Option 1</sl-radio-button>
<sl-radio-button size="large" value="2">Option 2</sl-radio-button>
<sl-radio-button size="large" value="3">Option 3</sl-radio-button>
<sl-radio-group label="Select an option" size="large" value="1">
<sl-radio-button value="1">Option 1</sl-radio-button>
<sl-radio-button value="2">Option 2</sl-radio-button>
<sl-radio-button value="3">Option 3</sl-radio-button>
</sl-radio-group>
```

```jsx react
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
<SlRadioGroup label="Select an option" name="a" value="1">
<SlRadioButton size="small" value="1">Option 1</SlRadioButton>
<SlRadioButton size="small" value="2">Option 2</SlRadioButton>
<SlRadioButton size="small" value="3">Option 3</SlRadioButton>
</SlRadioGroup>

<br />

<SlRadioGroup label="Select an option" name="a" value="1">
<SlRadioButton size="medium" value="1">Option 1</SlRadioButton>
<SlRadioButton size="medium" value="2">Option 2</SlRadioButton>
<SlRadioButton size="medium" value="3">Option 3</SlRadioButton>
</SlRadioGroup>

<br />

<SlRadioGroup label="Select an option" name="a" value="1">
<SlRadioButton size="large" value="1">Option 1</SlRadioButton>
<SlRadioButton size="large" value="2">Option 2</SlRadioButton>
<SlRadioButton size="large" value="3">Option 3</SlRadioButton>
</SlRadioGroup>
<>
<SlRadioGroup label="Select an option" size="small" value="1">
<SlRadioButton value="1">Option 1</SlRadioButton>
<SlRadioButton value="2">Option 2</SlRadioButton>
<SlRadioButton value="3">Option 3</SlRadioButton>
</SlRadioGroup>

<br />

<SlRadioGroup label="Select an option" size="medium" value="1">
<SlRadioButton value="1">Option 1</SlRadioButton>
<SlRadioButton value="2">Option 2</SlRadioButton>
<SlRadioButton value="3">Option 3</SlRadioButton>
</SlRadioGroup>

<br />

<SlRadioGroup label="Select an option" size="large" value="1">
<SlRadioButton value="1">Option 1</SlRadioButton>
<SlRadioButton value="2">Option 2</SlRadioButton>
<SlRadioButton value="3">Option 3</SlRadioButton>
</SlRadioGroup>
</>
);
```

Expand Down
47 changes: 47 additions & 0 deletions docs/components/radio-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,53 @@ const App = () => (
);
```

### Sizing Options

The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-buttons) will be determined by the Radio Group's `size` attribute.

```html preview
<sl-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
<sl-radio value="small">Small</sl-radio>
<sl-radio value="medium">Medium</sl-radio>
<sl-radio value="large">Large</sl-radio>
</sl-radio-group>

<script>
const radioGroup = document.querySelector('.radio-group-size');
radioGroup.addEventListener('sl-change', () => {
radioGroup.size = radioGroup.value;
});
</script>
```

```jsx react
import { useState } from 'react';
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => {
const [size, setSize] = useState('medium');

return (
<>
<SlRadioGroup
label="Select an option"
size={size}
value={size}
class="radio-group-size"
onSlChange={event => setSize(event.target.value)}
>
<SlRadio value="small">Small</SlRadio>
<SlRadio value="medium">Medium</SlRadio>
<SlRadio value="large">Large</SlRadio>
</SlRadioGroup>
</>
);
};
```

?> [Radios](/components/radio) and [Radio Buttons](/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.

### Validation

Setting the `required` attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.
Expand Down
48 changes: 41 additions & 7 deletions docs/components/radio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,24 +80,58 @@ const App = () => (

## Sizes

Use the `size` attribute to change a radio's size.
Add the `size` attribute to the [Radio Group](/components/radio-group) to change the size of the radios.

```html preview
<sl-radio size="small">Small</sl-radio>
<sl-radio size="medium">Medium</sl-radio>
<sl-radio size="large">Large</sl-radio>
<sl-radio-group label="Select an option" size="small" value="1">
<sl-radio value="1">Small 1</sl-radio>
<sl-radio value="2">Small 2</sl-radio>
<sl-radio value="3">Small 3</sl-radio>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" size="medium" value="1">
<sl-radio value="1">Medium 1</sl-radio>
<sl-radio value="2">Medium 2</sl-radio>
<sl-radio value="3">Medium 3</sl-radio>
</sl-radio-group>

<br />

<sl-radio-group label="Select an option" size="large" value="1">
<sl-radio value="1">Large 1</sl-radio>
<sl-radio value="2">Large 2</sl-radio>
<sl-radio value="3">Large 3</sl-radio>
</sl-radio-group>
```

```jsx react
import { SlRadio } from '@shoelace-style/shoelace/dist/react';

const App = () => (
<>
<SlRadio size="small">Small</SlRadio>
<SlRadioGroup size="small" value="1">
<SlRadio value="1">Small 1</SlRadio>
<SlRadio value="2">Small 2</SlRadio>
<SlRadio value="3">Small 3</SlRadio>
</SlRadioGroup>

<br />
<SlRadio size="medium">Medium</SlRadio>

<SlRadioGroup size="medium" value="1">
<SlRadio value="1">Medium 1</SlRadio>
<SlRadio value="2">Medium 2</SlRadio>
<SlRadio value="3">Medium 3</SlRadio>
</SlRadioGroup>

<br />
<SlRadio size="large">Large</SlRadio>

<SlRadioGroup size="large" value="1">
<SlRadio value="1">Large 1</SlRadio>
<SlRadio value="2">Large 2</SlRadio>
<SlRadio value="3">Large 3</SlRadio>
</SlRadioGroup>
</>
);
```
Expand Down

0 comments on commit 271b6bb

Please sign in to comment.