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): type errors fixed for lint analyze pipeline #1171

Merged
merged 2 commits into from
Nov 8, 2024
Merged

fix(ui-library): type errors fixed for lint analyze pipeline #1171

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
1276bae
fix(ui-library): type errors fixed for lint analyze pipeline
ashk1996 Oct 17, 2024
488bbfd
fix(ui-library): fix eslint issue
ashk1996 Oct 17, 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
11 changes: 6 additions & 5 deletions packages/ui-library/src/components/button-icon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
createBlrFocusEvent,
} from '../../globals/events.js';
import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
import { ifDefined } from 'lit/directives/if-defined.js';

export type BlrButtonIconEventHandlers = {
blrFocus?: (event: BlrFocusEvent) => void;
Expand All @@ -40,8 +41,8 @@ export class BlrButtonIcon extends LitElementCustom {

@property() accessor arialabel!: string;
@property() accessor icon: SizelessIconType | undefined;
@property() accessor loading: boolean | undefined;
@property() accessor disabled!: boolean;
@property({ type: Boolean }) accessor loading: boolean | undefined;
@property({ type: Boolean }) accessor disabled!: boolean;
@property() accessor buttonIconId: string | undefined;
@property() accessor variant: ActionVariantType = 'primary';
@property() accessor sizeVariant: ActionSizesType | undefined = 'md';
Expand Down Expand Up @@ -108,10 +109,10 @@ export class BlrButtonIcon extends LitElementCustom {
<span
aria-label=${this.arialabel || nothing}
class="${classes}"
aria-disabled=${this.disabled ? 'true' : nothing}
aria-disabled=${this.disabled ? 'true' : 'false'}
@click=${this.handleClick}
id=${this.buttonIconId || nothing}
tabindex=${this.disabled ? nothing : '0'}
id=${ifDefined(this.buttonIconId)}
tabindex=${ifDefined(this.disabled ? undefined : 0)}
@focus=${this.handleFocus}
@blur=${this.handleBlur}
role="button"
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-library/src/components/button-text/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
createBlrFocusEvent,
} from '../../globals/events.js';
import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
import { ifDefined } from 'lit/directives/if-defined.js';

export type BlrButtonTextEventHandlers = {
blrFocus?: (event: BlrFocusEvent) => void;
Expand Down Expand Up @@ -161,10 +162,10 @@ export class BlrButtonText extends LitElementCustom {
return html`
<span
class="${classes}"
aria-disabled=${this.disabled ? 'true' : nothing}
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-label=${this.label}
@click="${this.handleClick}"
tabindex=${this.disabled ? nothing : '0'}
tabindex=${ifDefined(this.disabled ? undefined : 0)}
@focus=${this.handleFocus}
@blur=${this.handleBlur}
role="button"
Expand All @@ -173,7 +174,7 @@ export class BlrButtonText extends LitElementCustom {
this.handleClick(event);
}
}}
id=${this.buttonTextId || nothing}
id="${ifDefined(this.buttonTextId)}"
>
${this.focused && !this.loading ? html`<span class="${focusLayerClasses}"></span>` : nothing}
${this.loading
Expand Down
27 changes: 14 additions & 13 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 @@ -22,6 +22,7 @@ import {
createBlrFocusEvent,
} from '../../globals/events.js';
import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
import { ifDefined } from 'lit/directives/if-defined.js';

export type BlrCheckboxEventHandlers = {
blrFocus?: (event: BlrFocusEvent) => void;
Expand All @@ -44,16 +45,16 @@ export class BlrCheckbox extends LitElementCustom {
@property() accessor checkboxId: string | undefined = '';
@property() accessor arialabel: string | undefined;

@property() accessor disabled: boolean | undefined;
@property() accessor checked: boolean | undefined = false;
@property() accessor indeterminate: boolean | undefined = false;
@property() accessor hasError: boolean | undefined;
@property({ type: Boolean }) accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor checked: boolean | undefined = false;
@property({ type: Boolean }) accessor indeterminate: boolean | undefined = false;
@property({ type: Boolean }) accessor hasError: boolean | undefined;
@property() accessor errorMessage: string | undefined;
@property() accessor errorMessageIcon: SizelessIconType | undefined;
@property() accessor hasHint: boolean | undefined;
@property({ type: Boolean }) accessor hasHint: boolean | undefined;
@property() accessor hintMessageIcon: SizelessIconType | undefined;
@property() accessor hintMessage: string | undefined;
@property() accessor hasLabel!: boolean;
@property({ type: Boolean }) accessor hasLabel!: boolean;
@property() accessor name: string | undefined;
@property() accessor checkedIcon: SizelessIconType | undefined = 'blrCheckmark';
@property() accessor indeterminateIcon: SizelessIconType | undefined = 'blrMinus';
Expand Down Expand Up @@ -246,23 +247,23 @@ export class BlrCheckbox extends LitElementCustom {
this.handleRelease();
}
}}
tabindex=${this.disabled ? nothing : '0'}
aria-checked=${this.currentIndeterminateState ? 'mixed' : this.currentCheckedState}
tabindex=${ifDefined(this.disabled ? undefined : 0)}
aria-checked=${ifDefined(this.currentIndeterminateState ? 'mixed' : this.currentCheckedState)}
role="checkbox"
aria-label=${this.label}
>
<input
type="checkbox"
class="input-control"
tabindex="-1"
aria-label="${this.ariaLabel}"
id=${this.checkboxId || nothing}
name=${this.name || nothing}
aria-label=${ifDefined(this.ariaLabel ?? undefined)}
id=${ifDefined(this.checkboxId)}
name=${ifDefined(this.name)}
?disabled=${this.disabled}
?checked=${this.currentCheckedState}
?indeterminate=${this.currentIndeterminateState}
.indeterminate=${this.currentIndeterminateState ?? false}
?required="${this.required}"
?hasError=${this.hasError}
?data-has-error=${this.hasError}
@change=${this.handleChange}
aria-hidden="true"
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-library/src/components/counter/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export class BlrCounter extends LitElementCustom {
static styles = [staticStyles];

@property() accessor variant: CounterVariantType = 'neutral';
@property() accessor value = 0;
@property() accessor maxValue = 0;
@property({ type: Number }) accessor value = 0;
@property({ type: Number }) accessor maxValue = 0;
@property() accessor sizeVariant: FormSizesType | undefined = 'md';
@property() accessor theme: ThemeType = 'Light_value';

Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/form-caption/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export class BlrFormCaption extends LitElementCustom {
@property() accessor icon: SizelessIconType | undefined = undefined;
@property() accessor variant: CaptionVariantType = 'hint';
@property() accessor sizeVariant: FormSizesType | undefined = 'md';
@property() accessor childElement: TemplateResult<1> | undefined = undefined;
@property({ type: Object }) accessor childElement: TemplateResult<1> | undefined = undefined;
@property() accessor theme: ThemeType = 'Light_value';

protected render() {
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-library/src/components/form-label/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { html, nothing } from 'lit';
import { html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { TAG_NAME } from './renderFunction.js';
import { classMap } from 'lit/directives/class-map.js';
Expand All @@ -7,6 +7,7 @@ import { ThemeType } from '../../foundation/_tokens-generated/index.themes.js';
import { staticStyles as staticFormStyles } from '../../foundation/semantic-tokens/form.css.js';
import { InputSizesType } from '../../globals/types.js';
import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
import { ifDefined } from 'lit/directives/if-defined.js';

export class BlrFormLabel extends LitElementCustom {
static styles = [];
Expand All @@ -16,7 +17,7 @@ export class BlrFormLabel extends LitElementCustom {
@property() accessor sizeVariant: InputSizesType | undefined = 'md';
@property() accessor forValue: string | undefined;
@property() accessor theme: ThemeType = 'Light_value';
@property() accessor hasError: boolean = false;
@property({ type: Boolean }) accessor hasError: boolean = false;

private _error: Error | null = null;

Expand Down Expand Up @@ -63,7 +64,7 @@ export class BlrFormLabel extends LitElementCustom {
// Since it doesnt have a shadowRoot, lit cant apply styles to it.
// We have to render styles inline here, which is not great
return html` ${unsafeHTML(`<style>${dynamicStyles.map((style) => style.cssText).join('\n')}</style>`)}
<label class=${labelClasses} for=${this.forValue || nothing}>
<label class=${labelClasses} for=${ifDefined(this.forValue)}>
${this.label}
<span class=${spanClasses}>${this.labelAppendix}</span>
</label>`;
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-library/src/components/icon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export class BlrIcon extends LitElementCustom {

@property() accessor icon: IconType | undefined = 'blr360Xs';
@property() accessor sizeVariant: SizesType | undefined = 'md';
@property() accessor fillParent: boolean | undefined = true;
@property({ type: Boolean }) accessor fillParent: boolean | undefined = true;

@property() accessor theme: ThemeType | undefined = 'Light_value';
@property() accessor classMap: DirectiveResult<typeof ClassMapDirective> | undefined;
@property({ type: Object }) accessor classMap: DirectiveResult<typeof ClassMapDirective> | undefined;

protected handleClick = (event: MouseEvent | KeyboardEvent) => {
this.dispatchEvent(createBlrClickEvent({ originalEvent: event }));
Expand Down
24 changes: 12 additions & 12 deletions packages/ui-library/src/components/input-field-number/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,24 @@ export class BlrInputFieldNumber extends LitElementCustom {
@property() accessor inputFieldNumberId!: string;
@property() accessor stepperVariant: 'split' | 'horizontal' | 'vertical' = 'split';
@property() accessor label!: string;
@property() accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor disabled: boolean | undefined;
@property() accessor placeholder: string | undefined;
@property() accessor readonly: boolean | undefined;
@property() accessor required: boolean | undefined;
@property() accessor hasLabel: boolean | undefined;
@property({ type: Boolean }) accessor readonly: boolean | undefined;
@property({ type: Boolean }) accessor required: boolean | undefined;
@property({ type: Boolean }) accessor hasLabel: boolean | undefined;
@property() accessor sizeVariant: FormSizesType | undefined = 'md';
@property() accessor labelAppendix: string | undefined;
@property() accessor hasError: boolean | undefined;
@property({ type: Boolean }) accessor hasError: boolean | undefined;
@property() accessor errorMessage: string | undefined;
@property() accessor errorMessageIcon: SizelessIconType | undefined;
@property() accessor hasHint = true;
@property({ type: Boolean }) accessor hasHint = true;
@property() accessor hintMessage: string | undefined;
@property() accessor hintMessageIcon: SizelessIconType | undefined;
@property() accessor value: number | undefined;
@property() accessor step: number | undefined;
@property({ type: Number }) accessor value: number | undefined;
@property({ type: Number }) accessor step: number | undefined;
@property() accessor unit: UnitType | undefined;
@property() accessor leadingZeros: number | undefined;
@property() accessor decimals: number | undefined;
@property({ type: Number }) accessor leadingZeros: number | undefined;
@property({ type: Number }) accessor decimals: number | undefined;
@property() accessor unitPosition: UnitVariantType | undefined;
@property() accessor stepIncreaseAriaLabel: string | undefined = '+';
@property() accessor stepDecreaseAriaLabel: string | undefined = '\u2212'; // minus-sign (not minus-hyphen)
Expand Down Expand Up @@ -323,8 +323,8 @@ export class BlrInputFieldNumber extends LitElementCustom {
type="number"
.value=${this.currentValue != 0
? this.customFormat(this.currentValue || 0, this.decimals || 0, this.leadingZeros || 0)
: nothing}
step="${this.step || nothing}"
: '0'}
step="${this.step !== undefined ? this.step : 1}"
?disabled="${this.disabled}"
?readonly="${this.readonly}"
?required="${this.required}"
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-library/src/components/input-field-text/index.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ export const styleCustom = css`
}
}

&[readonly] {
&.readonly {
outline: ${inputfield.container.border.default.hover.width} ${inputfield.container.border.default.readonly.style}
${inputfield.container.border.default.readonly.color};
background-color: ${inputfield.container.bgcolor.default.readonly};
Expand Down
28 changes: 15 additions & 13 deletions packages/ui-library/src/components/input-field-text/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
} from '../../globals/events.js';
import { LitElementCustom, ElementInterface } from '../../utils/lit/element.js';
import { BlrIconEventHandlers } from '../icon/index.js';
import { ifDefined } from 'lit/directives/if-defined.js';

export type BlrInputFieldTextEventHandlers = {
blrFocus?: (event: BlrFocusEvent) => void;
Expand All @@ -48,21 +49,21 @@ export class BlrInputFieldText extends LitElementCustom {
@property() accessor inputFieldTextId!: string;
@property() accessor type: InputTypes = 'text';
@property() accessor arialabel!: string;
@property() accessor hasLabel!: boolean;
@property({ type: Boolean }) accessor hasLabel!: boolean;
@property() accessor label!: string;
@property() accessor labelAppendix: string | undefined;
@property() accessor value!: string;
@property() accessor placeholder: string | undefined;
@property() accessor disabled: boolean | undefined;
@property() accessor readonly: boolean | undefined;
@property({ type: Boolean }) accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor readonly: boolean | undefined;
@property() accessor sizeVariant: FormSizesType | undefined = 'md';
@property() accessor required: boolean | undefined;
@property() accessor maxLength: number | undefined;
@property({ type: Boolean }) accessor required: boolean | undefined;
@property({ type: Number }) accessor maxLength: number | undefined;
@property() accessor pattern: string | undefined;
@property() accessor hasError: boolean | undefined;
@property({ type: Boolean }) accessor hasError: boolean | undefined;
@property() accessor errorMessage: string | undefined;
@property() accessor icon: SizelessIconType | undefined = 'blr360';
@property() accessor hasHint = true;
@property({ type: Boolean }) accessor hasHint = true;
@property() accessor hintMessage: string | undefined;
@property() accessor hintMessageIcon: SizelessIconType | undefined;
@property() accessor errorMessageIcon: SizelessIconType | undefined;
Expand Down Expand Up @@ -192,6 +193,7 @@ export class BlrInputFieldText extends LitElementCustom {
'focus': this.isFocused || false,
'error-input': this.hasError || false,
'disabled': this.disabled || false,
'readonly': this.readonly ? true : false,
[this.sizeVariant]: this.sizeVariant,
[this.theme]: this.theme,
});
Expand Down Expand Up @@ -233,25 +235,25 @@ export class BlrInputFieldText extends LitElementCustom {
</div>
`
: nothing}
<div class="blr-input-wrapper ${inputContainerClasses}" ?readonly="${this.readonly}">
<div class="blr-input-wrapper ${inputContainerClasses}">
<div class="blr-input-inner-container ${this.theme}">
<input
class="blr-form-input ${inputClasses}"
id=${this.inputFieldTextId}
name="${this.name || nothing}"
name="${ifDefined(this.name)}"
aria-label=${this.arialabel}
type="${this.currentType}"
.value="${this.value}"
placeholder="${this.placeholder}"
placeholder="${ifDefined(this.placeholder)}"
?disabled="${this.disabled}"
?readonly="${this.readonly}"
?required="${this.required}"
@input=${this.handleChange}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
maxlength="${this.maxLength}"
pattern="${this.pattern}"
hasError="${this.hasError}"
maxlength="${ifDefined(this.maxLength)}"
pattern="${ifDefined(this.pattern)}"
?data-has-error=${this.hasError}
@select=${this.handleSelect}
/>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/ui-library/src/components/radio-group/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,14 @@ export type BlrRadioGroupEventHandlers = {
export class BlrRadioGroup extends LitElementCustom {
static styles = [staticFormStyles, staticRadioStyles, componentSpecificStaticStyles];

@property() accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor disabled: boolean | undefined;
@property() accessor name: string | undefined;
@property() accessor sizeVariant: InputSizesType = 'md';
@property() accessor hasLegend: boolean | undefined;
@property() accessor required: boolean | undefined;
@property() accessor hasError: boolean | undefined;
@property({ type: Boolean }) accessor hasLegend: boolean | undefined;
@property({ type: Boolean }) accessor required: boolean | undefined;
@property({ type: Boolean }) accessor hasError: boolean | undefined;
@property() accessor errorIcon: SizelessIconType | undefined;
@property() accessor hasHint = true;
@property({ type: Boolean }) accessor hasHint = true;
@property() accessor groupHintMessageIcon: SizelessIconType | undefined;
@property() accessor groupErrorMessage: string | undefined;
@property() accessor groupHintMessage: string | undefined;
Expand Down
17 changes: 9 additions & 8 deletions packages/ui-library/src/components/radio/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
} from '../../globals/events.js';
import { LitElementCustom } from '../../utils/lit/element.js';
import { SignalHub } from '../../utils/lit/signals.js';
import { ifDefined } from 'lit/directives/if-defined.js';

/**
* @fires blrFocus Radio received focus
Expand All @@ -38,15 +39,15 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti

@property() accessor optionId!: string;
@property() accessor label!: string;
@property() accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor disabled: boolean | undefined;
@property({ type: Boolean }) accessor checked: boolean | undefined;
@property() accessor name: string | undefined;
@property() accessor sizeVariant: InputSizesType | undefined = 'md';
@property() accessor required: boolean | undefined;
@property() accessor hasError: boolean | 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() accessor hasHint: boolean | undefined;
@property({ type: Boolean }) accessor hasHint: boolean | undefined;
@property() accessor hintMessage: string | undefined;
@property() accessor hintMessageIcon: SizelessIconType | undefined;
@property() accessor value: string | undefined;
Expand Down Expand Up @@ -127,14 +128,14 @@ export class BlrRadio extends LitElementCustom implements PublicReactiveProperti
return html`
<div class="blr-radio ${classes}">
<input
id=${id || nothing}
id=${id ? id : ''}
class="${classes} input-control"
type="radio"
name=${this.name}
name="${ifDefined(this.name)}"
?disabled=${this.disabled}
?invalid=${this.hasError}
?data-has-error=${this.hasError || false}
?checked=${this.checked}
.checked=${this.checked || nothing}
.checked=${this.checked === true}
?required=${this.required}
@click=${this.handleClick}
@focus=${this.handleFocus}
Expand Down
Loading
Loading