From 942453432a8454e47449e008a3fac3374a507a07 Mon Sep 17 00:00:00 2001 From: Ang Dawa Sherpa <89925822+angsherpa456@users.noreply.github.com> Date: Wed, 14 Feb 2024 11:20:16 +0100 Subject: [PATCH] fix(ui): adjust naming in documentation of icon (#879) (#905) --- .../actions/buttons/icon-button/index.ts | 2 +- .../actions/buttons/text-button/index.ts | 4 ++-- .../components/forms/number-input/index.ts | 2 +- .../src/components/forms/select/index.ts | 4 ++-- .../src/components/forms/text-input/index.ts | 4 ++-- .../components/forms/toggle-switch/index.ts | 4 ++-- .../internal-components/form-caption/index.ts | 2 +- .../components/navigation/tab-bar/index.ts | 6 ++--- .../src/components/ui/icon/icon-link/index.ts | 2 +- .../components/ui/icon/icon/index.stories.ts | 22 +++++++++---------- .../src/components/ui/icon/index.test.ts | 6 ++--- .../src/components/ui/icon/index.ts | 4 ++-- .../src/foundation/icons/index.stories.ts | 8 +++---- 13 files changed, 35 insertions(+), 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 index 0dc9d2031..f3d7742b9 100644 --- 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 index 9763cab86..a3a1745b1 100644 --- 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 index 9983dc5af..2ba3eb8f9 100644 --- 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 index 774ee6a3a..fbbc50a42 100644 --- 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 index 1c363f356..f23080394 100644 --- 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 index 0755a9c4d..3eb9e380f 100644 --- 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 index 27bc60411..47bcd94e9 100644 --- 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 index e8d4fbf07..5684d39f8 100644 --- 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 index 47c17addf..cde45a819 100644 --- 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 index b16da88a1..badf64b81 100644 --- 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 = () => {

Icon XXS

${Icon({ ...defaultParams, - size: 'xxs', + sizeVariant: 'xxs', })}

Icon XS

${Icon({ ...defaultParams, - size: 'xs', + sizeVariant: 'xs', })}

Icon SM

${Icon({ ...defaultParams, - size: 'sm', + sizeVariant: 'sm', })}

Icon MD

${Icon({ ...defaultParams, - size: 'md', + sizeVariant: 'md', })}

Icon LG

${Icon({ ...defaultParams, - size: 'lg', + sizeVariant: 'lg', })}

Icon XL

${Icon({ ...defaultParams, - size: 'xl', + sizeVariant: 'xl', })} `; diff --git a/packages/ui-library/src/components/ui/icon/index.test.ts b/packages/ui-library/src/components/ui/icon/index.test.ts index 7bb877025..6da40b895 100644 --- 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 index 7310b1628..1b722dc6e 100644 --- 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` { ${allIcons.map((icon) => { return html`
  • ${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, })} ${icon} @@ -76,7 +76,7 @@ export const Icon = (params: BlrIconType) => { const defaultParams: BlrIconType = { theme: 'Light', - size: 'lg', + sizeVariant: 'lg', arialabel: 'Icons', };