fix(useTree/CellTree): add missing margin

Author: rwieruch

src/common/components/Button/index.tsx

@@ -5,8 +5,12 @@ import { css, jsx } from '@emotion/react';
 
 import styles from './styles';
 
-export const Button = React.forwardRef(
-  (props: Record<string, any>, ref: React.ForwardedRef<HTMLButtonElement>) => {
-    return <button type="button" ref={ref} {...props} css={styles} />;
+type ButtonProps = {
+  margin: string;
+} & Record<string, any>;
+
+export const Button: React.FC<ButtonProps> = React.forwardRef(
+  ({ margin, ...props }: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
+    return <button type="button" ref={ref} {...props} css={styles({ margin })} />;
   },
 );

src/common/components/Button/styles.tsx

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 
-export default css`
+export default ({ margin }: { margin: string }) => css`
   display: flex;
   align-items: center;
 
@@ -31,6 +31,14 @@ export default css`
     justify-content: center;
   }
 
+  &.prefix {
+    margin-right: ${margin};
+  }
+
+  &.suffix {
+    margin-left: ${margin};
+  }
+
   div {
     text-align: left;
     overflow: hidden;

src/tree/CellTree.tsx

@@ -91,7 +91,7 @@ export const CellTree: React.FC<CellTreeProps> = ({
           margin={icon ? mergedTreeIconOptions.margin : mergedTreeIconOptions.noIconMargin}
           onClick={handleClick}
         >
-          {icon ? <span>{icon}</span> : <span />}
+          {icon ? <div>{icon}</div> : <div />}
         </Button>
         <div>{children}</div>
       </div>