From 67b52952e7d21393ebb2f2c0097aed6074bda412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aykut=20Sara=C3=A7?= Date: Tue, 18 Jul 2023 09:57:51 +0300 Subject: [PATCH 01/35] feat(select): add select clearable prop --- src/components/select/bl-select.test.ts | 30 +++++++++++---------- src/components/select/bl-select.ts | 35 +++++++++++++------------ 2 files changed, 34 insertions(+), 31 deletions(-) diff --git a/src/components/select/bl-select.test.ts b/src/components/select/bl-select.test.ts index bbf51306..7b0fac50 100644 --- a/src/components/select/bl-select.test.ts +++ b/src/components/select/bl-select.test.ts @@ -2,7 +2,7 @@ import { assert, elementUpdated, expect, fixture, html, oneEvent } from '@open-w import BlSelect from './bl-select'; import type BlSelectOption from './option/bl-select-option'; -import type BlButton from '../button/bl-button'; +import BlButton from '../button/bl-button'; import BlCheckbox from '../checkbox-group/checkbox/bl-checkbox'; import { sendKeys } from '@web/test-runner-commands'; @@ -34,14 +34,6 @@ describe('bl-select', () => { +0
- -
@@ -136,8 +128,18 @@ describe('bl-select', () => { expect(el.checkValidity()).to.false; expect(invalidText).to.exist; }); + it('should render "remove all" button on clearable attribute is given', async () => { + const el = await fixture(html` + + Option 1 + Option 2 + + `); + const removeAll = el.shadowRoot?.querySelector('.remove-all'); + expect(removeAll).to.exist; + }); it('should remove selected option on remove all click on non-required single select', async () => { - const el = await fixture(html` + const el = await fixture(html` Option 1 Option 2 `); @@ -154,7 +156,7 @@ describe('bl-select', () => { expect(el.value).to.null; }); it('should remove selected options', async () => { - const el = await fixture(html` + const el = await fixture(html` Option 1 Option 2 `); @@ -378,9 +380,9 @@ describe('bl-select', () => { describe('keyboard navigation', () => { let el: HTMLDivElement, blSelect: BlSelect; const tabKey = - navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') - ? 'Alt+Tab' - : 'Tab'; + navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('HeadlessChrome') + ? 'Alt+Tab' + : 'Tab'; beforeEach(async () => { //when diff --git a/src/components/select/bl-select.ts b/src/components/select/bl-select.ts index d14d5522..702a32f3 100644 --- a/src/components/select/bl-select.ts +++ b/src/components/select/bl-select.ts @@ -1,11 +1,4 @@ -import { - autoUpdate, - computePosition, - flip, - MiddlewareState, - offset, - size, -} from '@floating-ui/dom'; +import { autoUpdate, computePosition, flip, MiddlewareState, offset, size } from '@floating-ui/dom'; import { FormControlMixin, requiredValidator } from '@open-wc/form-control'; import { FormValue } from '@open-wc/form-helpers'; import 'element-internals-polyfill'; @@ -42,7 +35,7 @@ export default class BlSelect extends Form static get styles(): CSSResultGroup { return [style]; } - static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true}; + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; static formControlValidators = [requiredValidator]; @@ -113,6 +106,12 @@ export default class BlSelect extends Form @property({ type: Boolean, reflect: true }) disabled = false; + /** + * Sets whether the selected option is clearable + */ + @property({ type: Boolean }) + clearable = false; + /** * Allows multiple options to be selected */ @@ -292,14 +291,16 @@ export default class BlSelect extends Form const inputSelectedOptions = html`
    ${this._selectedOptions.map(item => html`
  • ${item.textContent}
    • `)}
`; - const removeButton = html``; + const removeButton = this.clearable + ? html`` + : ''; return html`
Date: Tue, 18 Jul 2023 10:06:52 +0300 Subject: [PATCH 02/35] docs(select): update storybook clearable docs --- src/components/select/bl-select.stories.mdx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/select/bl-select.stories.mdx b/src/components/select/bl-select.stories.mdx index 67487d4f..58174c60 100644 --- a/src/components/select/bl-select.stories.mdx +++ b/src/components/select/bl-select.stories.mdx @@ -34,6 +34,9 @@ import { centeredLayout } from '../../utilities/chromatic-decorators'; required: { control: 'boolean' }, + clearable: { + control: 'boolean' + }, disabled: { control: 'boolean' }, @@ -90,6 +93,7 @@ export const SelectTemplate = (args) => html`