From 56cbb10652cbd0ba853e8a9c85f4172355bab31f Mon Sep 17 00:00:00 2001 From: Aishwarya Karkera Date: Thu, 27 Mar 2025 15:11:01 +0100 Subject: [PATCH 1/3] fix(ui-library): radio component fixes --- .../src/components/radio/index.css.ts | 24 +++++++++--- .../src/components/radio/index.stories.ts | 39 ++++++------------- .../ui-library/src/components/radio/index.ts | 31 ++++++--------- 3 files changed, 43 insertions(+), 51 deletions(-) diff --git a/packages/ui-library/src/components/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts index 5413cfba1..dd9da9b3c 100644 --- a/packages/ui-library/src/components/radio/index.css.ts +++ b/packages/ui-library/src/components/radio/index.css.ts @@ -1,6 +1,6 @@ import { css } from "../../utils/css-in-ts/nested-typesafe-css-literals.js"; -import { ComponentThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js"; +import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/iterator.generated.js"; export const staticStyles = css` ${ComponentThemeIterator((theme, cmp, css) => { @@ -10,6 +10,7 @@ export const staticStyles = css` .blr-radio.${theme} { all: initial; margin: 0 !important; + max-width: 100%; display: flex; flex-grow: 1; transition: all 0.25s ease 0s; @@ -176,10 +177,8 @@ export const staticStyles = css` } } - &:focus { + &:focus:not(:active) { background-color: ${radio.control.container.bgcolor.inactive.focus}; - outline: black solid 2px; - outline-offset: 2px; &::before { content: ""; @@ -230,7 +229,7 @@ export const staticStyles = css` } } - &:focus { + &:focus:not(:active) { background-color: ${radio.control.container.bgcolor.active.focus}; &::before { @@ -358,4 +357,19 @@ export const staticStyles = css` } `; })} + + ${SemanticThemeIterator((theme, sem, css) => { + const { global } = sem; + + return css` + .blr-radio.${theme} { + .input-control { + &:focus:not(:active) { + outline: ${global.focusring.border.color} ${global.focusring.border.width} ${global.focusring.border.style}; + outline-offset: 2px; + } + } + } + `; + })} `; diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts index 19bf1da0d..e5d2ba048 100644 --- a/packages/ui-library/src/components/radio/index.stories.ts +++ b/packages/ui-library/src/components/radio/index.stories.ts @@ -113,24 +113,6 @@ export default { category: 'Validations', }, }, - errorMessage: { - name: 'errorMessage', - description: 'Enter string used used as error message.', - table: { - category: 'Validations', - }, - if: { arg: 'hasError', eq: true }, - }, - errorMessageIcon: { - name: 'errorMessageIcon', - description: 'Select an icon which is displayed in front of the error message.', - table: { - category: 'Validations', - }, - options: [undefined, ...PureIconKeys], - control: { type: 'select' }, - if: { arg: 'hasError', eq: true }, - }, ariaLabel: { name: 'ariaLabel', description: @@ -154,9 +136,9 @@ export default { }, control: { type: 'text', label: 'Radio' }, }, - blrChange: { + blrClick: { description: 'Fires when the value changes.', - action: 'blrChange', + action: 'blrClick', table: { disable: false, category: 'Events', @@ -229,14 +211,10 @@ const args: BlrRadioType & { disabled: false, required: false, hasError: false, - errorMessage: '', ariaLabel: '', - errorMessageIcon: undefined, + optionId: 'optionId', radioId: 'radioId', name: 'Radio Button', - blrSelectedValueChange: () => action('blrSelectedValueChangeEvent'), - blrFocus: () => action('focused'), - blrBlur: () => action('blrBlr'), }; BlrRadio.args = args; @@ -254,6 +232,9 @@ export const SizeVariant = () => { ...args, sizeVariant: 'sm', label: 'Radio SM', + blrFocus: action('blrFocus'), + blrBlur: action('blrBlur'), + blrClick: action('blrClick'), })}
@@ -261,6 +242,9 @@ export const SizeVariant = () => { ...args, sizeVariant: 'md', label: 'Radio MD', + blrFocus: action('blrFocus'), + blrBlur: action('blrBlur'), + blrClick: action('blrClick'), })}
@@ -268,6 +252,9 @@ export const SizeVariant = () => { ...args, sizeVariant: 'lg', label: 'Radio LG', + blrFocus: action('blrFocus'), + blrBlur: action('blrBlur'), + blrClick: action('blrClick'), })}
`; @@ -373,8 +360,6 @@ export const FormCaptionGroup = () => { hasError: true, hasHint: true, label: 'Hint and error message', - errorMessage: "OMG it's an error", - errorMessageIcon: 'blrErrorFilled', })} `; diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 5677f76b6..0fca2c15c 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -14,10 +14,10 @@ import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inlin import { createBlrBlurEvent, createBlrFocusEvent, - createBlrSelectedValueChangeEvent, + createBlrClickEvent, BlrBlurEvent, BlrFocusEvent, - BlrCheckedChangeEvent, + BlrClickEvent, } from '../../globals/events.js'; import { LitElementCustom } from '../../utils/lit/element.js'; import { SignalHub } from '../../utils/lit/signals.js'; @@ -28,7 +28,7 @@ import { SanitizationController } from '../../utils/lit/sanitization-controller. /** * @fires blrFocus Radio received focus * @fires blrBlur Radio lost focus - * @fires blrSelectedValueChangeEvent Radio selected value changed + * @fires blrClick Radio selected value changed */ const propertySanitizer = makeSanitizer((unsanitized: BlrRadioType) => ({ @@ -64,6 +64,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti protected accessor _radioNode!: HTMLInputElement; @property() accessor optionId!: string; + @property() accessor radioId!: string; @property() accessor label!: string; @property({ type: Boolean }) accessor disabled: boolean | undefined; @property({ type: Boolean }) accessor checked: boolean | undefined; @@ -71,8 +72,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti @property() accessor sizeVariant: InputSizesType | undefined; @property({ type: Boolean }) accessor required: boolean | undefined; @property({ type: Boolean }) accessor hasError: boolean | undefined; - @property() accessor errorMessage: string | undefined; - @property() accessor errorMessageIcon: SizelessIconType | undefined; @property({ type: Boolean }) accessor hasHint: boolean | undefined; @property() accessor hintMessage: string | undefined; @property() accessor hintMessageIcon: SizelessIconType | undefined; @@ -91,14 +90,11 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti } }; - protected handleClick(event: Event) { + protected handleClick = (event: MouseEvent | KeyboardEvent) => { event.preventDefault(); if (!this.disabled) { - const changeEvent = createBlrSelectedValueChangeEvent({ - originalEvent: event, - selectedValue: this._radioNode.value, - }); + const changeEvent = createBlrClickEvent({ originalEvent: event }); this.dispatchEvent(changeEvent); @@ -106,7 +102,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti this.checked = true; } } - } + }; protected render() { const sanitized = this.sanitizedController.values; @@ -137,15 +133,13 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti ` : nothing} - ${this.hasError && (this.errorMessage || this.errorMessageIcon) + ${this.hasError ? html`
${BlrFormCaptionRenderFunction({ variant: 'error', theme: sanitized.theme, sizeVariant: sanitized.sizeVariant, - message: this.errorMessage, - icon: this.errorMessageIcon, })}
` @@ -158,6 +152,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti id=${id ? id : ''} class="${classes} input-control" type="radio" + value="${ifDefined(this.value)}" name="${ifDefined(this.name)}" ?disabled=${this.disabled} ?data-has-error=${this.hasError || false} @@ -175,8 +170,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti labelSize: sanitized.sizeVariant, theme: sanitized.theme, })} - ${(this.hasHint && (this.hintMessageIcon || this.hintMessage)) || - (this.hasError && (this.errorMessageIcon || this.errorMessage)) + ${(this.hasHint && (this.hintMessageIcon || this.hintMessage)) || this.hasError ? BlrFormCaptionGroupRenderFunction( { sizeVariant: sanitized.sizeVariant, theme: sanitized.theme }, captionContent, @@ -203,9 +197,8 @@ export type PublicReactiveProperties = { sizeVariant: InputSizesType | undefined; required: boolean | undefined; hasError: boolean | undefined; - errorMessage: string | undefined; - errorMessageIcon: SizelessIconType | undefined; hasHint: boolean | undefined; + radioId: string | undefined; hintMessage: string | undefined; hintMessageIcon: SizelessIconType | undefined; value: string | undefined; @@ -218,5 +211,5 @@ export type PublicMethods = unknown; export type BlrRadioEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; blrBlur?: (event: BlrBlurEvent) => void; - blrSelectedValueChangeEvent?: (event: BlrCheckedChangeEvent) => void; + blrClick?: (event: BlrClickEvent) => void; }; From f4454488390f062f0c6b2d40559c2a25197da667 Mon Sep 17 00:00:00 2001 From: Aishwarya Karkera Date: Wed, 30 Apr 2025 12:06:31 +0200 Subject: [PATCH 2/3] fix(ui-library): radio componenet unit test and size variant fixes --- .../src/components/radio/index.css.ts | 528 +++++++++++++----- .../src/components/radio/index.stories.ts | 10 +- .../src/components/radio/index.test.ts | 12 +- .../ui-library/src/components/radio/index.ts | 32 +- 4 files changed, 419 insertions(+), 163 deletions(-) diff --git a/packages/ui-library/src/components/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts index dd9da9b3c..bf5a10e46 100644 --- a/packages/ui-library/src/components/radio/index.css.ts +++ b/packages/ui-library/src/components/radio/index.css.ts @@ -57,6 +57,122 @@ export const staticStyles = css` .input-control { margin-top: ${radio.controlwrapper.paddingtop.sm}; + background-color: ${radio.control.container.bgcolor.inactive.rest}; + width: ${radio.control.container.size.sm}; + min-width: ${radio.control.container.size.sm}; + height: ${radio.control.container.size.sm}; + min-height: ${radio.control.container.size.sm}; + + &::before { + background-color: ${radio.control.icon.iconcolor.inactive.rest}; + width: ${radio.control.icon.iconsize.sm.inactive.rest}; + height: ${radio.control.icon.iconsize.sm.inactive.rest}; + } + + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.inactive.hover}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.hover}; + width: ${radio.control.icon.iconsize.sm.inactive.hover}; + height: ${radio.control.icon.iconsize.sm.inactive.hover}; + } + } + + &:active { + background-color: ${radio.control.container.bgcolor.inactive.pressed}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.pressed}; + width: ${radio.control.icon.iconsize.sm.inactive.pressed}; + height: ${radio.control.icon.iconsize.sm.inactive.pressed}; + } + } + + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.inactive.focus}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.focus}; + width: ${radio.control.icon.iconsize.sm.inactive.focus}; + height: ${radio.control.icon.iconsize.sm.inactive.focus}; + } + } + } + + &.checked, + &:checked { + background-color: ${radio.control.container.bgcolor.active.rest}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.rest}; + width: ${radio.control.icon.iconsize.sm.active.rest}; + height: ${radio.control.icon.iconsize.sm.active.rest}; + } + + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.active.hover}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.hover}; + width: ${radio.control.icon.iconsize.sm.active.hover}; + height: ${radio.control.icon.iconsize.sm.active.hover}; + } + } + + &:active { + background-color: ${radio.control.container.bgcolor.active.pressed}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.pressed}; + width: ${radio.control.icon.iconsize.sm.active.pressed}; + height: ${radio.control.icon.iconsize.sm.active.pressed}; + } + } + + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.active.focus}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.focus}; + width: ${radio.control.icon.iconsize.sm.active.focus}; + height: ${radio.control.icon.iconsize.sm.active.focus}; + } + } + } + + &:disabled { + background-color: ${radio.control.container.bgcolor.active.disabled}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.disabled}; + width: ${radio.control.icon.iconsize.sm.active.disabled}; + height: ${radio.control.icon.iconsize.sm.active.disabled}; + } + } + } + + &:disabled { + cursor: not-allowed; + background-color: ${radio.control.container.bgcolor.inactive.disabled}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.disabled}; + width: ${radio.control.icon.iconsize.sm.inactive.disabled}; + height: ${radio.control.icon.iconsize.sm.inactive.disabled}; + } + } } .label-wrapper { @@ -83,6 +199,122 @@ export const staticStyles = css` .input-control { margin-top: ${radio.controlwrapper.paddingtop.md}; + background-color: ${radio.control.container.bgcolor.inactive.rest}; + width: ${radio.control.container.size.md}; + min-width: ${radio.control.container.size.md}; + height: ${radio.control.container.size.md}; + min-height: ${radio.control.container.size.md}; + + &::before { + background-color: ${radio.control.icon.iconcolor.inactive.rest}; + width: ${radio.control.icon.iconsize.md.inactive.rest}; + height: ${radio.control.icon.iconsize.md.inactive.rest}; + } + + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.inactive.hover}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.hover}; + width: ${radio.control.icon.iconsize.md.inactive.hover}; + height: ${radio.control.icon.iconsize.md.inactive.hover}; + } + } + + &:active { + background-color: ${radio.control.container.bgcolor.inactive.pressed}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.pressed}; + width: ${radio.control.icon.iconsize.md.inactive.pressed}; + height: ${radio.control.icon.iconsize.md.inactive.pressed}; + } + } + + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.inactive.focus}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.focus}; + width: ${radio.control.icon.iconsize.md.inactive.focus}; + height: ${radio.control.icon.iconsize.md.inactive.focus}; + } + } + } + + &.checked, + &:checked { + background-color: ${radio.control.container.bgcolor.active.rest}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.rest}; + width: ${radio.control.icon.iconsize.md.active.rest}; + height: ${radio.control.icon.iconsize.md.active.rest}; + } + + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.active.hover}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.hover}; + width: ${radio.control.icon.iconsize.md.active.hover}; + height: ${radio.control.icon.iconsize.md.active.hover}; + } + } + + &:active { + background-color: ${radio.control.container.bgcolor.active.pressed}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.pressed}; + width: ${radio.control.icon.iconsize.md.active.pressed}; + height: ${radio.control.icon.iconsize.md.active.pressed}; + } + } + + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.active.focus}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.focus}; + width: ${radio.control.icon.iconsize.md.active.focus}; + height: ${radio.control.icon.iconsize.md.active.focus}; + } + } + } + + &:disabled { + background-color: ${radio.control.container.bgcolor.active.disabled}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.disabled}; + width: ${radio.control.icon.iconsize.md.active.disabled}; + height: ${radio.control.icon.iconsize.md.active.disabled}; + } + } + } + + &:disabled { + cursor: not-allowed; + background-color: ${radio.control.container.bgcolor.inactive.disabled}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.disabled}; + width: ${radio.control.icon.iconsize.md.inactive.disabled}; + height: ${radio.control.icon.iconsize.md.inactive.disabled}; + } + } } .label-wrapper { @@ -109,166 +341,138 @@ export const staticStyles = css` .input-control { margin-top: ${radio.controlwrapper.paddingtop.lg}; - } - - .label-wrapper { - padding-top: ${radio.contentcol.paddingtop.lg}; - gap: ${radio.contentcol.itemspacing.lg}; - - .caption-wrapper { - padding: ${formcaption.container.padding.lg}; - gap: ${formcaption.container.itemspacing.lg}; - } + background-color: ${radio.control.container.bgcolor.inactive.rest}; + width: ${radio.control.container.size.lg}; + min-width: ${radio.control.container.size.lg}; + height: ${radio.control.container.size.lg}; + min-height: ${radio.control.container.size.lg}; - .blr-form-label-inline { - font-family: ${formlabel.inlinelabel.typography.lg.fontFamily}, sans-serif; - font-weight: ${formlabel.inlinelabel.typography.lg.fontWeight}; - line-height: ${formlabel.inlinelabel.typography.lg.lineHeight}; - font-size: ${formlabel.inlinelabel.typography.lg.fontSize}; + &::before { + background-color: ${radio.control.icon.iconcolor.inactive.rest}; + width: ${radio.control.icon.iconsize.lg.inactive.rest}; + height: ${radio.control.icon.iconsize.lg.inactive.rest}; } - } - } - - .input-control { - background-color: ${radio.control.container.bgcolor.inactive.rest}; - width: ${radio.control.container.size.sm}; - min-width: ${radio.control.container.size.sm}; - height: ${radio.control.container.size.sm}; - min-height: ${radio.control.container.size.sm}; - - &::before { - background-color: ${radio.control.icon.iconcolor.inactive.rest}; - width: ${radio.control.icon.iconsize.sm.inactive.rest}; - height: ${radio.control.icon.iconsize.sm.inactive.rest}; - } - - &:not(.disabled) { - &:hover { - background-color: ${radio.control.container.bgcolor.inactive.hover}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.inactive.hover}; - width: ${radio.control.icon.iconsize.sm.inactive.hover}; - height: ${radio.control.icon.iconsize.sm.inactive.hover}; - } + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.inactive.hover}; - & + .label-wrapper { - .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.hover}; + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.hover}; + width: ${radio.control.icon.iconsize.lg.inactive.hover}; + height: ${radio.control.icon.iconsize.lg.inactive.hover}; } } - } - &:active { - background-color: ${radio.control.container.bgcolor.inactive.pressed}; + &:active { + background-color: ${radio.control.container.bgcolor.inactive.pressed}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.inactive.pressed}; - width: ${radio.control.icon.iconsize.sm.inactive.pressed}; - height: ${radio.control.icon.iconsize.sm.inactive.pressed}; + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.pressed}; + width: ${radio.control.icon.iconsize.lg.inactive.pressed}; + height: ${radio.control.icon.iconsize.lg.inactive.pressed}; + } } - & + .label-wrapper { - .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.pressed}; + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.inactive.focus}; + + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.inactive.focus}; + width: ${radio.control.icon.iconsize.lg.inactive.focus}; + height: ${radio.control.icon.iconsize.lg.inactive.focus}; } } } - &:focus:not(:active) { - background-color: ${radio.control.container.bgcolor.inactive.focus}; + &.checked, + &:checked { + background-color: ${radio.control.container.bgcolor.active.rest}; &::before { content: ""; - background-color: ${radio.control.icon.iconcolor.inactive.focus}; - width: ${radio.control.icon.iconsize.sm.inactive.focus}; - height: ${radio.control.icon.iconsize.sm.inactive.focus}; + background-color: ${radio.control.icon.iconcolor.active.rest}; + width: ${radio.control.icon.iconsize.lg.active.rest}; + height: ${radio.control.icon.iconsize.lg.active.rest}; } - & + .label-wrapper { - .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.focus}; - } - } - } - } - - &.checked, - &:checked { - background-color: ${radio.control.container.bgcolor.active.rest}; + &:not(.disabled) { + &:hover { + background-color: ${radio.control.container.bgcolor.active.hover}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.active.rest}; - width: ${radio.control.icon.iconsize.sm.active.rest}; - height: ${radio.control.icon.iconsize.sm.active.rest}; - } + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.hover}; + width: ${radio.control.icon.iconsize.lg.active.hover}; + height: ${radio.control.icon.iconsize.lg.active.hover}; + } + } - &:not(.disabled) { - &:hover { - background-color: ${radio.control.container.bgcolor.active.hover}; + &:active { + background-color: ${radio.control.container.bgcolor.active.pressed}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.active.hover}; - width: ${radio.control.icon.iconsize.sm.active.hover}; - height: ${radio.control.icon.iconsize.sm.active.hover}; + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.pressed}; + width: ${radio.control.icon.iconsize.lg.active.pressed}; + height: ${radio.control.icon.iconsize.lg.active.pressed}; + } } - } - &:active { - background-color: ${radio.control.container.bgcolor.active.pressed}; + &:focus:not(:active) { + background-color: ${radio.control.container.bgcolor.active.focus}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.active.pressed}; - width: ${radio.control.icon.iconsize.sm.active.pressed}; - height: ${radio.control.icon.iconsize.sm.active.pressed}; + &::before { + content: ""; + background-color: ${radio.control.icon.iconcolor.active.focus}; + width: ${radio.control.icon.iconsize.lg.active.focus}; + height: ${radio.control.icon.iconsize.lg.active.focus}; + } } } - &:focus:not(:active) { - background-color: ${radio.control.container.bgcolor.active.focus}; + &:disabled { + background-color: ${radio.control.container.bgcolor.active.disabled}; &::before { content: ""; - background-color: ${radio.control.icon.iconcolor.active.focus}; - width: ${radio.control.icon.iconsize.sm.active.focus}; - height: ${radio.control.icon.iconsize.sm.active.focus}; + background-color: ${radio.control.icon.iconcolor.active.disabled}; + width: ${radio.control.icon.iconsize.lg.active.disabled}; + height: ${radio.control.icon.iconsize.lg.active.disabled}; } } } &:disabled { - background-color: ${radio.control.container.bgcolor.active.disabled}; + cursor: not-allowed; + background-color: ${radio.control.container.bgcolor.inactive.disabled}; &::before { content: ""; - background-color: ${radio.control.icon.iconcolor.active.disabled}; - width: ${radio.control.icon.iconsize.sm.active.disabled}; - height: ${radio.control.icon.iconsize.sm.active.disabled}; + background-color: ${radio.control.icon.iconcolor.inactive.disabled}; + width: ${radio.control.icon.iconsize.lg.inactive.disabled}; + height: ${radio.control.icon.iconsize.lg.inactive.disabled}; } } } - &:disabled { - cursor: not-allowed; - background-color: ${radio.control.container.bgcolor.inactive.disabled}; + .label-wrapper { + padding-top: ${radio.contentcol.paddingtop.lg}; + gap: ${radio.contentcol.itemspacing.lg}; - &::before { - content: ""; - background-color: ${radio.control.icon.iconcolor.inactive.disabled}; - width: ${radio.control.icon.iconsize.sm.inactive.disabled}; - height: ${radio.control.icon.iconsize.sm.inactive.disabled}; + .caption-wrapper { + padding: ${formcaption.container.padding.lg}; + gap: ${formcaption.container.itemspacing.lg}; } - & + .label-wrapper { - .blr-form-label-inline { - cursor: not-allowed; - color: ${formlabel.inlinelabel.textcolor.disabled}; - } + .blr-form-label-inline { + font-family: ${formlabel.inlinelabel.typography.lg.fontFamily}, sans-serif; + font-weight: ${formlabel.inlinelabel.typography.lg.fontWeight}; + line-height: ${formlabel.inlinelabel.typography.lg.lineHeight}; + font-size: ${formlabel.inlinelabel.typography.lg.fontSize}; } } } @@ -279,8 +483,6 @@ export const staticStyles = css` &::before { background-color: ${radio.control.icon.iconcolor.inactive.error}; - width: ${radio.control.icon.iconsize.sm.inactive.error}; - height: ${radio.control.icon.iconsize.sm.inactive.error}; } & + .label-wrapper { @@ -292,16 +494,58 @@ export const staticStyles = css` &.checked, &:checked { &::before { - width: ${radio.control.icon.iconsize.sm.active.error}; - height: ${radio.control.icon.iconsize.sm.active.error}; + background-color: ${radio.control.icon.iconcolor.active.error}; } } + } - &.checked, - &:checked { + &.sm { + .input-control { + &::before { + width: ${radio.control.icon.iconsize.sm.inactive.error}; + height: ${radio.control.icon.iconsize.sm.inactive.error}; + } + + &.checked, + &:checked { + &::before { + width: ${radio.control.icon.iconsize.sm.active.error}; + height: ${radio.control.icon.iconsize.sm.active.error}; + } + } + } + } + + &.md { + .input-control { &::before { - width: ${radio.control.icon.iconsize.sm.active.error}; - height: ${radio.control.icon.iconsize.sm.active.error}; + width: ${radio.control.icon.iconsize.md.inactive.error}; + height: ${radio.control.icon.iconsize.md.inactive.error}; + } + + &.checked, + &:checked { + &::before { + width: ${radio.control.icon.iconsize.md.active.error}; + height: ${radio.control.icon.iconsize.md.active.error}; + } + } + } + } + + &.lg { + .input-control { + &::before { + width: ${radio.control.icon.iconsize.lg.inactive.error}; + height: ${radio.control.icon.iconsize.lg.inactive.error}; + } + + &.checked, + &:checked { + &::before { + width: ${radio.control.icon.iconsize.lg.active.error}; + height: ${radio.control.icon.iconsize.lg.active.error}; + } } } } @@ -312,14 +556,10 @@ export const staticStyles = css` .input-control { background-color: ${radio.control.container.bgcolor.inactive.disabled}; - width: ${radio.control.container.size.sm}; - height: ${radio.control.container.size.sm}; &::before { content: ""; background-color: ${radio.control.icon.iconcolor.inactive.disabled}; - width: ${radio.control.icon.iconsize.sm.inactive.rest}; - height: ${radio.control.icon.iconsize.sm.inactive.rest}; } & + .label-wrapper { @@ -328,6 +568,42 @@ export const staticStyles = css` } } } + + &.sm { + .input-control { + width: ${radio.control.container.size.sm}; + height: ${radio.control.container.size.sm}; + + &::before { + width: ${radio.control.icon.iconsize.sm.inactive.rest}; + height: ${radio.control.icon.iconsize.sm.inactive.rest}; + } + } + } + + &.md { + .input-control { + width: ${radio.control.container.size.md}; + height: ${radio.control.container.size.md}; + + &::before { + width: ${radio.control.icon.iconsize.md.inactive.rest}; + height: ${radio.control.icon.iconsize.md.inactive.rest}; + } + } + } + + &.lg { + .input-control { + width: ${radio.control.container.size.lg}; + height: ${radio.control.container.size.lg}; + + &::before { + width: ${radio.control.icon.iconsize.lg.inactive.rest}; + height: ${radio.control.icon.iconsize.lg.inactive.rest}; + } + } + } } .blr-form-caption { diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts index e5d2ba048..5705c9eea 100644 --- a/packages/ui-library/src/components/radio/index.stories.ts +++ b/packages/ui-library/src/components/radio/index.stories.ts @@ -136,9 +136,9 @@ export default { }, control: { type: 'text', label: 'Radio' }, }, - blrClick: { + blrChange: { description: 'Fires when the value changes.', - action: 'blrClick', + action: 'blrChange', table: { disable: false, category: 'Events', @@ -234,7 +234,7 @@ export const SizeVariant = () => { label: 'Radio SM', blrFocus: action('blrFocus'), blrBlur: action('blrBlur'), - blrClick: action('blrClick'), + blrChange: action('blrChange'), })}
@@ -244,7 +244,7 @@ export const SizeVariant = () => { label: 'Radio MD', blrFocus: action('blrFocus'), blrBlur: action('blrBlur'), - blrClick: action('blrClick'), + blrChange: action('blrChange'), })}
@@ -254,7 +254,7 @@ export const SizeVariant = () => { label: 'Radio LG', blrFocus: action('blrFocus'), blrBlur: action('blrBlur'), - blrClick: action('blrClick'), + blrChange: action('blrChange'), })}
`; diff --git a/packages/ui-library/src/components/radio/index.test.ts b/packages/ui-library/src/components/radio/index.test.ts index b74b0de79..97d9fe2d5 100644 --- a/packages/ui-library/src/components/radio/index.test.ts +++ b/packages/ui-library/src/components/radio/index.test.ts @@ -17,7 +17,11 @@ const sampleParams: BlrRadioType = { hasHint: true, hasError: false, theme: Themes[0], - errorMessageIcon: undefined, + optionId: 'defaultOptionId', + sizeVariant: 'md', + hintMessage: 'Default hint message', + hintMessageIcon: 'blrCheckmark', + value: 'defaultValue', }; describe('blr-radio', () => { @@ -37,7 +41,6 @@ describe('blr-radio', () => { hasHint: true, hintMessageIcon: 'blrInfo', hasError: true, - errorMessageIcon: 'blrErrorFilled', }), ); @@ -48,11 +51,7 @@ describe('blr-radio', () => { const formCaptionHint = querySelectorDeep('.blr-form-caption', formCaptions[0] as HTMLElement); const hintClassName = formCaptionHint?.className; - const formCaptionError = querySelectorDeep('.blr-form-caption', formCaptions[1] as HTMLElement); - const errorClassName = formCaptionError?.className; - expect(hintClassName).to.contain('hint'); - expect(errorClassName).to.contain('error'); }); it('has a size md by default', async () => { @@ -107,7 +106,6 @@ describe('blr-radio', () => { ...sampleParams, hasHint: false, hasError: true, - errorMessageIcon: undefined, }), ); const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 0fca2c15c..cf2992f0d 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -14,10 +14,10 @@ import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inlin import { createBlrBlurEvent, createBlrFocusEvent, - createBlrClickEvent, + createBlrChangeEvent, BlrBlurEvent, BlrFocusEvent, - BlrClickEvent, + BlrChangeEvent, } from '../../globals/events.js'; import { LitElementCustom } from '../../utils/lit/element.js'; import { SignalHub } from '../../utils/lit/signals.js'; @@ -28,7 +28,7 @@ import { SanitizationController } from '../../utils/lit/sanitization-controller. /** * @fires blrFocus Radio received focus * @fires blrBlur Radio lost focus - * @fires blrClick Radio selected value changed + * @fires blrChange Radio selected value changed */ const propertySanitizer = makeSanitizer((unsanitized: BlrRadioType) => ({ @@ -90,17 +90,10 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti } }; - protected handleClick = (event: MouseEvent | KeyboardEvent) => { - event.preventDefault(); - + protected handleChange = (event: Event) => { if (!this.disabled) { - const changeEvent = createBlrClickEvent({ originalEvent: event }); - + const changeEvent = createBlrChangeEvent({ originalEvent: event, changedValue: this._radioNode.value }); this.dispatchEvent(changeEvent); - - if (!changeEvent.defaultPrevented) { - this.checked = true; - } } }; @@ -133,17 +126,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti ` : nothing} - ${this.hasError - ? html` -
- ${BlrFormCaptionRenderFunction({ - variant: 'error', - theme: sanitized.theme, - sizeVariant: sanitized.sizeVariant, - })} -
- ` - : nothing} `; const id = calculateOptionId(sanitized.label); return html` @@ -159,7 +141,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti ?checked=${this.checked} .checked=${this.checked === true} ?required=${this.required} - @click=${this.handleClick} + @change=${this.handleChange} @focus=${this.handleFocus} @blur=${this.handleBlur} /> @@ -211,5 +193,5 @@ export type PublicMethods = unknown; export type BlrRadioEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; blrBlur?: (event: BlrBlurEvent) => void; - blrClick?: (event: BlrClickEvent) => void; + blrChange?: (event: BlrChangeEvent) => void; }; From 894ca7d41482cac296f5f144e70506ce6e495e81 Mon Sep 17 00:00:00 2001 From: Aishwarya Karkera Date: Wed, 30 Apr 2025 15:23:00 +0200 Subject: [PATCH 3/3] fix(ui-library): remove error message check --- packages/ui-library/src/components/radio/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index cf2992f0d..dad1acd3a 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -152,7 +152,7 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti labelSize: sanitized.sizeVariant, theme: sanitized.theme, })} - ${(this.hasHint && (this.hintMessageIcon || this.hintMessage)) || this.hasError + ${this.hasHint && (this.hintMessageIcon || this.hintMessage) ? BlrFormCaptionGroupRenderFunction( { sizeVariant: sanitized.sizeVariant, theme: sanitized.theme }, captionContent,