diff --git a/src/liquid/components/ld-select/ld-select.css b/src/liquid/components/ld-select/ld-select.css index be72eba3b8..c6f93d134d 100644 --- a/src/liquid/components/ld-select/ld-select.css +++ b/src/liquid/components/ld-select/ld-select.css @@ -15,7 +15,7 @@ position: relative; display: flex; align-items: center; - justify-content: space-between; + justify-content: flex-end; font: var(--ld-typo-body-m); border: 0; outline: none; @@ -63,6 +63,28 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + margin-right: auto; +} + +.ld-select__btn-clear { + border: 0; + outline: none; + padding: 0; + border-radius: var(--ld-br-full); + flex-shrink: 0; + user-select: none; + touch-action: manipulation; + background-color: transparent; + -webkit-touch-callout: none; + cursor: pointer; + margin-right: var(--ld-sp-6); + line-height: 0; +} + +.ld-select__btn-clear-icon { + --ld-select-btn-clear-size: 1.25rem; + width: var(--ld-select-btn-clear-size); + height: var(--ld-select-btn-clear-size); } .ld-select__btn-trigger-icon { @@ -83,9 +105,28 @@ &:where(:focus:focus-visible) { box-shadow: inset 0 0 0 0.1rem var(--ld-thm-ocean-bg-primary); } + + .ld-select__btn-clear, .ld-select__btn-trigger-icon { color: var(--ld-thm-ocean-bg-primary); } + + &:where(:not(:disabled):not([aria-disabled='true'])) { + .ld-select__btn-clear { + &:where(:focus:focus-visible) { + color: var(--ld-col-rb-focus); + } + @media (hover: hover) { + &:where(:hover) { + color: var(--ld-col-rb-hover); + } + } + &:where(:active), + &:where(:active:focus-visible) { + color: var(--ld-col-rb-active); + } + } + } } .ld-theme-bubblegum, @@ -99,9 +140,28 @@ box-shadow: inset 0 0 0 0.1rem var(--ld-col-rp-default); } } + + .ld-select__btn-clear, .ld-select__btn-trigger-icon { color: var(--ld-col-rp-default); } + + &:where(:not(:disabled):not([aria-disabled='true'])) { + .ld-select__btn-clear { + &:where(:focus:focus-visible) { + color: var(--ld-col-rp-focus); + } + @media (hover: hover) { + &:where(:hover) { + color: var(--ld-col-rp-hover); + } + } + &:where(:active), + &:where(:active:focus-visible) { + color: var(--ld-col-rp-active); + } + } + } } .ld-theme-tea, @@ -111,9 +171,28 @@ box-shadow: inset 0 0 0 0.1rem var(--ld-thm-tea-bg-primary); } } + + .ld-select__btn-clear, .ld-select__btn-trigger-icon { color: var(--ld-thm-tea-bg-primary); } + + &:where(:not(:disabled):not([aria-disabled='true'])) { + .ld-select__btn-clear { + &:where(:focus:focus-visible) { + color: var(--ld-col-rg-focus); + } + @media (hover: hover) { + &:where(:hover) { + color: var(--ld-col-rg-hover); + } + } + &:where(:active), + &:where(:active:focus-visible) { + color: var(--ld-col-rg-active); + } + } + } } .ld-select__popper { diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx index 661c324bde..3987bcad6a 100644 --- a/src/liquid/components/ld-select/ld-select.tsx +++ b/src/liquid/components/ld-select/ld-select.tsx @@ -29,6 +29,7 @@ export class LdSelect { private triggerRef!: HTMLElement private popperRef!: HTMLElement private scrollContainerRef!: HTMLElement + private btnClearRef: HTMLButtonElement private popper: Tether private observer: MutationObserver @@ -234,6 +235,13 @@ export class LdSelect { return } + if ( + document.activeElement === this.btnClearRef && + (ev.key === ' ' || ev.key === 'Enter') + ) { + return + } + switch (ev.key) { case 'ArrowDown': { // Move focus to the next option. @@ -401,6 +409,12 @@ export class LdSelect { this.togglePopper() } + private handleClearClick(ev: MouseEvent) { + ev.preventDefault() + ev.stopImmediatePropagation() + this.clearSelection() + } + componentDidLoad() { this.initOptions() this.updateInert() @@ -439,18 +453,52 @@ export class LdSelect { class="ld-select__select" ref={(el) => (this.selectRef = el as HTMLElement)} > - + )} + - +
Blueberry Peach Grape + Fuyu Persimmon + Monstera Deliciosa Pear Pineapple Plum @@ -47,6 +49,8 @@ permalink: components/ld-select/ Blueberry Peach Grape + Fuyu Persimmon + Monstera Deliciosa Pear Pineapple Plum