Skip to content
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

docs(many): remove legacy form control syntax from v7 playgrounds #3140

Merged
merged 14 commits into from
Oct 12, 2023
Merged

docs(many): remove legacy form control syntax from v7 playgrounds #3140

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
942cb6e
item/inputs
Sep 21, 2023
98157b8
item/theming/input-highlight (removed)
Sep 21, 2023
b0e5123
label/input
Sep 21, 2023
4230b39
update label description
Sep 21, 2023
8490ab9
menu/type
Sep 21, 2023
40e5e4b
modal/inline/basic
Sep 21, 2023
6297359
modal/can-dismiss/boolean
Sep 21, 2023
4ceb53e
backdrop/basic
Sep 21, 2023
b320ad6
lint
Sep 21, 2023
fbfd88c
Merge branch 'main' into playground-legacy-fix
Oct 11, 2023
fd3f9ef
item/inputs: revert playground size change
Oct 11, 2023
820d0b9
tweak label copy
Oct 11, 2023
acb11ef
modal/can-dismiss/boolean: convert labels to plain divs
Oct 11, 2023
09cf89a
further tweak label copy for better accuracy and flow
Oct 11, 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
12 changes: 0 additions & 12 deletions docs/api/item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,6 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md

<CSSProps />


### Input Highlight

Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`.

The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. This can be customized using the provided CSS properties.

import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';

<InputHighlight />


## Properties
<Props />

Expand Down
8 changes: 1 addition & 7 deletions docs/api/label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';

<EncapsulationPill type="scoped" />

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.
Label is a textual element used primarily to give added context to [Item](./item.md) components. The position of the label inside of an item can be inline, fixed, stacked, or floating.
averyjohnston marked this conversation as resolved.
Show resolved Hide resolved
averyjohnston marked this conversation as resolved.
Show resolved Hide resolved


## Basic Usage
Expand All @@ -32,12 +32,6 @@ import Item from '@site/static/usage/v7/label/item/index.md';

<Item />

## Input Labels

import Input from '@site/static/usage/v7/label/input/index.md';

<Input />

## Theming

### Colors
Expand Down
3 changes: 1 addition & 2 deletions static/usage/v7/backdrop/basic/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>Checkbox</ion-label>
<ion-checkbox>Checkbox</ion-checkbox>
</ion-item>
<ion-button expand="block">Button</ion-button>
</ion-content>
Expand Down
3 changes: 1 addition & 2 deletions static/usage/v7/backdrop/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>Checkbox</ion-label>
<ion-checkbox>Checkbox</ion-checkbox>
</ion-item>
<ion-button expand="block">Button</ion-button>
</ion-content>
Expand Down
3 changes: 1 addition & 2 deletions static/usage/v7/backdrop/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>Checkbox</ion-label>
<ion-checkbox>Checkbox</ion-checkbox>
</ion-item>
<ion-button expand="block">Button</ion-button>
</ion-content>
Expand Down
4 changes: 1 addition & 3 deletions static/usage/v7/backdrop/basic/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
IonContent,
IonItem,
IonCheckbox,
IonLabel,
IonButton,
} from '@ionic/react';

Expand All @@ -24,8 +23,7 @@ function Example() {
</IonHeader>
<IonContent className="ion-padding">
<IonItem>
<IonCheckbox slot="start"></IonCheckbox>
<IonLabel>Checkbox</IonLabel>
<IonCheckbox>Checkbox</IonCheckbox>
</IonItem>
<IonButton expand="block">Button</IonButton>
</IonContent>
Expand Down
6 changes: 2 additions & 4 deletions static/usage/v7/backdrop/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-checkbox slot="start"></ion-checkbox>
<ion-label>Checkbox</ion-label>
<ion-checkbox>Checkbox</ion-checkbox>
</ion-item>
<ion-button expand="block">Button</ion-button>
</ion-content>
Expand All @@ -25,13 +24,12 @@
IonContent,
IonItem,
IonCheckbox,
IonLabel,
IonButton,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonLabel, IonButton },
components: { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonItem, IonCheckbox, IonButton },
});
</script>
```
8 changes: 0 additions & 8 deletions static/usage/v7/item/inputs/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,6 @@
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="outline">
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="solid">
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Select" placeholder="Make a Selection">
<ion-select-option value="">No Game Console</ion-select-option>
Expand Down
16 changes: 0 additions & 16 deletions static/usage/v7/item/inputs/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,22 +36,6 @@
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="outline">
<ion-input
label="Floating Input: Outline (MD only)"
label-placement="floating"
placeholder="Enter text"
></ion-input>
</ion-item>

<ion-item fill="solid">
<ion-input
label="Floating Input: Solid (MD only)"
label-placement="floating"
placeholder="Enter text"
></ion-input>
</ion-item>

<ion-item>
<ion-select label="Select" placeholder="Make a Selection">
<ion-select-option value="">No Game Console</ion-select-option>
Expand Down
2 changes: 1 addition & 1 deletion static/usage/v7/item/inputs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ 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/item/inputs/demo.html" size="large" />
<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/inputs/demo.html" size="470px" />
8 changes: 0 additions & 8 deletions static/usage/v7/item/inputs/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,6 @@
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="outline">
<ion-input label="Floating Input: Outline (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="solid">
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Select" placeholder="Make a Selection">
<ion-select-option value="">No Game Console</ion-select-option>
Expand Down
16 changes: 0 additions & 16 deletions static/usage/v7/item/inputs/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,6 @@ function Example() {
<IonInput label="Floating Input" label-placement="floating" placeholder="Enter text"></IonInput>
</IonItem>

<IonItem fill="outline">
<IonInput
label="Floating Input: Outline (MD only)"
label-placement="floating"
placeholder="Enter text"
></IonInput>
</IonItem>

<IonItem fill="solid">
<IonInput
label="Floating Input: Solid (MD only)"
label-placement="floating"
placeholder="Enter text"
></IonInput>
</IonItem>

<IonItem>
<IonSelect label="Select" placeholder="Make a Selection">
<IonSelectOption value="">No Game Console</IonSelectOption>
Expand Down
12 changes: 0 additions & 12 deletions static/usage/v7/item/inputs/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,6 @@
<ion-input label="Floating Input" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="outline">
<ion-input
label="Floating Input: Outline (MD only)"
label-placement="floating"
placeholder="Enter text"
></ion-input>
</ion-item>

<ion-item fill="solid">
<ion-input label="Floating Input: Solid (MD only)" label-placement="floating" placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-select label="Select" placeholder="Make a Selection">
<ion-select-option value="">No Game Console</ion-select-option>
Expand Down
8 changes: 0 additions & 8 deletions static/usage/v7/item/theming/input-highlight/angular/example_component_css.md
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions static/usage/v7/item/theming/input-highlight/angular/example_component_html.md
View file
Open in desktop

This file was deleted.

48 changes: 0 additions & 48 deletions static/usage/v7/item/theming/input-highlight/demo.html
View file
Open in desktop

This file was deleted.

33 changes: 0 additions & 33 deletions static/usage/v7/item/theming/input-highlight/index.md
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions static/usage/v7/item/theming/input-highlight/javascript.md
View file
Open in desktop

This file was deleted.

8 changes: 0 additions & 8 deletions static/usage/v7/item/theming/input-highlight/react/main_css.md
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions static/usage/v7/item/theming/input-highlight/react/main_tsx.md
View file
Open in desktop

This file was deleted.

Loading
Loading