From 29e50442355a10c35eed05d3dc243cf67a7a6464 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 11 Dec 2023 14:50:58 -0500 Subject: [PATCH 1/2] chore: item has text wrapping --- docs/api/item.md | 2 +- static/usage/v7/item/basic/angular.md | 10 +++++----- static/usage/v7/item/basic/demo.html | 6 +++--- static/usage/v7/item/basic/javascript.md | 10 +++++----- static/usage/v7/item/basic/react.md | 8 ++++---- static/usage/v7/item/basic/vue.md | 10 +++++----- 6 files changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/api/item.md b/docs/api/item.md index cffbe64ded2..e67e18ae643 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v7/item/basic/index.md'; diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md index b975f267d90..997abc9f1c1 100644 --- a/static/usage/v7/item/basic/angular.md +++ b/static/usage/v7/item/basic/angular.md @@ -5,15 +5,15 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. - - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html index 9eccd18a724..28a51c2a89f 100644 --- a/static/usage/v7/item/basic/demo.html +++ b/static/usage/v7/item/basic/demo.html @@ -26,14 +26,14 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md index b975f267d90..997abc9f1c1 100644 --- a/static/usage/v7/item/basic/javascript.md +++ b/static/usage/v7/item/basic/javascript.md @@ -5,15 +5,15 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. - - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md index 6154239cbf1..46f5d12124f 100644 --- a/static/usage/v7/item/basic/react.md +++ b/static/usage/v7/item/basic/react.md @@ -11,14 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - + - - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md index 37b32f7c2ca..c611b7be39a 100644 --- a/static/usage/v7/item/basic/vue.md +++ b/static/usage/v7/item/basic/vue.md @@ -6,15 +6,15 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - + - - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. From dc4025dde6479f94a9680d1900290781a610c24c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 11 Dec 2023 14:59:58 -0500 Subject: [PATCH 2/2] lint --- static/usage/v7/item/basic/angular.md | 8 ++++---- static/usage/v7/item/basic/javascript.md | 8 ++++---- static/usage/v7/item/basic/react.md | 2 +- static/usage/v7/item/basic/vue.md | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md index 997abc9f1c1..3f50edc287e 100644 --- a/static/usage/v7/item/basic/angular.md +++ b/static/usage/v7/item/basic/angular.md @@ -5,15 +5,15 @@ - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md index 997abc9f1c1..3f50edc287e 100644 --- a/static/usage/v7/item/basic/javascript.md +++ b/static/usage/v7/item/basic/javascript.md @@ -5,15 +5,15 @@ - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md index 46f5d12124f..2c78219aee4 100644 --- a/static/usage/v7/item/basic/react.md +++ b/static/usage/v7/item/basic/react.md @@ -15,7 +15,7 @@ function Example() { consectetur adipiscing elit. - + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md index c611b7be39a..c8e25a1819a 100644 --- a/static/usage/v7/item/basic/vue.md +++ b/static/usage/v7/item/basic/vue.md @@ -6,11 +6,11 @@ - Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, - consectetur adipiscing elit. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. - + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,