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

feat(combobox): remove chevron from combobox #2537

Merged
merged 2 commits into from
Jan 27, 2025
Merged

feat(combobox): remove chevron from combobox #2537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e0f923
feat(combobox): remove chevron from examples
LuLaValva Jan 24, 2025
44a1065
Create twelve-llamas-flash.md
agliga Jan 27, 2025
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
5 changes: 5 additions & 0 deletions .changeset/twelve-llamas-flash.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ebay/skin": major
---

feat(combobox): remove chevron from combobox
55 changes: 0 additions & 55 deletions src/routes/_index/component/chips-combobox/+page.marko
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,6 @@
aria-haspopup="listbox"
aria-owns="listbox-chips-combobox-1"
>
<svg
class="icon icon--16"
height="16"
width="16"
aria-hidden="true"
>
<icon-symbol name="chevron-down-16"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -76,9 +68,6 @@
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
Expand Down Expand Up @@ -120,14 +109,6 @@
aria-haspopup="listbox"
aria-owns="listbox-chips-combobox-1"
>
<svg
class="icon icon--16"
height="16"
width="16"
aria-hidden="true"
>
<icon-symbol name="chevron-down-16"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -159,9 +140,6 @@
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
Expand Down Expand Up @@ -275,14 +253,6 @@
aria-haspopup="listbox"
aria-owns="listbox-chips-combobox-1"
>
<svg
class="icon icon--16"
height="16"
width="16"
aria-hidden="true"
>
<icon-symbol name="chevron-down-16"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -345,9 +315,6 @@
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
Expand Down Expand Up @@ -480,14 +447,6 @@
aria-owns="listbox-chips-combobox-1"
disabled
>
<svg
class="icon icon--16"
height="16"
width="16"
aria-hidden="true"
>
<icon-symbol name="chevron-down-16"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -550,9 +509,6 @@
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
Expand Down Expand Up @@ -684,14 +640,6 @@
aria-haspopup="listbox"
aria-owns="listbox-chips-combobox-1"
>
<svg
class="icon icon--16"
height="16"
width="16"
aria-hidden="true"
>
<icon-symbol name="chevron-down-16"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -754,9 +702,6 @@
<span class="combobox combobox--js chips-combobox__combobox">
<span class="combobox__control chips-combobox_combobox__control">
<input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
<svg class="icon icon--16" height="16" width="16" aria-hidden="true">
<use href="#icon-chevron-down-16"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
Expand Down
159 changes: 0 additions & 159 deletions src/routes/_index/component/combobox/+page.marko
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,6 @@
aria-label="Combobox demo"
aria-owns="listbox-1"
>
<svg
class="icon icon--12"
height="8"
width="8"
aria-hidden="true"
>
<icon-symbol name="chevron-down-12"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -73,9 +65,6 @@
<span class="combobox">
<span class="combobox__control">
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-1" />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-1" class="combobox__options" role="listbox">
Expand Down Expand Up @@ -119,14 +108,6 @@
aria-owns="listbox-2"
disabled
>
<svg
class="icon icon--12"
height="8"
width="8"
aria-hidden="true"
>
<icon-symbol name="chevron-down-12"/>
</svg>
</span>
<div class="combobox__listbox">
<div
Expand Down Expand Up @@ -156,9 +137,6 @@
<span class="combobox">
<span class="combobox__control">
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox-2" disabled />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox-2" class="combobox__options" role="listbox">
Expand All @@ -175,143 +153,6 @@
</div>
</span>
</highlight-code>
<!--
<h3 id="combobox-readonly">Readonly Combobox</h3>
<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>
<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>
<p>Apply the <span class="highlight">combobox--readonly</span> modifier and <span class="highlight">readonly</span> input property to create a readonly combobox.</p>
<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>

<div class="demo">
<div class="demo__inner">
<form action="index.html">
<span class="combobox combobox--readonly">
<span class="combobox__control">
<input name="combobox-readonly" role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox4" readonly />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<icon-symbol name="chevron-down-12" />
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox4" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span class="combobox__value">Option 1</span>
<svg class="icon icon--16" height="8" width="8">
<icon-symbol name="tick-16" />
</svg>
</div>
<div class="combobox__option" role="option">
<span class="combobox__value">Option 2</span>
<svg class="icon icon--16" height="8" width="8">
<icon-symbol name="tick-16" />
</svg>
</div>
<div class="combobox__option" role="option">
<span class="combobox__value">Option 3</span>
<svg class="icon icon--16" height="8" width="8">
<icon-symbol name="tick-16" />
</svg>
</div>
</div>
</div>
</span>
</form>
</div>
</div>

<highlight-code type="html" >
<span class="combobox combobox--readonly">
<span class="combobox__control">
<input role="combobox" type="text" value="Option 1" aria-haspopup="listbox" aria-owns="listbox4" readonly />
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</span>
<div class="combobox__listbox">
<div id="listbox4" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span class="combobox__value">Option 1</span>
<svg class="icon icon--16" height="8" width="8">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="combobox__option" role="option">
<span class="combobox__value">Option 2</span>
<svg class="icon icon--16" height="8" width="8">
<use href="#icon-tick-16"></use>
</svg>
</div>
<div class="combobox__option" role="option">
<span class="combobox__value">Option 3</span>
<svg class="icon icon--16" height="8" width="8">
<use href="#icon-tick-16"></use>
</svg>
</div>
</div>
</div>
</span>
</highlight-code>

<h3 id="combobox-button">Icon Button Combobox</h3>
<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>

<div class="demo">
<div class="demo__inner">
<form action="index.html">
<span class="combobox">
<span class="combobox__control combobox__control--actionable">
<input name="combobox-default" placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-label="Combobox demo" aria-owns="listbox5" />
<button class="icon-btn" type="button" aria-label="Expand Suggestions">
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<icon-symbol name="chevron-down-12" />
</svg>
</button>
</span>
<div class="combobox__listbox">
<div id="listbox5" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
</form>
</div>
</div>

<highlight-code type="html" >
<span class="combobox">
<span class="combobox__control combobox__control--actionable">
<input placeholder="Combobox" role="combobox" type="text" aria-haspopup="listbox" aria-owns="listbox5" />
<button class="icon-btn" type="button" aria-label="Expand Suggestions">
<svg class="icon icon--12" height="8" width="8" aria-hidden="true">
<use href="#icon-chevron-down-12"></use>
</svg>
</button>
</span>
<div class="combobox__listbox">
<div id="listbox5" class="combobox__options" role="listbox">
<div class="combobox__option" role="option">
<span>Option 1</span>
</div>
<div class="combobox__option" role="option">
<span>Option 2</span>
</div>
<div class="combobox__option" role="option">
<span>Option 3</span>
</div>
</div>
</div>
</span>
</highlight-code>

-->
</div>
export const metadata = {
component: "combobox",
Expand Down
Loading