feat(ui-library): add vertical-align to center icons

deven-org · Nov 22, 2023 · f2bc81c · f2bc81c
1 parent 498e0df
commit f2bc81c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 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
@@ -85,26 +85,34 @@ export const styleCustom = typeSafeNestedCss`
     display: block;
     text-align: center;
 
-   & > .trailing-icon-class {
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
      display:inline;
      margin: auto;
-     color: red;
+     vertical-align: middle;
     }
   }
 
   .inline {
-    display: inline-flex;
+    display: inline;
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
+      display:inline;
+      margin: auto;
+      vertical-align: middle;
+     }
   }
 
   .inline-block {
     display: inline-block;
     text-align: center;
     margin: auto;
 
-    & > .trailing-icon-class {
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
       display:inline;
       text-align:center;
-      color: red;
+      vertical-align: middle;
       }
   }
 `;
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
@@ -91,12 +91,14 @@ export class BlrTextButton extends LitElement {
       ]).toLowerCase() as SizesType;
 
       const labelAndIconGroup = html` ${this.hasIcon && this.iconPosition === 'leading'
-          ? BlrIconRenderFunction({
-              icon: calculateIconName(this.icon, iconSizeVariant),
-              size: iconSizeVariant,
-              hideAria: true,
-              classMap: iconClasses,
-            })
+          ? html`<div class="leading-icon-class">
+              ${BlrIconRenderFunction({
+                icon: calculateIconName(this.icon, iconSizeVariant),
+                size: iconSizeVariant,
+                hideAria: true,
+                classMap: iconClasses,
+              })}
+            </div>`
           : nothing}
         <span class="label">${this.label}</span>
         ${this.hasIcon && this.iconPosition === 'trailing'