feat: add dot theme variant to badge (#11162)

Author: web-padawan

dev/badge.html

@@ -54,5 +54,13 @@ <h2 class="heading">Icon / number only</h2>
         <span>Completed</span>
       </vaadin-badge>
     </section>
+
+    <section class="section">
+      <h2 class="heading">Dot</h2>
+      <vaadin-badge number="3" theme="dot">
+        <vaadin-icon slot="icon" icon="vaadin:check"></vaadin-icon>
+        <span>Completed</span>
+      </vaadin-badge>
+    </section>
   </body>
 </html>

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

@@ -53,11 +53,20 @@ export const badgeStyles = css`
   }
 
   :host([theme~='icon-only']) :is([part='content'], [part='number']),
-  :host([theme~='number-only']) :is([part='content'], [part='icon']) {
+  :host([theme~='number-only']) :is([part='content'], [part='icon']),
+  :host([theme~='dot']) [part] {
     width: 0;
     overflow: clip;
   }
 
+  :host([theme~='dot']) {
+    min-width: 0;
+    width: 1em;
+    height: 1em;
+    padding: 0;
+    border-radius: 50%;
+  }
+
   @media (forced-colors: active) {
     :host {
       border: 1px solid;

packages/badge/test/visual/base/badge.test.ts

@@ -39,16 +39,6 @@ describe('badge', () => {
       element.textContent = 'Messages';
       await visualDiff(div, 'number-content');
     });
-
-    it('number-only', async () => {
-      const icon = document.createElement('vaadin-icon');
-      icon.setAttribute('slot', 'icon');
-      icon.icon = 'vaadin:check';
-      element.appendChild(icon);
-      element.append('Completed');
-      element.setAttribute('theme', 'number-only');
-      await visualDiff(div, 'number-only');
-    });
   });
 
   describe('icon', () => {
@@ -77,13 +67,31 @@ describe('badge', () => {
       element.append('Completed');
       await visualDiff(div, 'icon-number-content');
     });
+  });
 
-    it('icon-only', async () => {
+  describe('theme', () => {
+    beforeEach(() => {
       element.number = 3;
+      const icon = document.createElement('vaadin-icon');
+      icon.setAttribute('slot', 'icon');
+      icon.icon = 'vaadin:check';
       element.appendChild(icon);
       element.append('Completed');
+    });
+
+    it('icon-only', async () => {
       element.setAttribute('theme', 'icon-only');
-      await visualDiff(div, 'icon-only');
+      await visualDiff(div, 'theme-icon-only');
+    });
+
+    it('number-only', async () => {
+      element.setAttribute('theme', 'number-only');
+      await visualDiff(div, 'theme-number-only');
+    });
+
+    it('dot', async () => {
+      element.setAttribute('theme', 'dot');
+      await visualDiff(div, 'theme-dot');
     });
   });
 });

packages/badge/test/visual/base/screenshots/badge/baseline/theme-dot.png

@@ -101,6 +101,12 @@ describe('badge', () => {
       element.setAttribute('theme', 'small');
       await visualDiff(div, 'theme-small');
     });
+
+    it('dot', async () => {
+      element.textContent = 'Badge';
+      element.setAttribute('theme', 'dot');
+      await visualDiff(div, 'theme-dot');
+    });
   });
 
   ['success', 'error', 'warning', 'contrast'].forEach((variant) => {
@@ -116,6 +122,12 @@ describe('badge', () => {
         element.setAttribute('theme', `${variant} primary`);
         await visualDiff(div, `theme-${variant}-primary`);
       });
+
+      it(`${variant} dot`, async () => {
+        element.textContent = 'Badge';
+        element.setAttribute('theme', `${variant} dot`);
+        await visualDiff(div, `theme-${variant}-dot`);
+      });
     });
   });
 });