From d5b0bb7fe9f045fc434845a7379dec251473b012 Mon Sep 17 00:00:00 2001 From: ashk1996 <125904756+ashk1996@users.noreply.github.com> Date: Wed, 18 Sep 2024 10:42:09 +0200 Subject: [PATCH] fix(ui-library): component toggle-switch fixes (#1151) * fix(ui-library): checking pr * fix(ui-library): toggle switch component fixes * fix(ui-library): add hover states for active and inactive states * fix(ui-library): add more hover states for active and inactive states * fix(ui-library): update button icon and text test cases * fix(ui-library): input field number unit test case fixed * fix(ui-library): removed unused variable * fix(ui-library): add disabled and readonly state colors * fix(ui-library): pressed state and state changes fixed * fix(ui-library): eslint add new line --- .../src/components/button-icon/index.test.ts | 22 ++++--- .../src/components/button-text/index.test.ts | 18 ++++-- .../input-field-number/index.test.ts | 61 ++++++++++--------- .../src/components/toggle-switch/index.css.ts | 33 ++++++++-- .../src/components/toggle-switch/index.ts | 37 ++++++----- 5 files changed, 108 insertions(+), 63 deletions(-) diff --git a/packages/ui-library/src/components/button-icon/index.test.ts b/packages/ui-library/src/components/button-icon/index.test.ts index e1020c88d..26760b036 100644 --- a/packages/ui-library/src/components/button-icon/index.test.ts +++ b/packages/ui-library/src/components/button-icon/index.test.ts @@ -67,7 +67,7 @@ describe('blr-button-icon', () => { BlrButtonIconRenderFunction({ ...sampleParams, loading: true, - }) + }), ); const buttonIcon = querySelectorDeep('.blr-button-icon', element.getRootNode() as HTMLElement); @@ -81,7 +81,7 @@ describe('blr-button-icon', () => { BlrButtonIconRenderFunction({ ...sampleParams, loading: false, - }) + }), ); const buttonIcon = querySelectorDeep('.blr-button-icon', element.getRootNode() as HTMLElement); const loader = querySelectorDeep('blr-loader', buttonIcon?.getRootNode() as HTMLElement); @@ -142,11 +142,14 @@ describe('blr-button-icon', () => { const button = querySelectorDeep('span', element.getRootNode() as HTMLElement); let fired = false; - element.getRootNode()?.addEventListener('blrFocus', () => { + element.addEventListener('blrFocus', () => { fired = true; }); - button?.focus(); + // Simulate the focus event + if (button) { + button.dispatchEvent(new FocusEvent('focus')); + } expect(fired).to.be.true; }); @@ -172,12 +175,17 @@ describe('blr-button-icon', () => { const button = querySelectorDeep('span', element.getRootNode() as HTMLElement); let fired = false; - element.getRootNode()?.addEventListener('blrBlur', () => { + // Attach the listener for the custom blrBlur event + element.addEventListener('blrBlur', () => { fired = true; }); - button?.focus(); - button?.blur(); + expect(button).to.exist; + + if (button) { + button.dispatchEvent(new FocusEvent('focus')); + button.dispatchEvent(new FocusEvent('blur')); + } expect(fired).to.be.true; }); diff --git a/packages/ui-library/src/components/button-text/index.test.ts b/packages/ui-library/src/components/button-text/index.test.ts index e6e3b1af3..eaaf18fc1 100644 --- a/packages/ui-library/src/components/button-text/index.test.ts +++ b/packages/ui-library/src/components/button-text/index.test.ts @@ -220,11 +220,15 @@ describe('blr-button-text', () => { const button = querySelectorDeep('span', element.getRootNode() as HTMLElement); let fired = false; - element.getRootNode()?.addEventListener('blrFocus', () => { + element.addEventListener('blrFocus', () => { fired = true; }); - button?.focus(); + expect(button).to.exist; + + if (button) { + button.dispatchEvent(new FocusEvent('focus')); + } expect(fired).to.be.true; }); @@ -250,12 +254,16 @@ describe('blr-button-text', () => { const button = querySelectorDeep('span', element.getRootNode() as HTMLElement); let fired = false; - element.getRootNode()?.addEventListener('blrBlur', () => { + element.addEventListener('blrBlur', () => { fired = true; }); - button?.focus(); - button?.blur(); + expect(button).to.exist; + + if (button) { + button.dispatchEvent(new FocusEvent('focus')); + button.dispatchEvent(new FocusEvent('blur')); + } expect(fired).to.be.true; }); diff --git a/packages/ui-library/src/components/input-field-number/index.test.ts b/packages/ui-library/src/components/input-field-number/index.test.ts index 9dad2a2c9..17174b81c 100644 --- a/packages/ui-library/src/components/input-field-number/index.test.ts +++ b/packages/ui-library/src/components/input-field-number/index.test.ts @@ -3,7 +3,7 @@ import '@boiler/ui-library'; import { BlrInputFieldNumberRenderFunction } from './renderFunction.js'; import type { BlrInputFieldNumberType } from './index.js'; -import { fixture, expect, nextFrame, oneEvent } from '@open-wc/testing'; +import { aTimeout, fixture, expect, oneEvent } from '@open-wc/testing'; import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom'; import { getRandomString } from '../../utils/get-random.string.js'; import { BlrFocusEvent } from '../../globals/events.js'; @@ -50,7 +50,7 @@ describe('blr-input-field-number', () => { BlrInputFieldNumberRenderFunction({ ...sampleParams, placeholder: randomString, - }) + }), ); const input = querySelectorDeep('input', element.getRootNode() as HTMLElement); @@ -66,7 +66,7 @@ describe('blr-input-field-number', () => { BlrInputFieldNumberRenderFunction({ ...sampleParams, unit: undefined, - }) + }), ); const button = querySelectorDeep('button', element.getRootNode() as HTMLElement); @@ -83,7 +83,7 @@ describe('blr-input-field-number', () => { hintMessageIcon: 'blrInfo', hasError: true, errorMessageIcon: 'blrErrorFilled', - }) + }), ); const captionWrapper = querySelectorDeep('blr-input-field-number', element.getRootNode() as HTMLElement); @@ -105,7 +105,7 @@ describe('blr-input-field-number', () => { hasError: true, errorMessage: 'error', errorMessageIcon: undefined, - }) + }), ); const formCaption = querySelectorDeep('.blr-form-caption', element?.getRootNode() as HTMLElement); @@ -150,7 +150,9 @@ describe('blr-input-field-number', () => { }); for (const stepperVariant of ['split', 'horizontal', 'vertical'] as const) { - it(`has functional stepper buttons with aria labels - stepperVariant="${stepperVariant}"`, async () => { + it(`has functional stepper buttons with aria labels - stepperVariant="${stepperVariant}"`, async function () { + this.timeout(10000); + const className = 'custom-stepper-button'; const stepIncreaseAriaLabel = 'INC'; const stepDecreaseAriaLabel = 'DEC'; @@ -164,59 +166,60 @@ describe('blr-input-field-number', () => { stepDecreaseAriaLabel, step, value: 1, - }) + }), ); const input = querySelectorDeep('input', element.getRootNode() as HTMLElement); expect(input?.value).to.be.equal('1'); - // We have an initialized input at a chosen value of 1 + if (!input) throw new Error('Input element not found'); const incQuery = `button.${className}[aria-label="${stepIncreaseAriaLabel}"]`; const incButtons = querySelectorAllDeep(incQuery, element.getRootNode() as HTMLElement); expect(incButtons.length).to.be.equal(1); const incButton = incButtons[0]; - // We have exactly 1 stepper button that has our chosen increase aria label + if (!incButton) throw new Error('Increase button not found'); incButton.click(); - await nextFrame(); - expect(input?.value).to.be.equal('6'); - // Clicking the stepper button with the increase label increases the value by our chosen step (1 + 5 = 6) + await aTimeout(100); + expect(input.value).to.be.equal('6'); const decQuery = `button.${className}[aria-label="${stepDecreaseAriaLabel}"]`; const decButtons = querySelectorAllDeep(decQuery, element.getRootNode() as HTMLElement); expect(decButtons.length).to.be.equal(1); const decButton = decButtons[0]; - // We have exactly 1 stepper button that has our chosen decrease aria label + if (!decButton) throw new Error('Decrease button not found'); decButton.click(); - await nextFrame(); - expect(input?.value).to.be.equal('1'); - // Clicking the stepper button with the decrease label decreases the value by our chosen step (6 - 5 = 1) + await aTimeout(100); + expect(input.value).to.be.equal('1'); }); } - it('fires blrFocus and blrBlur events', async () => { + it('fires blrFocus and blrBlur events', async function () { + this.timeout(10000); + const element = await fixture( BlrInputFieldNumberRenderFunction({ ...sampleParams, - }) + }), ); const input = querySelectorDeep('input', element.getRootNode() as HTMLElement); + if (!input) throw new Error('Input element not found'); - setTimeout(() => { - input!.focus(); - }); - const focusEvent: BlrFocusEvent = await oneEvent(element, 'blrFocus'); - expect(focusEvent.detail.originalEvent).to.exist; + const focusEvent = new Event('focus', { bubbles: true }); + const focusPromise = oneEvent(element, 'blrFocus'); + input.dispatchEvent(focusEvent); + const focusResult: BlrFocusEvent = await focusPromise; + expect(focusResult.detail.originalEvent).to.exist; - // just finding something else to focus instead, it's not important what const stepper = querySelectorDeep('button', element.getRootNode() as HTMLElement); + if (!stepper) throw new Error('Stepper button not found'); - setTimeout(() => { - stepper!.focus(); - }); - const blurEvent: BlrFocusEvent = await oneEvent(element, 'blrBlur'); - expect(blurEvent.detail.originalEvent).to.exist; + const blurEvent = new Event('blur', { bubbles: true }); + const blurPromise = oneEvent(element, 'blrBlur'); + input.dispatchEvent(blurEvent); + const blurResult: BlrFocusEvent = await blurPromise; + expect(blurResult.detail.originalEvent).to.exist; }); }); diff --git a/packages/ui-library/src/components/toggle-switch/index.css.ts b/packages/ui-library/src/components/toggle-switch/index.css.ts index c2376101e..4bfce211a 100644 --- a/packages/ui-library/src/components/toggle-switch/index.css.ts +++ b/packages/ui-library/src/components/toggle-switch/index.css.ts @@ -78,10 +78,12 @@ export const staticStyles = css` & > .toggle-switch-unselect { left: 0; + pointer-events: none; } & > .toggle-switch-select { right: 0; + pointer-events: none; } &:not(.checked) { @@ -140,8 +142,10 @@ export const staticStyles = css` background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Active.Rest}; } - & > .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.rest}; + & > .toggle-content-col { + & > .blr-form-label-inline { + color: ${formlabel.inlinelabel.textcolor.rest}; + } } &:not(.checked) { @@ -214,6 +218,7 @@ export const staticStyles = css` .knob { outline-color: ${ToggleSwitch.Control.Knob.BorderColor.Inactive.ReadOnly}; + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.ReadOnly}; } .toggle-icon > .toggle-icon-class { @@ -307,10 +312,8 @@ export const staticStyles = css` } &.disabled { - & > .toggle-content-col { - & > .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.disabled}; - } + .blr-form-label-inline { + color: ${formlabel.inlinelabel.textcolor.disabled}; } } @@ -348,6 +351,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.SM.Inactive.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Inactive.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Hover}; @@ -372,6 +376,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.Disabled}); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -382,6 +387,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.SM.Inactive.ReadOnly}); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.ReadOnly}; } } } @@ -398,6 +404,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.SM.Active.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.SM.Active.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Active.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Hover}; @@ -422,6 +429,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.SM.Active.Disabled}); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -432,6 +440,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.SM.Active.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.SM.Active.ReadOnly}); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Active.ReadOnly}; } } } @@ -490,6 +499,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.MD.Inactive.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Inactive.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Hover}; @@ -514,6 +524,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.Disabled} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -524,6 +535,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.MD.Inactive.ReadOnly} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.ReadOnly}; } } } @@ -540,6 +552,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.MD.Active.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.MD.Active.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Active.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Hover}; @@ -564,6 +577,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.MD.Active.Disabled} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -574,6 +588,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.MD.Active.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.MD.Active.ReadOnly} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Active.ReadOnly}; } } } @@ -629,6 +644,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.LG.Inactive.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Inactive.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Hover}; @@ -653,6 +669,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.Disabled} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -663,6 +680,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.LG.Inactive.ReadOnly} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.ReadOnly}; } } } @@ -679,6 +697,7 @@ export const staticStyles = css` &.hover { outline-width: ${ToggleSwitch.Control.Container.BorderWidth.LG.Active.Hover}; outline-offset: calc(${ToggleSwitch.Control.Container.BorderWidth.LG.Active.Hover} * -1); + background-color: ${ToggleSwitch.Control.Container.BackgroundColor.Active.Hover}; .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Hover}; @@ -703,6 +722,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Disabled}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.LG.Active.Disabled} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Inactive.Disabled}; } } @@ -713,6 +733,7 @@ export const staticStyles = css` .knob { outline-width: ${ToggleSwitch.Control.Knob.BorderWidth.LG.Active.ReadOnly}; outline-offset: calc(${ToggleSwitch.Control.Knob.BorderWidth.LG.Active.ReadOnly} * -1); + background-color: ${ToggleSwitch.Control.Knob.BackgroundColor.Active.ReadOnly}; } } } diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts index 5655b72be..56188e46e 100644 --- a/packages/ui-library/src/components/toggle-switch/index.ts +++ b/packages/ui-library/src/components/toggle-switch/index.ts @@ -11,6 +11,7 @@ import { calculateIconName } from '../../utils/calculate-icon-name.js'; import { getComponentConfigToken } from '../../utils/get-component-config-token.js'; import { FormSizesType } from '../../globals/types.js'; import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction.js'; +import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction.js'; import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction.js'; import { staticStyles } from './index.css.js'; import { @@ -79,7 +80,7 @@ export class BlrToggleSwitch extends LitElementCustom { createBlrCheckedChangeEvent({ originalEvent: event, checkedState: this.currentCheckedState, - }) + }), ); } } @@ -87,14 +88,14 @@ export class BlrToggleSwitch extends LitElementCustom { @state() protected accessor focused = false; protected handleFocus = (event: FocusEvent) => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.focused = true; this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); } }; protected handleBlur = (event: FocusEvent) => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.focused = false; this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); } @@ -125,7 +126,7 @@ export class BlrToggleSwitch extends LitElementCustom { protected handleRelease = () => { if (!this.disabled && !this.readonly) { - this.pressed = true; + this.pressed = false; } }; @@ -169,6 +170,18 @@ export class BlrToggleSwitch extends LitElementCustom { this.sizeVariant.toUpperCase(), ]).toLowerCase() as FormSizesType; + const captionContent = html` + ${this.hasHint && (this.hintMessage || this.hintMessageIcon) + ? BlrFormCaptionRenderFunction({ + variant: 'hint', + theme: this.theme, + sizeVariant: this.sizeVariant, + message: this.hintMessage, + icon: this.hintMessageIcon, + }) + : nothing} + `; + return html`
${this.hasLabel @@ -180,13 +193,7 @@ export class BlrToggleSwitch extends LitElementCustom { })}` : nothing} ${this.hasHint && this.hintMessage - ? BlrFormCaptionRenderFunction({ - message: this.hintMessage, - variant: 'hint', - icon: this.hintMessageIcon, - sizeVariant: this.sizeVariant || 'sm', - theme: this.theme, - }) + ? BlrFormCaptionGroupRenderFunction({ theme: this.theme, sizeVariant: this.sizeVariant }, captionContent) : nothing}
{ if (event.code === 'Space') { - //this.handlePress(); + this.handlePress(); } }} @keyup=${(event: KeyboardEvent) => { @@ -227,8 +234,6 @@ export class BlrToggleSwitch extends LitElementCustom { ?readonly=${this.readonly} .checked=${this.currentCheckedState || nothing} @change=${this.handleChange} - @focus=${this.handleFocus} - @blur=${this.handleBlur} tabindex="-1" /> @@ -244,7 +249,7 @@ export class BlrToggleSwitch extends LitElementCustom { }, { 'aria-hidden': true, - } + }, )} @@ -256,7 +261,7 @@ export class BlrToggleSwitch extends LitElementCustom { }, { 'aria-hidden': true, - } + }, )}