Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(menu-button): added support for icons and bug fixes #135

Merged
merged 5 commits into from
Jan 29, 2024
Merged

refactor(menu-button): added support for icons and bug fixes #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea69c0b
feat(menu-button): added support for icons
saiponnada Jan 18, 2024
92c49c0
fix: dependency on configurations
saiponnada Jan 18, 2024
57fbe18
refactor: code review suggestions
saiponnada Jan 23, 2024
b7125b9
refactor: code refactor contd..
saiponnada Jan 26, 2024
a3a54dc
fix: set aria-haspopup to true for button
saiponnada Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 110 additions & 1 deletion docs/makeup-menu-button/index.html
View file
Open in desktop
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>
saiponnada marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
Loading