Skip to content

Commit 66463ee

Browse files
agligaagliga
authored
feat(chips): added filter chips and selection chips in coreui (#210)
1 parent c342b51 commit 66463ee

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1899
-0
lines changed

‎.changeset/moody-poets-return.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/ebayui-core": patch
3+
---
4+
5+
feat(chip): added selection and filter chip

‎packages/ebayui-core/src/components/ebay-filter-chip/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<h1 style='display: flex; justify-content: space-between; align-items: center;'>
2+
<span>
3+
ebay-filter-chip
4+
</span>
5+
<span style='font-weight: normal; font-size: medium; margin-bottom: -15px;'>
6+
DS v1.0.0
7+
</span>
8+
</h1>
9+
10+
A chip used to toggle between active and inactive states.
11+
12+
## Examples and Documentation
13+
14+
- [Storybook](https://ebay.github.io/evo-web/ebayui-core/?path=/story/building-blocks-ebay-filter-chip)
15+
- [Storybook Docs](https://ebay.github.io/evo-web/ebayui-core/?path=/docs/building-blocks-ebay-filter-chip)
16+
- [Code Examples](https://github.com/eBay/evo-web/tree/main/packages/ebayui-core/src/components/ebay-filter-chip/examples)

‎packages/ebayui-core/src/components/ebay-filter-chip/browser.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"requireRemap": [
3+
{
4+
"from": "./style.js",
5+
"to": "../../common/empty.js",
6+
"if-flag": "ebayui-no-skin"
7+
}
8+
]
9+
}

‎packages/ebayui-core/src/components/ebay-filter-chip/component.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { AttrString } from "marko/tags-html";
2+
import type { WithNormalizedProps } from "../../global";
3+
4+
interface Image extends Marko.HTML.Img {
5+
as?: string;
6+
}
7+
8+
interface FilterChipInput extends Omit<Marko.HTML.Button, `on${string}` | "type">,
9+
Omit<Marko.HTML.A, `on${string}`> {
10+
renderBody?: Marko.Body;
11+
selected?: boolean;
12+
variant?: "default" | "expressive" | "menu";
13+
icon?: Marko.AttrTag<{ renderBody?: Marko.Body }>;
14+
image?: Marko.AttrTag<Image>;
15+
a11ySelectedText?: AttrString;
16+
expanded?: boolean;
17+
"on-click"?: (event: {
18+
originalEvent: MouseEvent;
19+
expanded: boolean;
20+
selected: boolean;
21+
}) => void;
22+
}
23+
export interface Input extends WithNormalizedProps<FilterChipInput> {}
24+
25+
export interface State {
26+
expanded?: boolean;
27+
selected?: boolean;
28+
mounted: boolean;
29+
}
30+
31+
class SelectionChip extends Marko.Component<Input, State> {
32+
handleButtonClick(originalEvent: MouseEvent) {
33+
let expanded = this.state.expanded;
34+
let selected = this.state.selected;
35+
if (!this.input.disabled) {
36+
if (this.input.variant === "menu") {
37+
expanded = !expanded;
38+
this.state.expanded = expanded;
39+
} else {
40+
selected = !selected;
41+
this.state.selected = selected;
42+
}
43+
this.emit("click", {
44+
expanded,
45+
selected,
46+
originalEvent,
47+
});
48+
}
49+
}
50+
51+
onMount() {
52+
this.state.mounted = true;
53+
}
54+
55+
onInput(input: Input) {
56+
this.state = {
57+
selected: input.selected || false,
58+
expanded: input.expanded || false,
59+
mounted: false
60+
};
61+
}
62+
}
63+
64+
export default SelectionChip;

‎packages/ebayui-core/src/components/ebay-filter-chip/examples/default.marko

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
class {}
2+
3+
<ebay-filter-chip on-click("emit", "click") ...input>
4+
<@icon>
5+
<ebay-sneaker-16-icon/>
6+
</@icon>
7+
Filter
8+
</ebay-filter-chip>

‎packages/ebayui-core/src/components/ebay-filter-chip/examples/expressive.marko

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
class {}
2+
<ebay-filter-chip on-click("emit", "click") variant="expressive" ...input>
3+
<@image
4+
alt="image"
5+
src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile2.png"
6+
/>
7+
Filter
8+
</ebay-filter-chip>

‎packages/ebayui-core/src/components/ebay-filter-chip/examples/menu-button.marko

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
class {}
2+
<ebay-filter-chip on-click("emit", "click") variant="menu" ...input>
3+
Filter
4+
</ebay-filter-chip>

‎packages/ebayui-core/src/components/ebay-filter-chip/filter-chip.stories.ts

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
buildExtensionTemplate,
3+
} from "../../common/storybook/utils";
4+
import Readme from "./README.md";
5+
import Component from "./index.marko";
6+
import DefaultTemplate from "./examples/default.marko";
7+
import DefaultTemplateCode from "./examples/default.marko?raw";
8+
import ExpressiveTemplate from "./examples/expressive.marko";
9+
import ExpressiveTemplateCode from "./examples/expressive.marko?raw";
10+
import MenuButtonTemplate from "./examples/menu-button.marko";
11+
import MenuButtonTemplateCode from "./examples/menu-button.marko?raw";
12+
13+
export default {
14+
title: "form input/ebay-filter-chip",
15+
component: Component,
16+
parameters: {
17+
docs: {
18+
description: {
19+
component: Readme,
20+
},
21+
},
22+
},
23+
24+
argTypes: {
25+
renderBody: {
26+
control: { type: "text" },
27+
description: "Text to be displayed in the chip",
28+
},
29+
selected: {
30+
control: { type: "boolean" },
31+
description: "True/false if the chip is selected or not",
32+
},
33+
variant: {
34+
options: ["default", "expressive", "menu"],
35+
description:
36+
"The variant of the filter. Default and expressive are toggle buttons, while menu turns it into a dropdown.",
37+
control: { type: "select" },
38+
},
39+
icon: {
40+
name: "@icon",
41+
description: "The leading icon. Only used for default variant",
42+
table: {
43+
category: "@attribute tags",
44+
},
45+
},
46+
image: {
47+
name: "@image",
48+
description: "The leading image. Only used for expressive variant",
49+
table: {
50+
category: "@attribute tags",
51+
},
52+
},
53+
expanded: {
54+
control: { type: "boolean" },
55+
description:
56+
"Only used for menu variant. True/false if the menu is in expanded state or not",
57+
},
58+
a11ySelectedText: {
59+
control: { type: "string" },
60+
description:
61+
"For anchor variant: The clipped text to show when the filter is set. Defaults to \"- filter applied\"",
62+
},
63+
onClick: {
64+
action: "on-click",
65+
description: "Triggered when selection chip is clicked",
66+
table: {
67+
category: "Events",
68+
defaultValue: {
69+
summary: "{ originalEvent, selected, expanded }",
70+
},
71+
},
72+
},
73+
},
74+
};
75+
76+
export const Default = buildExtensionTemplate(
77+
DefaultTemplate,
78+
DefaultTemplateCode,
79+
);
80+
81+
export const MenuButton = buildExtensionTemplate(
82+
MenuButtonTemplate,
83+
MenuButtonTemplateCode,
84+
);
85+
86+
export const Expressive = buildExtensionTemplate(
87+
ExpressiveTemplate,
88+
ExpressiveTemplateCode,
89+
);

‎packages/ebayui-core/src/components/ebay-filter-chip/index.marko

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { processHtmlAttributes } from "../../common/html-attributes";
2+
$ const {
3+
renderBody,
4+
disabled,
5+
selected,
6+
expanded,
7+
icon,
8+
image,
9+
a11ySelectedText = "Filter Applied",
10+
variant = "default",
11+
href,
12+
...htmlInput
13+
} = input;
14+
$ const isAnchor = !!href && variant !== "menu";
15+
$ const rootTag = isAnchor ? "a" : "button";
16+
17+
<${rootTag}
18+
class=[
19+
"filter-chip",
20+
state.mounted && "filter-chip--animated",
21+
variant === "expressive" && "filter-chip--expressive",
22+
isAnchor && state.selected && "filter-chip--selected",
23+
]
24+
type=!isAnchor && "button"
25+
aria-pressed=!isAnchor && (state.selected ? "true" : "false")
26+
aria-expanded=variant === "menu" && (state.expanded ? "true" : "false")
27+
on-click("handleButtonClick")
28+
...processHtmlAttributes(htmlInput)
29+
>
30+
31+
<if(variant === "expressive")>
32+
<span class="filter-chip__media">
33+
<${image?.as || "img"} ...image/>
34+
</span>
35+
</if>
36+
<else-if(variant === "default")>
37+
<${icon} ...icon/>
38+
</else-if>
39+
40+
<span class="filter-chip__text">
41+
<${renderBody}/>
42+
<if(state.selected && isAnchor)>
43+
<span class="clipped">
44+
- ${a11ySelectedText}
45+
</span>
46+
</if>
47+
</span>
48+
<if(variant === "menu")>
49+
<ebay-chevron-down-12-icon class="filter-chip__trailing"/>
50+
</if>
51+
</>

‎packages/ebayui-core/src/components/ebay-filter-chip/marko-tag.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"attribute-groups": ["html-attributes"],
3+
"@*": {
4+
"targetProperty": null,
5+
"type": "expression"
6+
},
7+
"@html-attributes": "expression",
8+
"description": "[view documentation](https://ebay.github.io/evo-web/ebayui-core/?path=/story/form-input-ebay-filter-chip)"
9+
}

0 commit comments

Comments
 (0)