From 1e19cc50d18f33d09a537a6bb19f43e548bc0f20 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Thu, 20 Jul 2023 13:17:47 -0500
Subject: [PATCH] fix: button text alignment, excess button markup & space
 (#271)

* fix(tup-cms): button text alignment (edge cases)

The `<span>` inside <Button> is unnecessary and causes alignment bugs.

This change removes some code meant to fix an alignment issue.*

* I could not see alignment issue. Regardless, the <span> is gone.

* test: button text match
---
 libs/core-components/src/lib/Button/Button.test.jsx        | 7 +++----
 libs/core-components/src/lib/Button/Button.tsx             | 4 +---
 .../src/projects/users/UserDetail/UserDetail.module.css    | 3 ---
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/libs/core-components/src/lib/Button/Button.test.jsx b/libs/core-components/src/lib/Button/Button.test.jsx
index 35ef46373..194f8994d 100644
--- a/libs/core-components/src/lib/Button/Button.test.jsx
+++ b/libs/core-components/src/lib/Button/Button.test.jsx
@@ -10,13 +10,12 @@ const TEST_SIZE = 'medium';
 
 function testClassnamesByType(type, size, getByRole, getByTestId) {
   const root = getByRole('button');
-  const text = getByTestId('text');
   const typeClassName = BTN.TYPE_MAP[type];
   const sizeClassName = BTN.SIZE_MAP[size];
   expect(root.className).toMatch('root');
   expect(root.className).toMatch(new RegExp(typeClassName));
   expect(root.className).toMatch(new RegExp(sizeClassName));
-  expect(text.className).toMatch('text');
+  expect(root.textContent).toMatch(TEST_TEXT);
 }
 
 function isPropertyLimitation(type, size) {
@@ -34,8 +33,8 @@ function isPropertyLimitation(type, size) {
 
 describe('Button', () => {
   it('uses given text', () => {
-    const { getByTestId } = render(<Button>{TEST_TEXT}</Button>);
-    expect(getByTestId('text').textContent).toEqual(TEST_TEXT);
+    const { getByRole } = render(<Button>{TEST_TEXT}</Button>);
+    expect(getByRole('button').textContent).toEqual(TEST_TEXT);
   });
 
   describe('icons exist as expected when', () => {
diff --git a/libs/core-components/src/lib/Button/Button.tsx b/libs/core-components/src/lib/Button/Button.tsx
index 2670ccf57..374219e93 100644
--- a/libs/core-components/src/lib/Button/Button.tsx
+++ b/libs/core-components/src/lib/Button/Button.tsx
@@ -102,9 +102,7 @@ const Button: React.FC<ButtonProps> = ({
       ) : (
         ''
       )}
-      <span className="c-button__text" data-testid="text">
-        {children}
-      </span>
+      {children}
       {iconNameAfter && (
         <Icon
           name={iconNameAfter}
diff --git a/libs/tup-components/src/projects/users/UserDetail/UserDetail.module.css b/libs/tup-components/src/projects/users/UserDetail/UserDetail.module.css
index 6069e0b8b..666479a0d 100644
--- a/libs/tup-components/src/projects/users/UserDetail/UserDetail.module.css
+++ b/libs/tup-components/src/projects/users/UserDetail/UserDetail.module.css
@@ -31,9 +31,6 @@
     justify-content: space-between;
 }
 
-.link-button > span {
-    vertical-align: baseline;
-}
 .link-button-delete {
     font-weight: bold;
 }