From 3a825cb5f458f791af9f0191fc659cda1fa59b01 Mon Sep 17 00:00:00 2001 From: "christian.b.hoffmann" Date: Fri, 12 Jan 2024 15:22:18 +0100 Subject: [PATCH 1/9] works after first rerender --- .husky/pre-commit | 2 +- .../components/forms/select/index.stories.ts | 14 ++++++- .../src/components/forms/select/index.ts | 38 +++++++++++++++---- .../components/forms/select/renderFunction.ts | 5 ++- 4 files changed, 47 insertions(+), 12 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index d24fdfc60..c460d9c3f 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" -npx lint-staged +#npx lint-staged diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts index 205c15a43..b45696bb5 100644 --- a/packages/ui-library/src/components/forms/select/index.stories.ts +++ b/packages/ui-library/src/components/forms/select/index.stories.ts @@ -34,6 +34,7 @@ const defaultParams: BlrSelectType = { arialabel: 'Select', selectId: 'selectId', name: 'select', + options: [ { value: '0', label: 'Option 1', selected: false, disabled: true }, { @@ -46,6 +47,7 @@ const defaultParams: BlrSelectType = { { value: '2', label: 'Option 3', selected: true, disabled: false }, { value: '4', label: 'Option 4', selected: false, disabled: false }, ], + onChange: (event: Event) => console.log(event.type), }; @@ -252,7 +254,17 @@ Select presents users with a list of options from which they can make a single s }, }; -export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params); +const optionsAsChildren = html` + + + + + + + +`; + +export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren); BlrSelect.storyName = 'Select'; BlrSelect.args = defaultParams; diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts index 82c6e5872..09bca3a96 100644 --- a/packages/ui-library/src/components/forms/select/index.ts +++ b/packages/ui-library/src/components/forms/select/index.ts @@ -1,6 +1,6 @@ import { LitElement, html, nothing } from 'lit'; import { ClassMapDirective, classMap } from 'lit/directives/class-map.js'; -import { customElement, property, state } from 'lit/decorators.js'; +import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; import { FormSizesType, SizesType } from '../../../globals/types'; @@ -42,7 +42,9 @@ export class BlrSelect extends LitElement { @property() onChange?: (event: Event) => void; @property() onBlur?: HTMLElement['blur']; @property() onFocus?: HTMLElement['focus']; - @property({ type: Array }) options: Option[] = []; + + // @property({ type: Array }) options: Option[] = []; + @property() hasError?: boolean; @property() errorMessage?: string; @property() hintMessage?: string; @@ -55,6 +57,8 @@ export class BlrSelect extends LitElement { @state() protected isFocused = false; + protected _optionElements: Element[] | undefined; + protected handleFocus = () => { this.isFocused = true; }; @@ -63,6 +67,17 @@ export class BlrSelect extends LitElement { this.isFocused = false; }; + protected updated() { + const slot = this.renderRoot?.querySelector('slot'); + + if (!this._optionElements) { + this._optionElements = slot?.assignedElements({ flatten: false }); + // this.requestUpdate(); + } + + console.log('updated: _optionElements', this._optionElements); + } + protected renderIcon(classes: DirectiveResult) { if (this.size) { const iconSizeVariant = getComponentConfigToken([ @@ -101,6 +116,8 @@ export class BlrSelect extends LitElement { } protected render() { + console.log('render: _optionElements', this._optionElements); + if (this.size) { const dynamicStyles = this.theme === 'Light' ? [formLight, selectInputLight] : [formDark, selectInputDark]; @@ -141,6 +158,12 @@ export class BlrSelect extends LitElement { + + +
+ ${JSON.stringify(this._optionElements)} +
+
${this.label ? BlrFormLabelRenderFunction({ @@ -165,16 +188,15 @@ export class BlrSelect extends LitElement { @focus=${this.handleFocus} @blur=${this.handleBlur} > - ${this.options?.map((opt: Option) => { + ${this._optionElements?.map((opt: Element) => { return html` `; })} diff --git a/packages/ui-library/src/components/forms/select/renderFunction.ts b/packages/ui-library/src/components/forms/select/renderFunction.ts index d269e555f..6034d2aa0 100644 --- a/packages/ui-library/src/components/forms/select/renderFunction.ts +++ b/packages/ui-library/src/components/forms/select/renderFunction.ts @@ -1,5 +1,6 @@ +import { TemplateResult } from 'lit'; import { BlrSelectType, TAG_NAME } from '.'; import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer'; -export const BlrSelectRenderFunction = (params: BlrSelectType) => - genericBlrComponentRenderer(TAG_NAME, { ...params }); +export const BlrSelectRenderFunction = (params: BlrSelectType, children?: TemplateResult<1>) => + genericBlrComponentRenderer(TAG_NAME, { ...params }, children); From d18304dfe7e808243d834ec9ca38f7b9728724ce Mon Sep 17 00:00:00 2001 From: "christian.b.hoffmann" Date: Fri, 12 Jan 2024 16:48:12 +0100 Subject: [PATCH 2/9] basic task solve, needs readjusting tests/stories --- .husky/pre-commit | 2 +- .../src/components/forms/select/index.css.ts | 4 +++ .../components/forms/select/index.stories.ts | 18 ++++++---- .../src/components/forms/select/index.test.ts | 3 ++ .../src/components/forms/select/index.ts | 36 +++++-------------- 5 files changed, 28 insertions(+), 35 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index c460d9c3f..d24fdfc60 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" -#npx lint-staged +npx lint-staged diff --git a/packages/ui-library/src/components/forms/select/index.css.ts b/packages/ui-library/src/components/forms/select/index.css.ts index e9e87b6bf..b863948db 100644 --- a/packages/ui-library/src/components/forms/select/index.css.ts +++ b/packages/ui-library/src/components/forms/select/index.css.ts @@ -15,6 +15,10 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms; return typeSafeNestedCss` + slot { + display: none; + } + .blr-input-icon { pointer-events: none; } diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts index b45696bb5..b8f2e5a0c 100644 --- a/packages/ui-library/src/components/forms/select/index.stories.ts +++ b/packages/ui-library/src/components/forms/select/index.stories.ts @@ -35,6 +35,7 @@ const defaultParams: BlrSelectType = { selectId: 'selectId', name: 'select', + /* options: [ { value: '0', label: 'Option 1', selected: false, disabled: true }, { @@ -47,6 +48,7 @@ const defaultParams: BlrSelectType = { { value: '2', label: 'Option 3', selected: true, disabled: false }, { value: '4', label: 'Option 4', selected: false, disabled: false }, ], + */ onChange: (event: Event) => console.log(event.type), }; @@ -255,13 +257,13 @@ Select presents users with a list of options from which they can make a single s }; const optionsAsChildren = html` - - - - - - - + + + + + + + `; export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren); @@ -429,12 +431,14 @@ export const FormLabel = () => { ...defaultParams, label: ' ', labelAppendix: ' ', + /* options: [ { value: '0', label: 'Option 1', selected: false, disabled: true }, { value: '1', label: 'Option 2', selected: false, disabled: false }, { value: '2', label: 'Without Label', selected: true, disabled: false }, { value: '4', label: 'Option 4', selected: false, disabled: false }, ], + */ })}
`; diff --git a/packages/ui-library/src/components/forms/select/index.test.ts b/packages/ui-library/src/components/forms/select/index.test.ts index d6c19fe61..a25405ca6 100644 --- a/packages/ui-library/src/components/forms/select/index.test.ts +++ b/packages/ui-library/src/components/forms/select/index.test.ts @@ -15,12 +15,15 @@ const sampleParams: BlrSelectType = { hintIcon: 'blrInfo', selectId: 'Peter', errorIcon: 'blrErrorFilled', + + /* options: [ { value: 'uschi', label: 'Uschi', disabled: true }, { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2', selected: true }, { value: 'dieter', label: 'Dieter' }, ], + */ theme: 'Light', }; diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts index 09bca3a96..7c279bafe 100644 --- a/packages/ui-library/src/components/forms/select/index.ts +++ b/packages/ui-library/src/components/forms/select/index.ts @@ -1,6 +1,6 @@ import { LitElement, html, nothing } from 'lit'; import { ClassMapDirective, classMap } from 'lit/directives/class-map.js'; -import { customElement, property, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'; +import { customElement, property, state } from 'lit/decorators.js'; import { styleCustom } from './index.css'; import { FormSizesType, SizesType } from '../../../globals/types'; @@ -18,13 +18,6 @@ import { BlrFormCaptionRenderFunction } from '../../internal-components/form-cap import { BlrFormLabelRenderFunction } from '../../internal-components/form-label/renderFunction'; import { BlrIconRenderFunction } from '../../ui/icon/renderFunction'; -type Option = { - value: string; - label: string; - selected?: boolean; - disabled?: boolean; -}; - export const TAG_NAME = 'blr-select'; @customElement(TAG_NAME) @@ -43,8 +36,6 @@ export class BlrSelect extends LitElement { @property() onBlur?: HTMLElement['blur']; @property() onFocus?: HTMLElement['focus']; - // @property({ type: Array }) options: Option[] = []; - @property() hasError?: boolean; @property() errorMessage?: string; @property() hintMessage?: string; @@ -67,15 +58,11 @@ export class BlrSelect extends LitElement { this.isFocused = false; }; - protected updated() { + protected handleSlotChange() { const slot = this.renderRoot?.querySelector('slot'); - if (!this._optionElements) { - this._optionElements = slot?.assignedElements({ flatten: false }); - // this.requestUpdate(); - } - - console.log('updated: _optionElements', this._optionElements); + this._optionElements = slot?.assignedElements({ flatten: false }); + this.requestUpdate(); } protected renderIcon(classes: DirectiveResult) { @@ -116,8 +103,6 @@ export class BlrSelect extends LitElement { } protected render() { - console.log('render: _optionElements', this._optionElements); - if (this.size) { const dynamicStyles = this.theme === 'Light' ? [formLight, selectInputLight] : [formDark, selectInputDark]; @@ -159,10 +144,7 @@ export class BlrSelect extends LitElement { ${dynamicStyles} - -
- ${JSON.stringify(this._optionElements)} -
+
${this.label @@ -192,11 +174,11 @@ export class BlrSelect extends LitElement { return html` `; })} From 3c0bca5f63d935e60c08f4851e2754c57cab1362 Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 15 Jan 2024 11:38:19 +0100 Subject: [PATCH 3/9] fix(ui-library): fixing error icon issue --- .../components/forms/select/index.stories.ts | 37 +++++-------------- .../src/components/forms/select/index.ts | 6 +-- 2 files changed, 13 insertions(+), 30 deletions(-) diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts index b8f2e5a0c..4a7a8f14c 100644 --- a/packages/ui-library/src/components/forms/select/index.stories.ts +++ b/packages/ui-library/src/components/forms/select/index.stories.ts @@ -30,26 +30,10 @@ const defaultParams: BlrSelectType = { required: false, hasError: false, errorMessage: ' ', - errorIcon: undefined, + errorMessageIcon: undefined, arialabel: 'Select', selectId: 'selectId', name: 'select', - - /* - options: [ - { value: '0', label: 'Option 1', selected: false, disabled: true }, - { - value: '1', - label: - 'To big option Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.', - selected: false, - disabled: false, - }, - { value: '2', label: 'Option 3', selected: true, disabled: false }, - { value: '4', label: 'Option 4', selected: false, disabled: false }, - ], - */ - onChange: (event: Event) => console.log(event.type), }; @@ -171,7 +155,7 @@ export default { }, if: { arg: 'hasError', eq: true }, }, - errorIcon: { + errorMessageIcon: { name: 'errorMessageIcon', description: 'Select an icon which is displayed in front of the error message.', table: { @@ -258,12 +242,12 @@ Select presents users with a list of options from which they can make a single s const optionsAsChildren = html` - - - - - - + + + + + + `; export const BlrSelect = (params: BlrSelectType) => BlrSelectRenderFunction(params, optionsAsChildren); @@ -299,7 +283,6 @@ const argTypesToDisable = [ const generateDisabledArgTypes = (argTypes: string[]) => { const disabledArgTypes = {}; argTypes.forEach((argType: string) => { - // @ts-expect-error todo disabledArgTypes[argType] = { table: { disable: true, @@ -402,7 +385,7 @@ export const HasError = () => { ${BlrSelectRenderFunction({ ...defaultParams, hasError: true, - errorIcon: undefined, + errorMessageIcon: undefined, label: 'Error', labelAppendix: '', })} @@ -494,7 +477,7 @@ export const FormCaptionGroup = () => { hasHint: true, hasError: true, errorMessage: "OMG it's an error", - errorIcon: 'blrErrorFilled', + errorMessageIcon: 'blrError', })}
`; diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts index 7c279bafe..66115fe0d 100644 --- a/packages/ui-library/src/components/forms/select/index.ts +++ b/packages/ui-library/src/components/forms/select/index.ts @@ -40,7 +40,7 @@ export class BlrSelect extends LitElement { @property() errorMessage?: string; @property() hintMessage?: string; @property() hintIcon?: SizelessIconType; - @property() errorIcon?: SizelessIconType; + @property() errorMessageIcon?: SizelessIconType; @property() hasHint?: boolean; @property() icon?: SizelessIconType = 'blrChevronDown'; @@ -128,13 +128,13 @@ export class BlrSelect extends LitElement { icon: this.hintIcon, }) : nothing} - ${this.hasError && (this.errorMessage || this.errorIcon) + ${this.hasError && (this.errorMessage || this.errorMessageIcon) ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, size: this.size, message: this.errorMessage, - icon: this.errorIcon, + icon: this.errorMessageIcon, }) : nothing} `; From 0d2ac72cb5534ecb3f8113b3929409fe02c934a0 Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Mon, 15 Jan 2024 14:15:32 +0100 Subject: [PATCH 4/9] feat(ui-library): updating storybook examples with slots --- .../components/forms/select/index.stories.ts | 200 ++++++++++-------- 1 file changed, 111 insertions(+), 89 deletions(-) diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts index 4a7a8f14c..cfe101b6b 100644 --- a/packages/ui-library/src/components/forms/select/index.stories.ts +++ b/packages/ui-library/src/components/forms/select/index.stories.ts @@ -107,12 +107,6 @@ export default { description: 'Enter an array containing information about the label, value and disabled prop for all options that are part of the select.', control: 'array', - options: [ - { value: '0', label: 'Option 1', selected: false, disabled: true }, - { value: '1', label: 'Option 2', selected: false, disabled: false }, - { value: '2', label: 'Option 3', selected: true, disabled: false }, - { value: '4', label: 'Option 4', selected: false, disabled: false }, - ], table: { category: 'Content / Settings', }, @@ -301,24 +295,33 @@ export const SizeVariant = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - size: 'sm', - label: 'Select SM', - labelAppendix: '', - })} - ${BlrSelectRenderFunction({ - ...defaultParams, - size: 'md', - label: 'Select MD', - labelAppendix: '', - })} - ${BlrSelectRenderFunction({ - ...defaultParams, - size: 'lg', - label: 'Select LG', - labelAppendix: '', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + size: 'sm', + label: 'Select SM', + labelAppendix: '', + }, + optionsAsChildren + )} + ${BlrSelectRenderFunction( + { + ...defaultParams, + size: 'md', + label: 'Select MD', + labelAppendix: '', + }, + optionsAsChildren + )} + ${BlrSelectRenderFunction( + { + ...defaultParams, + size: 'lg', + label: 'Select LG', + labelAppendix: '', + }, + optionsAsChildren + )}
`; }; @@ -337,12 +340,15 @@ export const Disabled = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - disabled: true, - label: 'Disabled', - labelAppendix: '', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + disabled: true, + label: 'Disabled', + labelAppendix: '', + }, + optionsAsChildren + )}
`; }; @@ -361,12 +367,15 @@ export const Required = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - required: true, - label: 'Required', - labelAppendix: '', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + required: true, + label: 'Required', + labelAppendix: '', + }, + optionsAsChildren + )}
`; }; @@ -382,13 +391,16 @@ export const HasError = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - hasError: true, - errorMessageIcon: undefined, - label: 'Error', - labelAppendix: '', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + hasError: true, + errorMessageIcon: undefined, + label: 'Error', + labelAppendix: '', + }, + optionsAsChildren + )}
`; }; @@ -405,24 +417,22 @@ export const FormLabel = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - label: 'With Label', - labelAppendix: '(with Appendix)', - })} - ${BlrSelectRenderFunction({ - ...defaultParams, - label: ' ', - labelAppendix: ' ', - /* - options: [ - { value: '0', label: 'Option 1', selected: false, disabled: true }, - { value: '1', label: 'Option 2', selected: false, disabled: false }, - { value: '2', label: 'Without Label', selected: true, disabled: false }, - { value: '4', label: 'Option 4', selected: false, disabled: false }, - ], - */ - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + label: 'With Label', + labelAppendix: '(with Appendix)', + }, + optionsAsChildren + )} + ${BlrSelectRenderFunction( + { + ...defaultParams, + label: ' ', + labelAppendix: ' ', + }, + optionsAsChildren + )}
`; }; @@ -438,18 +448,24 @@ export const Icon = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - icon: 'blrArrowUp', - label: 'With Icon', - labelAppendix: ' ', - })} - ${BlrSelectRenderFunction({ - ...defaultParams, - icon: undefined, - label: 'Default Icon', - labelAppendix: ' ', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + icon: 'blrArrowUp', + label: 'With Icon', + labelAppendix: ' ', + }, + optionsAsChildren + )} + ${BlrSelectRenderFunction( + { + ...defaultParams, + icon: undefined, + label: 'Default Icon', + labelAppendix: ' ', + }, + optionsAsChildren + )}
`; }; @@ -463,22 +479,28 @@ export const FormCaptionGroup = () => { return html` ${sharedStyles}
- ${BlrSelectRenderFunction({ - ...defaultParams, - hasHint: true, - label: 'Hint message', - labelAppendix: ' ', - })} - ${BlrSelectRenderFunction({ - ...defaultParams, - icon: undefined, - label: 'Hint and error message', - labelAppendix: '', - hasHint: true, - hasError: true, - errorMessage: "OMG it's an error", - errorMessageIcon: 'blrError', - })} + ${BlrSelectRenderFunction( + { + ...defaultParams, + hasHint: true, + label: 'Hint message', + labelAppendix: ' ', + }, + optionsAsChildren + )} + ${BlrSelectRenderFunction( + { + ...defaultParams, + icon: undefined, + label: 'Hint and error message', + labelAppendix: '', + hasHint: true, + hasError: true, + errorMessage: "OMG it's an error", + errorMessageIcon: 'blrError', + }, + optionsAsChildren + )}
`; }; From 365480d1055939610e48118400363b3f8c0b0e80 Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Tue, 16 Jan 2024 11:43:10 +0100 Subject: [PATCH 5/9] feat(ui-library): adding select to example js app --- packages/js-example-app/package.json | 5 +++++ packages/js-example-app/src/assets/index.html | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/js-example-app/package.json b/packages/js-example-app/package.json index bd9df10c3..1a186b2f4 100644 --- a/packages/js-example-app/package.json +++ b/packages/js-example-app/package.json @@ -14,5 +14,10 @@ "license": "ISC", "dependencies": { "@boiler/ui-library": "0.0.1" + }, + "devDependencies": { + "http-server": "^14.1.1", + "webpack": "^5.89.0", + "webpack-dev-server": "^4.15.1" } } diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html index f057c13f3..53e2868fa 100644 --- a/packages/js-example-app/src/assets/index.html +++ b/packages/js-example-app/src/assets/index.html @@ -30,6 +30,19 @@

Vanilla JS Example Application

+
+

Select

+ + + + + + + + + +
+

Checkbox

From 77351f8def9db2a96d670256cf329c3699f0b52d Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Tue, 16 Jan 2024 14:38:51 +0100 Subject: [PATCH 6/9] feat(ui-library): replacing onChange with blrChange --- packages/js-example-app/src/index.js | 6 ++++++ .../src/components/forms/select/index.stories.ts | 3 +-- .../src/components/forms/select/index.ts | 15 +++++++++++++-- 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index 7a758bd0b..eebee089e 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -1,5 +1,6 @@ import '@boiler/ui-library/dist/index.js'; import './style.scss'; +import { BlrSelect } from '@boiler/ui-library/src'; const toggleLoadingButton = document.querySelector('#toggleLoadingState'); const toggleDisabledState = document.querySelector('#toggleDisabledState'); @@ -61,3 +62,8 @@ blrCheckbox.addEventListener('blrFocus', () => { blrCheckbox.addEventListener('blrBlur', () => { addLog('blr-checkbox blurred'); }); + +BlrSelect.addEventListener('blrChange', () => { + addLog('blr-select changed'); +}); + diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts index d0463d614..054d7ec9d 100644 --- a/packages/ui-library/src/components/forms/select/index.stories.ts +++ b/packages/ui-library/src/components/forms/select/index.stories.ts @@ -37,7 +37,6 @@ const defaultParams: BlrSelectType = { arialabel: 'Select', selectId: 'selectId', name: 'select', - onChange: (event: Event) => console.log(event.type), }; export default { @@ -108,7 +107,7 @@ export default { options: { name: 'children (options)', description: - 'Enter an array containing information about the label, value and disabled prop for all options that are part of the select.', + 'Enter a list of html option elements containing information about the label, value and disabled prop for all options that are part of the select.', control: 'array', table: { category: 'Content / Settings', diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts index 43a1cf58b..ea18ce81d 100644 --- a/packages/ui-library/src/components/forms/select/index.ts +++ b/packages/ui-library/src/components/forms/select/index.ts @@ -31,7 +31,6 @@ export class BlrSelect extends LitElement { @property() disabled?: boolean; @property() size?: FormSizesType = 'md'; @property() required?: boolean; - @property() onChange?: (event: Event) => void; @property() onBlur?: HTMLElement['blur']; @property() onFocus?: HTMLElement['focus']; @@ -45,6 +44,8 @@ export class BlrSelect extends LitElement { @property() theme: ThemeType = 'Light'; + @property() blrChange?: () => void; + @state() protected isFocused = false; protected _optionElements: Element[] | undefined; @@ -64,6 +65,16 @@ export class BlrSelect extends LitElement { this.requestUpdate(); } + protected handleChange(event: Event) { + this.dispatchEvent( + new CustomEvent('blrChange', { + bubbles: true, + composed: true, + detail: { originalEvent: event }, + }) + ); + } + protected renderIcon(classes: DirectiveResult) { if (this.size) { const iconSizeVariant = getComponentConfigToken([ @@ -165,7 +176,7 @@ export class BlrSelect extends LitElement { name=${this.name || nothing} ?disabled=${this.disabled} ?required=${this.required} - @change=${this.onChange} + @change=${this.handleChange} @focus=${this.handleFocus} @blur=${this.handleBlur} > From e26585e97fee40d15e38c05431bf55225e03aeab Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Tue, 16 Jan 2024 15:10:59 +0100 Subject: [PATCH 7/9] removing dev dependencies --- packages/js-example-app/package.json | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/js-example-app/package.json b/packages/js-example-app/package.json index 1a186b2f4..bd9df10c3 100644 --- a/packages/js-example-app/package.json +++ b/packages/js-example-app/package.json @@ -14,10 +14,5 @@ "license": "ISC", "dependencies": { "@boiler/ui-library": "0.0.1" - }, - "devDependencies": { - "http-server": "^14.1.1", - "webpack": "^5.89.0", - "webpack-dev-server": "^4.15.1" } } From 7792eeeed3a31c45db25cc653afcf431897e709e Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Fri, 19 Jan 2024 10:25:51 +0100 Subject: [PATCH 8/9] feat(ui-library): removing unsed import statement --- packages/js-example-app/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index eebee089e..5a05aca8e 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -1,6 +1,5 @@ import '@boiler/ui-library/dist/index.js'; import './style.scss'; -import { BlrSelect } from '@boiler/ui-library/src'; const toggleLoadingButton = document.querySelector('#toggleLoadingState'); const toggleDisabledState = document.querySelector('#toggleDisabledState'); From c5722096caf7655a491d7eb19b0cb1b6ac4dcefb Mon Sep 17 00:00:00 2001 From: David Kennedy Date: Fri, 19 Jan 2024 13:49:20 +0100 Subject: [PATCH 9/9] feat(ui-library): adding custom event to blrSelect --- packages/js-example-app/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index 5a05aca8e..99ab1e38d 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -7,6 +7,7 @@ const logsContainer = document.querySelector('#logs'); const blrButton = document.getElementsByTagName('blr-text-button')[0]; const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0]; +const blrSelect = document.getElementsByTagName('blr-select')[0]; const addLog = (log) => { logsContainer.innerHTML = logsContainer.innerHTML + log + '
'; @@ -62,7 +63,6 @@ blrCheckbox.addEventListener('blrBlur', () => { addLog('blr-checkbox blurred'); }); -BlrSelect.addEventListener('blrChange', () => { +blrSelect.addEventListener('blrChange', (e) => { addLog('blr-select changed'); }); -