feat: add checkmark part to item components (#2879)

packages/avatar-group/theme/material/vaadin-avatar-group-styles.js

@@ -24,10 +24,6 @@ registerStyles(
       padding: 8px;
       padding-left: 24px;
     }
-
-    [part='items'] ::slotted(vaadin-item[theme='avatar-group-item'])::before {
-      display: none;
-    }
   `,
   { moduleId: 'material-avatar-group-list-box' }
 );
@@ -40,6 +36,10 @@ registerStyles(
       align-items: center;
     }
 
+    :host([theme='avatar-group-item']) [part='checkmark']::before {
+      display: none;
+    }
+
     :host([theme='avatar-group-item']:not([dir='rtl'])) ::slotted(vaadin-avatar) {
       margin-right: 8px;
     }

packages/combo-box/src/vaadin-combo-box-item.js

@@ -43,6 +43,7 @@ export class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
           display: none;
         }
       </style>
+      <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
         <slot></slot>
       </div>

packages/item/src/vaadin-item.js

@@ -60,6 +60,7 @@ class Item extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
           display: none !important;
         }
       </style>
+      <span part="checkmark" aria-hidden="true"></span>
       <div part="content">
         <slot></slot>
       </div>

packages/item/test/visual/lumo/item.test.js

@@ -5,10 +5,13 @@ import '../../../theme/lumo/vaadin-item.js';
 describe('item', () => {
   let div, element;
 
+  function setIconVisible(container) {
+    container.style.setProperty('--_lumo-item-selected-icon-display', 'block');
+  }
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.display = 'inline-block';
-    div.style.setProperty('--_lumo-item-selected-icon-display', 'block');
     element = fixtureSync('<vaadin-item>Basic item</vaadin-item>', div);
   });
 
@@ -26,13 +29,13 @@ describe('item', () => {
         await visualDiff(div, `${dir}-basic`);
       });
 
-      it('focusable', async () => {
-        element.setAttribute('tabindex', '0');
-        await visualDiff(div, `${dir}-focusable`);
+      it('checkmark', async () => {
+        setIconVisible(div);
+        await visualDiff(div, `${dir}-checkmark`);
       });
 
       it('selected', async () => {
-        element.setAttribute('tabindex', '0');
+        setIconVisible(div);
         element.setAttribute('selected', '');
         await visualDiff(div, `${dir}-selected`);
       });

packages/item/test/visual/material/item.test.js

@@ -5,10 +5,13 @@ import '../../../theme/material/vaadin-item.js';
 describe('item', () => {
   let div, element;
 
+  function setIconVisible(container) {
+    container.style.setProperty('--_material-item-selected-icon-display', 'block');
+  }
+
   beforeEach(() => {
     div = document.createElement('div');
     div.style.display = 'inline-block';
-    div.style.setProperty('--_material-item-selected-icon-display', 'block');
     element = fixtureSync('<vaadin-item>Basic item</vaadin-item>', div);
   });
 
@@ -26,13 +29,13 @@ describe('item', () => {
         await visualDiff(div, `${dir}-basic`);
       });
 
-      it('focusable', async () => {
-        element.setAttribute('tabindex', '0');
-        await visualDiff(div, `${dir}-focusable`);
+      it('checkmark', async () => {
+        setIconVisible(div);
+        await visualDiff(div, `${dir}-checkmark`);
       });
 
       it('selected', async () => {
-        element.setAttribute('tabindex', '0');
+        setIconVisible(div);
         element.setAttribute('selected', '');
         await visualDiff(div, `${dir}-selected`);
       });

packages/item/theme/lumo/vaadin-item-styles.js

@@ -21,7 +21,7 @@ const item = css`
   }
 
   /* Checkmark */
-  :host([tabindex])::before {
+  [part='checkmark']::before {
     display: var(--_lumo-item-selected-icon-display, none);
     content: var(--lumo-icons-checkmark);
     font-family: lumo-icons;
@@ -37,11 +37,11 @@ const item = css`
     transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
   }
 
-  :host([selected])::before {
+  :host([selected]) [part='checkmark']::before {
     opacity: 1;
   }
 
-  :host([active]:not([selected]))::before {
+  :host([active]:not([selected])) [part='checkmark']::before {
     transform: scale(0.8);
     opacity: 0;
     transition-duration: 0s;

packages/item/theme/material/vaadin-item-styles.js

@@ -21,7 +21,7 @@ const item = css`
   }
 
   /* Checkmark */
-  :host::before {
+  [part='checkmark']::before {
     display: var(--_material-item-selected-icon-display, none);
     content: '';
     font-family: material-icons;
@@ -35,7 +35,7 @@ const item = css`
     flex: none;
   }
 
-  :host([selected])::before {
+  :host([selected]) [part='checkmark']::before {
     content: var(--material-icons-check);
   }
 
@@ -47,7 +47,7 @@ const item = css`
   }
 
   /* RTL specific styles */
-  :host([dir='rtl'])::before {
+  :host([dir='rtl']) [part='checkmark']::before {
     margin-right: 0;
     margin-left: 10px;
   }