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

deven-org · Mar 18, 2024 · 500a964 · 500a964
1 parent daebf49
commit 500a964
Show file tree

Hide file tree

Showing 30 changed files with 162 additions and 82 deletions.
diff --git a/packages/ui-library/.eslintrc.js b/packages/ui-library/.eslintrc.js
@@ -11,4 +11,26 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   extends: ['../eslint-config-boiler'],
   ignorePatterns: ['types/', '*.svg', '*.scss', '*.css', '*.md', '*.config.mjs', '.*', 'webpack*.js'],
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['lit'],
+            importNamePattern: 'LitElement',
+            message: `Don't use the default LitElement class. Import from /utils/lit-element-custom instead`,
+          },
+        ],
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['src/utils/lit-element-custom.ts'],
+      rules: {
+        'no-restricted-imports': 'off',
+      },
+    },
+  ],
 };
diff --git a/packages/ui-library/src/components/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
 import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrButtonGroup extends LitElement {
+export class BlrButtonGroup extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() sizeVariant: ButtonGroupSizesType = 'md';
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonGroup);
 }
 
-export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;
+export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/button-icon/index.ts b/packages/ui-library/src/components/button-icon/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -21,6 +21,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   static styles = [styleCustom];
 
   @property() arialabel!: string;
@@ -150,4 +151,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonIcon);
 }
 
-export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElement> & BlrButtonIconEventHandlers;
+export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElementCustom> & BlrButtonIconEventHandlers;
diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -27,6 +27,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   static styles = [styleCustom];
 
   @property() label = 'Button Label';
@@ -188,4 +189,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonText);
 }
 
-export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElement> & BlrButtonTextEventHandlers;
+export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElementCustom> & BlrButtonTextEventHandlers;
diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -21,6 +21,7 @@ import {
   createBlrBlurEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   static styles = [];
 
   @query('input')
@@ -316,4 +317,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCheckbox);
 }
 
-export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement> & BlrCheckboxEventHandlers;
+export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElementCustom> & BlrCheckboxEventHandlers;
diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 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 { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrCounter extends LitElement {
+export class BlrCounter extends LitElementCustom {
   static styles = [];
 
   @property() variant: CounterVariantType = 'neutral';
@@ -39,4 +40,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCounter);
 }
 
-export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;
+export type BlrCounterType = Omit<BlrCounter, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/divider/index.ts b/packages/ui-library/src/components/divider/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 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 { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrDivider extends LitElement {
+export class BlrDivider extends LitElementCustom {
   @property() direction: DividerVariationTypes = 'vertical';
   @property() theme: ThemeType = 'Light';
 
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrDivider);
 }
 
-export type BlrDividerType = Omit<BlrDivider, keyof LitElement>;
+export type BlrDividerType = Omit<BlrDivider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts
@@ -1,13 +1,14 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { FormSizesType } from '../../globals/types';
 import { classMap } from 'lit/directives/class-map.js';
 import { formCaptionGroupStyle } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaptionGroup extends LitElement {
+export class BlrFormCaptionGroup extends LitElementCustom {
   static styles = [formCaptionGroupStyle];
 
   @property() sizeVariant: FormSizesType = 'md';
@@ -30,4 +31,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaptionGroup);
 }
 
-export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElement>;
+export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -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 { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaption extends LitElement {
+export class BlrFormCaption extends LitElementCustom {
   static styles = [];
 
   @property() message?: string;
@@ -75,4 +76,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaption);
 }
 
-export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElement>;
+export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -4,9 +4,9 @@ import { FormSizes } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
-import { LitElement } from 'lit';
 import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 import '../../index';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const sharedStyles = html`
   <style>
@@ -107,7 +107,7 @@ export default {
 
 // The label is not creating a shadow root itself, but errors if it is outside
 // of one. Thus, we're creating a helper component for the stories, that wraps it.
-class WrappedBlrLabel extends LitElement {
+class WrappedBlrLabel extends LitElementCustom {
   labelProps: BlrFormLabelType;
 
   protected render() {

diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts
@@ -5,7 +5,7 @@ import type { BlrFormLabel, BlrFormLabelType } from '.';
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
 import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
-import { LitElement } from 'lit';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const sampleParams: BlrFormLabelType = {
   theme: 'Light',
@@ -17,7 +17,7 @@ const sampleParams: BlrFormLabelType = {
 
 // The label is not creating a shadow root itself, but errors if it is outside
 // of one. Thus, we're creating a helper component for the stories, that wraps it.
-class WrappedBlrLabel extends LitElement {
+class WrappedBlrLabel extends LitElementCustom {
   labelProps: BlrFormLabelType;
 
   protected render() {

diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { TAG_NAME } from './renderFunction';
 import { classMap } from 'lit-html/directives/class-map.js';
 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 { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormLabel extends LitElement {
+export class BlrFormLabel extends LitElementCustom {
   static styles = [];
 
   @property() label = '';
@@ -71,4 +72,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormLabel);
 }
 
-export type BlrFormLabelType = Omit<BlrFormLabel, keyof LitElement | 'createRenderRoot' | 'error'>;
+export type BlrFormLabelType = Omit<BlrFormLabel, keyof LitElementCustom | 'createRenderRoot' | 'error'>;
diff --git a/packages/ui-library/src/components/icon/index.ts b/packages/ui-library/src/components/icon/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { IconMapping, IconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
@@ -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 { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   static styles = [styleCustom];
 
   @property() icon: IconType = 'blr360Xs';
@@ -77,4 +78,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrIcon);
 }
 
-export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElement>> & BlrIconEventHandlers;
+export type BlrIconType = Partial<Omit<BlrIcon, keyof LitElementCustom>> & BlrIconEventHandlers;
diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { baseStyle, wrapperLight, wrapperDark, StepperComboDark, StepperComboLight } from './index.css';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -26,6 +26,7 @@ import {
   createBlrNumberValueChangeEvent,
   createBlrSelectEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   static styles = [baseStyle];
 
   @query('input')
@@ -353,4 +354,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrInputFieldNumber);
 }
 
-export type BlrInputFieldNumberType = Omit<BlrInputFieldNumber, keyof LitElement> & BlrNumberInputEventListeners;
+export type BlrInputFieldNumberType = Omit<BlrInputFieldNumber, keyof LitElementCustom> & BlrNumberInputEventListeners;
diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
@@ -24,6 +24,7 @@ import {
   createBlrSelectEvent,
   createBlrTextValueChangeEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 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 LitElementCustom {
   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>
@@ -250,4 +251,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrInputFieldText);
 }
 
-export type BlrInputFieldTextType = Omit<BlrInputFieldText, keyof LitElement> & BlrInputFieldTextEventHandlers;
+export type BlrInputFieldTextType = Omit<BlrInputFieldText, keyof LitElementCustom> & BlrInputFieldTextEventHandlers;