Skip to content

Commit

Permalink
fix(ui-library): type errors fixed for lint analyze pipeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashk1996
ashk1996 committed Oct 17, 2024
1 parent fc5fa4a commit 1276bae
Show file tree
Hide file tree
Showing 23 changed files with 123 additions and 115 deletions.
11 changes: 6 additions & 5 deletions packages/ui-library/src/components/button-icon/index.ts
View file
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
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
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
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
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
5 changes: 3 additions & 2 deletions packages/ui-library/src/components/form-label/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
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
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
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
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
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
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

0 comments on commit 1276bae

Please sign in to comment.