diff --git a/packages/ui-library/src/components/icon-button/index.stories.ts b/packages/ui-library/src/components/icon-button/index.stories.ts index 2a58a23c5..f59625d22 100644 --- a/packages/ui-library/src/components/icon-button/index.stories.ts +++ b/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,7 +60,6 @@ export default { argTypes: { //Appearance variant: { - name: 'variant', description: 'Select variant of the component.', options: ActionVariants, control: { type: 'select' }, @@ -70,9 +67,8 @@ export default { 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 = () => {
${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', })}
`; diff --git a/packages/ui-library/src/components/icon-button/index.test.ts b/packages/ui-library/src/components/icon-button/index.test.ts index 049cbee7d..8deec1cf4 100644 --- a/packages/ui-library/src/components/icon-button/index.test.ts +++ b/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; diff --git a/packages/ui-library/src/components/icon-button/index.ts b/packages/ui-library/src/components/icon-button/index.ts index 2cb0747bb..e88cf93bb 100644 --- a/packages/ui-library/src/components/icon-button/index.ts +++ b/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,7 +88,7 @@ export class BlrIconButton extends LitElement { const loaderSizeVariant = getComponentConfigToken([ 'SizeVariant', 'Actions', - this.size.toUpperCase(), + this.sizeVariant.toUpperCase(), 'Loader', ]).toLowerCase() as FormSizesType; @@ -96,7 +96,7 @@ export class BlrIconButton extends LitElement { '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} diff --git a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts index e83328261..2104fe58c 100644 --- a/packages/ui-library/src/components/slider-single-value/range-legend-slider/index.ts +++ b/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, })}`; diff --git a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts b/packages/ui-library/src/components/slider-single-value/range-slider/index.ts index 323264c5d..a9fed412a 100644 --- a/packages/ui-library/src/components/slider-single-value/range-slider/index.ts +++ b/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, })}`; diff --git a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts index b2028e088..083167a55 100644 --- a/packages/ui-library/src/components/slider-two-values/range-legend-min-max-slider/index.ts +++ b/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, }); diff --git a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts b/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts index 4b0cac155..470ad5bfe 100644 --- a/packages/ui-library/src/components/slider-two-values/range-min-max-slider/index.ts +++ b/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, })}`; diff --git a/packages/ui-library/src/components/text-button/index.stories.ts b/packages/ui-library/src/components/text-button/index.stories.ts index a25e2bdcb..4adc6b4dc 100644 --- a/packages/ui-library/src/components/text-button/index.stories.ts +++ b/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,