From ba97bc911740a5ca1dd8744a7367b4671255f493 Mon Sep 17 00:00:00 2001 From: angsherpa456 Date: Tue, 6 Feb 2024 19:11:37 +0100 Subject: [PATCH] fix(ui): add eventListeners to textinput (#482) * fix(ui-library): removing aria-label from form caption group --------- Co-authored-by: christian.b.hoffmann docs:Update GETSTARTED.md (#900) Added pre-refinement to meetings Signed-off-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com> --- packages/js-example-app/src/assets/index.html | 5 ++ packages/js-example-app/src/index.js | 13 ++++ .../forms/text-input/index.stories.ts | 73 ++++++------------- .../src/components/forms/text-input/index.ts | 48 ++++++++++-- 4 files changed, 79 insertions(+), 60 deletions(-) diff --git a/packages/js-example-app/src/assets/index.html b/packages/js-example-app/src/assets/index.html index 5ffb3dafa..613b01a00 100644 --- a/packages/js-example-app/src/assets/index.html +++ b/packages/js-example-app/src/assets/index.html @@ -110,6 +110,11 @@

Vanilla JS Example Application

+
+

Text Input

+ +
+

Tab Bar

{ logsContainer.innerHTML = logsContainer.innerHTML + log + '
'; @@ -66,3 +67,15 @@ blrCheckbox.addEventListener('blrBlur', () => { blrSelect.addEventListener('blrChange', (e) => { addLog('blr-select changed'); }); + +blrTextInput.addEventListener('blrFocus', (e) => { + addLog('blr-text-input focused'); +}); + +blrTextInput.addEventListener('blrBlur', (e) => { + addLog('blr-text-input blurred'); +}); + +blrTextInput.addEventListener('blrChange', (e) => { + addLog('blr-text-input changed'); +}); diff --git a/packages/ui-library/src/components/forms/text-input/index.stories.ts b/packages/ui-library/src/components/forms/text-input/index.stories.ts index 9045cf85e..654401131 100644 --- a/packages/ui-library/src/components/forms/text-input/index.stories.ts +++ b/packages/ui-library/src/components/forms/text-input/index.stories.ts @@ -4,7 +4,6 @@ import { BlrTextInputRenderFunction } from './renderFunction'; import { FormSizes, InputTypes } from '../../../globals/constants'; import { PureIconKeys } from '@boiler/icons'; import { Themes } from '../../../foundation/_tokens-generated/index.themes'; -import { action } from '@storybook/addon-actions'; import { html } from 'lit-html'; // this loads the all components instances and registers their html tags @@ -227,34 +226,34 @@ export default { }, }, // Events - onChange: { - name: 'onChange', + blrChange: { + name: 'blrChange', description: 'Fires when the value changes.', - action: 'onChange', + action: 'blrChange', table: { category: 'Events', }, }, - onSelect: { - name: 'onSelect', + blrSelect: { + name: 'blrSelect', description: 'Fires when some text is selected.', - action: 'onSelect', + action: 'blrSelect', table: { category: 'Events', }, }, - onFocus: { - name: 'onFocus', + blrFocus: { + name: 'blrFocus', description: 'Fires when the component is focused.', - action: 'onFocus', + action: 'blrFocus', table: { category: 'Events', }, }, - onBlur: { - name: 'onBlur', + blrBlur: { + name: 'blrBlur', description: 'Fires when the component lost focus.', - action: 'onBlur', + action: 'blrBlur', table: { category: 'Events', }, @@ -323,36 +322,6 @@ Text Input allows users to enter textual information or data into a designated a export const BlrTextInput = (params: BlrTextInputType) => BlrTextInputRenderFunction(params); BlrTextInput.storyName = 'Text Input'; -const args: BlrTextInputType = { - theme: 'Light', - size: 'md', - type: 'text', - placeholder: 'Placeholder-text', - value: '', - maxLength: 200, - hasLabel: true, - label: 'Label-text', - labelAppendix: '(Appendix)', - showInputIcon: true, - inputIcon: 'blr360', - hasHint: false, - hintMessage: 'This is a small hint message', - hintIcon: 'blrInfo', - disabled: false, - readonly: false, - required: false, - hasError: false, - errorMessage: '', - errorIcon: undefined, - arialabel: 'TextInput', - textInputId: 'Input Id', - name: 'TextInput', - onChange: () => action('onChange'), - onSelect: () => action('onSelect'), - onFocus: () => action('onFocus'), - onBlur: () => action('onBlur'), -}; -BlrTextInput.args = args; // Default parameters for Text Input component const defaultParams: BlrTextInputType = { size: 'md', @@ -360,20 +329,18 @@ const defaultParams: BlrTextInputType = { value: '', maxLength: 140, label: 'Label-text', - labelAppendix: '', + labelAppendix: '(Appendix)', hasHint: false, hintMessage: 'This is a small hint message', hintIcon: 'blrInfo', arialabel: 'TextInput', - name: '', + name: 'TextInput', theme: 'Light', - textInputId: '', + textInputId: 'Input Id', hasLabel: true, - required: false, disabled: false, readonly: false, - hasError: false, errorMessage: '', errorIcon: 'blrInfo', @@ -382,6 +349,8 @@ const defaultParams: BlrTextInputType = { showInputIcon: true, }; +BlrTextInput.args = defaultParams; + //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook const argTypesToDisable = [ 'theme', @@ -408,10 +377,10 @@ const argTypesToDisable = [ 'errorIcon', 'arialabel', 'name', - 'onChange', - 'onFocus', - 'onBlur', - 'onSelect', + 'blrChange', + 'blrSelect', + 'blrFocus', + 'blrBlur', ]; const generateDisabledArgTypes = (argTypes: string[]) => { diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/forms/text-input/index.ts index 72b5eb783..1c363f356 100644 --- a/packages/ui-library/src/components/forms/text-input/index.ts +++ b/packages/ui-library/src/components/forms/text-input/index.ts @@ -32,10 +32,6 @@ export class BlrTextInput extends LitElement { @property() readonly?: boolean; @property() size?: FormSizesType = 'md'; @property() required?: boolean; - @property() onChange?: HTMLElement['oninput']; - @property() onBlur?: HTMLElement['blur']; - @property() onFocus?: HTMLElement['focus']; - @property() onSelect?: HTMLElement['onselect']; @property() maxLength?: number; @property() pattern?: string; @property() hasError?: boolean; @@ -48,9 +44,14 @@ export class BlrTextInput extends LitElement { @property() errorIcon?: SizelessIconType; @property() hasLabel!: boolean; @property() name!: string; - @property() theme: ThemeType = 'Light'; + // these are not triggered directly but allows us to map it internally and bve typesafe + @property() blrFocus?: () => void; + @property() blrBlur?: () => void; + @property() blrChange?: () => void; + @property() blrSelect?: () => void; + @state() protected currentType: InputTypes = this.type; @state() protected isFocused = false; @@ -59,11 +60,41 @@ export class BlrTextInput extends LitElement { }; protected handleFocus = () => { - this.isFocused = true; + if (!this.disabled) { + this.isFocused = true; + this.dispatchEvent( + new CustomEvent('blrFocus', { bubbles: true, composed: true, detail: { originalEvent: event } }) + ); + } }; protected handleBlur = () => { - this.isFocused = false; + if (!this.disabled) { + this.isFocused = false; + this.dispatchEvent( + new CustomEvent('blrBlur', { bubbles: true, composed: true, detail: { originalEvent: event } }) + ); + } + }; + + protected handleChange = (event: Event) => { + if (!this.disabled) { + this.dispatchEvent( + new CustomEvent('blrChange', { bubbles: true, composed: true, detail: { originalEvent: event } }) + ); + } + }; + + protected handleSelect = (event: Event) => { + if (!this.disabled) { + this.dispatchEvent( + new CustomEvent('blrSelect', { + bubbles: true, + composed: true, + detail: { originalEvent: event }, + }) + ); + } }; protected render() { @@ -158,12 +189,13 @@ export class BlrTextInput extends LitElement { ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" - @input=${this.onChange} + @input=${this.handleChange} @blur=${this.handleBlur} @focus=${this.handleFocus} maxlength="${this.maxLength}" pattern="${this.pattern}" hasError="${this.hasError}" + @select=${this.handleSelect} />
${this.showInputIcon && !wasInitialPasswordField && !this.readonly