Skip to content

docs(select): add label slot and aria label playgrounds #2971

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 25, 2023
Merged

docs(select): add label slot and aria label playgrounds #2971

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
953cba5
docs(select): add label slot playground
liamdebeasi May 24, 2023
f863010
fix typos
liamdebeasi May 24, 2023
fce940a
docs(select): add no visible label playground
liamdebeasi May 24, 2023
3a15071
clean up styles
liamdebeasi May 24, 2023
7725f15
fix spacing
liamdebeasi May 24, 2023
7160cb5
move labels up
liamdebeasi May 25, 2023
4ced49e
remove dev build
liamdebeasi May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 32 additions & 9 deletions docs/api/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,38 @@ A select should be used with child `<ion-select-option>` elements. If the child

If `value` is set on the `<ion-select>`, the selected option will be chosen based on that value.

## Labels

Select has several options for supplying a label for the component:

- `label` property: used for plaintext labels
- `label` slot: used for custom HTML labels
- `aria-label`: used for selects with no visible label

### Label Placement

Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.

import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';

<LabelPlacement />

### Label Slot

While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.

import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md';

<LabelSlot />

### No Visible Label

If no visible label is needed, devs should still supply an `aria-label` so the select is accessible to screen readers.

import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md';

<NoVisibleLabel />

## Single Selection

By default, the select allows the user to select only one option. The alert interface presents users with a radio button styled list of options. The select component's value receives the value of the selected option's value.
Expand Down Expand Up @@ -83,15 +115,6 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val
import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md';

<ObjectValuesAndMultipleSelectionExample />


## Label Placement

Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control.

import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md';

<LabelPlacement />

## Justification

Expand Down
12 changes: 12 additions & 0 deletions static/usage/v7/select/label-slot/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```html
<ion-list>
<ion-item>
<ion-select placeholder="Select a Fruit">
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
31 changes: 31 additions & 0 deletions static/usage/v7/select/label-slot/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>select</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-select placeholder="Select a Fruit">
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
13 changes: 13 additions & 0 deletions static/usage/v7/select/label-slot/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
code={{ javascript, react, vue, angular }}
src="usage/v7/select/label-slot/demo.html"
size="300px"
/>
12 changes: 12 additions & 0 deletions static/usage/v7/select/label-slot/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```html
<ion-list>
<ion-item>
<ion-select placeholder="Select a Fruit">
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
20 changes: 20 additions & 0 deletions static/usage/v7/select/label-slot/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
```tsx
import React from 'react';
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';

function Example() {
return (
<IonList>
<IonItem>
<IonSelect placeholder="Select a Fruit">
<div slot="label">Favorite Fruit <IonText color="danger">(Required)</IonText></div>
<IonSelectOption value="apple">Apple</IonSelectOption>
<IonSelectOption value="banana">Banana</IonSelectOption>
<IonSelectOption value="orange">Orange</IonSelectOption>
</IonSelect>
</IonItem>
</IonList>
);
}
export default Example;
```
23 changes: 23 additions & 0 deletions static/usage/v7/select/label-slot/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
```html
<template>
<ion-list>
<ion-item>
<ion-select placeholder="Select a Fruit">
<div slot="label">Favorite Fruit <ion-text color="danger">(Required)</ion-text></div>
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</template>

<script lang="ts">
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
});
</script>
```
11 changes: 11 additions & 0 deletions static/usage/v7/select/no-visible-label/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```html
<ion-list>
<ion-item>
<ion-select aria-label="Favorite Fruit" value="apple">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
30 changes: 30 additions & 0 deletions static/usage/v7/select/no-visible-label/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>select</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-select aria-label="Favorite Fruit" value="apple">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
13 changes: 13 additions & 0 deletions static/usage/v7/select/no-visible-label/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground
version="7"
code={{ javascript, react, vue, angular }}
src="usage/v7/select/no-visible-label/demo.html"
size="300px"
/>
11 changes: 11 additions & 0 deletions static/usage/v7/select/no-visible-label/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
```html
<ion-list>
<ion-item>
<ion-select aria-label="Favorite Fruit" value="apple">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
19 changes: 19 additions & 0 deletions static/usage/v7/select/no-visible-label/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```tsx
import React from 'react';
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react';

function Example() {
return (
<IonList>
<IonItem>
<IonSelect aria-label="Favorite Fruit" value="apple">
<IonSelectOption value="apple">Apple</IonSelectOption>
<IonSelectOption value="banana">Banana</IonSelectOption>
<IonSelectOption value="orange">Orange</IonSelectOption>
</IonSelect>
</IonItem>
</IonList>
);
}
export default Example;
```
22 changes: 22 additions & 0 deletions static/usage/v7/select/no-visible-label/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
```html
<template>
<ion-list>
<ion-item>
<ion-select aria-label="Favorite Fruit" value="apple">
<ion-select-option value="apple">Apple</ion-select-option>
<ion-select-option value="banana">Banana</ion-select-option>
<ion-select-option value="orange">Orange</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</template>

<script lang="ts">
import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItem, IonList, IonSelect, IonSelectOption, IonText },
});
</script>
```