fix/866-ensure-consistency-property-names (#891)

* fix(ui-library): harmonized property naming in iconButton

Author: JpunktWpunkt

packages/ui-library/src/components/icon-button/index.stories.ts

@@ -24,23 +24,21 @@ const sharedStyles = html`
 const argTypesToDisable = [
   'theme',
   'variant',
+  'sizeVariant',
   'icon',
-  'size',
   'disabled',
   'loading',
   'readonly',
   'required',
-  'buttonId',
+  'iconButtonId',
   'hasError',
   'errorMessage',
   'errorIcon',
   'arialabel',
-  'textareaId',
   'name',
   'onChange',
   'onFocus',
   'onBlur',
-  'onSelect',
 ];
 
 const generateDisabledArgTypes = (argTypes: string[]) => {
@@ -62,17 +60,15 @@ export default {
   argTypes: {
     //Appearance
     variant: {
-      name: 'variant',
       description: 'Select variant of the component.',
       options: ActionVariants,
       control: { type: 'select' },
       table: {
         category: 'Appearance',
       },
     },
-    size: {
+    sizeVariant: {
       options: ActionSizes,
-      name: 'sizeVariant',
       description: 'Select size of the component.',
       control: { type: 'select' },
       table: {
@@ -103,7 +99,6 @@ export default {
       },
     },
     loading: {
-      name: 'loading',
       description: 'Choose if the component is loading.',
       table: {
         category: 'States',
@@ -119,33 +114,32 @@ export default {
       },
     },
     //Technical attributes
-    buttonId: {
+    iconButtonId: {
       description: 'Unique identifier for this component.',
       table: {
         category: 'Technical Attributes',
       },
     },
-
     // Events
     onChange: {
       description: 'Fires when the value changes.',
       action: 'onChange',
       table: {
-        disable: true,
+        category: 'Events',
       },
     },
     onFocus: {
       description: 'Fires when the component is focused.',
       action: 'onFocus',
       table: {
-        disable: true,
+        category: 'Events',
       },
     },
     onBlur: {
       description: 'Fires when the component lost focus.',
       action: 'onBlur',
       table: {
-        disable: true,
+        category: 'Events',
       },
     },
   },
@@ -183,12 +177,12 @@ BlrIconButton.storyName = 'Icon Button';
 const defaultParams: BlrIconButtonType = {
   theme: 'Light',
   variant: 'primary',
-  size: 'md',
+  sizeVariant: 'md',
   icon: 'blr360',
   disabled: false,
   loading: false,
   arialabel: 'Icon Button',
-  buttonId: 'iconButtonId',
+  iconButtonId: 'iconButtonId',
 };
 BlrIconButton.args = defaultParams;
 
@@ -242,23 +236,23 @@ export const SizeVariant = () => {
     <div class="stories-icon-button">
       ${BlrIconButtonRenderFunction({
         ...defaultParams,
-        size: 'xs',
+        sizeVariant: 'xs',
       })}
       ${BlrIconButtonRenderFunction({
         ...defaultParams,
-        size: 'sm',
+        sizeVariant: 'sm',
       })}
       ${BlrIconButtonRenderFunction({
         ...defaultParams,
-        size: 'md',
+        sizeVariant: 'md',
       })}
       ${BlrIconButtonRenderFunction({
         ...defaultParams,
-        size: 'lg',
+        sizeVariant: 'lg',
       })}
       ${BlrIconButtonRenderFunction({
         ...defaultParams,
-        size: 'xl',
+        sizeVariant: 'xl',
       })}
     </div>
   `;

packages/ui-library/src/components/icon-button/index.test.ts

@@ -11,7 +11,7 @@ const sampleParams: BlrIconButtonType = {
   icon: 'blrChevronDown',
   loading: false,
   disabled: false,
-  buttonId: 'button-id',
+  iconButtonId: 'button-id',
   variant: 'cta',
   theme: 'Light',
 };
@@ -54,7 +54,7 @@ describe('blr-icon-button', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrIconButtonRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrIconButtonRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const iconButton = querySelectorDeep('.blr-icon-button', element.getRootNode() as HTMLElement);
     const className = iconButton?.className;

packages/ui-library/src/components/icon-button/index.ts

@@ -40,9 +40,9 @@ export class BlrIconButton extends LitElement {
   @property() icon?: SizelessIconType;
   @property() loading?: boolean;
   @property() disabled!: boolean;
-  @property() buttonId?: string;
+  @property() iconButtonId?: string;
   @property() variant: ActionVariantType = 'primary';
-  @property() size?: ActionSizesType = 'md';
+  @property() sizeVariant?: ActionSizesType = 'md';
 
   @property() theme: ThemeType = 'Light';
 
@@ -69,12 +69,12 @@ export class BlrIconButton extends LitElement {
   };
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
 
       const classes = classMap({
         [this.variant]: this.variant,
-        [this.size]: this.size,
+        [this.sizeVariant]: this.sizeVariant,
         disabled: this.disabled,
         loading: this.loading || false,
       });
@@ -88,15 +88,15 @@ export class BlrIconButton extends LitElement {
       const loaderSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Actions',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
         'Loader',
       ]).toLowerCase() as FormSizesType;
 
       const iconSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Actions',
         'IconButton',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
         'Icon',
       ]).toLowerCase() as SizesType;
 
@@ -109,7 +109,7 @@ export class BlrIconButton extends LitElement {
           class="blr-semantic-action blr-icon-button ${classes}"
           aria-disabled=${this.disabled ? 'true' : nothing}
           @click=${this.handleClick}
-          id=${this.buttonId || nothing}
+          id=${this.iconButtonId || nothing}
           tabindex=${this.disabled ? nothing : '0'}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}

packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts

@@ -54,9 +54,9 @@ export class BlrRangeLegendSlider extends LitElement {
       icon: iconName,
       loading: false,
       disabled: this.disabled || false,
-      buttonId: btnId,
+      iconButtonId: btnId,
       variant: this.btnVariant,
-      size: this.size,
+      sizeVariant: this.size,
       theme: this.theme,
     })}`;
 

packages/ui-library/src/components/slider-single-value/range-slider/index.ts

@@ -54,9 +54,9 @@ export class BlrRangeSlider extends LitElement {
       icon: iconName,
       loading: false,
       disabled: this.disabled || false,
-      buttonId: btnId,
+      iconButtonId: btnId,
       variant: this.btnVariant,
-      size: this.size,
+      sizeVariant: this.size,
       theme: this.theme,
     })}`;
 

packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts

@@ -56,9 +56,9 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
       icon: iconName,
       loading: false,
       disabled: this.disabled || false,
-      buttonId: btnId,
+      iconButtonId: btnId,
       variant: this.btnVariant,
-      size: this.size,
+      sizeVariant: this.size,
       theme: this.theme,
     });
 

packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts

@@ -56,9 +56,9 @@ export class BlrRangeMinMaxSlider extends LitElement {
       icon: iconName,
       loading: false,
       disabled: this.disabled || false,
-      buttonId: btnId,
+      iconButtonId: btnId,
       variant: this.btnVariant,
-      size: this.size,
+      sizeVariant: this.size,
       theme: this.theme,
     })}`;
 

packages/ui-library/src/components/text-button/index.stories.ts

@@ -235,7 +235,6 @@ const generateDisabledArgTypes = (argTypes: string[]) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   argTypes.forEach((argType: string) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     disabledArgTypes[argType] = {
       table: {
         disable: true,