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">
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating" value="Value"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
      </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">
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
&lt;ion-item&gt;
  &lt;ion-input label-placement="floating" value="Value"&gt;
    &lt;ion-label slot="label"&gt;
      &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
      Slotted Label
    &lt;/ion-label&gt;
  &lt;/ion-input&gt;
&lt;/ion-item&gt;
      </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:
Brandy Carney
2023-11-07 12:08:06 -05:00
committed by GitHub
parent dfaa006a7a
commit c765dcbac4

View File

@ -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'];