From 87140b8174bd88b89bb095ff8fe03e3d52b8ab62 Mon Sep 17 00:00:00 2001
From: Deniz Saganak <dilara.deniz.saganak@accenture.com>
Date: Wed, 22 Nov 2023 14:15:17 +0100
Subject: [PATCH] feart(ui-library): add a wrapper div

---
 .../buttons/text-button/index.stories.ts      |  2 +-
 .../actions/buttons/text-button/index.ts      | 54 ++++++++++---------
 2 files changed, 31 insertions(+), 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
index aa1d5ccdf..506cfb774 100644
--- 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
index 6f672dfe4..be8fc7b64 100644
--- 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>`;
     }
   }
 }