-
Notifications
You must be signed in to change notification settings - Fork 13.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(input, textarea, select): add start and end slots (#28583)
Issue number: Resolves #26297 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> With the modern form control syntax, it is not possible to add icon buttons or other decorators to the sides of `ion-input`, `ion-textarea`, or `ion-select`, as you can with `ion-item`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> `start` and `end` slots added to each component. This PR is a combination of several others that were already approved. If needed, it might be easiest to review the PRs individually by looking at the commit history here. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Docs PR: ionic-team/ionic-docs#3271 Dev build: `7.5.4-dev.11701112913.1ea61220` --------- Co-authored-by: ionitron <[email protected]> Co-authored-by: Maria Hutt <[email protected]> Co-authored-by: Liam DeBeasi <[email protected]>
- Loading branch information
4 people
authored
Dec 1, 2023
1 parent
b757970
commit 357b8b2
Showing
97 changed files
with
1,070 additions
and
129 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,7 +21,13 @@ <h1>Input - a11y</h1> | |
| <ion-input label="Email" label-placement="stacked" value="[email protected]"></ion-input><br /> | ||
| <ion-input label="Email" label-placement="floating"></ion-input> <br /> | ||
| <ion-input label="Email" label-placement="floating" fill="outline" value="[email protected]"></ion-input> <br /> | ||
| <ion-input label="Email" label-placement="floating" fill="solid" value="[email protected]"></ion-input> | ||
| <ion-input label="Email" label-placement="floating" fill="solid" value="[email protected]"></ion-input><br /> | ||
| <ion-input label="Email" fill="solid" value="[email protected]"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button slot="end" aria-label="button"> | ||
| <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </main> | ||
| </body> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -49,53 +49,125 @@ | |
| </ion-header> | ||
|
|
||
| <ion-content id="content" class="ion-padding"> | ||
| <h1>Label Slot</h1> | ||
| <div class="grid"> | ||
| <div class="grid-item"> | ||
| <h2>No Fill / Start</h2> | ||
| <h2>No Fill / Start Label</h2> | ||
| <ion-input label-placement="start" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Solid / Start</h2> | ||
| <h2>Solid / Start Label</h2> | ||
| <ion-input label-placement="start" fill="solid" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Start</h2> | ||
| <h2>Outline / Start Label</h2> | ||
| <ion-input label-placement="start" fill="outline" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>No Fill / Floating</h2> | ||
| <h2>No Fill / Floating Label</h2> | ||
| <ion-input label-placement="floating" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Solid / Floating</h2> | ||
| <h2>Solid / Floating Label</h2> | ||
| <ion-input label-placement="floating" fill="solid" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Floating</h2> | ||
| <h2>Outline / Floating Label</h2> | ||
| <ion-input label-placement="floating" fill="outline" value="[email protected]"> | ||
| <div slot="label">Email <span class="required">*</span></div> | ||
| </ion-input> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h1>Start/End Slots</h1> | ||
| <div class="grid"> | ||
| <div class="grid-item"> | ||
| <h2>No Fill / Start Label</h2> | ||
| <ion-input label-placement="start" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Floating / Async</h2> | ||
| <h2>Solid / Start Label</h2> | ||
| <ion-input label-placement="start" fill="solid" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Start Label</h2> | ||
| <ion-input label-placement="start" fill="outline" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>No Fill / Floating Label</h2> | ||
| <ion-input label-placement="floating" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Solid / Floating Label</h2> | ||
| <ion-input label-placement="floating" fill="solid" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Floating Label</h2> | ||
| <ion-input label-placement="floating" fill="outline" value="[email protected]" label="Email"> | ||
| <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon> | ||
| <ion-button fill="clear" slot="end" aria-label="Show/hide password"> | ||
| <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon> | ||
| </ion-button> | ||
| </ion-input> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h1>Async Slot Content</h1> | ||
| <div class="grid"> | ||
| <div class="grid-item"> | ||
| <h2>Outline / Async Label</h2> | ||
| <ion-input id="solid-async" label-placement="floating" fill="outline" value="[email protected]"></ion-input> | ||
| </div> | ||
|
|
||
| <div class="grid-item"> | ||
| <h2>Outline / Async Decorations</h2> | ||
| <ion-input id="async-decorations" label-placement="floating" fill="outline" label="Email"></ion-input> | ||
| </div> | ||
| </div> | ||
|
|
||
| <ion-button onclick="addSlot()">Add Slotted Content</ion-button> | ||
|
|
@@ -106,29 +178,65 @@ <h2>Outline / Floating / Async</h2> | |
|
|
||
| <script> | ||
| const solidAsync = document.querySelector('#solid-async'); | ||
| const asyncDecos = document.querySelector('#async-decorations'); | ||
|
|
||
| const getSlottedContent = () => { | ||
| const getSlottedLabel = () => { | ||
| return solidAsync.querySelector('[slot="label"]'); | ||
| }; | ||
|
|
||
| const getSlottedStartDeco = () => { | ||
| return asyncDecos.querySelector('[slot="start"]'); | ||
| }; | ||
|
|
||
| const getSlottedEndDeco = () => { | ||
| return asyncDecos.querySelector('[slot="end"]'); | ||
| }; | ||
|
|
||
| const addSlot = () => { | ||
| if (getSlottedContent() === null) { | ||
| if (getSlottedLabel() === null) { | ||
| const labelEl = document.createElement('div'); | ||
| labelEl.slot = 'label'; | ||
| labelEl.innerHTML = 'Email <span class="required">*</span>'; | ||
|
|
||
| solidAsync.appendChild(labelEl); | ||
| } | ||
|
|
||
| if (getSlottedStartDeco() === null) { | ||
| const startEl = document.createElement('div'); | ||
| startEl.slot = 'start'; | ||
| startEl.innerHTML = 'Start'; | ||
|
|
||
| asyncDecos.insertAdjacentElement('afterbegin', startEl); | ||
| } | ||
|
|
||
| if (getSlottedEndDeco() === null) { | ||
| const endEl = document.createElement('div'); | ||
| endEl.slot = 'end'; | ||
| endEl.innerHTML = 'End'; | ||
|
|
||
| asyncDecos.insertAdjacentElement('beforeend', endEl); | ||
| } | ||
| }; | ||
|
|
||
| const removeSlot = () => { | ||
| if (getSlottedContent() !== null) { | ||
| solidAsync.querySelector('[slot="label"]').remove(); | ||
| const slottedLabel = getSlottedLabel(); | ||
| if (slottedLabel !== null) { | ||
| slottedLabel.remove(); | ||
| } | ||
|
|
||
| const slottedStartDeco = getSlottedStartDeco(); | ||
| if (slottedStartDeco !== null) { | ||
| slottedStartDeco.remove(); | ||
| } | ||
|
|
||
| const slottedEndDeco = getSlottedEndDeco(); | ||
| if (slottedEndDeco !== null) { | ||
| slottedEndDeco.remove(); | ||
| } | ||
| }; | ||
|
|
||
| const updateSlot = () => { | ||
| const slottedContent = getSlottedContent(); | ||
| const slottedContent = getSlottedLabel(); | ||
|
|
||
| if (slottedContent !== null) { | ||
| slottedContent.textContent = 'This is my really really really long text'; | ||
|
|
||
Oops, something went wrong.