From 94f2ec80102f85f3466e4f81c57689b3fe0850e1 Mon Sep 17 00:00:00 2001 From: Aishwarya Karkera Date: Wed, 2 Oct 2024 13:25:52 +0200 Subject: [PATCH] fix(ui-library): removed readonly state for checkbox radio radiogroup and toggle switch --- .../src/components/checkbox/index.css.ts | 98 +++-------------- .../src/components/checkbox/index.stories.ts | 35 +----- .../src/components/checkbox/index.test.ts | 9 +- .../src/components/checkbox/index.ts | 14 +-- .../components/radio-group/index.stories.ts | 25 +---- .../src/components/radio-group/index.test.ts | 1 - .../src/components/radio-group/index.ts | 3 - .../src/components/radio/index.stories.ts | 25 +---- .../src/components/radio/index.test.ts | 9 +- .../ui-library/src/components/radio/index.ts | 4 - .../src/components/toggle-switch/index.css.ts | 103 +----------------- .../components/toggle-switch/index.stories.ts | 42 +------ .../components/toggle-switch/index.test.ts | 5 +- .../src/components/toggle-switch/index.ts | 16 +-- 14 files changed, 44 insertions(+), 345 deletions(-) diff --git a/packages/ui-library/src/components/checkbox/index.css.ts b/packages/ui-library/src/components/checkbox/index.css.ts index 8f0b6864a..8783e5992 100644 --- a/packages/ui-library/src/components/checkbox/index.css.ts +++ b/packages/ui-library/src/components/checkbox/index.css.ts @@ -145,15 +145,6 @@ export const staticStyles = css` color: ${formlabel.inlinelabel.textcolor.pressed}; } } - - &.readonly { - color: ${formlabel.inlinelabel.textcolor.readonly}; - - .blr-form-label-inline { - cursor: not-allowed !important; - pointer-events: none; - } - } } } @@ -182,10 +173,6 @@ export const staticStyles = css` cursor: not-allowed; } - &.readonly { - pointer-events: none; - } - &:not(.error) { &.checked, &.indeterminate { @@ -197,7 +184,7 @@ export const staticStyles = css` } &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.active.hover}; outline-color: ${checkbox.control.container.bordercolor.active.hover}; @@ -217,7 +204,7 @@ export const staticStyles = css` } &.active { - &:not(:disabled, [readonly]) { + &:not(:disabled) { background-color: ${checkbox.control.container.bgcolor.active.pressed}; outline-color: ${checkbox.control.container.bordercolor.active.pressed}; @@ -235,15 +222,6 @@ export const staticStyles = css` color: ${checkbox.control.icon.iconcolor.active.disabled}; } } - - &.readonly { - background-color: ${checkbox.control.container.bgcolor.active.readonly}; - outline-color: ${checkbox.control.container.bordercolor.active.readonly}; - - & .checker-icon { - color: ${checkbox.control.icon.iconcolor.active.readonly}; - } - } } &:not(.checked, .indeterminate) { @@ -255,7 +233,7 @@ export const staticStyles = css` } &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.inactive.hover}; outline-color: ${checkbox.control.container.bordercolor.inactive.hover}; @@ -275,7 +253,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { background-color: ${checkbox.control.container.bgcolor.inactive.pressed}; outline-color: ${checkbox.control.container.bordercolor.inactive.pressed}; @@ -293,15 +271,6 @@ export const staticStyles = css` color: ${checkbox.control.icon.iconcolor.inactive.disabled}; } } - - &.readonly { - background-color: ${checkbox.control.container.bgcolor.inactive.readonly}; - outline-color: ${checkbox.control.container.bordercolor.inactive.readonly}; - - & .checker-icon { - color: ${checkbox.control.icon.iconcolor.inactive.readonly}; - } - } } } @@ -338,7 +307,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { & .checker-icon { width: ${checkbox.control.icon.iconsize.sm.hover}; height: ${checkbox.control.icon.iconsize.sm.hover}; @@ -360,7 +329,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { & .checker-icon { width: ${checkbox.control.icon.iconsize.sm.pressed}; height: ${checkbox.control.icon.iconsize.sm.pressed}; @@ -381,22 +350,12 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.disabled} * -1); } - &.readonly { - & .checker-icon { - width: ${checkbox.control.icon.iconsize.sm.readonly}; - height: ${checkbox.control.icon.iconsize.sm.readonly}; - } - - outline-width: ${checkbox.control.container.borderwidth.sm.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.sm.inactive.readonly} * -1); - } - &.checked { outline-width: ${checkbox.control.container.borderwidth.sm.active.rest}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.sm.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.hover} * -1); } @@ -408,7 +367,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.sm.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.pressed} * -1); } @@ -418,11 +377,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.sm.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.sm.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.sm.active.readonly} * -1); - } } } } @@ -455,7 +409,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.rest} * -1); &.hover { - &.not(.disabled):not(.readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.inactive.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.hover} * -1); } @@ -467,7 +421,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.inactive.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.pressed} * -1); } @@ -477,11 +431,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.md.inactive.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.md.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.md.inactive.readonly} * -1); - } } &.checked { @@ -489,7 +438,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.md.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.hover} * -1); } @@ -501,7 +450,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.md.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.pressed} * -1); } @@ -511,11 +460,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.md.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.md.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.md.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.md.active.readonly} * -1); - } } } } @@ -543,7 +487,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.inactive.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.hover} * -1); } @@ -555,7 +499,7 @@ export const staticStyles = css` } &.active { - &:not(:disabled, .readonly) { + &:not(:disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.inactive.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.pressed} * -1); } @@ -565,11 +509,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.lg.inactive.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.lg.inactive.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.lg.inactive.readonly} * -1); - } } &.checked { @@ -577,7 +516,7 @@ export const staticStyles = css` outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.rest} * -1); &.hover { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.active.hover}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.hover} * -1); } @@ -589,7 +528,7 @@ export const staticStyles = css` } &.active { - &:not(.disabled, .readonly) { + &:not(.disabled) { outline-width: ${checkbox.control.container.borderwidth.lg.active.pressed}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.pressed} * -1); } @@ -599,11 +538,6 @@ export const staticStyles = css` outline-width: ${checkbox.control.container.borderwidth.lg.active.disabled}; outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.disabled} * -1); } - - &.readonly { - outline-width: ${checkbox.control.container.borderwidth.lg.active.readonly}; - outline-offset: calc(${checkbox.control.container.borderwidth.lg.active.readonly} * -1); - } } } } diff --git a/packages/ui-library/src/components/checkbox/index.stories.ts b/packages/ui-library/src/components/checkbox/index.stories.ts index 807f54bcc..bc7a1e1bd 100644 --- a/packages/ui-library/src/components/checkbox/index.stories.ts +++ b/packages/ui-library/src/components/checkbox/index.stories.ts @@ -130,13 +130,6 @@ export default { category: 'States', }, }, - readonly: { - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - defaultValue: false, - table: { - category: 'States', - }, - }, //Validation required: { @@ -238,8 +231,7 @@ export default { - [**Checked / Unchecked **](#checked--unchecked) - [**Indeterminate**](#indeterminate) - [**States**](#states) - - [**Disabled**](#disabled) - - [**Readonly**](#readonly) + - [**Disabled**](#disabled) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -266,7 +258,6 @@ const defaultParams: BlrCheckboxType = { hintMessage: 'This is a small hint message', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, errorMessage: ' ', @@ -294,7 +285,6 @@ const argTypesToDisable = [ 'hintMessage', 'hintMessageIcon', 'disabled', - 'readonly', 'required', 'hasError', 'errorMessage', @@ -405,7 +395,7 @@ Indeterminate.story = { /** * ## States - * Apart from states like rest, hover, pressed and focus, the Checkbox component can also be disabled or readonly. The error state is documented under [validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Checkbox component can also be disabled. The error state is documented under [validation](#validation). * * ### Disabled * The Checkbox component in the disabled state can not be interacted with. This means it can not receive focus or be selected. @@ -429,27 +419,6 @@ Disabled.story = { name: ' ', }; -/** - * ### Readonly - * The Checkbox component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} -
-
- ${BlrCheckboxRenderFunction({ - ...defaultParams, - label: 'Readonly', - readonly: true, - })} -
-
- `; -}; -Readonly.story = { - name: ' ', -}; /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/checkbox/index.test.ts b/packages/ui-library/src/components/checkbox/index.test.ts index 0211f93f8..adbc999bd 100644 --- a/packages/ui-library/src/components/checkbox/index.test.ts +++ b/packages/ui-library/src/components/checkbox/index.test.ts @@ -12,7 +12,6 @@ const sampleParams: BlrCheckboxType = { disabled: false, checked: false, indeterminate: false, - readonly: false, hasError: false, sizeVariant: 'md', errorMessage: 'This is a sample error message', @@ -40,7 +39,7 @@ describe('blr-checkbox', () => { ...sampleParams, hasError: true, errorIcon: undefined, - }) + }), ); const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); @@ -57,7 +56,7 @@ describe('blr-checkbox', () => { hintMessageIcon: 'blrInfo', hasError: true, errorMessageIcon: 'blrErrorFilled', - }) + }), ); const captionWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); @@ -95,7 +94,7 @@ describe('blr-checkbox', () => { BlrCheckboxRenderFunction({ ...sampleParams, hasError: true, - }) + }), ); const checkbox = querySelectorDeep('div.blr-checkbox', element.getRootNode() as HTMLElement); @@ -109,7 +108,7 @@ describe('blr-checkbox', () => { BlrCheckboxRenderFunction({ ...sampleParams, hasError: false, - }) + }), ); const checkbox = querySelectorDeep('div.blr-checkbox', element.getRootNode() as HTMLElement); diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 2d331c0fc..4fbb1b1e7 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -47,7 +47,6 @@ export class BlrCheckbox extends LitElementCustom { @property() accessor disabled: boolean | undefined; @property() accessor checked: boolean | undefined = false; @property() accessor indeterminate: boolean | undefined = false; - @property() accessor readonly: boolean | undefined; @property() accessor hasError: boolean | undefined; @property() accessor errorMessage: string | undefined; @property() accessor errorMessageIcon: SizelessIconType | undefined; @@ -81,7 +80,7 @@ export class BlrCheckbox extends LitElementCustom { } protected handleChange(event: Event) { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.currentIndeterminateState = false; this.dispatchEvent( @@ -114,13 +113,13 @@ export class BlrCheckbox extends LitElementCustom { @state() protected accessor hovered = false; protected handleEnter = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = true; } }; protected handleLeave = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = false; } }; @@ -128,14 +127,14 @@ export class BlrCheckbox extends LitElementCustom { @state() protected accessor active = false; protected handlePress = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.active = true; this.currentCheckedState = !this.currentCheckedState; } }; protected handleRelease = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.active = false; } }; @@ -159,7 +158,6 @@ export class BlrCheckbox extends LitElementCustom { 'active': this.active || false, 'checked': this.currentCheckedState || false, 'required': this.required || false, - 'readonly': this.readonly || false, 'indeterminate': this.currentIndeterminateState || false, }); @@ -171,7 +169,6 @@ export class BlrCheckbox extends LitElementCustom { 'active': this.active || false, 'checked': this.currentCheckedState || false, 'required': this.required || false, - 'readonly': this.readonly || false, 'indeterminate': this.currentIndeterminateState || false, 'focus': this.focused || false, }); @@ -264,7 +261,6 @@ export class BlrCheckbox extends LitElementCustom { ?disabled=${this.disabled} ?checked=${this.currentCheckedState} ?indeterminate=${this.currentIndeterminateState} - ?readonly=${this.readonly} ?required="${this.required}" ?hasError=${this.hasError} @change=${this.handleChange} diff --git a/packages/ui-library/src/components/radio-group/index.stories.ts b/packages/ui-library/src/components/radio-group/index.stories.ts index 7ccb7b1bc..ecdb5580b 100644 --- a/packages/ui-library/src/components/radio-group/index.stories.ts +++ b/packages/ui-library/src/components/radio-group/index.stories.ts @@ -98,13 +98,6 @@ export default { category: 'States', }, }, - readonly: { - name: 'readonly', - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, required: { name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', @@ -210,7 +203,6 @@ export default { - [**Has Group Label**](#has-group-label) - [**States**](#states) - [**Disabled**](#disabled) - - [**Readonly**](#readonly) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -245,7 +237,6 @@ const defaultParams: BlrRadioGroupType & { groupHintMessage: 'This is a small hint', groupHintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, groupErrorMessage: '', @@ -342,7 +333,7 @@ HasGroupLabel.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Radio Group component can also be disabled or readonly. The error state is documented under [Validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Radio Group component can also be disabled. The error state is documented under [Validation](#validation). * ### Disabled * The Radio Group component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -360,20 +351,6 @@ export const Disabled = () => { Disabled.story = { name: ' ' }; -/** - * The Radio Group component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} - ${BlrRadioGroup({ - ...defaultParams, - legend: 'Readonly', - readonly: true, - })} - `; -}; - /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/radio-group/index.test.ts b/packages/ui-library/src/components/radio-group/index.test.ts index 31d34c7ab..ed1d9c437 100644 --- a/packages/ui-library/src/components/radio-group/index.test.ts +++ b/packages/ui-library/src/components/radio-group/index.test.ts @@ -13,7 +13,6 @@ const sampleParams: BlrRadioGroupType = { disabled: false, name: 'Default Name', required: false, - readonly: false, hasHint: true, groupHintMessage: 'This is a sample hint message', groupHintMessageIcon: 'blrInfo', diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts index 797f1a5d3..5b1893965 100644 --- a/packages/ui-library/src/components/radio-group/index.ts +++ b/packages/ui-library/src/components/radio-group/index.ts @@ -36,7 +36,6 @@ export class BlrRadioGroup extends LitElementCustom { static styles = [staticFormStyles, staticRadioStyles, componentSpecificStaticStyles]; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property() accessor name: string | undefined; @property() accessor sizeVariant: InputSizesType = 'md'; @property() accessor hasLegend: boolean | undefined; @@ -96,7 +95,6 @@ export class BlrRadioGroup extends LitElementCustom { item.hasError = this.hasError; item.disabled = this.disabled; - item.readonly = this.readonly; item.theme = this.theme; item.sizeVariant = this.sizeVariant; @@ -127,7 +125,6 @@ export class BlrRadioGroup extends LitElementCustom { [this.theme]: this.theme, [this.sizeVariant]: this.sizeVariant, disabled: this.disabled || false, - readonly: this.readonly || false, error: this.hasError || false, [this.direction]: this.direction, }); diff --git a/packages/ui-library/src/components/radio/index.stories.ts b/packages/ui-library/src/components/radio/index.stories.ts index 8b1155924..79cfb14d1 100644 --- a/packages/ui-library/src/components/radio/index.stories.ts +++ b/packages/ui-library/src/components/radio/index.stories.ts @@ -99,13 +99,6 @@ export default { category: 'States', }, }, - readonly: { - name: 'readonly', - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, required: { name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', @@ -205,7 +198,6 @@ export default { - [**Checked**](#checked) - [**States**](#states) - [**Disabled**](#disabled) - - [**Readonly**](#readonly) - [**Validation**](#validation) - [**Required**](#required) - [**Has Error**](#has-error) @@ -235,7 +227,6 @@ const args: BlrRadioType & { hintMessage: 'This is a small hint', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, required: false, hasError: false, errorMessage: '', @@ -309,7 +300,7 @@ export const Checked = () => html` Checked.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Radio component can also be disabled or readonly. The error state is documented under [Validation](#validation). + * Apart from states like rest, hover, pressed and focus, the Radio component can also be disabled. The error state is documented under [Validation](#validation). * ### Disabled * The Radio component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -327,20 +318,6 @@ export const Disabled = () => { Disabled.story = { name: ' ' }; -/** - * The Radio component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} - ${BlrRadio({ - ...args, - readonly: true, - label: 'Readonly', - })} - `; -}; - /** * ## Validation * ### Required diff --git a/packages/ui-library/src/components/radio/index.test.ts b/packages/ui-library/src/components/radio/index.test.ts index 90ce7f923..8acb8680a 100644 --- a/packages/ui-library/src/components/radio/index.test.ts +++ b/packages/ui-library/src/components/radio/index.test.ts @@ -13,7 +13,6 @@ const sampleParams: BlrRadioType = { radioId: 'testId', label: 'harald', required: false, - readonly: false, hasHint: true, hasError: false, theme: 'Light', @@ -38,7 +37,7 @@ describe('blr-radio', () => { hintMessageIcon: 'blrInfo', hasError: true, errorMessageIcon: 'blrErrorFilled', - }) + }), ); const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); @@ -78,7 +77,7 @@ describe('blr-radio', () => { BlrRadioRenderFunction({ ...sampleParams, hasError: true, - }) + }), ); const radio = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement); @@ -92,7 +91,7 @@ describe('blr-radio', () => { BlrRadioRenderFunction({ ...sampleParams, hasError: false, - }) + }), ); const radio = querySelectorDeep('input[type="radio"]', element.getRootNode() as HTMLElement); @@ -108,7 +107,7 @@ describe('blr-radio', () => { hasHint: false, hasError: true, errorMessageIcon: undefined, - }) + }), ); const labelWrapper = querySelectorDeep('.label-wrapper', element.getRootNode() as HTMLElement); const captionWrapper = querySelectorDeep('.caption-wraper', labelWrapper?.getRootNode() as HTMLElement); diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 98b7ae53a..83f948df7 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -39,7 +39,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti @property() accessor optionId!: string; @property() accessor label!: string; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property({ type: Boolean }) accessor checked: boolean | undefined; @property() accessor name: string | undefined; @property() accessor sizeVariant: InputSizesType | undefined = 'md'; @@ -88,7 +87,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti [this.sizeVariant]: this.sizeVariant, [this.theme]: this.theme, disabled: this.disabled || false, - readonly: this.readonly || false, checked: this.checked || false, error: this.hasError || false, }); @@ -134,7 +132,6 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti type="radio" name=${this.name} ?disabled=${this.disabled} - ?readonly=${this.readonly} ?invalid=${this.hasError} ?checked=${this.checked} .checked=${this.checked || nothing} @@ -171,7 +168,6 @@ export type PublicReactiveProperties = { optionId: string; label: string; disabled?: boolean; - readonly?: boolean; name?: string; sizeVariant?: InputSizesType; required?: boolean; 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 05a05afc3..18b31aaa0 100644 --- a/packages/ui-library/src/components/toggle-switch/index.css.ts +++ b/packages/ui-library/src/components/toggle-switch/index.css.ts @@ -47,7 +47,7 @@ export const staticStyles = css` outline-style: solid; } - .blr-label-switch-wrapper:not(.disabled, .readonly) { + .blr-label-switch-wrapper:not(.disabled) { cursor: pointer; } @@ -211,20 +211,6 @@ export const staticStyles = css` color: ${toggleswitch.control.ay11icon.iconcolor.inactive.disabled}; } } - - &.readonly { - background-color: ${toggleswitch.control.container.bgcolor.inactive.readonly}; - outline-color: ${toggleswitch.control.container.bordercolor.inactive.readonly}; - - .knob { - outline-color: ${toggleswitch.control.knob.bordercolor.inactive.readonly}; - background-color: ${toggleswitch.control.knob.bgcolor.inactive.readonly}; - } - - .toggle-icon > .toggle-icon-class { - color: ${toggleswitch.control.ay11icon.iconcolor.inactive.readonly}; - } - } } &.checked { @@ -290,19 +276,6 @@ export const staticStyles = css` color: ${toggleswitch.control.ay11icon.iconcolor.active.disabled}; } } - - &.readonly { - background-color: ${toggleswitch.control.container.bgcolor.active.readonly}; - outline-color: ${toggleswitch.control.container.bordercolor.active.readonly}; - - .knob { - outline-color: ${toggleswitch.control.knob.bordercolor.active.readonly}; - } - - .toggle-icon > .toggle-icon-class { - color: ${toggleswitch.control.ay11icon.iconcolor.active.readonly}; - } - } } } @@ -317,14 +290,6 @@ export const staticStyles = css` } } - &.readonly { - > .toggle-content-col { - > .blr-form-label-inline { - color: ${formlabel.inlinelabel.textcolor.readonly}; - } - } - } - &.sm { gap: ${toggleswitch.container.itemspacing.sm}; @@ -379,17 +344,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.sm.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.sm.inactive.readonly} * -1); - - .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.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -432,17 +386,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.sm.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.sm.active.readonly} * -1); - - .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.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { @@ -527,17 +470,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.md.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.md.inactive.readonly} * -1); - - .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.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -580,17 +512,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.md.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.md.active.readonly} * -1); - - .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.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { @@ -672,17 +593,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.lg.inactive.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.lg.inactive.readonly} * -1); - - .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.bgcolor.inactive.readonly}; - } - } } &.checked { @@ -725,17 +635,6 @@ export const staticStyles = css` background-color: ${toggleswitch.control.knob.bgcolor.inactive.disabled}; } } - - &.readonly { - outline-width: ${toggleswitch.control.container.borderwidth.lg.active.readonly}; - outline-offset: calc(${toggleswitch.control.container.borderwidth.lg.active.readonly} * -1); - - .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.bgcolor.active.readonly}; - } - } } & > .toggle-switch-slider { diff --git a/packages/ui-library/src/components/toggle-switch/index.stories.ts b/packages/ui-library/src/components/toggle-switch/index.stories.ts index 339d25464..5304eaf7d 100644 --- a/packages/ui-library/src/components/toggle-switch/index.stories.ts +++ b/packages/ui-library/src/components/toggle-switch/index.stories.ts @@ -32,7 +32,6 @@ const defaultParams: BlrToggleSwitchType = { hintMessage: 'This is a small hint', hintMessageIcon: 'blrInfo', disabled: false, - readonly: false, arialabel: 'Toggle Switch', toogleSwitchId: 'toggle-switchId', name: 'toggle-switch-name', @@ -166,12 +165,6 @@ export default { category: 'Events', }, }, - readonly: { - description: 'Choose if component is readonly. The user can select but not change the value of this component.', - table: { - category: 'States', - }, - }, }, parameters: { badges: ['Draft'], @@ -193,8 +186,7 @@ They can also be used to control more complex features, such as the state of a s - [**On Label**](#on-label) - [**Off Label**](#off-label) - [**States**](#states) - - [**Disabled**](#disabled) - - [**Readonly**](#readonly) + - [**Disabled**](#disabled) - [**Dependencies**](#dependencies) - [**Form Caption**](#form-caption) @@ -350,7 +342,7 @@ OffLabel.story = { name: ' ' }; /** * ## States - * Apart from states like rest, hover, pressed and focus, the Toggle Switch component can also be disabled or readonly. + * Apart from states like rest, hover, pressed and focus, the Toggle Switch component can also be disabled. * ### Disabled * The Toggle Switch component in the disabled state can not be interacted with. This means it can not receive focus or be selected. */ @@ -380,36 +372,6 @@ export const Disabled = () => { }; Disabled.story = { name: ' ' }; -/** - * ### Readonly - * The Toggle Switch component in the readonly state can not be interacted with, but it can still be selected and receive focus. - */ -export const Readonly = () => { - return html` - ${sharedStyles} -
- ${BlrToggleSwitchRenderFunction({ - ...defaultParams, - hasStateLabel: false, - readonly: true, - hasHint: false, - label: 'Readonly', - })} - ${BlrToggleSwitchRenderFunction({ - ...defaultParams, - hasStateLabel: true, - readonly: true, - hasHint: false, - label: 'Readonly with state label', - - onLabel: 'On Readonly', - offLabel: 'Off Readonly', - })} -
- `; -}; -Readonly.story = { name: ' ' }; - /** * ## Dependencies * ### Form Caption diff --git a/packages/ui-library/src/components/toggle-switch/index.test.ts b/packages/ui-library/src/components/toggle-switch/index.test.ts index a2a803ed1..fa0528bcc 100644 --- a/packages/ui-library/src/components/toggle-switch/index.test.ts +++ b/packages/ui-library/src/components/toggle-switch/index.test.ts @@ -10,7 +10,6 @@ const sampleParams: BlrToggleSwitchType = { toogleSwitchId: 'switch', label: 'Toggle Switch Option', disabled: false, - readonly: false, active: false, onLabel: 'On', offLabel: 'Off', @@ -55,7 +54,7 @@ describe('blr-label-toggleswitch', () => { BlrToggleSwitchRenderFunction({ ...sampleParams, hasHint: true, - }) + }), ); const hint = querySelectorDeep('blr-form-caption', element.getRootNode() as HTMLElement); @@ -68,7 +67,7 @@ describe('blr-label-toggleswitch', () => { BlrToggleSwitchRenderFunction({ ...sampleParams, hasHint: false, - }) + }), ); const hint = querySelectorDeep('blr-form-caption', element.getRootNode() as HTMLElement); diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts index b018427fc..3f28cc4ca 100644 --- a/packages/ui-library/src/components/toggle-switch/index.ts +++ b/packages/ui-library/src/components/toggle-switch/index.ts @@ -50,7 +50,6 @@ export class BlrToggleSwitch extends LitElementCustom { @property() accessor name!: string; @property() accessor hasLabel: boolean | undefined; @property() accessor disabled: boolean | undefined; - @property() accessor readonly: boolean | undefined; @property() accessor active: boolean | undefined = undefined; @property() accessor hasHint: boolean | undefined; @@ -74,7 +73,7 @@ export class BlrToggleSwitch extends LitElementCustom { } protected handleChange(event: Event) { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.currentCheckedState = !this.currentCheckedState; this.dispatchEvent( createBlrCheckedChangeEvent({ @@ -104,13 +103,13 @@ export class BlrToggleSwitch extends LitElementCustom { @state() protected accessor hovered = false; protected handleEnter = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = true; } }; protected handleLeave = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.hovered = false; } }; @@ -118,14 +117,14 @@ export class BlrToggleSwitch extends LitElementCustom { @state() protected accessor pressed = false; protected handlePress = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.pressed = true; this.currentCheckedState = !this.currentCheckedState; } }; protected handleRelease = () => { - if (!this.disabled && !this.readonly) { + if (!this.disabled) { this.pressed = false; } }; @@ -136,7 +135,6 @@ export class BlrToggleSwitch extends LitElementCustom { 'blr-semantic-action': true, 'blr-label-toggleswitch': true, 'disabled': this.disabled || false, - 'readonly': this.readonly || false, [this.theme]: this.theme, [this.sizeVariant]: this.sizeVariant, [this.hasStateLabel ? 'has-state-label' : '']: this.hasStateLabel, @@ -146,7 +144,6 @@ export class BlrToggleSwitch extends LitElementCustom { 'blr-label-switch-wrapper': true, 'checked': this.currentCheckedState || false, 'disabled': this.disabled || false, - 'readonly': this.readonly || false, 'hover': this.hovered || false, 'active': this.pressed || false, 'focus': this.focused || false, @@ -230,8 +227,7 @@ export class BlrToggleSwitch extends LitElementCustom { class="input-control" id=${this.toogleSwitchId || nothing} name=${this.toogleSwitchId || nothing} - ?disabled=${this.disabled || this.readonly} - ?readonly=${this.readonly} + ?disabled=${this.disabled} .checked=${this.currentCheckedState || nothing} @change=${this.handleChange} tabindex="-1"