From f4bd7e128b4a12930489d38eb7268a4b8cb511d4 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 6 Sep 2022 11:16:18 -0400 Subject: [PATCH 1/2] docs(label):add label component playgrounds --- docs/api/label.md | 370 +----------------- static/usage/label/basic/angular.md | 3 + static/usage/label/basic/demo.html | 24 ++ static/usage/label/basic/index.md | 8 + static/usage/label/basic/javascript.md | 3 + static/usage/label/basic/react.md | 13 + static/usage/label/basic/vue.md | 14 + static/usage/label/input/angular.md | 31 ++ static/usage/label/input/demo.html | 59 +++ static/usage/label/input/index.md | 8 + static/usage/label/input/javascript.md | 31 ++ static/usage/label/input/react.md | 41 ++ static/usage/label/input/vue.md | 42 ++ static/usage/label/item/angular.md | 28 ++ static/usage/label/item/demo.html | 56 +++ static/usage/label/item/index.md | 8 + static/usage/label/item/javascript.md | 28 ++ static/usage/label/item/react.md | 38 ++ static/usage/label/item/vue.md | 39 ++ static/usage/label/theming/colors/angular.md | 12 + static/usage/label/theming/colors/demo.html | 39 ++ static/usage/label/theming/colors/index.md | 8 + .../usage/label/theming/colors/javascript.md | 12 + static/usage/label/theming/colors/react.md | 22 ++ static/usage/label/theming/colors/vue.md | 23 ++ 25 files changed, 604 insertions(+), 356 deletions(-) create mode 100644 static/usage/label/basic/angular.md create mode 100644 static/usage/label/basic/demo.html create mode 100644 static/usage/label/basic/index.md create mode 100644 static/usage/label/basic/javascript.md create mode 100644 static/usage/label/basic/react.md create mode 100644 static/usage/label/basic/vue.md create mode 100644 static/usage/label/input/angular.md create mode 100644 static/usage/label/input/demo.html create mode 100644 static/usage/label/input/index.md create mode 100644 static/usage/label/input/javascript.md create mode 100644 static/usage/label/input/react.md create mode 100644 static/usage/label/input/vue.md create mode 100644 static/usage/label/item/angular.md create mode 100644 static/usage/label/item/demo.html create mode 100644 static/usage/label/item/index.md create mode 100644 static/usage/label/item/javascript.md create mode 100644 static/usage/label/item/react.md create mode 100644 static/usage/label/item/vue.md create mode 100644 static/usage/label/theming/colors/angular.md create mode 100644 static/usage/label/theming/colors/demo.html create mode 100644 static/usage/label/theming/colors/index.md create mode 100644 static/usage/label/theming/colors/javascript.md create mode 100644 static/usage/label/theming/colors/react.md create mode 100644 static/usage/label/theming/colors/vue.md diff --git a/docs/api/label.md b/docs/api/label.md index 20c2525fe83..f5c5b807c41 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -1,10 +1,6 @@ --- title: "ion-label" -hide_table_of_contents: true --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - import Props from '@site/static/auto-generated/label/props.md'; import Events from '@site/static/auto-generated/label/events.md'; import Methods from '@site/static/auto-generated/label/methods.md'; @@ -18,376 +14,38 @@ import Slots from '@site/static/auto-generated/label/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -import APITOCInline from '@components/page/api/APITOCInline'; -

Contents

- - - - - Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating. +## Basic Usage +import Basic from '@site/static/usage/label/basic/index.md'; -## Usage - - - - - -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` - - - - - - - -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` - - - - - - - -```tsx -import React from 'react'; -import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react'; - -export const LabelExample: React.FC = () => ( - - {/*-- Default Label --*/} - Label
- - {/*-- Label Colors --*/} - Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
- - {/*-- Item Labels --*/} - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - {/*-- Input Labels --*/} - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - - -); -``` - - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'label-example', - styleUrl: 'label-example.css' -}) -export class LabelExample { - render() { - return [ - // Default Label - Label, - - // Label Colors - Primary Label, - Secondary Label, - Danger Label, - Light Label, - Dark Label, - - // Item Labels - - Default Item - , - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - , - - // Input Labels - - Default Input - - , - - - Fixed - - , - - - Floating - - , - - - Stacked - - , - - - Toggle - - , - - - - Checkbox - - ]; - } -} -``` - - - - - - - -```html - + - -``` +### Colors +import Colors from '@site/static/usage/label/theming/colors/index.md'; - + - ## Properties @@ -405,4 +63,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/usage/label/basic/angular.md b/static/usage/label/basic/angular.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/label/basic/angular.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/label/basic/demo.html b/static/usage/label/basic/demo.html new file mode 100644 index 00000000000..2854a183851 --- /dev/null +++ b/static/usage/label/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + + Label + + + + + + + + + +
+ Label +
+ + + + + diff --git a/static/usage/label/basic/index.md b/static/usage/label/basic/index.md new file mode 100644 index 00000000000..f2609779a49 --- /dev/null +++ b/static/usage/label/basic/index.md @@ -0,0 +1,8 @@ +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'; + + diff --git a/static/usage/label/basic/javascript.md b/static/usage/label/basic/javascript.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/label/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/label/basic/react.md b/static/usage/label/basic/react.md new file mode 100644 index 00000000000..8eb985452c0 --- /dev/null +++ b/static/usage/label/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Label + + ); +} +export default Example; +``` diff --git a/static/usage/label/basic/vue.md b/static/usage/label/basic/vue.md new file mode 100644 index 00000000000..87f46b68110 --- /dev/null +++ b/static/usage/label/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/label/input/angular.md b/static/usage/label/input/angular.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/label/input/angular.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/label/input/demo.html b/static/usage/label/input/demo.html new file mode 100644 index 00000000000..6aa8cc6288c --- /dev/null +++ b/static/usage/label/input/demo.html @@ -0,0 +1,59 @@ + + + + + + + Label + + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + + diff --git a/static/usage/label/input/index.md b/static/usage/label/input/index.md new file mode 100644 index 00000000000..8dd89c53922 --- /dev/null +++ b/static/usage/label/input/index.md @@ -0,0 +1,8 @@ +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'; + + diff --git a/static/usage/label/input/javascript.md b/static/usage/label/input/javascript.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/label/input/react.md b/static/usage/label/input/react.md new file mode 100644 index 00000000000..ff11fd1f176 --- /dev/null +++ b/static/usage/label/input/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + + + ); +} +export default Example; +``` diff --git a/static/usage/label/input/vue.md b/static/usage/label/input/vue.md new file mode 100644 index 00000000000..cd05ef82b44 --- /dev/null +++ b/static/usage/label/input/vue.md @@ -0,0 +1,42 @@ +```html + + + +``` diff --git a/static/usage/label/item/angular.md b/static/usage/label/item/angular.md new file mode 100644 index 00000000000..be252b899a0 --- /dev/null +++ b/static/usage/label/item/angular.md @@ -0,0 +1,28 @@ +```html + + Default Label + + + + + 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. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/label/item/demo.html b/static/usage/label/item/demo.html new file mode 100644 index 00000000000..1fe2c7978cc --- /dev/null +++ b/static/usage/label/item/demo.html @@ -0,0 +1,56 @@ + + + + + + + Label + + + + + + + + + + + + +
+ + Default Label + + + + + 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. + + + + + +

Heading

+

Paragraph

+ + +
+ + + + + diff --git a/static/usage/label/item/index.md b/static/usage/label/item/index.md new file mode 100644 index 00000000000..0131917416f --- /dev/null +++ b/static/usage/label/item/index.md @@ -0,0 +1,8 @@ +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'; + + diff --git a/static/usage/label/item/javascript.md b/static/usage/label/item/javascript.md new file mode 100644 index 00000000000..be252b899a0 --- /dev/null +++ b/static/usage/label/item/javascript.md @@ -0,0 +1,28 @@ +```html + + Default Label + + + + + 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. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/label/item/react.md b/static/usage/label/item/react.md new file mode 100644 index 00000000000..88e4f904deb --- /dev/null +++ b/static/usage/label/item/react.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + 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. + + + + + +

Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/label/item/vue.md b/static/usage/label/item/vue.md new file mode 100644 index 00000000000..99ec3ea3d40 --- /dev/null +++ b/static/usage/label/item/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/label/theming/colors/angular.md b/static/usage/label/theming/colors/angular.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/label/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/label/theming/colors/demo.html b/static/usage/label/theming/colors/demo.html new file mode 100644 index 00000000000..f59d500d888 --- /dev/null +++ b/static/usage/label/theming/colors/demo.html @@ -0,0 +1,39 @@ + + + + + + + Label + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + + diff --git a/static/usage/label/theming/colors/index.md b/static/usage/label/theming/colors/index.md new file mode 100644 index 00000000000..16ab86412d7 --- /dev/null +++ b/static/usage/label/theming/colors/index.md @@ -0,0 +1,8 @@ +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'; + + diff --git a/static/usage/label/theming/colors/javascript.md b/static/usage/label/theming/colors/javascript.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/label/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/label/theming/colors/react.md b/static/usage/label/theming/colors/react.md new file mode 100644 index 00000000000..6680a644fb6 --- /dev/null +++ b/static/usage/label/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/label/theming/colors/vue.md b/static/usage/label/theming/colors/vue.md new file mode 100644 index 00000000000..da18a00d4d1 --- /dev/null +++ b/static/usage/label/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` From 3262c019c5fa72e4a1c8f087a6c19d37eb180d41 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Tue, 6 Sep 2022 12:06:36 -0400 Subject: [PATCH 2/2] fix(label): adjust playground size to medium --- static/usage/label/input/index.md | 2 +- static/usage/label/item/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/usage/label/input/index.md b/static/usage/label/input/index.md index 8dd89c53922..ff69eb55211 100644 --- a/static/usage/label/input/index.md +++ b/static/usage/label/input/index.md @@ -5,4 +5,4 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - + diff --git a/static/usage/label/item/index.md b/static/usage/label/item/index.md index 0131917416f..99035942d7b 100644 --- a/static/usage/label/item/index.md +++ b/static/usage/label/item/index.md @@ -5,4 +5,4 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - +