feat: Margins not only for Box

packages/fuselage/src/components/Box/index.js

@@ -39,7 +39,7 @@ export const useBoxOnlyProps = (props) => {
     }
   });
 
-  props.className = prependClassName(props.className, 'rcx-box');
+  props.className = prependClassName(props.className, 'rcx-box rcx-box--full');
 
   return props;
 };
@@ -95,6 +95,5 @@ Box.defaultProps = {
 
 export { default as AnimatedVisibility } from './AnimatedVisibility';
 export { default as Flex } from './Flex';
-export { default as Margins } from './Margins';
 export { default as Position, PositionAnimated } from './Position';
 export { default as Scrollable } from './Scrollable';

packages/fuselage/src/components/Box/styles.scss

@@ -1,7 +1,13 @@
 .rcx-box {
-  &,
-  &::before,
-  &::after {
-    @extend %box;
+  @extend %box;
+
+  &--full {
+    @extend %box--full;
+
+    &::before,
+    &::after {
+      @extend %box;
+      @extend %box--full;
+    }
   }
 }

packages/fuselage/src/components/Chip/index.js

@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { Avatar } from '../Avatar';
-import { Box, Flex, Margins } from '../Box';
+import { Box, Flex } from '../Box';
 import { Icon } from '../Icon';
+import Margins from '../Margins';
 
 const ThumbDefault = ({ url }) => <Avatar size='x20' url={url}/>;
 const RemoveDefault = () => <Icon name='cross' size='x16' />;

packages/fuselage/src/components/Margins/index.js

@@ -0,0 +1,94 @@
+import React, { useCallback } from 'react';
+import { css } from '@rocket.chat/css-in-js';
+
+import { appendClassName } from '../../helpers/appendClassName';
+import { createPropType } from '../../helpers/createPropType';
+import { patchChildren } from '../../helpers/patchChildren';
+import { useStyle } from '../../hooks/useStyle';
+import { margin } from '../../styleTokens';
+import { BoxTransforms, useComposedBoxTransform } from '../Box/transforms';
+
+function Margins(props) {
+  const {
+    children,
+    className,
+    all,
+    block,
+    blockStart,
+    blockEnd,
+    inline,
+    inlineStart,
+    inlineEnd,
+  } = props;
+
+  const transformFn = useCallback((props) => {
+    if (all !== undefined && props.margin === undefined) {
+      props.margin = all;
+    }
+
+    if (block !== undefined && props.marginBlock === undefined) {
+      props.marginBlock = block;
+    }
+
+    if (blockStart !== undefined && props.marginBlockStart === undefined) {
+      props.marginBlockStart = blockStart;
+    }
+
+    if (blockEnd !== undefined && props.marginBlockEnd === undefined) {
+      props.marginBlockEnd = blockEnd;
+    }
+
+    if (inline !== undefined && props.marginInline === undefined) {
+      props.marginInline = inline;
+    }
+
+    if (inlineStart !== undefined && props.marginInlineStart === undefined) {
+      props.marginInlineStart = inlineStart;
+    }
+
+    if (inlineEnd !== undefined && props.marginInlineEnd === undefined) {
+      props.marginInlineEnd = inlineEnd;
+    }
+
+    return props;
+  }, [all, block, blockEnd, blockStart, inline, inlineEnd, inlineStart]);
+
+  const marginsClassName = useStyle(css`
+    &:not(.rcx-box--full) {
+      ${ props.all && css`margin: ${ margin(props.all) };` }
+      ${ props.inline && css`margin-inline: ${ margin(props.inline) };` }
+      ${ props.inlineStart && css`margin-inline-start: ${ margin(props.inlineStart) };` }
+      ${ props.inlineEnd && css`margin-inline-end: ${ margin(props.inlineEnd) };` }
+      ${ props.block && css`margin-block: ${ margin(props.block) };` }
+      ${ props.blockStart && css`margin-block-start: ${ margin(props.blockStart) };` }
+      ${ props.blockEnd && css`margin-block-end: ${ margin(props.blockEnd) };` }
+    }
+  `, props);
+
+  const patchedChildren = patchChildren(children, (childProps) => ({
+    className: appendClassName(
+      childProps.className,
+      appendClassName(
+        className,
+        marginsClassName,
+      ),
+    ),
+  }));
+
+  return <BoxTransforms.Provider
+    children={patchedChildren}
+    value={useComposedBoxTransform(transformFn)}
+  />;
+}
+
+Margins.propTypes = {
+  all: createPropType(margin),
+  block: createPropType(margin),
+  blockStart: createPropType(margin),
+  blockEnd: createPropType(margin),
+  inline: createPropType(margin),
+  inlineStart: createPropType(margin),
+  inlineEnd: createPropType(margin),
+};
+
+export default Margins;

packages/fuselage/src/components/Margins/spec.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Margins } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Margins />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it('patches non-`Box` children', () => {
+  const root = document.createElement('div');
+  ReactDOM.render(<Margins all='10px'>
+    <div />
+  </Margins>, root);
+
+  const div = root.firstChild;
+  expect(getComputedStyle(div).marginLeft).toBe('10px');
+  expect(getComputedStyle(div).marginTop).toBe('10px');
+  expect(getComputedStyle(div).marginRight).toBe('10px');
+  expect(getComputedStyle(div).marginBottom).toBe('10px');
+});