Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit b6f7744

Browse files
LuLaValvaLuLaValva
authored
feat(combobox): remove chevron from combobox (#2537)
1 parent c479ee1 commit b6f7744

File tree

6 files changed

+5
-286
lines changed

6 files changed

+5
-286
lines changed

‎.changeset/twelve-llamas-flash.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": major
3+
---
4+
5+
feat(combobox): remove chevron from combobox

‎src/routes/_index/component/chips-combobox/+page.marko‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,6 @@
3737
aria-haspopup="listbox"
3838
aria-owns="listbox-chips-combobox-1"
3939
>
40-
<svg
41-
class="icon icon--16"
42-
height="16"
43-
width="16"
44-
aria-hidden="true"
45-
>
46-
<icon-symbol name="chevron-down-16"/>
47-
</svg>
4840
</span>
4941
<div class="combobox__listbox">
5042
<div
@@ -76,9 +68,6 @@
7668
<span class="combobox combobox--js chips-combobox__combobox">
7769
<span class="combobox__control chips-combobox_combobox__control">
7870
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
79-
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
80-
<use href="#icon-chevron-down-16"></use>
81-
</svg>
8271
</span>
8372
<div class="combobox__listbox">
8473
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
@@ -120,14 +109,6 @@
120109
aria-haspopup="listbox"
121110
aria-owns="listbox-chips-combobox-1"
122111
>
123-
<svg
124-
class="icon icon--16"
125-
height="16"
126-
width="16"
127-
aria-hidden="true"
128-
>
129-
<icon-symbol name="chevron-down-16"/>
130-
</svg>
131112
</span>
132113
<div class="combobox__listbox">
133114
<div
@@ -159,9 +140,6 @@
159140
<span class="combobox combobox--js chips-combobox__combobox">
160141
<span class="combobox__control chips-combobox_combobox__control">
161142
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
162-
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
163-
<use href="#icon-chevron-down-16"></use>
164-
</svg>
165143
</span>
166144
<div class="combobox__listbox">
167145
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
@@ -275,14 +253,6 @@
275253
aria-haspopup="listbox"
276254
aria-owns="listbox-chips-combobox-1"
277255
>
278-
<svg
279-
class="icon icon--16"
280-
height="16"
281-
width="16"
282-
aria-hidden="true"
283-
>
284-
<icon-symbol name="chevron-down-16"/>
285-
</svg>
286256
</span>
287257
<div class="combobox__listbox">
288258
<div
@@ -345,9 +315,6 @@
345315
<span class="combobox combobox--js chips-combobox__combobox">
346316
<span class="combobox__control chips-combobox_combobox__control">
347317
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
348-
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
349-
<use href="#icon-chevron-down-16"></use>
350-
</svg>
351318
</span>
352319
<div class="combobox__listbox">
353320
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
@@ -480,14 +447,6 @@
480447
aria-owns="listbox-chips-combobox-1"
481448
disabled
482449
>
483-
<svg
484-
class="icon icon--16"
485-
height="16"
486-
width="16"
487-
aria-hidden="true"
488-
>
489-
<icon-symbol name="chevron-down-16"/>
490-
</svg>
491450
</span>
492451
<div class="combobox__listbox">
493452
<div
@@ -550,9 +509,6 @@
550509
<span class="combobox combobox--js chips-combobox__combobox">
551510
<span class="combobox__control chips-combobox_combobox__control">
552511
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
553-
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
554-
<use href="#icon-chevron-down-16"></use>
555-
</svg>
556512
</span>
557513
<div class="combobox__listbox">
558514
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
@@ -684,14 +640,6 @@
684640
aria-haspopup="listbox"
685641
aria-owns="listbox-chips-combobox-1"
686642
>
687-
<svg
688-
class="icon icon--16"
689-
height="16"
690-
width="16"
691-
aria-hidden="true"
692-
>
693-
<icon-symbol name="chevron-down-16"/>
694-
</svg>
695643
</span>
696644
<div class="combobox__listbox">
697645
<div
@@ -754,9 +702,6 @@
754702
<span class="combobox combobox--js chips-combobox__combobox">
755703
<span class="combobox__control chips-combobox_combobox__control">
756704
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
757-
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
758-
<use href="#icon-chevron-down-16"></use>
759-
</svg>
760705
</span>
761706
<div class="combobox__listbox">
762707
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">

‎src/routes/_index/component/combobox/+page.marko‎

Lines changed: 0 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,6 @@
3636
aria-label="Combobox demo"
3737
aria-owns="listbox-1"
3838
>
39-
<svg
40-
class="icon icon--12"
41-
height="8"
42-
width="8"
43-
aria-hidden="true"
44-
>
45-
<icon-symbol name="chevron-down-12"/>
46-
</svg>
4739
</span>
4840
<div class="combobox__listbox">
4941
<div
@@ -73,9 +65,6 @@
7365
<span class="combobox">
7466
<span class="combobox__control">
7567
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-1" />
76-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
77-
<use href="#icon-chevron-down-12"></use>
78-
</svg>
7968
</span>
8069
<div class="combobox__listbox">
8170
<div id="listbox-1" class="combobox__options" role="listbox">
@@ -119,14 +108,6 @@
119108
aria-owns="listbox-2"
120109
disabled
121110
>
122-
<svg
123-
class="icon icon--12"
124-
height="8"
125-
width="8"
126-
aria-hidden="true"
127-
>
128-
<icon-symbol name="chevron-down-12"/>
129-
</svg>
130111
</span>
131112
<div class="combobox__listbox">
132113
<div
@@ -156,9 +137,6 @@
156137
<span class="combobox">
157138
<span class="combobox__control">
158139
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-2" disabled />
159-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
160-
<use href="#icon-chevron-down-12"></use>
161-
</svg>
162140
</span>
163141
<div class="combobox__listbox">
164142
<div id="listbox-2" class="combobox__options" role="listbox">
@@ -175,143 +153,6 @@
175153
</div>
176154
</span>
177155
</highlight-code>
178-
<!--
179-
<h3 id="combobox-readonly">Readonly Combobox</h3>
180-
<p>A readonly combobox is intended for use as a custom implementation of the native HTML select element. Unlike the default combobox, its options <em>do</em> have state. Notice that an additional span element is required within each option to host the status icon.</p>
181-
<p>Unfortunately, a readonly combobox exhibits some UX issues on iOS, which is why for now we recommend using the <a href="#listbox">listbox</a> instead.</p>
182-
<p>Apply the <span class="highlight">combobox--readonly</span> modifier and <span class="highlight">readonly</span> input property to create a readonly combobox.</p>
183-
<p>By default, the textbox value should match the first option if the user does not specify a selection. This matches the behaviour of a native HTML select element.</p>
184-
185-
<div class="demo">
186-
<div class="demo__inner">
187-
<form action="index.html">
188-
<span class="combobox combobox--readonly">
189-
<span class="combobox__control">
190-
<input name="combobox-readonly" role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox4" readonly />
191-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
192-
<icon-symbol name="chevron-down-12" />
193-
</svg>
194-
</span>
195-
<div class="combobox__listbox">
196-
<div id="listbox4" class="combobox__options" role="listbox">
197-
<div class="combobox__option" role="option">
198-
<span class="combobox__value">Option 1</span>
199-
<svg class="icon icon--16" height="8" width="8">
200-
<icon-symbol name="tick-16" />
201-
</svg>
202-
</div>
203-
<div class="combobox__option" role="option">
204-
<span class="combobox__value">Option 2</span>
205-
<svg class="icon icon--16" height="8" width="8">
206-
<icon-symbol name="tick-16" />
207-
</svg>
208-
</div>
209-
<div class="combobox__option" role="option">
210-
<span class="combobox__value">Option 3</span>
211-
<svg class="icon icon--16" height="8" width="8">
212-
<icon-symbol name="tick-16" />
213-
</svg>
214-
</div>
215-
</div>
216-
</div>
217-
</span>
218-
</form>
219-
</div>
220-
</div>
221-
222-
<highlight-code type="html" >
223-
<span class="combobox combobox--readonly">
224-
<span class="combobox__control">
225-
<input role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-owns="listbox4" readonly />
226-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
227-
<use href="#icon-chevron-down-12"></use>
228-
</svg>
229-
</span>
230-
<div class="combobox__listbox">
231-
<div id="listbox4" class="combobox__options" role="listbox">
232-
<div class="combobox__option" role="option">
233-
<span class="combobox__value">Option 1</span>
234-
<svg class="icon icon--16" height="8" width="8">
235-
<use href="#icon-tick-16"></use>
236-
</svg>
237-
</div>
238-
<div class="combobox__option" role="option">
239-
<span class="combobox__value">Option 2</span>
240-
<svg class="icon icon--16" height="8" width="8">
241-
<use href="#icon-tick-16"></use>
242-
</svg>
243-
</div>
244-
<div class="combobox__option" role="option">
245-
<span class="combobox__value">Option 3</span>
246-
<svg class="icon icon--16" height="8" width="8">
247-
<use href="#icon-tick-16"></use>
248-
</svg>
249-
</div>
250-
</div>
251-
</div>
252-
</span>
253-
</highlight-code>
254-
255-
<h3 id="combobox-button">Icon Button Combobox</h3>
256-
<p>In some cases, the suggestion overlay might be controlled by an <a href="#icon-button">icon button</a>. Use an <span class="highlight">icon-btn</span> and the <span class="highlight">combobox__control--actionable</span> modifier.</p>
257-
258-
<div class="demo">
259-
<div class="demo__inner">
260-
<form action="index.html">
261-
<span class="combobox">
262-
<span class="combobox__control combobox__control--actionable">
263-
<input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox5" />
264-
<button class="icon-btn" type="button" aria-label="Expand Suggestions">
265-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
266-
<icon-symbol name="chevron-down-12" />
267-
</svg>
268-
</button>
269-
</span>
270-
<div class="combobox__listbox">
271-
<div id="listbox5" class="combobox__options" role="listbox">
272-
<div class="combobox__option" role="option">
273-
<span>Option 1</span>
274-
</div>
275-
<div class="combobox__option" role="option">
276-
<span>Option 2</span>
277-
</div>
278-
<div class="combobox__option" role="option">
279-
<span>Option 3</span>
280-
</div>
281-
</div>
282-
</div>
283-
</span>
284-
</form>
285-
</div>
286-
</div>
287-
288-
<highlight-code type="html" >
289-
<span class="combobox">
290-
<span class="combobox__control combobox__control--actionable">
291-
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
292-
<button class="icon-btn" type="button" aria-label="Expand Suggestions">
293-
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
294-
<use href="#icon-chevron-down-12"></use>
295-
</svg>
296-
</button>
297-
</span>
298-
<div class="combobox__listbox">
299-
<div id="listbox5" class="combobox__options" role="listbox">
300-
<div class="combobox__option" role="option">
301-
<span>Option 1</span>
302-
</div>
303-
<div class="combobox__option" role="option">
304-
<span>Option 2</span>
305-
</div>
306-
<div class="combobox__option" role="option">
307-
<span>Option 3</span>
308-
</div>
309-
</div>
310-
</div>
311-
</span>
312-
</highlight-code>
313-
314-
-->
315156
</div>
316157
export const metadata = {
317158
component: "combobox",

0 commit comments

Comments
 (0)