Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui-library): checkbox component fixes #1148

Merged
merged 2 commits into from
Aug 26, 2024
Merged

fix(ui-library): checkbox component fixes #1148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6adf6e7
fix(ui-library): checkbox component fixes
ashk1996 Aug 26, 2024
fe134cb
Merge branch 'develop' into feat/673_add-required-prop-checkbox
thrbnhrtmnn Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 91 additions & 26 deletions packages/ui-library/src/components/checkbox/index.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default {
category: 'Content / Settings',
},
},
indeterminatedIcon: {
indeterminateIcon: {
description: 'Select an icon which is displayed when checkbox is indeterminate.',
options: [undefined, ...PureIconKeys],
control: { type: 'select' },
Expand All @@ -87,6 +87,17 @@ export default {
},
if: { arg: 'hasLabel', eq: true },
},
labelAppendix: {
description:
' Enter string used as an appendix to the label. Use this to inform the user if this field is required or not.',
control: {
type: 'text',
},
table: {
category: 'Content / Settings',
},
if: { arg: 'hasLabel', eq: true },
},
hasHint: {
description: 'Choose if component has a hint message.',
control: { type: 'boolean' },
Expand Down Expand Up @@ -126,6 +137,15 @@ export default {
category: 'States',
},
},

//Validation
required: {
description: 'Choose if the component must hold a value after an interaction or a submit.',
defaultValue: false,
table: {
category: 'Validation',
},
},
hasError: {
description: 'Choose if component has an error.',
defaultValue: false,
Expand Down Expand Up @@ -221,6 +241,7 @@ export default {
- [**Disabled**](#disabled)
- [**Readonly**](#readonly)
- [**Validation**](#validation)
- [**Required**](#required)
- [**Has Error**](#has-error)
- [**Dependencies**](#dependencies)
- [**Form-Label**](#form-label)
Expand All @@ -238,14 +259,15 @@ const defaultParams: BlrCheckboxType = {
checked: false,
checkedIcon: 'blrCheckmark',
indeterminate: false,
indeterminatedIcon: 'blrMinus',
indeterminateIcon: 'blrMinus',
hasLabel: true,
label: 'Label-text',
hasHint: false,
hintMessage: 'This is a small hint message',
hintMessageIcon: 'blrInfo',
disabled: false,
readonly: false,
required: false,
hasError: false,
errorMessage: ' ',
errorMessageIcon: undefined,
Expand All @@ -258,6 +280,42 @@ export const BlrCheckbox = (params: BlrCheckboxType) => BlrCheckboxRenderFunctio
BlrCheckbox.storyName = 'Checkbox';
BlrCheckbox.args = defaultParams;

//disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
const argTypesToDisable = [
'theme',
'sizeVariant',
'checked',
'checkedIcon',
'indeterminate',
'indeterminateIcon',
'hasLabel',
'label',
'hasHint',
'hintMessage',
'hintMessageIcon',
'disabled',
'readonly',
'required',
'hasError',
'errorMessage',
'errorMessageIcon',
'arialabel',
'checkboxId',
'name',
];
const generateDisabledArgTypes = (argTypes: string[]) => {
const disabledArgTypes = {};
argTypes.forEach((argType: string) => {
disabledArgTypes[argType] = {
table: {
disable: true,
},
};
});
return disabledArgTypes;
};
const disabledArgTypes = generateDisabledArgTypes(argTypesToDisable);

// All Stories
//Appearance Size Story
/**
Expand Down Expand Up @@ -392,32 +450,39 @@ export const Readonly = () => {
Readonly.story = {
name: ' ',
};
// todo will be implemented with ticket no. #673
// /**
// * ## Validation
// *
// * ### Required
// * The Checkbox component can be set as required. If set as required, an error should be thrown, when the Checkbox component was not checked, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](/docs/components-form-label--docs) component in the dependencies section below.
// */
// export const Required = () => {
// return html`
// ${sharedStyles}
// <div class="wrapper">
// <div class="stories-checkbox">
// ${BlrCheckboxRenderFunction({
// ...defaultParams,
// label: 'Required',
// })}
// </div>
// </div>
// `;
// };
// Required.story = {
// name: ' ',
// };

/**
* ## Validation
* ### Required
* The Checkbox component can be set as required. If set as required, an error should be thrown, when the Text Area component was not filled, before it was submitted. It is recommended to indicate in the label appendix, whether a component is required or not. For more information on the label and label appendix have a look at the [Form Label](#form-label) component in the dependencies section below.
*/
export const Required = () => {
return html`
${sharedStyles}
<div class="wrapper">
<div class="stories-checkbox">
${BlrCheckboxRenderFunction({
...defaultParams,
theme: 'Light',
sizeVariant: 'md',
label: 'Required',
placeholder: '',
hintMessage: '',
required: true,
labelAppendix: '(required)',
value: '',
})}
</div>
</div>
`;
};
Required.argTypes = {
...disabledArgTypes,
};
Required.story = {
name: ' ',
};

/**
* ### Has Error
* The Checkbox component can be set to have an error. An error can be displayed after submitting a wrong value, after leaving/deselecting the Checkbox or in case the Checkbox was set as required and has not been checked before submitting. For more information on the error message have a look at the [Form Caption Group](#form-caption-group) in the dependencies section below.
*/
Expand Down
18 changes: 11 additions & 7 deletions packages/ui-library/src/components/checkbox/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,12 @@ export class BlrCheckbox extends LitElementCustom {
@property() accessor hasLabel!: boolean;
@property() accessor name: string | undefined;
@property() accessor checkedIcon: SizelessIconType | undefined = 'blrCheckmark';
@property() accessor indeterminatedIcon: SizelessIconType | undefined = 'blrMinus';
@property() accessor indeterminateIcon: SizelessIconType | undefined = 'blrMinus';

@property() accessor sizeVariant: FormSizesType | undefined = 'md';

@property() accessor theme: ThemeType = 'Light';
@property({ type: Boolean }) accessor required: boolean | undefined;

@state() protected accessor currentCheckedState: boolean | undefined = this.checked;
@state() protected accessor currentIndeterminateState: boolean | undefined = this.indeterminate;
Expand All @@ -87,23 +88,23 @@ export class BlrCheckbox extends LitElementCustom {
createBlrCheckedChangeEvent({
originalEvent: event,
checkedState: this.currentCheckedState,
})
}),
);
}
}

@state() protected accessor focused = false;

protected handleFocus = (event: FocusEvent) => {
if (!this.disabled && !this.readonly) {
if (!this.disabled) {
this.focused = true;

this.dispatchEvent(createBlrFocusEvent({ originalEvent: event }));
}
};

protected handleBlur = (event: FocusEvent) => {
if (!this.disabled && !this.readonly) {
if (!this.disabled) {
this.focused = false;

this.dispatchEvent(createBlrBlurEvent({ originalEvent: event }));
Expand Down Expand Up @@ -157,6 +158,7 @@ export class BlrCheckbox extends LitElementCustom {
'hover': this.hovered || false,
'active': this.active || false,
'checked': this.currentCheckedState || false,
'required': this.required || false,
'readonly': this.readonly || false,
'indeterminate': this.currentIndeterminateState || false,
});
Expand All @@ -168,6 +170,7 @@ export class BlrCheckbox extends LitElementCustom {
'hover': this.hovered || false,
'active': this.active || false,
'checked': this.currentCheckedState || false,
'required': this.required || false,
'readonly': this.readonly || false,
'indeterminate': this.currentIndeterminateState || false,
'focus': this.focused || false,
Expand Down Expand Up @@ -262,6 +265,7 @@ export class BlrCheckbox extends LitElementCustom {
?checked=${this.currentCheckedState}
?indeterminate=${this.currentIndeterminateState}
?readonly=${this.readonly}
?required="${this.required}"
?hasError=${this.hasError}
@change=${this.handleChange}
aria-hidden="true"
Expand All @@ -271,12 +275,12 @@ export class BlrCheckbox extends LitElementCustom {
${this.currentIndeterminateState
? BlrIconRenderFunction(
{
icon: calculateIconName(this.indeterminatedIcon, checkerIconSizeVariant),
icon: calculateIconName(this.indeterminateIcon, checkerIconSizeVariant),
classMap: checkerIconClasses,
},
{
'aria-hidden': true,
}
},
)
: BlrIconRenderFunction(
{
Expand All @@ -285,7 +289,7 @@ export class BlrCheckbox extends LitElementCustom {
},
{
'aria-hidden': true,
}
},
)}

<div class="${focusRingClasses}"></div>
Expand Down
Loading