💥 breaking: remove Deprecated Mode Style (#1139)

* Create PR for #1129 * breaking: remove deprecated mode style * chore: fix lint issues * chore: remove deprecated bal-body class * chore: format files --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
baloise · Nov 16, 2023 · 0ab4c7f · 0ab4c7f
1 parent 86ce854
commit 0ab4c7f
Show file tree

Hide file tree

Showing 107 changed files with 190 additions and 581 deletions.
diff --git a/.changeset/pretty-baboons-lick.md b/.changeset/pretty-baboons-lick.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': major
+---
+
+Removed the deprecated option of component styles with SASS. Instead, for customizing the component design, use CSS Variables.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -37,10 +37,7 @@
   "types": "dist/types/interfaces.d.ts",
   "files": [
     "dist/",
-    "loader/",
-    "src/styles/",
-    "src/components/**/*.sass",
-    "src/components/**/*.scss"
+    "loader/"
   ],
   "scripts": {
     "==================== START =========================": "================================",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { BalConfigState, BalMode } from "./utils/config";
+import { BalConfigState } from "./utils/config";
 import { AccordionState, BalAriaForm as BalAriaForm1, BalConfigState as BalConfigState1 } from "./interfaces";
 import { BalCarouselItemData } from "./components/bal-carousel/bal-carousel.type";
 import { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
@@ -17,7 +17,7 @@ import { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 import { BalRadioOption } from "./components/bal-radio/bal-radio.type";
 import { BalStepOption } from "./components/bal-steps/bal-step.type";
 import { BalTabOption } from "./components/bal-tabs/bal-tab.type";
-export { BalConfigState, BalMode } from "./utils/config";
+export { BalConfigState } from "./utils/config";
 export { AccordionState, BalAriaForm as BalAriaForm1, BalConfigState as BalConfigState1 } from "./interfaces";
 export { BalCarouselItemData } from "./components/bal-carousel/bal-carousel.type";
 export { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
@@ -125,10 +125,6 @@ export namespace Components {
           * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
          */
         "animated": boolean;
-        /**
-          * @deprecated Mode defines how the styles are loaded. With `css` each component loads his own styles and with `sass` the component styles needs to be imported with the file `components.sass`.
-         */
-        "mode": BalMode;
         "ready": boolean;
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
     }
@@ -3389,10 +3385,6 @@ export interface BalAccordionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalAccordionElement;
 }
-export interface BalAppCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLBalAppElement;
-}
 export interface BalButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBalButtonElement;
@@ -3607,18 +3599,7 @@ declare global {
         prototype: HTMLBalAccordionTriggerElement;
         new (): HTMLBalAccordionTriggerElement;
     };
-    interface HTMLBalAppElementEventMap {
-        "balAppLoad": BalEvents.BalAppLoadDetail;
-    }
     interface HTMLBalAppElement extends Components.BalApp, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLBalAppElementEventMap>(type: K, listener: (this: HTMLBalAppElement, ev: BalAppCustomEvent<HTMLBalAppElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLBalAppElementEventMap>(type: K, listener: (this: HTMLBalAppElement, ev: BalAppCustomEvent<HTMLBalAppElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLBalAppElement: {
         prototype: HTMLBalAppElement;
@@ -5169,11 +5150,6 @@ declare namespace LocalJSX {
           * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
          */
         "animated"?: boolean;
-        /**
-          * @deprecated Mode defines how the styles are loaded. With `css` each component loads his own styles and with `sass` the component styles needs to be imported with the file `components.sass`.
-         */
-        "mode"?: BalMode;
-        "onBalAppLoad"?: (event: BalAppCustomEvent<BalEvents.BalAppLoadDetail>) => void;
         "ready"?: boolean;
     }
     interface BalBadge {

diff --git a/...s/components/src/components/bal-accordion/bal-accordion-details/bal-accordion-details.tsx b/...s/components/src/components/bal-accordion/bal-accordion-details/bal-accordion-details.tsx
@@ -5,9 +5,7 @@ import { AccordionState } from '../../../interfaces'
 
 @Component({
   tag: 'bal-accordion-details',
-  styleUrls: {
-    css: 'bal-accordion-details.sass',
-  },
+  styleUrl: 'bal-accordion-details.sass',
 })
 export class AccordionDetail implements ComponentInterface, Loggable {
   private componentId = `bal-accordion-details-${accordionDetailIds++}`

diff --git a/...s/components/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.tsx b/...s/components/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.tsx
@@ -6,9 +6,7 @@ import { AccordionState } from '../../../interfaces'
 
 @Component({
   tag: 'bal-accordion-summary',
-  styleUrls: {
-    css: 'bal-accordion-summary.sass',
-  },
+  styleUrl: 'bal-accordion-summary.sass',
 })
 export class AccordionSummary implements ComponentInterface, Loggable {
   private componentId = `bal-accordion-summary-${accordionSummaryIds++}`

diff --git a/...s/components/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.tsx b/...s/components/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.tsx
@@ -6,9 +6,7 @@ import { AccordionState } from '../../../interfaces'
 
 @Component({
   tag: 'bal-accordion-trigger',
-  styleUrls: {
-    css: 'bal-accordion-trigger.sass',
-  },
+  styleUrl: 'bal-accordion-trigger.sass',
 })
 export class AccordionTrigger implements ComponentInterface, Loggable {
   private componentId = `bal-accordion-trigger-${accordionTriggerIds++}`

diff --git a/packages/components/src/components/bal-accordion/bal-accordion.tsx b/packages/components/src/components/bal-accordion/bal-accordion.tsx
@@ -20,9 +20,7 @@ import { AccordionState } from '../../interfaces'
 
 @Component({
   tag: 'bal-accordion',
-  styleUrls: {
-    css: 'bal-accordion.sass',
-  },
+  styleUrl: 'bal-accordion.sass',
 })
 export class Accordion implements ComponentInterface, BalConfigObserver, Loggable {
   private componentId = `bal-accordion-${accordionIds++}`

diff --git a/packages/components/src/components/bal-accordion/test/bal-accordion.v2.visual.html b/packages/components/src/components/bal-accordion/test/bal-accordion.v2.visual.html
@@ -9,7 +9,7 @@
     <script nomodule src="/build/design-system-components.js"></script>
   </head>
 
-  <body class="bal-body">
+  <body>
     <bal-doc-app>
       <main class="container py-medium">
         <section>

diff --git a/packages/components/src/components/bal-app/bal-app.interfaces.ts b/packages/components/src/components/bal-app/bal-app.interfaces.ts
@@ -8,7 +8,4 @@ namespace BalEvents {
     detail: T
     target: HTMLBalAppElement
   }
-
-  export type BalAppLoadDetail = boolean
-  export type BalAppLoad = BalAppCustomEvent<BalAppLoadDetail>
 }
diff --git a/packages/components/src/components/bal-app/bal-app.sass b/packages/components/src/components/bal-app/bal-app.sass
@@ -4,9 +4,3 @@
 .bal-app
   position: relative
   display: block
-
-//
-// Sets the defined body content visible after
-// the web-components have been loaded
-.bal-body.is-ready
-  visibility: inherit
diff --git a/packages/components/src/components/bal-app/bal-app.tsx b/packages/components/src/components/bal-app/bal-app.tsx
@@ -1,15 +1,13 @@
-import { Component, Host, h, Event, EventEmitter, Prop, Method, Element } from '@stencil/core'
+import { Component, Host, h, Prop, Method, Element } from '@stencil/core'
 import { balBrowser } from '../../utils/browser'
 import { balDevice } from '../../utils/device'
-import { BalMode, initStyleMode, updateBalAnimated } from '../../utils/config'
+import { updateBalAnimated } from '../../utils/config'
 import { debounce, rIC } from '../../utils/helpers'
 import { Loggable, Logger, LogInstance } from '../../utils/log'
 
 @Component({
   tag: 'bal-app',
-  styleUrls: {
-    css: 'bal-app.sass',
-  },
+  styleUrl: 'bal-app.sass',
 })
 export class App implements Loggable {
   private focusVisible?: any
@@ -24,12 +22,6 @@ export class App implements Loggable {
     this.log = log
   }
 
-  /**
-   * @deprecated Mode defines how the styles are loaded. With `css` each component loads his own styles
-   * and with `sass` the component styles needs to be imported with the file `components.sass`.
-   */
-  @Prop({ reflect: true }) mode: BalMode = 'css'
-
   /**
    * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
    */
@@ -40,14 +32,7 @@ export class App implements Loggable {
    */
   @Prop({ reflect: true, mutable: true }) ready = false
 
-  /**
-   * @internal
-   * Tells if the components are ready
-   */
-  @Event({ bubbles: true, composed: true }) balAppLoad!: EventEmitter<BalEvents.BalAppLoadDetail>
-
   connectedCallback() {
-    initStyleMode(this.mode)
     updateBalAnimated(this.animated)
 
     if (balBrowser.hasWindow) {
@@ -58,7 +43,6 @@ export class App implements Loggable {
 
   componentDidLoad() {
     rIC(async () => {
-      this.balAppLoad.emit(true)
       this.ready = true
       import('../../utils/focus-visible').then(module => (this.focusVisible = module.startFocusVisible()))
     })

diff --git a/packages/components/src/components/bal-badge/bal-badge.tsx b/packages/components/src/components/bal-badge/bal-badge.tsx
@@ -3,9 +3,7 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-badge',
-  styleUrls: {
-    css: 'bal-badge.sass',
-  },
+  styleUrl: 'bal-badge.sass',
 })
 export class Badge implements ComponentInterface {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-badge/test/bal-badge.theming.html b/packages/components/src/components/bal-badge/test/bal-badge.theming.html
@@ -9,7 +9,7 @@
     <script nomodule src="/build/design-system-components.js"></script>
   </head>
 
-  <body class="bal-body">
+  <body>
     <bal-doc-app>
       <main class="container py-medium">
         <section>

diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
@@ -3,9 +3,7 @@ import { Attributes, inheritAttributes } from '../../utils/attributes'
 
 @Component({
   tag: 'bal-button',
-  styleUrls: {
-    css: 'bal-button.sass',
-  },
+  styleUrl: 'bal-button.sass',
 })
 export class Button implements ComponentInterface {
   private inheritAttributes: Attributes = {}

diff --git a/packages/components/src/components/bal-button/test/bal-button.perf.html b/packages/components/src/components/bal-button/test/bal-button.perf.html
@@ -19,7 +19,7 @@
     <script nomodule src="/build/design-system-components.js"></script>
   </head>
   <body>
-    <bal-app class="bal-body">
+    <bal-app>
       <main class="container py-medium">
         <bal-button>Button</bal-button>
       </main>

diff --git a/packages/components/src/components/bal-card/bal-card.tsx b/packages/components/src/components/bal-card/bal-card.tsx
@@ -3,9 +3,7 @@ import isEmpty from 'lodash.isempty'
 
 @Component({
   tag: 'bal-card',
-  styleUrls: {
-    css: 'bal-card.sass',
-  },
+  styleUrl: 'bal-card.sass',
 })
 export class BalCard {
   /**

diff --git a/packages/components/src/components/bal-card/test/bal-card.visual.html b/packages/components/src/components/bal-card/test/bal-card.visual.html
@@ -5,9 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <style>
-      .bal-body {
-        visibility: hidden;
-      }
       section {
         padding: 2rem;
       }

diff --git a/packages/components/src/components/bal-carousel/test/bal-carousel.perf.html b/packages/components/src/components/bal-carousel/test/bal-carousel.perf.html
@@ -11,7 +11,7 @@
   </head>
 
   <body>
-    <bal-app class="bal-body">
+    <bal-app>
       <main class="container is-compact py-medium">
         <section class="my-normal">
           <bal-heading>Text</bal-heading>

diff --git a/packages/components/src/components/bal-carousel/test/bal-carousel.visual.html b/packages/components/src/components/bal-carousel/test/bal-carousel.visual.html
@@ -11,7 +11,7 @@
   </head>
 
   <body>
-    <bal-app class="bal-body">
+    <bal-app>
       <main class="container is-compact py-medium">
         <section>
           <bal-carousel data-testid="basic" border>

diff --git a/packages/components/src/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.tsx b/packages/components/src/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.tsx
@@ -21,9 +21,7 @@ import { BalElementStateListener } from '../../../utils/element-states/element-s
 
 @Component({
   tag: 'bal-checkbox-button',
-  styleUrls: {
-    css: './bal-checkbox-button.sass',
-  },
+  styleUrl: './bal-checkbox-button.sass',
 })
 export class BalCheckboxButton implements ComponentInterface, Loggable, BalElementStateObserver {
   @Element() el!: HTMLElement

diff --git a/packages/components/src/components/bal-checkbox/bal-checkbox.tsx b/packages/components/src/components/bal-checkbox/bal-checkbox.tsx
@@ -23,9 +23,7 @@ import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils
 
 @Component({
   tag: 'bal-checkbox',
-  styleUrls: {
-    css: 'radio-checkbox.sass',
-  },
+  styleUrl: 'radio-checkbox.sass',
 })
 export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, BalAriaFormLinking {
   private inputId = `bal-cb-${checkboxIds++}`

diff --git a/packages/components/src/components/bal-checkbox/test/bal-checkbox-button.visual.html b/packages/components/src/components/bal-checkbox/test/bal-checkbox-button.visual.html
@@ -5,10 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <style>
-      .bal-body {
-        visibility: hidden;
-      }
-
       section {
         padding: 1rem;
       }
@@ -17,7 +13,7 @@
     <script nomodule src="/build/design-system-components.js"></script>
   </head>
 
-  <body class="bal-body">
+  <body>
     <bal-doc-app>
       <main class="container py-medium">
         <section data-testid="basic">

diff --git a/packages/components/src/components/bal-close/bal-close.tsx b/packages/components/src/components/bal-close/bal-close.tsx
@@ -7,9 +7,7 @@ import { i18nBalClose } from './bal-close.i18n'
 
 @Component({
   tag: 'bal-close',
-  styleUrls: {
-    css: 'bal-close.sass',
-  },
+  styleUrl: 'bal-close.sass',
 })
 export class Close implements ComponentInterface, BalConfigObserver {
   private inheritedAttributes: { [k: string]: any } = {}

diff --git a/packages/components/src/components/bal-content/bal-content.tsx b/packages/components/src/components/bal-content/bal-content.tsx
@@ -4,9 +4,7 @@ import { Loggable, Logger, LogInstance } from '../../utils/log'
 
 @Component({
   tag: 'bal-content',
-  styleUrls: {
-    css: './bal-content.sass',
-  },
+  styleUrl: './bal-content.sass',
 })
 export class BalContent implements ComponentInterface, Loggable {
   log!: LogInstance

diff --git a/packages/components/src/components/bal-content/test/bal-content.visual.html b/packages/components/src/components/bal-content/test/bal-content.visual.html
@@ -5,10 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <style>
-      .bal-body {
-        visibility: hidden;
-      }
-
       section {
         padding: 1rem;
       }
@@ -17,7 +13,7 @@
     <script nomodule src="/build/design-system-components.js"></script>
   </head>
 
-  <body class="bal-body">
+  <body>
     <bal-doc-app>
       <main class="container py-medium">
         <section data-testid="basic">

diff --git a/packages/components/src/components/bal-data/bal-data.tsx b/packages/components/src/components/bal-data/bal-data.tsx
@@ -3,9 +3,7 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-data',
-  styleUrls: {
-    css: 'bal-data.sass',
-  },
+  styleUrl: 'bal-data.sass',
 })
 export class Data {
   @Element() element!: HTMLElement