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.

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
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -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' },
@@ -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' },
@@ -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,
@@ -221,6 +241,7 @@ export default {
- [**Disabled**](#disabled)
- [**Readonly**](#readonly)
- [**Validation**](#validation)
- [**Required**](#required)
- [**Has Error**](#has-error)
- [**Dependencies**](#dependencies)
- [**Form-Label**](#form-label)
@@ -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,
@@ -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
/**
@@ -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.
*/
18 changes: 11 additions & 7 deletions packages/ui-library/src/components/checkbox/index.ts
Original file line number Diff line number Diff line change
@@ -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;
@@ -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 }));
@@ -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,
});
@@ -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,
@@ -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"
@@ -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(
{
@@ -285,7 +289,7 @@ export class BlrCheckbox extends LitElementCustom {
},
{
'aria-hidden': true,
}
},
)}

<div class="${focusRingClasses}"></div>