refactor!: make item content part a flex container (#10613)

Author: jouni

packages/item/src/styles/vaadin-item-base-styles.js

@@ -13,7 +13,7 @@ export const itemStyles = css`
     box-sizing: border-box;
     cursor: var(--vaadin-clickable-cursor);
     display: flex;
-    gap: var(--vaadin-item-gap, 0 var(--vaadin-gap-s));
+    column-gap: var(--vaadin-item-gap, var(--vaadin-gap-s));
     height: var(--vaadin-item-height, auto);
     padding: var(--vaadin-item-padding, var(--vaadin-padding-block-container) var(--vaadin-padding-inline-container));
     -webkit-tap-highlight-color: transparent;
@@ -55,6 +55,10 @@ export const itemStyles = css`
 
   [part='content'] {
     flex: 1;
+    display: flex;
+    align-items: center;
+    column-gap: inherit;
+    justify-content: var(--vaadin-item-text-align, start);
   }
 
   @media (forced-colors: active) {

packages/item/test/item.test.js

@@ -37,8 +37,8 @@ describe('vaadin-item', () => {
     expect(slot.parentElement).to.equal(content);
   });
 
-  it('should have a block context for content part', () => {
+  it('should have a flex container for content part', () => {
     const content = item.shadowRoot.querySelector('[part="content"]');
-    expect(getComputedStyle(content).display).to.equal('block');
+    expect(getComputedStyle(content).display).to.equal('flex');
   });
 });

packages/menu-bar/test/visual/base/screenshots/menu-bar/baseline/ltr-end-aligned.png

@@ -39,4 +39,44 @@ export const selectStyles = css`
   :host([readonly]) [part~='toggle-button'] {
     display: none;
   }
+
+  :host([theme~='align-start']) {
+    --vaadin-item-text-align: start;
+  }
+
+  :host([theme~='align-center']) {
+    --vaadin-item-text-align: center;
+  }
+
+  :host([theme~='align-end']) {
+    --vaadin-item-text-align: end;
+  }
+
+  :host([theme~='align-left']) {
+    --vaadin-item-text-align: left;
+  }
+
+  :host([theme~='align-right']) {
+    --vaadin-item-text-align: right;
+  }
+
+  :host([theme~='align-start']) ::slotted([slot='value']) {
+    justify-content: start;
+  }
+
+  :host([theme~='align-center']) ::slotted([slot='value']) {
+    justify-content: center;
+  }
+
+  :host([theme~='align-end']) ::slotted([slot='value']) {
+    justify-content: end;
+  }
+
+  :host([theme~='align-left']) ::slotted([slot='value']) {
+    justify-content: left;
+  }
+
+  :host([theme~='align-right']) ::slotted([slot='value']) {
+    justify-content: right;
+  }
 `;

packages/menu-bar/test/visual/base/screenshots/menu-bar/baseline/ltr-primary.png

@@ -22,24 +22,4 @@ export const selectOverlayStyles = css`
   [part='backdrop'] {
     background: transparent;
   }
-
-  :host([theme~='align-start']) [part='overlay'] {
-    text-align: start;
-  }
-
-  :host([theme~='align-center']) [part='overlay'] {
-    text-align: center;
-  }
-
-  :host([theme~='align-end']) [part='overlay'] {
-    text-align: end;
-  }
-
-  :host([theme~='align-left']) [part='overlay'] {
-    text-align: left;
-  }
-
-  :host([theme~='align-right']) [part='overlay'] {
-    text-align: right;
-  }
 `;