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

chore: add data-label to doc examples with explanation

Browse source
This commit is contained in:
gerjanvangeest 2024-01-30 16:10:34 +01:00 committed by Thijs Louisse
parent 36bf8c6ff5
commit b68fa39924
1 changed files with 34 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
docs/fundamentals/systems/form/styling.md
View file

@ -17,7 +17,6 @@ export const label = () => html`
<style> <style>
.u-sr-only { .u-sr-only {
position: absolute; position: absolute;
top: 0;
width: 1px; width: 1px;
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
@ -37,65 +36,61 @@ export const label = () => html`
`; `;
``` ```
## Prefix ## Input additions
When using an addition to the input you could add `data-label` to add the content connected to the input via `aria-labelledby` or add `data-description` to connect it via the `aria-describedby` when the content is relevant for the screen-reader user to fill in the form field. This won't be necessary for a search icon, since that should already be clear via the label, but it is relevant in case a unit is added behind the input field.
### Prefix
The prefix is used for addons to the input like a minus button in the `input-stepper`. The prefix is used for addons to the input like a minus button in the `input-stepper`.
```js preview-story ```html preview-story
export const prefix = () => html`
<lion-input label="Prefix"> <lion-input label="Prefix">
<div slot="prefix">[prefix]</div> <div slot="prefix" data-description>[prefix]</div>
</lion-input> </lion-input>
`;
``` ```
## Suffix ### Suffix
The suffix can be used for addons to the input like a calculator, datepicker or addressbook. The suffix can be used for addons to the input like a calculator, datepicker or addressbook.
In these cases a button with an icon is used. In these cases a button with an icon is used.
```js preview-story ```html preview-story
export const suffix = () => html`
<lion-input label="Suffix"> <lion-input label="Suffix">
<div slot="suffix">[suffix]</div> <div slot="suffix" data-description>[suffix]</div>
</lion-input> </lion-input>
`;
``` ```
## Before ### Before
> Before slot does not have an active use case yet. > Before slot does not have an active use case yet.
```js preview-story ```html preview-story
export const before = () => html`
<lion-input label="Before"> <lion-input label="Before">
<div slot="before">[before]</div> <div slot="before" data-description>[before]</div>
</lion-input> </lion-input>
`;
``` ```
## After ### After
```js preview-story The after is mostly used to add a unit to the input field, such as a currency or percentage.
export const after = () => html`
```html preview-story
<lion-input label="Amount"> <lion-input label="Amount">
<div slot="after">EUR</div> <div slot="after" data-description>EUR</div>
</lion-input> </lion-input>
<lion-input label="Percentage"> <lion-input label="Percentage">
<div slot="after">%</div> <div slot="after" data-description>%</div>
</lion-input> </lion-input>
`;
``` ```
### Examples ### Examples
Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. For example if you want to add a button as a prefix or suffix. Due to our custom inputs being Web Components, it is possible to put HTML content inside an input. For example if you want to add a button as a prefix or suffix.
```js preview-story ```html preview-story
export const ButtonsWithFields = () => html`
<lion-input label="Prefix and suffix"> <lion-input label="Prefix and suffix">
<lion-button slot="prefix">prefix</lion-button> <lion-button slot="prefix">prefix</lion-button>
<lion-button slot="suffix">suffix</lion-button> <lion-button slot="suffix">suffix</lion-button>
</lion-input> </lion-input>
`;
``` ```