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
+249 −9
Merged

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

Show file tree
Hide file tree
Changes from 4 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
29 changes: 26 additions & 3 deletions docs/api/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,39 @@ 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

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

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.
### 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 />

## Justification

Developers can use the `justify` property to control how the label and control are packed on a line.
Expand Down
15 changes: 15 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,15 @@
```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>
```
34 changes: 34 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,34 @@
<!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/[email protected]/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
Copy link
Contributor

@thetaPC thetaPC May 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the dev version.

Copy link
Contributor Author

@liamdebeasi liamdebeasi May 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added the dev version so reviewers could test the demo, so I will remove it once the PR is approved/before it merges.

</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"
/>
15 changes: 15 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,15 @@
```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>
```
23 changes: 23 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,23 @@
```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;
```
26 changes: 26 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,26 @@
```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>
```