ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1511 from ing-bank/fix/label-slot-example

Browse source 
fix: add slot=label examples to radio and checkbox-groups
This commit is contained in:
Thijs Louisse 2021-10-19 22:11:42 +02:00 committed by GitHub
commit ee53b66cf0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/lazy-crews-cry.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/checkbox-group': patch
'@lion/radio-group': patch
---
Add slot="label" example to docs

42
docs/components/inputs/checkbox-group/features.md
View file

@ -73,6 +73,32 @@ export const disabled = () => html`
`;
```
## Label
You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
```js preview-story
export const label = () => html`
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox .choiceValue=${'Archimedes'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Francis Bacon'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/Francis_Bacon" target="_blank">Francis Bacon</a></label
>
</lion-checkbox>
<lion-checkbox .choiceValue=${'Marie Curie'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
>
</lion-checkbox>
</lion-checkbox-group>
`;
```
## Help text
You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
@ -109,7 +135,7 @@ export const event = ({ shadowRoot }) => html`
name="scientists[]"
label="Favorite scientists"
@model-value-changed=${ev =>
(shadowRoot.getElementById('selectedDinosaur').innerText = JSON.stringify(
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = JSON.stringify(
ev.target.modelValue,
null,
4,
@ -126,17 +152,7 @@ export const event = ({ shadowRoot }) => html`
## Indeterminate
```js preview-story
export const indeterminate = () => html`
<lion-checkbox-group name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
</lion-checkbox-indeterminate>
</lion-checkbox-group>
`;
```
A `checkbox-indeterminate`'s value is neither true nor false, but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms, based on it's `checkbox` children.
```js preview-story
export const indeterminateSiblings = () => html`
@ -170,6 +186,8 @@ export const indeterminateSiblings = () => html`
`;
```
The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child.
```js preview-story
export const indeterminateChildren = () => html`
<lion-checkbox-group name="scientists[]" label="Favorite scientists">

28
docs/components/inputs/radio-group/features.md
View file

@ -66,6 +66,32 @@ export const disabledGroup = () => html`
`;
```
## Label
You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
```js preview-story
export const label = () => html`
<lion-radio-group name="dinos_7" label="Favourite dinosaur">
<lion-radio .choiceValue=${'allosaurus'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/allosaurus" target="_blank">allosaurus</a></label
>
</lion-radio>
<lion-radio .choiceValue=${'brontosaurus'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/brontosaurus" target="_blank">brontosaurus</a></label
>
</lion-radio>
<lion-radio .choiceValue=${'diplodocus'}>
<label slot="label"
><a href="https://wikipedia.org/wiki/diplodocus" target="_blank">diplodocus</a></label
>
</lion-radio>
</lion-radio-group>
`;
```
## Help text
You can add help text on each checkbox with `help-text` attribute on the `<lion-radio>`.
@ -102,7 +128,7 @@ export const event = ({ shadowRoot }) => html`
name="dinosTwo"
label="Favourite dinosaur"
@model-value-changed=${ev =>
(shadowRoot.getElementById('selectedDinosaur').innerText = ev.target.modelValue)}
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>