Fix/867 ensure property naming text button

packages/js-example-app/src/prod-assets/index.html

@@ -18,12 +18,12 @@ <h2>Vanilla JS Example Application</h2>
           <blr-text-button
             theme="Light"
             variant="cta"
-            size="md"
+            sizeVariant="md"
             label="Button"
             hasIcon="true"
             iconPosition="leading"
             icon="blr360"
-            buttonId="button-id"
+            textButtonId="button-id"
           ></blr-text-button>
           <button id="toggleLoadingState">Toggle Loading State</button>
           <button id="toggleDisabledState">Toggle Disabled State</button>

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

@@ -27,7 +27,7 @@ const sharedStyles = html`
 const defaultParams: BlrTextButtonType = {
   theme: 'Light',
   variant: 'primary',
-  size: 'md',
+  sizeVariant: 'md',
   label: 'Label-text',
   hasIcon: true,
   icon: 'blr360',
@@ -51,8 +51,7 @@ export default {
         category: 'Appearance',
       },
     },
-    size: {
-      name: 'sizeVariant',
+    sizeVariant: {
       description: 'Select size of the component.',
       options: ActionSizes,
       control: { type: 'select' },
@@ -217,25 +216,22 @@ const argTypesToDisable = [
   'theme',
   'arialabel',
   'variant',
-  'size',
+  'sizeVariant',
   'label',
   'hasIcon',
   'iconPosition',
   'icon',
   'loading',
   'disabled',
-  'buttonId',
+  'textButtonId',
   'buttonDisplay',
   'onClick',
   'onBlur',
   'onFocus',
 ];
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
-  // 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,
@@ -313,31 +309,31 @@ export const SizeVariant = () => {
       <div class="stories-textbutton">
         ${BlrTextButtonRenderFunction({
           ...defaultParams,
-          size: 'xs',
+          sizeVariant: 'xs',
           label: 'Button XS',
           hasIcon: false,
         })}
         ${BlrTextButtonRenderFunction({
           ...defaultParams,
-          size: 'sm',
+          sizeVariant: 'sm',
           label: 'Button SM',
           hasIcon: false,
         })}
         ${BlrTextButtonRenderFunction({
           ...defaultParams,
-          size: 'md',
+          sizeVariant: 'md',
           label: 'Button MD',
           hasIcon: false,
         })}
         ${BlrTextButtonRenderFunction({
           ...defaultParams,
-          size: 'lg',
+          sizeVariant: 'lg',
           label: 'Button LG',
           hasIcon: false,
         })}
         ${BlrTextButtonRenderFunction({
           ...defaultParams,
-          size: 'xl',
+          sizeVariant: 'xl',
           label: 'Button XL',
           hasIcon: false,
         })}

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

@@ -13,7 +13,7 @@ const sampleParams: BlrTextButtonType = {
   iconPosition: 'leading',
   loading: false,
   disabled: false,
-  buttonId: 'button-id',
+  textButtonId: 'button-id',
   variant: 'cta',
   theme: 'Light',
   buttonDisplay: 'inline-block',
@@ -39,7 +39,7 @@ describe('blr-text-button', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrTextButtonRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrTextButtonRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const textButton = querySelectorDeep('.blr-text-button', element.getRootNode() as HTMLElement);
     const className = textButton?.className;

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

@@ -48,9 +48,9 @@ export class BlrTextButton extends LitElement {
   @property() iconPosition?: IconPositionVariant = 'leading';
   @property({ type: Boolean }) loading!: boolean;
   @property({ type: Boolean }) disabled!: boolean;
-  @property() buttonId?: string;
+  @property() textButtonId?: string;
   @property() variant: ActionVariantType = 'primary';
-  @property() size?: ActionSizesType = 'md';
+  @property() sizeVariant?: ActionSizesType = 'md';
   @property() buttonDisplay?: ButtonDisplayType = 'inline-block';
 
   @property() theme: ThemeType = 'Light';
@@ -78,14 +78,14 @@ export class BlrTextButton extends LitElement {
   };
 
   protected render() {
-    if (this.size && this.buttonDisplay) {
+    if (this.sizeVariant && this.buttonDisplay) {
       const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
 
       const classes = classMap({
         'blr-semantic-action': true,
         'blr-text-button': true,
         [this.variant]: this.variant,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
         'disabled': this.disabled,
         'loading': this.loading,
         [this.buttonDisplay]: this.buttonDisplay,
@@ -99,23 +99,23 @@ export class BlrTextButton extends LitElement {
 
       const flexContainerClasses = classMap({
         'flex-container': true,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
       });
 
       const loaderVariant = determineLoaderVariant(this.variant);
 
       const loaderSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Actions',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
         'Loader',
       ]).toLowerCase() as FormSizesType;
 
       const iconSizeVariant = getComponentConfigToken([
         'SizeVariant',
         'Actions',
         'TextButton',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
         'Icon',
       ]).toLowerCase() as SizesType;
 
@@ -163,7 +163,7 @@ export class BlrTextButton extends LitElement {
               this.handleClick(event);
             }
           }}
-          id=${this.buttonId || nothing}
+          id=${this.textButtonId || nothing}
         >
           ${this.focused && !this.loading ? html`<span class="focus-layer"></span>` : nothing}
           ${this.loading