fix(item): wrap elements and label contents when the font size increases or the elements do not fit (#28146)

1) Wraps the label text and other content in an item when there is not enough room for everything to fit, instead of truncating the label with an ellipsis. Does not apply to items containing legacy inputs.
2) Passes the legacy property up to item from checkbox, input, radio, range, select, textarea and toggle. Item adds classes for all of these and does not wrap its contents if that class exists. If a developer is using a legacy input without the legacy property on it then they will need to add the legacy property to prevent the wrapping.
3) If a developer does not want the text to wrap for labels in modern items, the `ion-text-nowrap` class can be added to the label.

core/src/components.d.ts

@@ -3386,6 +3386,10 @@ export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSelectElement;
 }
+export interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonSkeletonTextElement;
+}
 export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonSplitPaneElement;
@@ -6921,6 +6925,10 @@ declare namespace LocalJSX {
           * If `true`, the skeleton text will animate.
          */
         "animated"?: boolean;
+        /**
+          * Emitted when the styles change.
+         */
+        "onIonStyle"?: (event: IonSkeletonTextCustomEvent<StyleEventDetail>) => void;
     }
     interface IonSpinner {
         /**

core/src/components/checkbox/checkbox.tsx

@@ -164,6 +164,8 @@ export class Checkbox implements ComponentInterface {
   private emitStyle() {
     const style: StyleEventDetail = {
       'interactive-disabled': this.disabled,
+      // TODO(FW-3100): remove this
+      legacy: !!this.legacy,
     };
 
     // TODO(FW-3100): remove this

core/src/components/datetime/datetime.scss

@@ -243,6 +243,9 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
+// TODO(FW-3547): the styles targeting ion-item
+// can be removed if we refactor datetime to
+// not use an ion-item
 :host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
   --background: translucent;
@@ -252,6 +255,11 @@ ion-picker-column-internal {
   display: flex;
 
   align-items: center;
+
+  // Width is set to auto because it is set
+  // to min-content elsewhere and we want to
+  // prevent wrapping the label in datetime
+  width: auto;
 }
 
 :host .calendar-action-buttons ion-item ion-icon {

core/src/components/input/input.tsx

@@ -479,6 +479,8 @@ export class Input implements ComponentInterface {
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
         'interactive-disabled': this.disabled,
+        // TODO(FW-2764): remove this
+        legacy: !!this.legacy,
       });
     }
   }

core/src/components/input/test/legacy/spec/index.html

@@ -29,7 +29,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -37,7 +37,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -45,7 +45,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -53,7 +53,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="floating">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -61,7 +61,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input disabled></ion-input>
+              <ion-input legacy="true" disabled></ion-input>
             </ion-item>
           </div>
 
@@ -69,7 +69,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="floating">Label</ion-label>
-              <ion-input id="floatingToggle" type="password"></ion-input>
+              <ion-input legacy="true" id="floatingToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"
@@ -89,7 +89,7 @@
             <h2>Inactive</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -97,7 +97,7 @@
             <h2>Focused</h2>
             <ion-item class="item-has-focus">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input placeholder="Placeholder Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text"></ion-input>
             </ion-item>
           </div>
 
@@ -105,7 +105,7 @@
             <h2>Activated</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input placeholder="Placeholder Text" value="Input Text"></ion-input>
+              <ion-input legacy="true" placeholder="Placeholder Text" value="Input Text"></ion-input>
             </ion-item>
           </div>
 
@@ -113,7 +113,7 @@
             <h2>Hover</h2>
             <ion-item class="item-hovered">
               <ion-label position="stacked">Label</ion-label>
-              <ion-input></ion-input>
+              <ion-input legacy="true"></ion-input>
             </ion-item>
           </div>
 
@@ -121,7 +121,7 @@
             <h2>Disabled</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input disabled></ion-input>
+              <ion-input legacy="true" disabled></ion-input>
             </ion-item>
           </div>
 
@@ -129,7 +129,7 @@
             <h2>Toggle Placeholder</h2>
             <ion-item>
               <ion-label position="stacked">Label</ion-label>
-              <ion-input id="stackedToggle" type="password"></ion-input>
+              <ion-input legacy="true" id="stackedToggle" type="password"></ion-input>
               <ion-button
                 fill="clear"
                 slot="end"

core/src/components/item/item.scss

@@ -214,6 +214,11 @@
   display: flex;
   position: relative;
 
+  // Flex wrap is required here in order to wrap
+  // the start slot + .item-inner content that
+  // doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   justify-content: inherit;
 
@@ -231,9 +236,15 @@
   background: var(--background);
 
   overflow: inherit;
-  box-sizing: border-box;
 
   z-index: 1;
+
+  box-sizing: border-box;
+}
+
+// TODO(FW-5289): remove
+:host(.item-legacy) .item-native {
+  flex-wrap: unset;
 }
 
 .item-native::-moz-focus-inner {
@@ -273,11 +284,25 @@ button, a {
   // This is required to work with an inset highlight
   position: relative;
 
-  flex: 1;
+  // This flex property is required in order to make
+  // the elements wrap when there is a slotted start
+  // element and a label
+  flex: 1 0 auto;
+
   flex-direction: inherit;
+
+  // Flex wrap is required here in order to wrap
+  // .input-wrapper content + the end slot that
+  // doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   align-self: stretch;
 
+  // Max width must be set to 100%, otherwise the
+  // elements will overflow this container instead
+  // of wrapping
+  max-width: 100%;
   min-height: inherit;
 
   border-width: var(--inner-border-width);
@@ -289,6 +314,14 @@ button, a {
   box-sizing: border-box;
 }
 
+// TODO(FW-5289): remove
+:host(.item-legacy) .item-inner {
+  flex: 1;
+
+  flex-wrap: unset;
+
+  max-width: unset;
+}
 
 // Item Bottom
 // --------------------------------------------------
@@ -349,6 +382,11 @@ button, a {
 
 ::slotted(ion-label:not([slot="end"])) {
   flex: 1;
+
+  // Setting width to min-content allows the label to
+  // shrink and wrap its text instead of moving to its
+  // own row if there are slotted elements next to it
+  width: min-content;
 }
 
 // Item Input
@@ -361,18 +399,41 @@ button, a {
 .input-wrapper {
   display: flex;
 
-  flex: 1;
+  // This flex property is required in order to keep
+  // the label from shrinking when there are wide
+  // elements next to it
+  flex: 1 0 auto;
+
   flex-direction: inherit;
 
+  // Flex wrap is required here in order to wrap
+  // content in the default slot (such as a label
+  // and a button) that doesn't fit on the same line
+  flex-wrap: wrap;
+
   align-items: inherit;
   align-self: stretch;
 
+  // Max width must be set to 100%, otherwise the
+  // elements will overflow this container instead
+  // of wrapping
+  max-width: 100%;
+
   text-overflow: ellipsis;
 
   overflow: inherit;
   box-sizing: border-box;
 }
 
+// TODO(FW-5289): remove
+:host(.item-legacy) .input-wrapper {
+  flex: 1;
+
+  flex-wrap: unset;
+
+  max-width: unset;
+}
+
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

core/src/components/item/test/basic/index.html

@@ -43,7 +43,9 @@
         </ion-item>
 
         <ion-item>
-          <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+          <ion-label class="ion-text-nowrap">
+            Single line text that should have ellipses when it doesn't all fit in the item
+          </ion-label>
         </ion-item>
 
         <ion-item lines="none">
@@ -57,21 +59,21 @@
         </ion-item>
 
         <ion-item color="secondary">
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h1>H1 Title Text</h1>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h2>H2 Title Text</h2>
             <p>Paragraph line 1</p>
           </ion-label>
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <ion-text color="primary">
               <h3>H3 Title Text</h3>
             </ion-text>
@@ -83,7 +85,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label class="ion-text-wrap">
+          <ion-label>
             <h4>H4 Title Text</h4>
             <p>Paragraph line 1</p>
             <p>Paragraph line 2</p>

core/src/components/item/test/disabled/index.html

@@ -144,8 +144,7 @@
 
           <ion-item>
             <ion-checkbox aria-label="Checkbox" slot="start"></ion-checkbox>
-            <ion-label>Checkbox + Toggle</ion-label>
-            <ion-toggle aria-label="Checkbox" disabled value="45"></ion-toggle>
+            <ion-toggle disabled value="45">Checkbox + Toggle</ion-toggle>
           </ion-item>
 
           <ion-item>

core/src/components/item/test/disabled/item.e2e.ts

@@ -11,7 +11,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await page.setIonViewport();
 
-      // TODO: FW-4037 - Fix label color inconsistency between disabled controls
       await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
     });
   });

core/src/components/item/test/legacy/alignment/index.html

@@ -46,7 +46,7 @@
           </ion-item>
           <ion-item>
             <ion-label>Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -61,7 +61,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -76,7 +76,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="floating">Destination</ion-label>
-            <ion-select>
+            <ion-select legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -91,7 +91,7 @@
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>
@@ -106,7 +106,7 @@
           </ion-item>
           <ion-item>
             <ion-label slot="end">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
               <ion-select-option>Madison, WI</ion-select-option>
               <ion-select-option>Atlanta, GA</ion-select-option>
             </ion-select>

core/src/components/item/test/legacy/disabled/index.html

@@ -41,7 +41,7 @@
 
           <ion-item>
             <ion-label>Disabled Select</ion-label>
-            <ion-select disabled value="n64">
+            <ion-select disabled value="n64" legacy="true">
               <ion-select-option value="">No Game Console</ion-select-option>
               <ion-select-option value="nes">NES</ion-select-option>
               <ion-select-option value="n64">Nintendo64</ion-select-option>
@@ -54,34 +54,34 @@
 
           <ion-item>
             <ion-label>Disabled Input</ion-label>
-            <ion-input placeholder="Disabled" disabled></ion-input>
+            <ion-input placeholder="Disabled" disabled legacy="true"></ion-input>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Textarea</ion-label>
-            <ion-textarea placeholder="Disabled" disabled></ion-textarea>
+            <ion-textarea placeholder="Disabled" disabled legacy="true"></ion-textarea>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Toggle</ion-label>
-            <ion-toggle disabled checked slot="end"></ion-toggle>
+            <ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Checkbox</ion-label>
-            <ion-checkbox disabled checked slot="start"></ion-checkbox>
+            <ion-checkbox disabled checked slot="start" legacy="true"></ion-checkbox>
           </ion-item>
 
           <ion-radio-group value="radio">
             <ion-item>
               <ion-label>Disabled Radio</ion-label>
-              <ion-radio disabled value="radio" slot="start"></ion-radio>
+              <ion-radio disabled value="radio" slot="start" legacy="true"></ion-radio>
             </ion-item>
           </ion-radio-group>
 
           <ion-item>
             <ion-label>Disabled Range</ion-label>
-            <ion-range disabled value="10"></ion-range>
+            <ion-range disabled value="10" legacy="true"></ion-range>
           </ion-item>
         </ion-list>
 
@@ -111,25 +111,25 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Radio</ion-label>
             <ion-radio slot="end"></ion-radio>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-radio slot="start"></ion-radio>
             <ion-label>Checkbox + Radio</ion-label>
           </ion-item>
 
           <ion-item>
             <ion-label>Disabled Selects</ion-label>
-            <ion-select placeholder="month">
+            <ion-select placeholder="month" legacy="true">
               <ion-select-option value="1">January</ion-select-option>
               <ion-select-option value="2">February</ion-select-option>
               <ion-select-option value="3">March</ion-select-option>
             </ion-select>
-            <ion-select disabled placeholder="year">
+            <ion-select disabled placeholder="year" legacy="true">
               <ion-select-option value="1990">1990</ion-select-option>
               <ion-select-option value="1991">1991</ion-select-option>
               <ion-select-option value="1992">1992</ion-select-option>
@@ -142,19 +142,19 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Range</ion-label>
             <ion-range disabled value="45"></ion-range>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start"></ion-checkbox>
+            <ion-checkbox slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Toggle</ion-label>
             <ion-toggle disabled value="45"></ion-toggle>
           </ion-item>
 
           <ion-item>
-            <ion-checkbox disabled slot="start"></ion-checkbox>
+            <ion-checkbox disabled slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Buttons</ion-label>
             <ion-button slot="end">Default</ion-button>
             <ion-button slot="end">Buttons</ion-button>
@@ -162,7 +162,7 @@
 
           <ion-item>
             <ion-label>Disabled Input</ion-label>
-            <ion-input slot="start" placeholder="Disabled" disabled></ion-input>
+            <ion-input slot="start" placeholder="Disabled" disabled legacy="true"></ion-input>
             <ion-segment>
               <ion-segment-button value="friends">
                 <ion-label>Friends</ion-label>
@@ -174,7 +174,7 @@
           </ion-item>
 
           <ion-item>
-            <ion-checkbox slot="start" disabled></ion-checkbox>
+            <ion-checkbox slot="start" disabled legacy="true"></ion-checkbox>
             <ion-label>Disabled Checkbox</ion-label>
             <ion-searchbar></ion-searchbar>
           </ion-item>