feat(comp): remove span from button + add some styles incl. space prop to button

.changeset/happy-peaches-arrive.md

@@ -0,0 +1,6 @@
+---
+'docs': patch
+'@marigold/components': patch
+---
+
+feat(comp): remove span from button and add some styles to the button element, add space prop to button

docs/content/components/button.mdx

@@ -19,6 +19,7 @@ The style variant and size of the button can be added with the variant prop and
 | `variant` (optional)  | `primary`, `secondary`, `ghost`, `text` | `primary` |
 | `size` (optional)     | `small`, `large`                        | `large`   |
 | `disabled` (optional) | boolean                                 |           |
+| `space` (optional)    | `ResponsiveStyleValue<string>`          | `none`    |
 
 ## Import
 
@@ -136,20 +137,20 @@ They can be used in a similar way of a secondary button, but they are meant to b
 Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.
 
 ```tsx
-<Button>
+<Button space="xxsmall">
   <Ticket /> Icon Primary
 </Button>
 ```
 
 ```tsx
-<Button disabled>
+<Button space="xxsmall" disabled>
   <Ticket /> Icon Primary
 </Button>
 ```
 
 ### Small Buttons
 
-If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be onpen on mobile devices.
+If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be open on mobile devices.
 
 ```tsx
 <Button size="small">Primary</Button>
@@ -202,25 +203,25 @@ If there are many actions in one page, is it possible to use small buttons inste
 Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.
 
 ```tsx
-<Button size="small">
+<Button size="small" space="xxsmall">
   <Ticket /> Primary
 </Button>
 ```
 
 ```tsx
-<Button variant="secondary" size="small">
+<Button variant="secondary" size="small" space="xxsmall">
   <Direction /> Secondary
 </Button>
 ```
 
 ```tsx
-<Button variant="ghost" size="small">
+<Button variant="ghost" size="small" space="xxsmall">
   <CircleUnchecked /> Ghost
 </Button>
 ```
 
 ```tsx
-<Button variant="text" size="small">
+<Button variant="text" size="small" space="xxsmall">
   <FormatSize /> Text Only
 </Button>
 ```

docs/content/components/inline.mdx

@@ -13,7 +13,7 @@ Layout component to inline elements with space. This component uses the spaces f
 | Property | Type                           | Default  |
 | :------- | :----------------------------- | :------- |
 | `space`  | `ResponsiveStyleValue<string>` | `none`   |
-| `align`  | `left, right, center`          | `center` |
+| `align`  | `center, top, bottom`          | `center` |
 
 ## Import
 

packages/components/src/ActionGroup/ActionGroup.test.tsx

@@ -78,6 +78,6 @@ test('supports verticalAlignment prop', () => {
   const button1 = screen.getByText(/Button1/);
   const button2 = screen.getByText(/Button2/);
 
-  expect(getTopPadding(button1)).toEqual('');
+  expect(getTopPadding(button1.parentElement!)).toEqual('');
   expect(button2.parentElement).toHaveStyle(`padding-top: 2px`);
 });

packages/components/src/Button/Button.test.tsx

@@ -19,6 +19,10 @@ const theme = {
       fontFamily: 'Arial',
     },
   },
+  space: {
+    none: 0,
+    small: 2,
+  },
 };
 
 test('supports default variant', () => {
@@ -29,7 +33,7 @@ test('supports default variant', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Inter`);
+  expect(button).toHaveStyle(`font-family: Inter`);
 });
 
 test('supports default size', () => {
@@ -40,7 +44,7 @@ test('supports default size', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('accepts other variant than default', () => {
@@ -51,7 +55,7 @@ test('accepts other variant than default', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Arial`);
+  expect(button).toHaveStyle(`font-family: Arial`);
 });
 
 test('accepts other size than default', () => {
@@ -62,7 +66,7 @@ test('accepts other size than default', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('renders <button> element', () => {
@@ -73,8 +77,7 @@ test('renders <button> element', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement instanceof HTMLButtonElement).toBeTruthy();
-  expect(button instanceof HTMLSpanElement).toBeTruthy();
+  expect(button instanceof HTMLButtonElement).toBeTruthy();
 });
 
 test('accepts other button components', () => {
@@ -105,13 +108,28 @@ test('add icon in button works as expected', () => {
   const button = screen.getByText(/iconbutton/);
   const icon = screen.getByTitle(/facebook/);
 
-  expect(button instanceof HTMLSpanElement).toBeTruthy();
+  expect(button instanceof HTMLButtonElement).toBeTruthy();
   expect(button).toHaveStyle('display: inline-flex');
   expect(button.firstChild instanceof SVGElement).toBeTruthy();
   expect(icon.getAttribute('fill')).toEqual('red');
   expect(icon.getAttribute('width')).toEqual('30');
 });
 
+test('add space to button works as expected', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button title="iconbutton" space="small">
+        <Facebook fill="red" size={30} title="facebook" />
+        iconbutton
+      </Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByTitle(/iconbutton/);
+
+  const style = window.getComputedStyle(button);
+  expect(style.columnGap).toBe(`2px`);
+});
+
 test('accepts custom styles prop className', () => {
   render(
     <ThemeProvider theme={theme}>

packages/components/src/Button/Button.tsx

@@ -16,6 +16,7 @@ export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
         as = 'button',
         variant = 'primary',
         size = 'large',
+        space = 'none',
         disabled,
         children,
         className,
@@ -37,13 +38,14 @@ export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
           {...buttonProps}
           {...props}
           as={as}
+          display="inline-flex"
+          alignItems="center"
           variant={[`button.${variant}`, `button.${size}`]}
           className={className}
           ref={ref}
+          css={{ columnGap: space }}
         >
-          <Box as="span" display="inline-flex" alignItems="center">
-            {children}
-          </Box>
+          {children}
         </Box>
       );
     }