feat(ui-library): removing calculate icon name from hint component and aligning icon top left

Author: davidken91

packages/ui-library/src/components/checkbox/index.ts

@@ -9,7 +9,6 @@ import { styleCustom } from './index.css';
 import { form } from '../../foundation/semantic-tokens/form.css';
 import { checkbox } from '../../foundation/component-tokens/checkbox.css';
 import { BlrFormHintRenderFunction } from '../internal-components/form-hint';
-import { calculateIconName } from '../../utils/calculate-icon-name';
 import { IconType } from '@boiler/icons';
 
 @customElement('blr-checkbox')
@@ -87,7 +86,7 @@ export class BlrCheckbox extends LitElement {
                   message: this.hintMessage,
                   variant: 'hint',
                   size: this.size,
-                  icon: this.hintIcon ? calculateIconName(this.hintIcon, this.size) : undefined,
+                  icon: this.hintIcon ? this.hintIcon : undefined,
                 })}
               </div>
             `
@@ -99,7 +98,7 @@ export class BlrCheckbox extends LitElement {
                   message: this.errorMessage,
                   variant: 'error',
                   size: this.size,
-                  icon: this.errorIcon ? calculateIconName(this.errorIcon, this.size) : undefined,
+                  icon: this.errorIcon ? this.errorIcon : undefined,
                 })}
               </div>
             `

packages/ui-library/src/components/internal-components/form-hint/index.ts

@@ -24,11 +24,23 @@ export class BlrFormHint extends LitElement {
       [`${this.size}`]: this.size,
     });
 
+    const iconClasses = classMap({
+      'blr-icon': true,
+      [`${this.size}`]: this.size || 'md',
+    });
+
     return html`<div class=${classes}>
       <div class="icon-wrapper">
-        ${BlrIconRenderFunction({ icon: calculateIconName(this.icon, 'sm'), size: 'sm', hideAria: true })}
+        ${BlrIconRenderFunction({
+          icon: calculateIconName(this.icon, 'sm'),
+          size: 'sm',
+          classMap: iconClasses,
+          hideAria: true,
+        })}
+      </div>
+      <div class="label-wrapper">
+        <span class="blr-caption-text">${this.message}</span>
       </div>
-      <span class="blr-caption-text">${this.message}</span>
       ${this.childElement}
     </div>`;
   }

packages/ui-library/src/components/internal-components/icon/index.ts

@@ -44,7 +44,7 @@ export const BlrIconRenderFunction = ({
   disablePointerEvents,
 }: BlrIconType) => {
   return html`<blr-icon
-    class="blr-icon ${classMap}"
+    class="${classMap}"
     .icon=${icon || nothing}
     .size=${size}
     .name=${name || nothing}

packages/ui-library/src/components/select/index.ts

@@ -119,7 +119,7 @@ export class BlrSelect extends LitElement {
           message: (this.hasError ? this.errorMessage : this.hint) || 'This is dummy message',
           variant: this.hasError ? 'error' : 'hint',
           size: 'sm',
-          icon: calculateIconName(this.hintIcon, this.size),
+          icon: this.hintIcon,
         })}
       </div>
     `;

packages/ui-library/src/components/text-input/index.ts

@@ -130,7 +130,7 @@ export class BlrTextInput extends LitElement {
               ${BlrFormHintRenderFunction({
                 message: this.hasError ? this.errorMessage : this.hintText,
                 variant: this.hasError ? 'error' : 'hint',
-                icon: calculateIconName(this.hintIcon, this.size),
+                icon: this.hintIcon,
                 size: 'sm',
               })}
             `

packages/ui-library/src/components/textarea/index.ts

@@ -10,7 +10,6 @@ import { BlrFormLabelRenderFunction } from '../internal-components/form-label';
 import { BlrFormHintRenderFunction } from '../internal-components/form-hint';
 import { IconType } from '@boiler/icons';
 import { iconButton } from '../../foundation/component-tokens/action.css';
-import { calculateIconName } from '../../utils/calculate-icon-name';
 
 @customElement('blr-textarea')
 export class BlrTextarea extends LitElement {
@@ -110,7 +109,7 @@ export class BlrTextarea extends LitElement {
                   ${BlrFormHintRenderFunction({
                     message: this.hasError ? this.errorMessage : this.hintText,
                     variant: this.hasError ? 'error' : 'hint',
-                    icon: calculateIconName(this.hintIcon, this.size),
+                    icon: this.hintIcon,
                     size: this.size,
                     childElement: html`<div class="blr-counter ${counterClasses}">
                       ${this.count}/${this.maxLength}

packages/ui-library/src/foundation/semantic-tokens/form.css.js

@@ -160,15 +160,6 @@ export const form = css`
 .blr-input-icon {
   position: absolute;
   color: ${Forms.Placeholder.Default.Rest};
-  &.sm {
-
-  }
-  &.md {
-
-  }
-  &.lg {
-
-  }
 }
 
 .blr-input-icon.error {
@@ -191,19 +182,36 @@ export const form = css`
   display: flex;
   align-items: flex-start;
   word-break: break-all;
+  .label-wrapper {
+    padding: 0rem 0px;
+    display: flex;
+    .blr-caption-text {
+      color: ${Forms.Caption.Hint};
+    }
+  }
+  &.error {
+    color: ${Forms.Caption.Error};
+    .label-wrapper {
+      .blr-caption-text {
+        color: ${Forms.Caption.Error};
+      }
+    }
+  }
   &.sm {
     padding: ${Forms.SM.CaptionComponent.Padding};
     gap: ${Forms.SM.CaptionComponent.ItemSpacing};
     .icon-wrapper {
       padding: ${Forms.SM.CaptionComponent.IconWrapper.Padding}
     }
-    .blr-caption-text {
-      font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
-      font-weight: ${Forms.SM.Caption.fontWeight};
-      font-size: ${Forms.SM.Caption.fontSize};
-      font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
-      line-height: ${Forms.SM.Caption.lineHeight};
+    .label-wrapper {
       padding: ${Forms.SM.CaptionComponent.CaptionLabelWrapper.Padding};
+      .blr-caption-text {
+        font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
+        font-weight: ${Forms.SM.Caption.fontWeight};
+        font-size: ${Forms.SM.Caption.fontSize};
+        font-family: ${Forms.SM.Caption.fontFamily}, sans-serif;
+        line-height: ${Forms.SM.Caption.lineHeight};
+      }
     }
   }
   &.md {
@@ -212,12 +220,14 @@ export const form = css`
     .icon-wrapper {
       padding: ${Forms.MD.CaptionComponent.IconWrapper.Padding}
     }
-    .blr-caption-text {
-      font-family: ${Forms.MD.Caption.fontFamily}, sans-serif;
-      font-weight: ${Forms.MD.Caption.fontWeight};
-      font-size: ${Forms.MD.Caption.fontSize};
-      line-height: ${Forms.MD.Caption.lineHeight};
+    .label-wrapper {
       padding: ${Forms.MD.CaptionComponent.CaptionLabelWrapper.Padding};
+      .blr-caption-text {
+        font-family: ${Forms.MD.Caption.fontFamily}, sans-serif;
+        font-weight: ${Forms.MD.Caption.fontWeight};
+        font-size: ${Forms.MD.Caption.fontSize};
+        line-height: ${Forms.MD.Caption.lineHeight};
+      }
     }
   }
   &.lg {
@@ -226,21 +236,16 @@ export const form = css`
     .icon-wrapper {
       padding: ${Forms.LG.CaptionComponent.IconWrapper.Padding}
     }
-    .blr-caption-text {
-      font-weight: ${Forms.LG.Caption.fontWeight};
-      font-size: ${Forms.LG.Caption.fontSize};
-      font-family: ${Forms.LG.Caption.fontFamily}, sans-serif;
-      line-height: ${Forms.LG.Caption.lineHeight};
+    .label-wrapper {
       padding: ${Forms.LG.CaptionComponent.CaptionLabelWrapper.Padding};
+      .blr-caption-text {
+        font-weight: ${Forms.LG.Caption.fontWeight};
+        font-size: ${Forms.LG.Caption.fontSize};
+        font-family: ${Forms.LG.Caption.fontFamily}, sans-serif;
+        line-height: ${Forms.LG.Caption.lineHeight};
+      }
     }
   }
-  .blr-caption-text {
-    padding-left: ${Forms.MD.LabelSlot.ItemSpacing};
-    color: ${Forms.Caption.Hint};
-  }
-  &.error {
-    color: ${Forms.Caption.Error};
-  }
 }
 .blr-form-label {
   display: inline-block;