fix(item): elements should wrap and label should not collapse when text size increases

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,47 +29,47 @@ <h1>Floating Inputs</h1>
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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,47 +89,47 @@ <h1>Stacked Inputs</h1>
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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>
 
           <div class="column">
             <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,11 +43,13 @@
         </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">
-          <ion-label> Single line item with no lines</ion-label>
+          <ion-label>Single line item with no lines</ion-label>
         </ion-item>
 
         <ion-item>
@@ -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 @@ <h3>H3 Title Text</h3>
         </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>
@@ -92,7 +94,7 @@ <h4>H4 Title Text</h4>
         </ion-item>
 
         <ion-item>
-          <ion-label> Item using inner ion-label </ion-label>
+          <ion-label>Item using inner ion-label </ion-label>
         </ion-item>
 
         <ion-item class="overflow-visible">

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`));
     });
   });