Skip to content

Commit f947b4a

Browse files
liamdebeasiliamdebeasi
authored
chore: merge feature-7.2 docs
chore: merge feature-7.2 docs
2 parents d57ab7e + c9a58f6 commit f947b4a

File tree

8 files changed

+114
-0
lines changed

8 files changed

+114
-0
lines changed

‎docs/api/button.md

+18
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,24 @@ import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.
7878

7979
<CSSProps />
8080

81+
## Accessibility
82+
83+
Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides.
84+
85+
### Overflowing Text Content
86+
87+
There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text.
88+
89+
The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release.
90+
91+
:::info
92+
The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width.
93+
:::
94+
95+
import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md';
96+
97+
<TextWrapping />
98+
8199
## Properties
82100
<Props />
83101

‎docs/reference/glossary.md

+14
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,20 @@ title: Glossary
1212

1313
<div id="what-is">
1414

15+
<section id="a11y">
16+
<a href="#a11y">
17+
<h3>Accessibility</h3>
18+
</a>
19+
<p>
20+
<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank">
21+
Accessibility
22+
</a>{' '}
23+
(a11y) is the practice of enabling as many people as possible to use the content, even if people have limited
24+
abilities. This includes people with disabilities, those using mobile devices, and those with slow network
25+
connections. Content should be developed to be as accessible as technology allows.
26+
</p>
27+
</section>
28+
1529
<section id="android-sdk">
1630
<a href="#android-sdk">
1731
<h3>Android SDK</h3>

‎static/usage/v7/button/text-wrapping/angular.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-button>Default</ion-button>
3+
<ion-button class="ion-text-wrap" style="max-width: 400px"
4+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
5+
friends</ion-button
6+
>
7+
```

‎static/usage/v7/button/text-wrapping/demo.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Button</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-button>Default</ion-button>
18+
<ion-button class="ion-text-wrap" style="max-width: 400px"
19+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
20+
friends</ion-button
21+
>
22+
</div>
23+
</ion-content>
24+
</ion-app>
25+
</body>
26+
</html>

‎static/usage/v7/button/text-wrapping/index.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/button/text-wrapping/demo.html" />

‎static/usage/v7/button/text-wrapping/javascript.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-button>Default</ion-button>
3+
<ion-button class="ion-text-wrap" style="max-width: 400px"
4+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
5+
friends</ion-button
6+
>
7+
```

‎static/usage/v7/button/text-wrapping/react.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonButton>Default</IonButton>
9+
<IonButton className="ion-text-wrap" style={{ maxWidth: '400px' }}>
10+
This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends
11+
</IonButton>
12+
</>
13+
);
14+
}
15+
export default Example;
16+
```

‎static/usage/v7/button/text-wrapping/vue.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```html
2+
<template>
3+
<ion-button>Default</ion-button>
4+
<ion-button class="ion-text-wrap" style="max-width: 400px"
5+
>This is the button that never ends it just goes on and on and on and on and on and on and on and on my
6+
friends</ion-button
7+
>
8+
</template>
9+
10+
<script lang="ts">
11+
import { IonButton } from '@ionic/vue';
12+
import { defineComponent } from 'vue';
13+
14+
export default defineComponent({
15+
components: { IonButton },
16+
});
17+
</script>
18+
```

0 commit comments

Comments
 (0)