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.

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

refactor: destructure input when possible #2039

Merged
merged 6 commits into from
Dec 23, 2023
Merged
Changes from 5 commits
Commits
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
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -85,6 +85,7 @@ Each layer does its bit to enforce and enhance accessibility. We consider this l
- [`ebay-segmented-buttons`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-segmented-buttons)
- [`ebay-select`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-select)
- [`ebay-signal`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-signal)
- [`ebay-skeleton`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-skeleton)
- [`ebay-snackbar-dialog`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-snackbar-dialog)
- [`ebay-split-button`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-split-button)
- [`ebay-star-rating`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-star-rating)
4,835 changes: 2,610 additions & 2,225 deletions package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -142,6 +142,7 @@
},
"dependencies": {
"@marko-tags/subscribe": "^0.5.0",
"@floating-ui/core": "^1.5.2",
"makeup-active-descendant": "0.6.1",
"makeup-expander": "~0.10.1",
"makeup-floating-label": "~0.3.2",
20 changes: 3 additions & 17 deletions src/common/html-attributes/test/test.server.js
Original file line number Diff line number Diff line change
@@ -7,31 +7,17 @@ it("creates attributes object based on html-attributes", () => {
other: "other",
};
const htmlAttributes = { b: 2, "aria-role": "link", other: "other" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});

it("merges htmlAttributes", () => {
const input = { ariaRole: "link", htmlAttributes: { b: 2 } };
const htmlAttributes = { b: 2, "aria-role": "link" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});

it("uses htmlAttributes in case of conflict", () => {
const input = { ariaRole: "link", htmlAttributes: { ariaRole: "button" } };
const htmlAttributes = { "aria-role": "button" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
});

it("should use the ignore list", () => {
const input = {
htmlAttributes: { b: 2 },
dataAttribute: "something",
style: "some style",
renderBody: () => {},
};
const ignoreList = ["style"];
const htmlAttributes = { b: 2, "data-attribute": "something" };
expect(processHtmlAttributes(input, ignoreList)).to.deep.equal(
htmlAttributes
);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});
152 changes: 74 additions & 78 deletions src/components/components/ebay-dialog-base/index.marko
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
import { processHtmlAttributes } from "../../../common/html-attributes";
static const isBrowser = typeof window !== "undefined";
static var ignoredAttributes = [
"open",
"type",
"classPrefix",
"focus",
"closeFocus",
"a11yCloseText",
"windowClass",
"baseEl",
"header",
"footer",
"transitionEl",
"isModal",
"closeButton",
"closeButtonClass",
"closeButtonText",
"ignoreEscape",
"slideFrom",
"windowType",
"mainId",
"ariaLabelledby",
"buttonPosition",
"useHiddenProperty",
"position",
"variant",
"confirmText",
"rejectText",
"noHandle",
"top",
"action",
];
static var ignoredHeaderAttributes = ["id", "as", "class"];
static var ignoredPrevButtonAttributes = ["id", "class", "a11yText"];
$ var buttonPosition = input.buttonPosition || "right";
$ var baseEl = input.baseEl || "div";
$ var header = input.header;

$ const {
open,
classPrefix,
class: inputClass,
focus,
closeFocus,
a11yCloseText,
windowClass,
baseEl = "div",
header,
footer,
transitionEl,
isModal,
closeButton,
closeButtonClass,
closeButtonText,
ignoreEscape,
windowType,
mainId,
ariaLabelledby,
buttonPosition = "right",
useHiddenProperty,
top,
action,
prevButton,
role,
renderBody,
...htmlInput
} = input;

$ const { id: headerId, as: headerAs, class: headerClass, renderBody: headerRenderBody, ...headerHtmlInput } = header || {} as NonNullable<typeof header>;
$ const { id: prevButtonId, class: prevButtonClass, a11yText: prevButtonA11yText, renderBody: prevButtonRenderBody, ...prevButtonHtmlInput } = prevButton || {} as NonNullable<typeof prevButton>;
<macro name="header-content">
<${header!.as || "h2"}
class=[header!.class, `${input.classPrefix}__title`]
...processHtmlAttributes(header!, ignoredHeaderAttributes)
id=(header!.id || component.getElId("dialog-title"))>
<${header!.renderBody}/>
<${headerAs || "h2"}
class=[headerClass, `${classPrefix}__title`]
...processHtmlAttributes(headerHtmlInput)
id=(headerId || component.getElId("dialog-title"))>
<${headerRenderBody}/>
</>
</macro>
<macro name="button-content">
<if(buttonPosition !== "hidden")>
<button
key="close"
class=[
input.closeButtonText ? "fake-link" : "icon-btn",
input.closeButtonClass,
`${input.classPrefix}__close`,
closeButtonText ? "fake-link" : "icon-btn",
closeButtonClass,
`${classPrefix}__close`,
]
type="button"
aria-label=input.a11yCloseText
aria-label=a11yCloseText
onClick("handleCloseButtonClick")
>
<if(input.closeButtonText)>
${input.closeButtonText}
<if(closeButtonText)>
${closeButtonText}
</if>
<else-if(input.closeButton)>
<${input.closeButton}/>
<else-if(closeButton)>
<${closeButton}/>
</else-if>
<else>
<ebay-close-16-icon/>
@@ -70,20 +67,20 @@ $ var header = input.header;
</if>
</macro>
<${baseEl}
...processHtmlAttributes(input, ignoredAttributes)
...processHtmlAttributes(htmlInput)
aria-labelledby=(
input.ariaLabelledby ||
(input.header && component.getElId("dialog-title"))
ariaLabelledby ||
(header && component.getElId("dialog-title"))
)
aria-modal="true"
role=input.role || "dialog"
class=[input.classPrefix, input.class]
role=role || "dialog"
class=[classPrefix, inputClass]
hidden:no-update=!state.open
aria-live=!input.isModal && "polite"
aria-live=!isModal && "polite"
onClick("handleDialogClick")
onMousedown("handleStartClick")
>
<if(state.open && isBrowser && !input.ignoreEscape)>
<if(state.open && isBrowser && !ignoreEscape)>
<subscribe to=(document as any) on-keydown("handleKeydown")/>
</if>
<if(!state.open && isBrowser)>
@@ -94,32 +91,31 @@ $ var header = input.header;
onMouseenter("emit", "mouseEnter")
onMouseleave("emit", "mouseLeave")
class=[
input.windowType
? `${input.classPrefix}__${input.windowType}-window`
: `${input.classPrefix}__window`,
input.windowClass,
windowType
? `${classPrefix}__${windowType}-window`
: `${classPrefix}__window`,
windowClass,
]
>
<if(input.top)>
<${input.top.renderBody}/>
<if(top)>
<${top.renderBody}/>
</if>
<div class=`${input.classPrefix}__header`>
<if(input.prevButton)>
<div class=`${classPrefix}__header`>
<if(prevButton)>
<button
...processHtmlAttributes(
input.prevButton,
ignoredPrevButtonAttributes
prevButtonHtmlInput
)
class=[
"icon-btn",
"lightbox-dialog__prev",
input.prevButton.class,
prevButtonClass,
]
type="button"
aria-label=input.prevButton.a11yText
aria-label=prevButtonA11yText
on-click("emit", "prevButtonClick")
>
<${input.prevButton}/>
<${prevButton}/>
</button>
</if>
<if(header && buttonPosition === "right")>
@@ -136,21 +132,21 @@ $ var header = input.header;
</if>
</div>
<div
id=input.mainId
class=`${input.classPrefix}__main`
id=mainId
class=`${classPrefix}__main`
key="body"
onScroll("handleScroll")
>
<${input.renderBody}/>
<${renderBody}/>
</div>
<if(input.action)>
<span class=`${input.classPrefix}__actions`>
<${input.action && input.action.renderBody}/>
<if(action)>
<span class=`${classPrefix}__actions`>
<${action && action.renderBody}/>
</span>
</if>
<if(input.footer || buttonPosition === "bottom")>
<div class=`${input.classPrefix}__footer`>
<${input.footer && input.footer.renderBody}/>
<if(footer || buttonPosition === "bottom")>
<div class=`${classPrefix}__footer`>
<${footer && footer.renderBody}/>
<if(buttonPosition === "bottom")>
<button-content/>
</if>
Loading