mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 22:29:44 +08:00
fix(inputs): remove invalid legacy warnings in input, textarea, and select (#28484)
Issue number: N/A
---------
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When using an `ion-label` as a `label` slot inside of an `ion-input`,
`ion-textarea` or `ion-select` it erroneously flags the input as a
legacy component and ignores the `label-placement`:
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/91ef5470-aba4-4bb6-b277-09e2b1a4650c">
</td>
</tr>
</table>
<img width="1005" alt="Screenshot 2023-11-07 at 10 37 43 AM"
src="https://github.com/ionic-team/ionic-framework/assets/6577830/00208625-2bdb-4b60-b7ce-e487dd89c47e">
## What is the new behavior?
Adds `ion-input`, `ion-textarea`, and `ion-select` as components that
can contain a named label slot so it no longer assumes that they are
legacy components.
<table>
<tr>
<td>
Code
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<pre lang="html">
<ion-item>
<ion-input label-placement="floating">
<ion-label slot="label">
<ion-icon name="home"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
<ion-item>
<ion-input label-placement="floating" value="Value">
<ion-label slot="label">
<ion-icon name="person"></ion-icon>
Slotted Label
</ion-label>
</ion-input>
</ion-item>
</pre>
</td>
<td>
<img
src="https://github.com/ionic-team/ionic-framework/assets/6577830/75f06c5e-6887-4e8e-8022-264b716b3e62">
</td>
</tr>
</table>
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
This commit is contained in:
@ -48,11 +48,6 @@ export type LegacyFormController = {
|
||||
};
|
||||
|
||||
const hasLabelSlot = (controlEl: HTMLElement) => {
|
||||
const root = controlEl.shadowRoot;
|
||||
if (root === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Components that have a named label slot
|
||||
* also have other slots, so we need to query for
|
||||
@ -74,5 +69,5 @@ const hasLabelSlot = (controlEl: HTMLElement) => {
|
||||
return false;
|
||||
};
|
||||
|
||||
const NAMED_LABEL_SLOT_COMPONENTS = ['ION-RANGE'];
|
||||
const NAMED_LABEL_SLOT_COMPONENTS = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-RANGE'];
|
||||
const UNNAMED_LABEL_SLOT_COMPONENTS = ['ION-TOGGLE', 'ION-CHECKBOX', 'ION-RADIO'];
|
||||
|
||||
Reference in New Issue
Block a user