fix(ui-library): harmonized property naming in loader and fixed misse…

…d sizeVariant in js example text-button (#979) Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
deven-org · Mar 8, 2024 · 491bd6b · 491bd6b
1 parent 8a57f8a
commit 491bd6b
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 15 deletions.
diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -101,7 +101,7 @@
             offset="20"
             message="Message-text"
           >
-            <blr-text-button theme="Light" variant="secondary" size="md" label="Hover me"></blr-text-button>
+            <blr-text-button theme="Light" variant="secondary" sizeVariant="md" label="Hover me"></blr-text-button>
           </blr-tooltip>
         </div>
 

diff --git a/packages/ui-library/src/components/icon-button/index.ts b/packages/ui-library/src/components/icon-button/index.ts
@@ -124,7 +124,7 @@ export class BlrIconButton extends LitElement {
           ${this.focused && !this.loading ? html`<span class="focus-layer"></span>` : nothing}
           ${this.loading
             ? BlrLoaderRenderFunction({
-                size: loaderSizeVariant,
+                sizeVariant: loaderSizeVariant,
                 variant: loaderVariant,
                 theme: this.theme,
               })

diff --git a/packages/ui-library/src/components/icon-link/index.ts b/packages/ui-library/src/components/icon-link/index.ts
@@ -71,7 +71,7 @@ export class BlrIconLink extends LitElement {
         >
           ${this.loading
             ? BlrLoaderRenderFunction({
-                size: loaderSize,
+                sizeVariant: loaderSize,
                 variant: loaderVariant,
                 theme: this.theme,
               })

diff --git a/packages/ui-library/src/components/loader/index.stories.ts b/packages/ui-library/src/components/loader/index.stories.ts
@@ -22,7 +22,7 @@ const sharedStyles = html`
 const defaultParams: BlrLoaderType = {
   theme: 'Light',
   variant: 'default',
-  size: 'md',
+  sizeVariant: 'md',
 };
 
 export default {
@@ -37,8 +37,7 @@ export default {
         category: 'Appearance',
       },
     },
-    size: {
-      name: 'sizeVariant',
+    sizeVariant: {
       description: 'Choose size of the component.',
       options: FeedbackSizes,
       control: { type: 'radio' },
@@ -94,7 +93,7 @@ export const Variant = () => {
       ...defaultParams,
       theme: 'Light',
       variant: 'default',
-      size: 'md',
+      sizeVariant: 'md',
     })}
   `;
 };
@@ -108,7 +107,7 @@ export const Inverted = () => {
       ${BlrLoaderRenderFunction({
         ...defaultParams,
         variant: 'default',
-        size: 'md',
+        sizeVariant: 'md',
       })}
     </div>
   `;
@@ -132,7 +131,7 @@ export const SizeVariant = () => {
         html`<div class="size-container">
           ${BlrLoaderRenderFunction({
             ...defaultParams,
-            size: size,
+            sizeVariant: size,
           })}
         </div>`
     )}

diff --git a/packages/ui-library/src/components/loader/index.test.ts b/packages/ui-library/src/components/loader/index.test.ts
@@ -32,7 +32,7 @@ describe('blr-loader', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrLoaderRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrLoaderRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const loader = querySelectorDeep('div.blr-loader', element.getRootNode() as HTMLElement);
     const className = loader?.className;

diff --git a/packages/ui-library/src/components/loader/index.ts b/packages/ui-library/src/components/loader/index.ts
@@ -10,24 +10,24 @@ import { ActionSizesType, FeedbackVariantType } from '../../globals/types';
 export class BlrLoader extends LitElement {
   static styles = [];
 
-  @property() size?: ActionSizesType = 'md';
+  @property() sizeVariant?: ActionSizesType = 'md';
   @property() variant?: FeedbackVariantType;
   @property() theme: ThemeType = 'Light';
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [styleCustomLight] : [styleCustomDark];
 
       const classes = classMap({
         'blr-loader': true,
         [`${this.variant}`]: this.variant || '',
-        [`${this.size}`]: this.size || 'md',
+        [`${this.sizeVariant}`]: this.sizeVariant || 'md',
       });
 
       return html`<style>
           ${dynamicStyles.map((style) => style)}
         </style>
-        <div class="loader-container ${this.size}">
+        <div class="loader-container ${this.sizeVariant}">
           <div class="${classes}" role="status" aria-live="polite"></div>
         </div>`;
     }

diff --git a/packages/ui-library/src/components/text-button/index.ts b/packages/ui-library/src/components/text-button/index.ts
@@ -172,7 +172,7 @@ export class BlrTextButton extends LitElement {
           ${this.loading
             ? html`
                 ${BlrLoaderRenderFunction({
-                  size: loaderSizeVariant,
+                  sizeVariant: loaderSizeVariant,
                   variant: loaderVariant,
                   theme: this.theme,
                 })}