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

@@ -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', () => {

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}

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;
 }