fix(ui): camelCase to kebab-case (#970)

deven-org · Mar 15, 2024 · 7b4a8bc · 7b4a8bc
1 parent 8be7908
commit 7b4a8bc
Show file tree

Hide file tree

Showing 27 changed files with 88 additions and 29 deletions.
diff --git a/packages/ui-library/src/components/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts
@@ -5,8 +5,9 @@ import { styleCustom } from './index.css';
 import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrButtonGroup extends LitElement {
+export class BlrButtonGroup extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() sizeVariant: ButtonGroupSizesType = 'md';

diff --git a/packages/ui-library/src/components/button-icon/index.ts b/packages/ui-library/src/components/button-icon/index.ts
@@ -21,6 +21,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrButtonIconEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrButtonIconEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonIcon extends LitElement {
+export class BlrButtonIcon extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() arialabel!: string;

diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
@@ -27,6 +27,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrButtonTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -39,7 +40,7 @@ export type BlrButtonTextEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonText extends LitElement {
+export class BlrButtonText extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() label = 'Button Label';

diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -21,6 +21,7 @@ import {
   createBlrBlurEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrCheckboxEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrCheckboxEventHandlers = {
  * @fires blrBlur Checkbox lost focus
  * @fires blrCheckedChange Checkbox state changed (event.checkState)
  */
-export class BlrCheckbox extends LitElement {
+export class BlrCheckbox extends BoilerLitElement {
   static styles = [];
 
   @query('input')
@@ -265,7 +266,8 @@ export class BlrCheckbox extends LitElement {
             ?checked=${this.currentCheckedState}
             ?indeterminate=${this.currentIndeterminateState}
             ?readonly=${this.readonly}
-            ?hasError=${this.hasError}
+            ?has-Error=${this.hasError}
+            ?has-Label=${this.hasLabel}
             @change=${this.handleChange}
             aria-hidden="true"
           />

diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
@@ -5,8 +5,9 @@ import { CounterVariantType, FormSizesType } from '../../globals/types';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { counterLight, counterDark } from './index.css';
 import { TAG_NAME } from './renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrCounter extends LitElement {
+export class BlrCounter extends BoilerLitElement {
   static styles = [];
 
   @property() variant: CounterVariantType = 'neutral';

diff --git a/packages/ui-library/src/components/divider/index.ts b/packages/ui-library/src/components/divider/index.ts
@@ -5,8 +5,9 @@ import { dividerDark, dividerLight } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { DividerVariationTypes } from '../../globals/types';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrDivider extends LitElement {
+export class BlrDivider extends BoilerLitElement {
   @property() direction: DividerVariationTypes = 'vertical';
   @property() theme: ThemeType = 'Light';
 

diff --git a/packages/ui-library/src/components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts
@@ -6,8 +6,9 @@ import { classMap } from 'lit/directives/class-map.js';
 import { formCaptionGroupStyle } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrFormCaptionGroup extends LitElement {
+export class BlrFormCaptionGroup extends BoilerLitElement {
   static styles = [formCaptionGroupStyle];
 
   @property() sizeVariant: FormSizesType = 'md';

diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
@@ -9,8 +9,9 @@ import { CaptionVariantType, FormSizesType, SizesType } from '../../globals/type
 import { calculateIconName } from '../../utils/calculate-icon-name';
 import { getComponentConfigToken } from '../../utils/get-component-config-token';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrFormCaption extends LitElement {
+export class BlrFormCaption extends BoilerLitElement {
   static styles = [];
 
   @property() message?: string;

diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
@@ -5,8 +5,9 @@ import { property } from 'lit/decorators.js';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
 import { InputSizesType } from '../../globals/types';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrFormLabel extends LitElement {
+export class BlrFormLabel extends BoilerLitElement {
   static styles = [];
 
   @property() label = '';

diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts
@@ -10,6 +10,7 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrClickEvent, createBlrClickEvent } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrIconEventHandlers = {
   blrClick?: (event: BlrClickEvent) => void;
@@ -18,7 +19,7 @@ export type BlrIconEventHandlers = {
 /**
  * @fires blrClick Icon was clicked
  */
-export class BlrIcon extends LitElement {
+export class BlrIcon extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() icon: IconType = 'blr360Xs';

diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
@@ -26,6 +26,7 @@ import {
   createBlrNumberValueChangeEvent,
   createBlrSelectEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrNumberInputEventListeners = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -42,7 +43,7 @@ export type BlrNumberInputEventListeners = {
  * @fires blrSelect Text in NumberInput was selected
  * @fires blrNumberStepperClick Step button was clicked
  */
-export class BlrInputFieldNumber extends LitElement {
+export class BlrInputFieldNumber extends BoilerLitElement {
   static styles = [baseStyle];
 
   @query('input')

diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts
@@ -24,6 +24,7 @@ import {
   createBlrSelectEvent,
   createBlrTextValueChangeEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrInputFieldTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -38,7 +39,7 @@ export type BlrInputFieldTextEventHandlers = {
  * @fires blrTextValueChange InputFieldText value changed
  * @fires blrSelect Text in InputFieldText got selected
  */
-export class BlrInputFieldText extends LitElement {
+export class BlrInputFieldText extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() inputFieldTextId!: string;
@@ -197,7 +198,7 @@ export class BlrInputFieldText extends LitElement {
                 @focus=${this.handleFocus}
                 maxlength="${this.maxLength}"
                 pattern="${this.pattern}"
-                hasError="${this.hasError}"
+                has-Error="${this.hasError}"
                 @select=${this.handleSelect}
               />
             </div>

diff --git a/packages/ui-library/src/components/loader/index.ts b/packages/ui-library/src/components/loader/index.ts
@@ -6,8 +6,9 @@ import { styleCustomLight, styleCustomDark } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { ActionSizesType, FeedbackVariantType } from '../../globals/types';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrLoader extends LitElement {
+export class BlrLoader extends BoilerLitElement {
   static styles = [];
 
   @property() sizeVariant?: ActionSizesType = 'md';

diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts
@@ -11,8 +11,9 @@ import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderF
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 import { TAG_NAME } from './renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrRadioGroup extends LitElement {
+export class BlrRadioGroup extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() disabled?: boolean;

diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts
@@ -11,8 +11,9 @@ import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrRadio extends LitElement {
+export class BlrRadio extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() optionId!: string;

diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -24,6 +24,8 @@ import {
   createBlrSelectedValueChangeEvent,
 } from '../../globals/events';
 
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
+
 export type BlrSelectEventHandlers = {
   blrSelectedValueChange?: (event: BlrSelectedValueChangeEvent) => void;
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -35,7 +37,7 @@ export type BlrSelectEventHandlers = {
  * @fires blrFocus Select received focus
  * @fires blrBlur Select lost focus
  */
-export class BlrSelect extends LitElement {
+export class BlrSelect extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() arialabel?: string;

diff --git a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts
@@ -12,8 +12,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { BoilerLitElement } from '../../../utils/boiler-lit-element';
 
-export class BlrRangeLegendSlider extends LitElement {
+export class BlrRangeLegendSlider extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() onClickMinMax?: (param: number) => void;

diff --git a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts
@@ -10,8 +10,9 @@ import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../foundation/_tokens-generated/index.themes';
 import { findPercentage, generateRangeBar, setOnclickValue, findNearestValue } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { BoilerLitElement } from '../../../utils/boiler-lit-element';
 
-export class BlrRangeSlider extends LitElement {
+export class BlrRangeSlider extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() onClickMinMax?: (param: number) => void;

diff --git a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts
@@ -11,8 +11,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { setOnclickValue, findToolTipPosition } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { BoilerLitElement } from '../../../utils/boiler-lit-element';
 
-export class BlrRangeLegendMinMaxSlider extends LitElement {
+export class BlrRangeLegendMinMaxSlider extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() onBtnClick?: (min: number, max: number) => void;

diff --git a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts
@@ -9,8 +9,9 @@ import { sliderLight, sliderDark } from '../../../foundation/component-tokens/sl
 import { FormSizesType, ActionVariantType, RenderBtnProps } from '../../../globals/types';
 import { findPercentage, generateRangeBar, findNearestValue, setOnclickValue } from '../../../utils/range-slider-utils';
 import { BlrButtonIconRenderFunction } from '../../button-icon/renderFunction';
+import { BoilerLitElement } from '../../../utils/boiler-lit-element';
 
-export class BlrRangeMinMaxSlider extends LitElement {
+export class BlrRangeMinMaxSlider extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() onBtnClick?: (min: number, max: number) => void;

diff --git a/packages/ui-library/src/components/tab-bar/index.ts b/packages/ui-library/src/components/tab-bar/index.ts
@@ -22,8 +22,9 @@ import { getComponentConfigToken } from '../../utils/get-component-config-token'
 import { BlrDividerRenderFunction } from '../divider/renderFunction';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
 import { formLight, formDark } from '../../foundation/semantic-tokens/form.css';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrTabBar extends LitElement {
+export class BlrTabBar extends BoilerLitElement {
   static styles = [styleCustom];
 
   @query('.blr-tab-bar')

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -22,6 +22,7 @@ import {
   createBlrSelectEvent,
   createBlrTextValueChangeEvent,
 } from '../../globals/events';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 export type BlrTextareaEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -36,7 +37,7 @@ export type BlrTextareaEventHandlers = {
  * @fires blrTextValueChange Textarea value changed
  * @fires blrSelect Text in Textarea got selected
  */
-export class BlrTextarea extends LitElement {
+export class BlrTextarea extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() textAreaId!: string;

diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts
@@ -12,8 +12,9 @@ import { FormSizesType, IconPositionVariant } from '../../globals/types';
 import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { BlrFormLabelInlineRenderFunction } from '../form-label/form-label-inline/renderFunction';
 import { styleCustom, toggleSwitchLight, toggleSwitchDark } from './index.css';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrToggleSwitch extends LitElement {
+export class BlrToggleSwitch extends BoilerLitElement {
   static styles = [styleCustom];
 
   @query('input')

diff --git a/packages/ui-library/src/components/tooltip-bubble/index.ts b/packages/ui-library/src/components/tooltip-bubble/index.ts
@@ -4,8 +4,9 @@ import { light, dark } from './index.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
-export class BlrTooltipBubble extends LitElement {
+export class BlrTooltipBubble extends BoilerLitElement {
   static styles = [
     css`
       :host([visible]) {

diff --git a/packages/ui-library/src/components/tooltip/index.ts b/packages/ui-library/src/components/tooltip/index.ts
@@ -7,11 +7,12 @@ import { TAG_NAME } from './renderFunction';
 
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { BlrTooltipBubbleRenderFunction } from '../tooltip-bubble/renderFunction';
+import { BoilerLitElement } from '../../utils/boiler-lit-element';
 
 const enterEvents = ['pointerenter', 'focus'];
 const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
 
-export class BlrTooltip extends LitElement {
+export class BlrTooltip extends BoilerLitElement {
   static styles = [styleCustom];
 
   @property() theme?: ThemeType = 'Light';

diff --git a/packages/ui-library/src/utils/boiler-lit-element.ts b/packages/ui-library/src/utils/boiler-lit-element.ts
@@ -0,0 +1,31 @@
+import { LitElement, PropertyDeclaration } from 'lit';
+
+export const camelCaseToKebabCase = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
+export class BoilerLitElement extends LitElement {
+  /**
+   * Sets the attribute name in kebab-case
+   *
+   * This function overwrites the lit elements createProperty method,
+   * here it converts the provided attribute name to kebab-case instead of lowercase,
+   * which is the convention for HTML attributes.
+   *
+   * For more information on observed attributes in web components,
+   * refer to the official Lit documentation:
+   * https://lit.dev/docs/components/properties/#observed-attributes
+   *
+   * @param {string} name - The attribute name to convert.
+   * @returns {string} The attribute name in kebab-case.
+   */
+  static createProperty(name: PropertyKey, options: PropertyDeclaration) {
+    let customOptions = options;
+
+    // generate the attribute name if it hasn't been defined or if it's disabled.
+    if (typeof options?.attribute === 'undefined' || options?.attribute === true) {
+      const attributeName = camelCaseToKebabCase(name.toString());
+      customOptions = { ...options, attribute: attributeName };
+    }
+
+    return super.createProperty(name, customOptions);
+  }
+}