feart(ui-library): add a wrapper div

deven-org · Nov 22, 2023 · 87140b8 · 87140b8
1 parent f2bc81c
commit 87140b8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 25 deletions.
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
@@ -47,7 +47,7 @@ const args: BlrTextButtonType = {
   theme: 'Light',
   variant: 'cta',
   size: 'md',
-  buttonDisplay: 'inline',
+  buttonDisplay: 'block',
   label: 'Button',
   hasIcon: true,
   iconPosition: 'leading',

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
@@ -100,7 +100,11 @@ export class BlrTextButton extends LitElement {
               })}
             </div>`
           : nothing}
-        <span class="label">${this.label}</span>
+        <span class="label"
+          >${this.label} <br />
+          button <br />
+          button
+        </span>
         ${this.hasIcon && this.iconPosition === 'trailing'
           ? html`<div class="trailing-icon-class">
               ${BlrIconRenderFunction({
@@ -115,29 +119,31 @@ export class BlrTextButton extends LitElement {
       return html`<style>
           ${dynamicStyles.map((style) => style)}
         </style>
-        <span
-          class="${classes}"
-          @click="${this.onClick}"
-          tabindex=${this.disabled ? nothing : '0'}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          role=${this.disabled ? nothing : 'button'}
-          @keydown=${this.onClick}
-          id=${this.buttonId || nothing}
-        >
-          ${this.focused ? html`<span class="focus-layer"></span>` : nothing}
-          ${this.loading
-            ? html`
-                ${BlrLoaderRenderFunction({
-                  size: loaderSizeVariant,
-                  variant: loaderVariant,
-                  loadingStatus: this.loadingStatus,
-                  theme: this.theme,
-                })}
-                ${labelAndIconGroup}
-              `
-            : labelAndIconGroup}
-        </span>`;
+        <div class="parent-class">
+          <span
+            class="${classes}"
+            @click="${this.onClick}"
+            tabindex=${this.disabled ? nothing : '0'}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            role=${this.disabled ? nothing : 'button'}
+            @keydown=${this.onClick}
+            id=${this.buttonId || nothing}
+          >
+            ${this.focused ? html`<span class="focus-layer"></span>` : nothing}
+            ${this.loading
+              ? html`
+                  ${BlrLoaderRenderFunction({
+                    size: loaderSizeVariant,
+                    variant: loaderVariant,
+                    loadingStatus: this.loadingStatus,
+                    theme: this.theme,
+                  })}
+                  ${labelAndIconGroup}
+                `
+              : labelAndIconGroup}
+          </span>
+        </div>`;
     }
   }
 }