Skip to content

Commit 4f38946

Browse files
agligaagliga
authored
feat(filter-input): new component (#131)
1 parent d9ba2b4 commit 4f38946

File tree

14 files changed

+816
-0
lines changed

14 files changed

+816
-0
lines changed

‎.changeset/purple-colts-thank.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/ebayui-core": minor
3+
---
4+
5+
feat(filter-input): new component

‎packages/ebayui-core/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ Each layer does its bit to enforce and enhance accessibility. We consider this l
5757
- [`ebay-fake-menu-button`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-fake-menu-button)
5858
- [`ebay-fake-tabs`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-fake-tabs)
5959
- [`ebay-filter`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-filter)
60+
- [`ebay-filter-input`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-filter-input)
6061
- [`ebay-filter-menu`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-filter-menu)
6162
- [`ebay-filter-menu-button`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-filter-menu-button)
6263
- [`ebay-fullscreen-dialog-deprecated`](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-fullscreen-dialog-deprecated)

‎packages/ebayui-core/src/components/ebay-filter-input/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-input
4+
</span>
5+
<span style='font-weight: normal; font-size: medium; margin-bottom: -15px;'>
6+
DS v1.1.0
7+
</span>
8+
</h1>
9+
10+
A filter-input is a textbox which is used specifally to filter out content.
11+
12+
## Examples and Documentation
13+
14+
- [Storybook](https://ebay.github.io/evo-web/?path=/story/form-input-ebay-filter-input)
15+
- [Storybook Docs](https://ebay.github.io/evo-web/?path=/docs/form-input-ebay-filter-input)
16+
- [Code Examples](https://github.com/eBay/evo-web/tree/master/packages/ebayui-core/src/components/ebay-filter-input/examples)

‎packages/ebayui-core/src/components/ebay-filter-input/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",
5+
"to": "../../common/empty",
6+
"if-flag": "ebayui-no-skin"
7+
}
8+
]
9+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import type {
2+
Input as TextboxInput,
3+
TextboxEvent,
4+
} from "../ebay-textbox/component-browser";
5+
import type { WithNormalizedProps } from "../../global";
6+
import { validSizes } from "./constants";
7+
8+
9+
interface FilterInputInput extends Omit<TextboxInput, `on${string}`> {
10+
size?: (typeof validSizes)[number];
11+
"a11y-clear-button"?: string;
12+
"a11y-controls-id"?: string;
13+
"on-clear"?: (event: TextboxEvent) => void;
14+
"on-keydown"?: (event: TextboxEvent) => void;
15+
"on-keypress"?: (event: TextboxEvent) => void;
16+
"on-keyup"?: (event: TextboxEvent) => void;
17+
"on-change"?: (event: TextboxEvent) => void;
18+
"on-input-change"?: (event: TextboxEvent) => void;
19+
"on-focus"?: (event: TextboxEvent) => void;
20+
"on-blur"?: (event: TextboxEvent) => void;
21+
}
22+
23+
export interface Input extends WithNormalizedProps<FilterInputInput> {}
24+
25+
class FilterInput extends Marko.Component<Input> {
26+
declare textbox: HTMLInputElement;
27+
28+
onMount() {
29+
this.textbox = this.getComponent("input")?.getEl(
30+
"input",
31+
) as HTMLInputElement;
32+
}
33+
34+
handleClear(event: {originalEvent: MouseEvent}) {
35+
const originalEvent = event.originalEvent;
36+
this.textbox.value = "";
37+
this.emit("input-change", {
38+
originalEvent,
39+
value: "",
40+
});
41+
this.emit("clear", {
42+
originalEvent,
43+
value: "",
44+
});
45+
}
46+
}
47+
48+
export default FilterInput;

‎packages/ebayui-core/src/components/ebay-filter-input/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const validSizes = ["large", "small"] as const;

‎packages/ebayui-core/src/components/ebay-filter-input/examples/controls.marko‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
class {
2+
declare state: {
3+
value: string;
4+
};
5+
6+
onCreate() {
7+
this.state = {
8+
value: "",
9+
};
10+
}
11+
handleInputChange(event: any) {
12+
console.log(event);
13+
this.state.value = event.value;
14+
this.emit("input-change", event);
15+
}
16+
}
17+
18+
<div>
19+
<ebay-filter-input
20+
a11y-controls-id="filter-input-controls"
21+
on-keyup("emit", "keyup")
22+
on-keydown("emit", "keydown")
23+
on-focus("emit", "focus")
24+
on-blur("emit", "blur")
25+
on-keypress("emit", "keypress")
26+
on-change("emit", "change")
27+
on-clear("emit", "clear")
28+
on-input-change("handleInputChange")
29+
aria-label="Filter input"
30+
a11y-clear-button="Clear filter input"
31+
...input
32+
/>
33+
<div id="filter-input-controls">
34+
Current value: "${state.value}"
35+
</div>
36+
</div>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
class {}
2+
3+
<ebay-filter-input
4+
on-keyup("emit", "keyup")
5+
on-keydown("emit", "keydown")
6+
on-focus("emit", "focus")
7+
on-blur("emit", "blur")
8+
on-keypress("emit", "keypress")
9+
on-change("emit", "change")
10+
on-clear("emit", "clear")
11+
on-input-change("emit", "input-change")
12+
aria-label="Filter input"
13+
a11y-clear-button="Clear filter input"
14+
...input
15+
/>

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

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { buildExtensionTemplate } from "../../common/storybook/utils";
2+
import Readme from "./README.md";
3+
import Component from "./index.marko";
4+
import DefaultTemplate from "./examples/default.marko";
5+
import DefaultTemplateCode from "./examples/default.marko?raw";
6+
import ControlsTemplate from "./examples/controls.marko";
7+
import ControlsTemplateCode from "./examples/controls.marko?raw";
8+
9+
10+
11+
export default {
12+
title: "form input/ebay-filter-input",
13+
component: Component,
14+
parameters: {
15+
docs: {
16+
description: {
17+
component: Readme,
18+
},
19+
},
20+
},
21+
22+
argTypes: {
23+
size: {
24+
options: ["regular", "small", "large"],
25+
type: { category: "Options" },
26+
description:
27+
'either "regular" "small" or "large". If large, then renders larger sized textbox',
28+
table: {
29+
defaultValue: {
30+
summary: "regular",
31+
},
32+
},
33+
},
34+
a11yClearButton: {
35+
type: "string",
36+
control: { type: "text" },
37+
description:
38+
"Text for the clear button. If not provided, then no clear button is rendered",
39+
},
40+
"aria-label": {
41+
type: "string",
42+
control: { type: "text" },
43+
description:
44+
"Either this or <label> is required. Renders text for screen readers",
45+
},
46+
a11yControlsId: {
47+
type: "string",
48+
control: { type: "text" },
49+
description:
50+
"Requied. This is the id of the element that this input controls, such as the list of filtered items.",
51+
},
52+
placeholder: {
53+
type: "string",
54+
control: { type: "text" },
55+
table: {
56+
defaultValue: {
57+
summary: "Filter",
58+
},
59+
},
60+
description:
61+
"Reqired. Text to show when input is empty. This is not a label",
62+
},
63+
value: {
64+
type: "string",
65+
control: { type: "text" },
66+
table: {
67+
defaultValue: {
68+
summary: "",
69+
},
70+
},
71+
description:
72+
"The value of the input. This is not a label. This is not required",
73+
},
74+
"on-change": {
75+
action: "on-change",
76+
description: "Triggered whenever the value of the input changes",
77+
table: {
78+
category: "Events",
79+
defaultValue: {
80+
summary: "{ originalEvent, value }",
81+
},
82+
},
83+
},
84+
"on-input-change": {
85+
action: "on-input-change",
86+
description: "Triggered when the value of the input is changed",
87+
table: {
88+
category: "Events",
89+
defaultValue: {
90+
summary: "{ originalEvent, value }",
91+
},
92+
},
93+
},
94+
"on-focus": {
95+
action: "on-focus",
96+
description: "Triggered on focus",
97+
table: {
98+
category: "Events",
99+
defaultValue: {
100+
summary: "{ originalEvent, value }",
101+
},
102+
},
103+
},
104+
"on-blur": {
105+
action: "on-blur",
106+
description: "Triggered on blur",
107+
table: {
108+
category: "Events",
109+
defaultValue: {
110+
summary: "{ originalEvent, value }",
111+
},
112+
},
113+
},
114+
"on-keypress": {
115+
action: "on-keypress",
116+
description: "Triggered on keypress",
117+
table: {
118+
category: "Events",
119+
defaultValue: {
120+
summary: "{ originalEvent, value }",
121+
},
122+
},
123+
},
124+
"on-keyup": {
125+
action: "on-keyup",
126+
description: "Triggered on keup",
127+
table: {
128+
category: "Events",
129+
defaultValue: {
130+
summary: "{ originalEvent, value }",
131+
},
132+
},
133+
},
134+
135+
"on-keydown": {
136+
action: "on-keydown",
137+
description: "Triggered on keydown",
138+
table: {
139+
category: "Events",
140+
defaultValue: {
141+
summary: "{ originalEvent, value }",
142+
},
143+
},
144+
},
145+
onClear: {
146+
action: "on-clear",
147+
description: "Triggered when clear button is clicked",
148+
table: {
149+
category: "Events",
150+
defaultValue: {
151+
summary: "",
152+
},
153+
},
154+
},
155+
},
156+
};
157+
158+
export const Default = buildExtensionTemplate(
159+
DefaultTemplate,
160+
DefaultTemplateCode,
161+
{
162+
a11yClearButton: "Clear filter input",
163+
"aria-label":"Filter input"
164+
165+
},
166+
);
167+
168+
export const Controls = buildExtensionTemplate(
169+
ControlsTemplate,
170+
ControlsTemplateCode,
171+
{
172+
a11yClearButton: "Clear filter input",
173+
"aria-label":"Filter input",
174+
a11yControlsId: "filter-input-controls"
175+
},
176+
);

‎packages/ebayui-core/src/components/ebay-filter-input/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+
import { validSizes } from "./constants";
3+
$ const {
4+
class: inputClass,
5+
placeholder: inputPlaceholder,
6+
a11yClearButton,
7+
a11yControlsId,
8+
size: inputSize,
9+
...htmlInput
10+
} = input;
11+
12+
$ var size = inputSize && validSizes.includes(inputSize) ? inputSize : null;
13+
14+
$ const placeholder = inputPlaceholder ?? "Filter";
15+
16+
<span class=["filter-input",
17+
size && `filter-input--${size}`,
18+
inputClass]>
19+
<ebay-textbox
20+
fluid
21+
type="search"
22+
key="input"
23+
aria-controls=a11yControlsId
24+
placeholder=placeholder
25+
on-keydown("emit", "keydown")
26+
on-keypress("emit", "keypress")
27+
on-keyup("emit", "keyup")
28+
on-change("emit", "change")
29+
on-input-change("emit", "input-change")
30+
on-focus("emit", "focus")
31+
on-blur("emit", "blur")
32+
...processHtmlAttributes(htmlInput)
33+
>
34+
<@prefix-icon>
35+
<ebay-search-16-icon/>
36+
</@prefix-icon>
37+
<@postfix-icon>
38+
<if(a11yClearButton && placeholder)>
39+
<ebay-icon-button
40+
aria-label=a11yClearButton
41+
class="filter-input__clear-btn"
42+
size="small"
43+
transparent
44+
on-click("handleClear")
45+
>
46+
<ebay-clear-16-icon/>
47+
</ebay-icon-button>
48+
</if>
49+
</@postfix-icon>
50+
</ebay-textbox>
51+
</span>

0 commit comments

Comments
 (0)