fix(item): only default slot content wraps

core/src/components/item/item.scss

@@ -51,15 +51,6 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
-
-  /**
-   * We change the minimum width as the
-   * font size changes. Using a fixed minimum
-   * width means that fewer and fewer characters
-   * can be displayed in the same space as the
-   * text grows.
-   */
-  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,11 +221,6 @@
   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;
 
@@ -258,11 +244,6 @@
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -307,34 +288,13 @@ button, a {
   // This is required to work with an inset highlight
   position: relative;
 
-  // 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 0;
+  flex: 1;
 
   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;
 
-  /**
-   * The min-width defines when the
-   * content in the default slot should
-   * stop wrapping/truncating within its own
-   * container. At this point the entire
-   * container will wrap to the next line.
-   */
-  min-width: var(--inner-min-width);
-
-  // 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);
@@ -346,15 +306,6 @@ 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
 // --------------------------------------------------
 
@@ -448,38 +399,19 @@ button, a {
   // 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: 1;
 
   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/a11y/item.e2e.ts

@@ -155,16 +155,22 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
 
         <ion-list>
           <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button>Default</ion-button>
+            <ion-label>
+              Item
+              <ion-button>Default</ion-button>
+            </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="small">Small</ion-button>
+            <ion-label>
+              Item
+              <ion-button size="small">Small</ion-button>
+            </ion-label>
           </ion-item>
           <ion-item>
-            <ion-label>Item</ion-label>
-            <ion-button size="large">Large</ion-button>
+            <ion-label>
+              Item
+              <ion-button size="large">Large</ion-button>
+            </ion-label>
           </ion-item>
         </ion-list>
       `,

core/src/components/note/test/a11y/note.e2e.ts

@@ -72,33 +72,45 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
         <ion-list>
           <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Label</ion-label>
+            <ion-label>
+              <ion-note>Really really long note</ion-note>
+              Label
+            </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
+            <ion-label>
+              Label
+              <ion-note>Really really long note</ion-note>
+            </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-note slot="start">Note</ion-note>
-            <ion-label>Really really long label</ion-label>
+            <ion-label>
+              Really really long label
+              <ion-note>Note</ion-note>
+            </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Note</ion-note>
+            <ion-label>
+              Really really long label
+              <ion-note>Really really long note</ion-note>
+            </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Really really long label</ion-label>
+            <ion-label>
+              <ion-note>Really really long note</ion-note>
+              Really really long label
+            </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
+            <ion-label>
+              Really really long label
+              <ion-note>Really really long note</ion-note>
+            </ion-label>
           </ion-item>
         </ion-list>
       `,