feat(ui-library): create buttonDisplay prop and type (#628)

* feat(ui-library): create buttonDisplay prop and type * feat(ui-library): correct display none to default * faet(ui-library): show block, inline-block and inline * add block as display block * feat(ui-library): add div for icon * feat(ui-library): add vertical-align to center icons * feart(ui-library): add a wrapper div * feat(ui-library): add flex container * feat(ui-library): add tests * feat(ui-library): add gap * feat(ui-library): fix loading state with new flex container * fix(ui-library): add icon classes to iconMap * fix(ui-library): unit tests are testing if css display attribute is really applied * fix(ui-library): cleanup * fix(ui-library): button display optional and better default --------- Co-authored-by: christian.b.hoffmann <[email protected]>
deven-org · Nov 27, 2023 · fb9537e · fb9537e
1 parent 7f340ae
commit fb9537e
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 22 deletions.
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
@@ -18,12 +18,11 @@ export const styleCustom = typeSafeNestedCss`
   .blr-text-button {
     align-items: center;
     justify-content: center;
-    display: inline-flex;
+    display: flex;
     cursor: pointer;
     position: relative;
     
     &.xs {
-      gap: ${TextButton.Container.ItemSpacing.XS};
       padding: ${TextButton.Container.Padding.XS};
       border-radius: ${TextButton.Container.BorderRadius.XS};
 
@@ -33,7 +32,6 @@ export const styleCustom = typeSafeNestedCss`
     }
 
     &.sm {
-      gap: ${TextButton.Container.ItemSpacing.SM};
       padding: ${TextButton.Container.Padding.SM};
       border-radius: ${TextButton.Container.BorderRadius.SM};
 
@@ -43,17 +41,16 @@ export const styleCustom = typeSafeNestedCss`
     }
 
     &.md {
-      gap: ${TextButton.Container.ItemSpacing.MD};
       padding: ${TextButton.Container.Padding.MD};
       border-radius: ${TextButton.Container.BorderRadius.MD};
+      
 
       & > .focus-layer {
         border-radius: ${TextButton.Container.BorderRadius.MD};
       }
     }
 
     &.lg {
-      gap: ${TextButton.Container.ItemSpacing.LG};
       padding: ${TextButton.Container.Padding.LG};
       border-radius: ${TextButton.Container.BorderRadius.LG};
 
@@ -63,7 +60,6 @@ export const styleCustom = typeSafeNestedCss`
     }
 
     &.xl {
-      gap: ${TextButton.Container.ItemSpacing.XL};
       padding: ${TextButton.Container.Padding.XL};
       border-radius: ${TextButton.Container.BorderRadius.XL};
 
@@ -75,9 +71,49 @@ export const styleCustom = typeSafeNestedCss`
 
   .loading {
     & > .icon,
-    & > .label {
+    & > .label,
+    & > .flex-container {
       visibility: hidden;
     }
   }
 
+  .block {
+    display: block;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .flex-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.xs {
+      gap: ${TextButton.Container.ItemSpacing.XS}
+    }
+
+    &.sm {
+      gap: ${TextButton.Container.ItemSpacing.SM}
+    }
+
+    &.md {
+      gap: ${TextButton.Container.ItemSpacing.MD}
+    }
+
+    &.lg {
+      gap: ${TextButton.Container.ItemSpacing.LG}
+    }
+
+    &.xl {
+      gap: ${TextButton.Container.ItemSpacing.XL}
+    }
+  }
+
+  .trailing-icon-class,
+  .leading-icon-class {
+    display: flex;
+    align-items: center;
+  }
 `;
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { BlrTextButtonType, BlrTextButtonRenderFunction } from './index';
 import { PureIconKeys } from '@boiler/icons';
-import { ActionSizes, ActionVariants, IconPositionVariant } from '../../../../globals/constants';
+import { ActionSizes, ActionVariants, IconPositionVariant, ButtonDisplayOptions } from '../../../../globals/constants';
 import { Themes } from '../../../../foundation/_tokens-generated/index.themes';
 
 export default {
@@ -21,6 +21,10 @@ export default {
       options: ActionSizes,
       control: { type: 'select' },
     },
+    buttonDisplay: {
+      options: ButtonDisplayOptions,
+      control: { type: 'select' },
+    },
     variant: {
       options: ActionVariants,
       control: { type: 'select' },
@@ -44,11 +48,11 @@ const args: BlrTextButtonType = {
   variant: 'cta',
   size: 'md',
   label: 'Button',
-  onClick: () => console.log('onClick'),
-  onBlur: () => console.log('onBlur'),
   hasIcon: true,
   iconPosition: 'leading',
   icon: 'blr360',
+  onClick: () => console.log('onClick'),
+  onBlur: () => console.log('onBlur'),
   loading: false,
   disabled: false,
   buttonId: 'button-id',

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.test.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.test.ts
@@ -14,6 +14,7 @@ const sampleParams: BlrTextButtonType = {
   variant: 'cta',
   loadingStatus: 'Loading',
   theme: 'Light',
+  buttonDisplay: 'inline-block',
 };
 
 describe('blr-text-button', () => {
@@ -157,4 +158,26 @@ describe('blr-text-button', () => {
     expect(leadingIcon).not.to.exist;
     expect(svg).not.to.exist;
   });
+
+  it('display the button as block when "buttonDisplay" is set as block', async () => {
+    const element = await fixture(BlrTextButtonRenderFunction({ ...sampleParams, buttonDisplay: 'block' }));
+
+    const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
+
+    if (button) {
+      const buttonCssDisplay = getComputedStyle(button)['display'];
+      expect(buttonCssDisplay).to.equal('block');
+    }
+  });
+
+  it('displays the button as inline-block when "buttonDisplay" is set as inline-block', async () => {
+    const element = await fixture(BlrTextButtonRenderFunction({ ...sampleParams, buttonDisplay: 'inline-block' }));
+
+    const button = querySelectorDeep('span', element.getRootNode() as HTMLElement);
+
+    if (button) {
+      const buttonCssDisplay = getComputedStyle(button)['display'];
+      expect(buttonCssDisplay).to.equal('inline-block');
+    }
+  });
 });
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
@@ -11,6 +11,7 @@ import {
   SizesType,
   FormSizesType,
   IconPositionVariant,
+  ButtonDisplayType,
 } from '../../../../globals/types';
 import { determineLoaderVariant } from '../../../../utils/determine-loader-variant';
 import { BlrIconRenderFunction } from '../../../ui/icon';
@@ -29,17 +30,16 @@ export class BlrTextButton extends LitElement {
   @property() label = 'Button Label';
   @property() onClick?: HTMLButtonElement['onclick'];
   @property() onBlur?: HTMLButtonElement['onblur'];
-  @property() leadingIcon?: SizelessIconType;
-  @property() trailingIcon?: SizelessIconType;
   @property() icon?: SizelessIconType;
-  @property() loading!: boolean;
-  @property() disabled!: boolean;
+  @property({ type: Boolean }) hasIcon?: boolean;
+  @property() iconPosition?: IconPositionVariant = 'leading';
+  @property({ type: Boolean }) loading!: boolean;
+  @property({ type: Boolean }) disabled!: boolean;
   @property() buttonId?: string;
   @property() variant: ActionVariantType = 'primary';
   @property() size?: ActionSizesType = 'md';
   @property() loadingStatus!: string;
-  @property() hasIcon?: boolean;
-  @property() iconPosition?: IconPositionVariant = 'leading';
+  @property() buttonDisplay?: ButtonDisplayType = 'inline-block';
 
   @property() theme: ThemeType = 'Light';
 
@@ -56,7 +56,7 @@ export class BlrTextButton extends LitElement {
   };
 
   protected render() {
-    if (this.size) {
+    if (this.size && this.buttonDisplay) {
       const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
 
       const classes = classMap({
@@ -66,10 +66,18 @@ export class BlrTextButton extends LitElement {
         [`${this.size}`]: this.size,
         'disabled': this.disabled,
         'loading': this.loading,
+        [this.buttonDisplay]: this.buttonDisplay,
       });
 
       const iconClasses = classMap({
-        icon: true,
+        'icon': true,
+        'leading-icon-class': this.iconPosition === 'leading',
+        'trailing-icon-class': this.iconPosition === 'trailing',
+      });
+
+      const flexContainerClasses = classMap({
+        'flex-container': true,
+        [`${this.size}`]: this.size,
       });
 
       const loaderVariant = determineLoaderVariant(this.variant);
@@ -89,23 +97,25 @@ export class BlrTextButton extends LitElement {
         'Icon',
       ]).toLowerCase() as SizesType;
 
-      const labelAndIconGroup = html` ${this.hasIcon && this.iconPosition === 'leading'
+      const labelAndIconGroup = html` <div class="${flexContainerClasses}">
+        ${this.hasIcon && this.iconPosition === 'leading'
           ? BlrIconRenderFunction({
               icon: calculateIconName(this.icon, iconSizeVariant),
               size: iconSizeVariant,
               hideAria: true,
               classMap: iconClasses,
             })
           : nothing}
-        <span class="label">${this.label}</span>
+        <span class="label">${this.label} </span>
         ${this.hasIcon && this.iconPosition === 'trailing'
           ? BlrIconRenderFunction({
               icon: calculateIconName(this.icon, iconSizeVariant),
               size: iconSizeVariant,
               hideAria: true,
               classMap: iconClasses,
             })
-          : nothing}`;
+          : nothing}
+      </div>`;
 
       return html`<style>
           ${dynamicStyles.map((style) => style)}
@@ -132,7 +142,7 @@ export class BlrTextButton extends LitElement {
                 ${labelAndIconGroup}
               `
             : labelAndIconGroup}
-        </span>`;
+        </span> `;
     }
   }
 }

diff --git a/packages/ui-library/src/components/ui/button-group/index.stories.ts b/packages/ui-library/src/components/ui/button-group/index.stories.ts
@@ -52,6 +52,7 @@ const contentTextButtons = html`
     variant: 'primary',
     loadingStatus: 'Loading',
     disabled: false,
+    buttonDisplay: 'inline-block',
   })}
   ${BlrTextButtonRenderFunction({
     label: 'Nein',
@@ -61,6 +62,7 @@ const contentTextButtons = html`
     variant: 'secondary',
     loadingStatus: 'Loading',
     disabled: false,
+    buttonDisplay: 'inline-block',
   })}
 `;
 

diff --git a/packages/ui-library/src/globals/constants.ts b/packages/ui-library/src/globals/constants.ts
@@ -36,3 +36,5 @@ export const ToolTipArrowPosition = ['start', 'end', 'middle', 'hide'] as const;
 
 export const LabelVariants = ['label', 'error'] as const;
 export const Resizes = ['both', 'vertical', 'horizontal', 'none'] as const;
+
+export const ButtonDisplayOptions = ['block', 'inline-block'] as const;
diff --git a/packages/ui-library/src/globals/types.ts b/packages/ui-library/src/globals/types.ts
@@ -20,6 +20,7 @@ import {
   Resizes,
   ActionSizes,
   ButtonGroupAlignmentVariants,
+  ButtonDisplayOptions,
 } from './constants';
 
 export type SizesType = (typeof Sizes)[number];
@@ -83,3 +84,4 @@ export type ToolTipVisibility = 'onLoad' | 'onHover';
 export type ToolTipArrowPosition = 'start' | 'end' | 'middle' | 'hide';
 
 export type LabelVariantType = (typeof LabelVariants)[number];
+export type ButtonDisplayType = (typeof ButtonDisplayOptions)[number];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,5 @@ export const ToolTipArrowPosition = ['start', 'end', 'middle', 'hide'] as const;

		export const LabelVariants = ['label', 'error'] as const;
		export const Resizes = ['both', 'vertical', 'horizontal', 'none'] as const;

		export const ButtonDisplayOptions = ['block', 'inline-block'] as const;