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

feat(choice-input): add rendering of help-text

Browse source
This commit is contained in:
Mathieu Puech 2020-06-30 14:05:13 -04:00
parent 48ba7a6bb4
commit 5cd36cac20
3 changed files with 60 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/checkbox-group/README.md
View file

@ -183,3 +183,29 @@ export const validationAdvanced = () => {
`;
};
```
### Help text
You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
```js preview-story
export const helpText = () => html`
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox
label="Archimedes"
.choiceValue=${'Archimedes'}
help-text="Archimedes of Syracuse was a Greek mathematician, physicist, engineer, inventor, and astronomer"
></lion-checkbox>
<lion-checkbox
label="Francis Bacon"
.choiceValue=${'Francis Bacon'}
help-text="Francis Bacon, 1st Viscount St Alban also known as Lord Verulam, was an English philosopher and statesman who served as Attorney General and as Lord Chancellor of England"
></lion-checkbox>
<lion-checkbox
label="Marie Curie"
.choiceValue=${'Marie Curie'}
help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
></lion-checkbox>
</lion-checkbox-group>
`;
```

8
packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

@ -92,6 +92,7 @@ export const ChoiceInputMixin = superclass =>
css`
:host {
display: flex;
flex-wrap: wrap;
}
:host([hidden]) {
@ -101,6 +102,10 @@ export const ChoiceInputMixin = superclass =>
.choice-field__graphic-container {
display: none;
}
.choice-field__help-text {
display: block;
flex-basis: 100%;
}
`,
];
}
@ -118,6 +123,9 @@ export const ChoiceInputMixin = superclass =>
<div class="choice-field__label">
<slot name="label"></slot>
</div>
<small class="choice-field__help-text">
<slot name="help-text"></slot>
</small>
`;
}

26
packages/radio-group/README.md
View file

@ -180,3 +180,29 @@ export const validateItem = () => {
`;
};
```
### Help text
You can add help text on each checkbox with `help-text` attribute on the `<lion-radio>`.
```js preview-story
export const helpText = () => html`
<lion-radio-group name="dinosTwo" label="Favourite dinosaur">
<lion-radio
label="allosaurus"
.choiceValue=${'allosaurus'}
help-text="Allosaurus is a genus of carnivorous theropod dinosaur that lived 155 to 145 million years ago during the late Jurassic period"
></lion-radio>
<lion-radio
label="brontosaurus"
.choiceValue=${'brontosaurus'}
help-text="Brontosaurus is a genus of gigantic quadruped sauropod dinosaurs"
></lion-radio>
<lion-radio
label="diplodocus"
.choiceValue=${'diplodocus'}
help-text="Diplodocus is a genus of diplodocid sauropod dinosaurs whose fossils were first discovered in 1877 by S. W. Williston"
></lion-radio>
</lion-radio-group>
`;
```