fix(ui): adjust naming in documentation of icon (#879) (#905)

deven-org · Feb 14, 2024 · 9424534 · 9424534
1 parent ccc0f4b
commit 9424534
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 35 deletions.
diff --git a/packages/ui-library/src/components/actions/buttons/icon-button/index.ts b/packages/ui-library/src/components/actions/buttons/icon-button/index.ts
@@ -125,7 +125,7 @@ export class BlrIconButton extends LitElement {
           ${BlrIconRenderFunction(
             {
               icon: calculateIconName(this.icon, iconSizeVariant),
-              size: iconSizeVariant,
+              sizeVariant: iconSizeVariant,
               classMap: iconClasses,
             },
             {

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -119,7 +119,7 @@ export class BlrTextButton extends LitElement {
           ? BlrIconRenderFunction(
               {
                 icon: calculateIconName(this.icon, iconSizeVariant),
-                size: iconSizeVariant,
+                sizeVariant: iconSizeVariant,
                 classMap: iconClasses,
               },
               {
@@ -132,7 +132,7 @@ export class BlrTextButton extends LitElement {
           ? BlrIconRenderFunction(
               {
                 icon: calculateIconName(this.icon, iconSizeVariant),
-                size: iconSizeVariant,
+                sizeVariant: iconSizeVariant,
                 classMap: iconClasses,
               },
               {

diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/forms/number-input/index.ts
@@ -113,7 +113,7 @@ export class BlrNumberInput extends LitElement {
           {
             classMap: iconClasses,
             icon: calculateIconName(icon, iconSizeVariant),
-            size: iconSizeVariant,
+            sizeVariant: iconSizeVariant,
           },
           {
             'aria-hidden': true,

diff --git a/packages/ui-library/src/components/forms/select/index.ts b/packages/ui-library/src/components/forms/select/index.ts
@@ -90,7 +90,7 @@ export class BlrSelect extends LitElement {
         return BlrIconRenderFunction(
           {
             icon: calculateIconName('blrErrorFilled', iconSizeVariant),
-            size: iconSizeVariant,
+            sizeVariant: iconSizeVariant,
             classMap: classes,
           },
           {
@@ -102,7 +102,7 @@ export class BlrSelect extends LitElement {
         return BlrIconRenderFunction(
           {
             icon: calculateIconName(modifiedIcon, iconSizeVariant),
-            size: iconSizeVariant,
+            sizeVariant: iconSizeVariant,
             classMap: classes,
           },
           {

diff --git a/packages/ui-library/src/components/forms/text-input/index.ts b/packages/ui-library/src/components/forms/text-input/index.ts
@@ -205,7 +205,7 @@ export class BlrTextInput extends LitElement {
                       ? calculateIconName(`blrErrorFilled`, iconSizeVariant)
                       : calculateIconName(this.inputIcon, iconSizeVariant),
 
-                    size: iconSizeVariant,
+                    sizeVariant: iconSizeVariant,
                     classMap: iconClasses,
                   },
                   {
@@ -222,7 +222,7 @@ export class BlrTextInput extends LitElement {
                   {
                     icon: this.hasError ? calculateIconName(`blrErrorFilled`, iconSizeVariant) : getPasswordIcon(),
 
-                    size: iconSizeVariant,
+                    sizeVariant: iconSizeVariant,
                     classMap: iconClasses,
                     blrClick: this.togglePassword,
                   },

diff --git a/packages/ui-library/src/components/forms/toggle-switch/index.ts b/packages/ui-library/src/components/forms/toggle-switch/index.ts
@@ -224,7 +224,7 @@ export class BlrToggleSwitch extends LitElement {
                 ${BlrIconRenderFunction(
                   {
                     icon: calculateIconName(this.toggleOnIcon, toggleIconSizeVariant),
-                    size: this.size,
+                    sizeVariant: this.size,
                     classMap: toggleIconsClass,
                     ignoreSize: true,
                   },
@@ -237,7 +237,7 @@ export class BlrToggleSwitch extends LitElement {
                 ${BlrIconRenderFunction(
                   {
                     icon: calculateIconName(this.toggleOffIcon, toggleIconSizeVariant),
-                    size: this.size,
+                    sizeVariant: this.size,
                     classMap: toggleIconsClass,
                     ignoreSize: true,
                   },

diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.ts b/packages/ui-library/src/components/internal-components/form-caption/index.ts
@@ -57,7 +57,7 @@ export class BlrFormCaption extends LitElement {
                     this.variant === 'hint' || this.variant === 'error' ? this.icon : '',
                     iconSizeVariant
                   ),
-                  size: iconSizeVariant,
+                  sizeVariant: iconSizeVariant,
                   classMap: iconClasses,
                 },
                 {

diff --git a/packages/ui-library/src/components/navigation/tab-bar/index.ts b/packages/ui-library/src/components/navigation/tab-bar/index.ts
@@ -129,7 +129,7 @@ export class BlrTabBar extends LitElement {
                   ${BlrIconRenderFunction(
                     {
                       icon: calculateIconName('blrChevronLeft', iconButtonSizeVariant),
-                      size: iconButtonSizeVariant,
+                      sizeVariant: iconButtonSizeVariant,
                     },
                     {
                       'aria-hidden': true,
@@ -188,7 +188,7 @@ export class BlrTabBar extends LitElement {
                           ? BlrIconRenderFunction(
                               {
                                 icon: calculateIconName(tab.getAttribute('icon')!, iconSizeVariant),
-                                size: iconSizeVariant,
+                                sizeVariant: iconSizeVariant,
                               },
                               {
                                 'aria-hidden': true,
@@ -214,7 +214,7 @@ export class BlrTabBar extends LitElement {
                   ${BlrIconRenderFunction(
                     {
                       icon: calculateIconName('blrChevronRight', iconButtonSizeVariant),
-                      size: iconButtonSizeVariant,
+                      sizeVariant: iconButtonSizeVariant,
                     },
                     {
                       'aria-hidden': true,

diff --git a/packages/ui-library/src/components/ui/icon/icon-link/index.ts b/packages/ui-library/src/components/ui/icon/icon-link/index.ts
@@ -79,7 +79,7 @@ export class BlrIconLink extends LitElement {
             : BlrIconRenderFunction(
                 {
                   icon: calculateIconName(this.icon, iconSizeVariant),
-                  size: iconSizeVariant,
+                  sizeVariant: iconSizeVariant,
                 },
                 {
                   'aria-hidden': true,

diff --git a/packages/ui-library/src/components/ui/icon/icon/index.stories.ts b/packages/ui-library/src/components/ui/icon/icon/index.stories.ts
@@ -29,7 +29,7 @@ const sharedStyles = html`
 export default {
   title: 'Design System/Web Components/UI/Icon/Icon',
   argTypes: {
-    size: {
+    sizeVariant: {
       options: Sizes,
       description: 'Select size of the component.',
       control: { type: 'select' },
@@ -82,21 +82,21 @@ export default {
 
 export const Icon = (params: IconType) => {
   return html`${BlrIconRenderFunction({
-    icon: calculateIconName(params.icon, params.size as SizesType),
-    size: params.size,
+    icon: calculateIconName(params.icon, params.sizeVariant as SizesType),
+    sizeVariant: params.sizeVariant,
     ignoreSize: params.ignoreSize,
   })}`;
 };
 
 type IconType = {
   theme: string;
-  size: SizesType;
+  sizeVariant: SizesType;
   icon: SizelessIconType; // Update the type definition for icon
   ignoreSize: boolean;
 };
 const defaultParams: IconType = {
   theme: 'Light',
-  size: 'md',
+  sizeVariant: 'md',
   icon: 'blr360',
   ignoreSize: false,
 };
@@ -115,33 +115,33 @@ export const SizeVariant = () => {
       <h3 class="label">Icon XXS</h3>
       ${Icon({
         ...defaultParams,
-        size: 'xxs',
+        sizeVariant: 'xxs',
       })}
       <h3 class="label">Icon XS</h3>
       ${Icon({
         ...defaultParams,
-        size: 'xs',
+        sizeVariant: 'xs',
       })}
 
       <h3 class="label">Icon SM</h3>
       ${Icon({
         ...defaultParams,
-        size: 'sm',
+        sizeVariant: 'sm',
       })}
       <h3 class="label">Icon MD</h3>
       ${Icon({
         ...defaultParams,
-        size: 'md',
+        sizeVariant: 'md',
       })}
       <h3 class="label">Icon LG</h3>
       ${Icon({
         ...defaultParams,
-        size: 'lg',
+        sizeVariant: 'lg',
       })}
       <h3 class="label">Icon XL</h3>
       ${Icon({
         ...defaultParams,
-        size: 'xl',
+        sizeVariant: 'xl',
       })}
     </div>
   `;

diff --git a/packages/ui-library/src/components/ui/icon/index.test.ts b/packages/ui-library/src/components/ui/icon/index.test.ts
@@ -10,7 +10,7 @@ import { querySelectorDeep } from 'query-selector-shadow-dom';
 
 const TEST_CLASS = 'test-class';
 
-const sampleParams: BlrIconType = { size: 'md' };
+const sampleParams: BlrIconType = { sizeVariant: 'md' };
 
 describe('blr-icon', () => {
   it('containing the right className', async () => {
@@ -24,7 +24,7 @@ describe('blr-icon', () => {
 });
 
 describe('blr-icon', () => {
-  it('svg contains md class if size is set to md and ignoreSize is false', async () => {
+  it('svg contains md class if sizeVariant is set to md and ignoreSize is false', async () => {
     const element = await fixture(BlrIconRenderFunction({ ...sampleParams, ignoreSize: false }));
     const svgParentElement = querySelectorDeep('.blr-icon', element?.getRootNode() as HTMLElement);
     const className = svgParentElement?.getAttribute('class'); // you can not use className here
@@ -34,7 +34,7 @@ describe('blr-icon', () => {
 });
 
 describe('blr-icon', () => {
-  it('svg does not contain md class if size is set to md and ignoreSize is true', async () => {
+  it('svg does not contain md class if sizeVariant is set to md and ignoreSize is true', async () => {
     const element = await fixture(BlrIconRenderFunction({ ...sampleParams, ignoreSize: true }));
     const svgParentElement = querySelectorDeep('.blr-icon', element?.getRootNode() as HTMLElement);
     const className = svgParentElement?.getAttribute('class'); // you can not use className here

diff --git a/packages/ui-library/src/components/ui/icon/index.ts b/packages/ui-library/src/components/ui/icon/index.ts
@@ -15,7 +15,7 @@ export class BlrIcon extends LitElement {
   static styles = [styleCustom];
 
   @property() icon: IconType = 'blr360Xs';
-  @property() size: SizesType = 'md';
+  @property() sizeVariant: SizesType = 'md';
   @property() ignoreSize?: boolean = false;
 
   @property() theme: ThemeType = 'Light';
@@ -31,7 +31,7 @@ export class BlrIcon extends LitElement {
   };
 
   protected render() {
-    const sizeKey = this.ignoreSize ? 'full' : this.size.toLowerCase();
+    const sizeKey = this.ignoreSize ? 'full' : this.sizeVariant.toLowerCase();
 
     const unfullfilledRenderResult = html`<span
       @click=${this.handleClick}

diff --git a/packages/ui-library/src/foundation/icons/index.stories.ts b/packages/ui-library/src/foundation/icons/index.stories.ts
@@ -16,7 +16,7 @@ import '../../index';
 export default {
   title: 'Foundation/Icons',
   argTypes: {
-    size: {
+    sizeVariant: {
       options: Sizes,
       description: 'Select size of the component.',
       control: { type: 'select' },
@@ -63,8 +63,8 @@ export const Icon = (params: BlrIconType) => {
       ${allIcons.map((icon) => {
         return html`<li>
           ${BlrIconRenderFunction({
-            icon: calculateIconName(icon as string, params.size as SizesType),
-            size: params.size,
+            icon: calculateIconName(icon as string, params.sizeVariant as SizesType),
+            sizeVariant: params.sizeVariant,
             classMap: classes,
           })}
           <span class="icon-label">${icon}</span>
@@ -76,7 +76,7 @@ export const Icon = (params: BlrIconType) => {
 
 const defaultParams: BlrIconType = {
   theme: 'Light',
-  size: 'lg',
+  sizeVariant: 'lg',
   arialabel: 'Icons',
 };