Skip to content

Commit

Permalink
refactor(menu-button): added support for icons and bug fixes (#135)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saiponnada
saiponnada authored Jan 29, 2024
1 parent cf992d9 commit 57fd50d
Show file tree
Hide file tree
Showing 6 changed files with 238 additions and 16 deletions.
111 changes: 110 additions & 1 deletion docs/makeup-menu-button/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,115 @@ <h2 id="menu-button-2C">Single-Select Menu Button with Stateful Label</h2>

<hr />

<h2 id="menu-button-2D">Single-Select Menu Button with Icons</h2>

<span class="menu-button menu-button-with-icon">
<button class="btn" type="button">
<span class="btn__text">
<svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-label="AMEX">
<use xlink:href="../icons.svg#icon-amex-18-colored"></use>
</svg>
</span>
<svg focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-chevron-down-12"></use>
</svg>
</button>
<div class="menu-button__menu" hidden>
<div class="menu-button__items" role="menu">
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="true">
<div class="menu-button__item-value">
<svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-amex-18-colored"></use>
</svg>
<span>AMEX</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu-button__item-value">
<svg class="icon icon--visa-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-visa-18-colored"></use>
</svg>
<span>VISA</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu-button__item-value">
<svg class="icon icon--mastercard-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-mastercard-18-colored"></use>
</svg>
<span>Master Card</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>

<hr />

<h2 id="menu-button-2E">Single-Select Menu Button with Icons and Text</h2>

<span class="menu-button menu-button-with-iconText">
<button class="btn" type="button">
<span class="btn__text">
<svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-amex-18-colored"></use>
</svg>
<span>AMEX</span>
</span>
<svg focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-chevron-down-12"></use>
</svg>
</button>
<div class="menu-button__menu" hidden>
<div class="menu-button__items" role="menu">
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="true">
<div class="menu-button__item-value">
<svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-amex-18-colored"></use>
</svg>
<span>AMEX</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu-button__item-value">
<svg class="icon icon--visa-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-visa-18-colored"></use>
</svg>
<span>VISA</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu-button__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu-button__item-value">
<svg class="icon icon--mastercard-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-mastercard-18-colored"></use>
</svg>
<span>Master Card</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>

<hr />

<h2 id="menu-button-3">Multi-Select Menu Button</h2>
<span class="menu-button">
<button class="btn" aria-expanded="false" aria-haspopup="true" type="button">
Expand Down Expand Up @@ -242,7 +351,7 @@ <h2 id="menu-button-4">Grouped Menu Button</h2>
<button class="btn" aria-expanded="false" aria-haspopup="true" type="button">
<span class="btn__cell">
<span class="btn__text">Button</span>
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
<svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-label="AMEX">
<use xlink:href="../icons.svg#icon-chevron-down-12"></use>
</svg>
</span>
Expand Down
11 changes: 8 additions & 3 deletions docs/makeup-menu-button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,14 @@ import "@ebay/skin/menu-button";
// IMPORT
import MenuButton from "../../packages/makeup-menu-button";

window.onload = function () {
document.querySelectorAll(".menu-button").forEach(function (el, i) {
const widget = new MenuButton(el);
window.onload = function() {
document.querySelectorAll(".menu-button").forEach(function(el, i) {
const buttonValueType = el.classList.contains("menu-button-with-iconText")
? "both"
: el.classList.contains("menu-button-with-icon")
? "icon"
: "text";
const widget = new MenuButton(el, { buttonValueType });

widget.menu.el.addEventListener("makeup-menu-select", (e) => console.log(e.type, e.detail));
widget.menu.el.addEventListener("makeup-menu-change", (e) => console.log(e.type, e.detail));
Expand Down
40 changes: 40 additions & 0 deletions docs/makeup-menu/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,46 @@ <h2 id="menu-2b">Single-Select</h2>
</div>
</div>

<h2 id="menu-2c">Single-Select with Icons</h2>

<div class="menu menu-icon">
<div class="menu__items" role="menu">
<div class="menu__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="true">
<div class="menu__item-value">
<svg class="icon icon--amex-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-amex-18-colored"></use>
</svg>
<span>AMEX</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu__item-value">
<svg class="icon icon--visa-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-visa-18-colored"></use>
</svg>
<span>VISA</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
<div class="menu__item" role="menuitemradio" data-makeup-group="credit-card" aria-checked="false">
<div class="menu__item-value">
<svg class="icon icon--mastercard-18-colored" focusable="false" height="18" width="30" aria-hidden="true">
<use xlink:href="../icons.svg#icon-mastercard-18-colored"></use>
</svg>
<span>Master Card</span>
</div>
<svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
<use xlink:href="../icons.svg#icon-tick-16"></use>
</svg>
</div>
</div>
</div>

<h2 id="menu-3">Multi-Select</h2>
<div class="menu">
<div class="menu__items" role="menu">
Expand Down
30 changes: 26 additions & 4 deletions packages/makeup-menu-button/dist/cjs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,18 @@ const defaultOptions = {
customElementMode: false,
expandedClass: "menu-button--expanded",
menuSelector: ".menu-button__menu",
buttonTextSelector: ".btn__text"
buttonTextSelector: ".btn__text",
buttonValueType: "text",
// ["text", "icon", "both"],
iconSelector: ".icon"
};
class _default {
constructor(widgetEl, selectedOptions) {
var _this$_buttonEl$datas;
this._options = Object.assign({}, defaultOptions, selectedOptions);
this.el = widgetEl;
this._buttonEl = widgetEl.querySelector("button");
this._buttonEl.setAttribute("aria-haspopup", "true");
this.menu = new _makeupMenu.default(widgetEl.querySelector(this._options.menuSelector), {
autoReset: "interactive"
});
Expand Down Expand Up @@ -109,12 +113,30 @@ function _onMenuKeyDown(e) {
}
}
function _onMenuItemSelect(e) {
if (this._buttonPrefix && e.detail.el.getAttribute("role") === "menuitemradio") {
this._buttonTextEl.innerText = "".concat(this._buttonPrefix, " ").concat(e.detail.el.innerText);
}
const widget = this;
setTimeout(function () {
widget._expander.expanded = false;
widget._buttonEl.focus();
}, 150);
if (e.detail.el.getAttribute("role") !== "menuitemradio") {
return;
}
const icon = e.detail.el.querySelector(this._options.iconSelector);
const text = e.detail.el.innerText.trim();
let content = this._buttonPrefix ? "".concat(this._buttonPrefix, " ").concat(text) : text;
if (icon) {
switch (this._options.buttonValueType) {
case "both":
content = "".concat(icon.outerHTML, " <span>").concat(content, "</span>");
break;
case "icon":
icon.setAttribute("aria-label", text);
icon.removeAttribute("aria-hidden");
content = icon.outerHTML;
break;
default:
break;
}
}
this._buttonTextEl.innerHTML = content;
}
30 changes: 26 additions & 4 deletions packages/makeup-menu-button/dist/mjs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ const defaultOptions = {
customElementMode: false,
expandedClass: "menu-button--expanded",
menuSelector: ".menu-button__menu",
buttonTextSelector: `.btn__text`
buttonTextSelector: `.btn__text`,
buttonValueType: "text",
// ["text", "icon", "both"],
iconSelector: ".icon"
};
class src_default {
constructor(widgetEl, selectedOptions) {
this._options = Object.assign({}, defaultOptions, selectedOptions);
this.el = widgetEl;
this._buttonEl = widgetEl.querySelector("button");
this._buttonEl.setAttribute("aria-haspopup", "true");
this.menu = new Menu(widgetEl.querySelector(this._options.menuSelector), {
autoReset: "interactive"
});
Expand Down Expand Up @@ -100,14 +104,32 @@ function _onMenuKeyDown(e) {
}
}
function _onMenuItemSelect(e) {
if (this._buttonPrefix && e.detail.el.getAttribute("role") === "menuitemradio") {
this._buttonTextEl.innerText = `${this._buttonPrefix} ${e.detail.el.innerText}`;
}
const widget = this;
setTimeout(function() {
widget._expander.expanded = false;
widget._buttonEl.focus();
}, 150);
if (e.detail.el.getAttribute("role") !== "menuitemradio") {
return;
}
const icon = e.detail.el.querySelector(this._options.iconSelector);
const text = e.detail.el.innerText.trim();
let content = this._buttonPrefix ? `${this._buttonPrefix} ${text}` : text;
if (icon) {
switch (this._options.buttonValueType) {
case "both":
content = `${icon.outerHTML} <span>${content}</span>`;
break;
case "icon":
icon.setAttribute("aria-label", text);
icon.removeAttribute("aria-hidden");
content = icon.outerHTML;
break;
default:
break;
}
}
this._buttonTextEl.innerHTML = content;
}
export {
src_default as default
Expand Down
32 changes: 28 additions & 4 deletions packages/makeup-menu-button/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,16 @@ const defaultOptions = {
expandedClass: "menu-button--expanded",
menuSelector: ".menu-button__menu",
buttonTextSelector: `.btn__text`,
buttonValueType: "text", // ["text", "icon", "both"],
iconSelector: ".icon",
};

export default class {
constructor(widgetEl, selectedOptions) {
this._options = Object.assign({}, defaultOptions, selectedOptions);
this.el = widgetEl;
this._buttonEl = widgetEl.querySelector("button");
this._buttonEl.setAttribute("aria-haspopup", "true");
this.menu = new Menu(widgetEl.querySelector(this._options.menuSelector), {
autoReset: "interactive",
});
Expand Down Expand Up @@ -117,14 +120,35 @@ function _onMenuKeyDown(e) {
}

function _onMenuItemSelect(e) {
if (this._buttonPrefix && e.detail.el.getAttribute("role") === "menuitemradio") {
this._buttonTextEl.innerText = `${this._buttonPrefix} ${e.detail.el.innerText}`;
}

const widget = this;

setTimeout(function () {
widget._expander.expanded = false;
widget._buttonEl.focus();
}, 150);

if (e.detail.el.getAttribute("role") !== "menuitemradio") {
return;
}

const icon = e.detail.el.querySelector(this._options.iconSelector);
const text = e.detail.el.innerText.trim();
let content = this._buttonPrefix ? `${this._buttonPrefix} ${text}` : text;

if (icon) {
switch (this._options.buttonValueType) {
case "both":
content = `${icon.outerHTML} <span>${content}</span>`;
break;
case "icon":
icon.setAttribute("aria-label", text);
icon.removeAttribute("aria-hidden");
content = icon.outerHTML;
break;
default:
break;
}
}

this._buttonTextEl.innerHTML = content;
}

0 comments on commit 57fd50d

Please sign in to comment.