fix(fake-menu): added badge support (#2336)

eBay · May 17, 2024 · 800681a · 800681a
1 parent e88813a
commit 800681a
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/khaki-fans-pretend.md b/.changeset/khaki-fans-pretend.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fake-menu: added badge suport
diff --git a/dist/menu/menu.css b/dist/menu/menu.css
@@ -32,6 +32,7 @@ span.fake-menu__items {
 }
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,
+.fake-menu__item .badge,
 .menu__item .badge {
   margin-left: var(--spacing-100);
   margin-right: var(--spacing-100);

diff --git a/src/less/menu/menu.less b/src/less/menu/menu.less
@@ -33,6 +33,7 @@ span.fake-menu__items {
 
 .menu__item > svg.icon--tick-16:last-child,
 .fake-menu__item > svg.icon--tick-16:last-child,
+.fake-menu__item .badge,
 .menu__item .badge {
     margin-left: var(--spacing-100);
     margin-right: var(--spacing-100);

diff --git a/src/less/menu/stories/fake-menu.stories.js b/src/less/menu/stories/fake-menu.stories.js
@@ -97,3 +97,13 @@ export const buttonsDisabled = () => `
     </ul>
 </div>
 `;
+
+export const badged = () => `
+<span class="fake-menu">
+    <span class="fake-menu__items" role="menu">
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 1<span class="badge">1</span></span></a>
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 2<span class="badge">10</span></span></a>
+        <a class="fake-menu__item fake-menu__item--badged" role="menuitem" href="https://www.ebay.com"><span>Button 3<span class="badge">99+</span></span></a>
+    </span>
+</span>
+`;