diff --git a/packages/ui-library/src/components/radio/index.css.ts b/packages/ui-library/src/components/radio/index.css.ts index 5413cfba1..bf5a10e46 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; @@ -56,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 { @@ -82,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 { @@ -108,168 +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}; + 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}; - .caption-wrapper { - padding: ${formcaption.container.padding.lg}; - gap: ${formcaption.container.itemspacing.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 { - background-color: ${radio.control.container.bgcolor.inactive.focus}; - outline: black solid 2px; - outline-offset: 2px; + &.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 { - 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}; } } } @@ -280,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 { @@ -293,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.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.sm.active.error}; - height: ${radio.control.icon.iconsize.sm.active.error}; + 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}; + } } } } @@ -313,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 { @@ -329,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 { @@ -358,4 +633,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..5705c9eea 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: @@ -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'), + blrChange: action('blrChange'), })}
@@ -261,6 +242,9 @@ export const SizeVariant = () => { ...args, sizeVariant: 'md', label: 'Radio MD', + blrFocus: action('blrFocus'), + blrBlur: action('blrBlur'), + blrChange: action('blrChange'), })}
@@ -268,6 +252,9 @@ export const SizeVariant = () => { ...args, sizeVariant: 'lg', label: 'Radio LG', + blrFocus: action('blrFocus'), + blrBlur: action('blrBlur'), + blrChange: action('blrChange'), })}
`; @@ -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.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 5677f76b6..dad1acd3a 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, + createBlrChangeEvent, BlrBlurEvent, BlrFocusEvent, - BlrCheckedChangeEvent, + 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 blrSelectedValueChangeEvent Radio selected value changed + * @fires blrChange 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,22 +90,12 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti } }; - protected handleClick(event: Event) { - event.preventDefault(); - + protected handleChange = (event: Event) => { if (!this.disabled) { - const changeEvent = createBlrSelectedValueChangeEvent({ - originalEvent: event, - selectedValue: this._radioNode.value, - }); - + const changeEvent = createBlrChangeEvent({ originalEvent: event, changedValue: this._radioNode.value }); this.dispatchEvent(changeEvent); - - if (!changeEvent.defaultPrevented) { - this.checked = true; - } } - } + }; protected render() { const sanitized = this.sanitizedController.values; @@ -137,19 +126,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti ` : nothing} - ${this.hasError && (this.errorMessage || this.errorMessageIcon) - ? html` -
- ${BlrFormCaptionRenderFunction({ - variant: 'error', - theme: sanitized.theme, - sizeVariant: sanitized.sizeVariant, - message: this.errorMessage, - icon: this.errorMessageIcon, - })} -
- ` - : nothing} `; const id = calculateOptionId(sanitized.label); return html` @@ -158,13 +134,14 @@ 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} ?checked=${this.checked} .checked=${this.checked === true} ?required=${this.required} - @click=${this.handleClick} + @change=${this.handleChange} @focus=${this.handleFocus} @blur=${this.handleBlur} /> @@ -175,8 +152,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) ? BlrFormCaptionGroupRenderFunction( { sizeVariant: sanitized.sizeVariant, theme: sanitized.theme }, captionContent, @@ -203,9 +179,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 +193,5 @@ export type PublicMethods = unknown; export type BlrRadioEventHandlers = { blrFocus?: (event: BlrFocusEvent) => void; blrBlur?: (event: BlrBlurEvent) => void; - blrSelectedValueChangeEvent?: (event: BlrCheckedChangeEvent) => void; + blrChange?: (event: BlrChangeEvent) => void; };