feat: Support CSS gap in Box, use it for spacing in Stack, Inline, Co…

…lumns (#739)

* Add CSS gap support to the Box component
* Use CSS gap to power Inline's spacing between elements
* Use CSS gap to power Stack's spacing between elements
* Use CSS gap to power Column's spacing between elements
* Fix tests
* Fix columns issue
* Prepare v17.9.0 release

See #739

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v17.9.0
+
+-   [Feat] New `gap` prop in the `Box` component, implementing support for the CSS `gap` property.
+-   [Tweak] Use CSS `gap` for implementing spacing in the `Columns`, `Inline`, and `Stack` components.
+
 # v17.8.1
 
 -   [Fix] When clicking inside a modal, holding and releasing the click outside the modal no longer closes the modal

docs/iframe.html

@@ -476,4 +476,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.90d16f53.iframe.bundle.js"></script><script src="vendors~main.f29a14be.iframe.bundle.js"></script><script src="main.dfd6361b.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(tsx|mdx))$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx|mdx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$"}];</script><script src="runtime~main.90d16f53.iframe.bundle.js"></script><script src="vendors~main.aa3d7dfc.iframe.bundle.js"></script><script src="main.b4437b31.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1672993602281,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.17.0"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}
+{"generatedAt":1673359515103,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.2"},"typescriptOptions":{"check":true,"checkOptions":{},"reactDocgen":"react-docgen-typescript","reactDocgenTypescriptOptions":{"shouldExtractLiteralValuesFromEnum":true}},"features":{"interactionsDebugger":true},"storybookVersion":"^6.5.3","language":"typescript","storybookPackages":{"@storybook/addon-knobs":{"version":"6.3.1"},"@storybook/addon-links":{"version":"6.5.3"},"@storybook/addons":{"version":"6.5.3"},"@storybook/jest":{"version":"0.0.10"},"@storybook/react":{"version":"6.5.3"},"@storybook/testing-library":{"version":"0.0.13"}},"framework":{"name":"react"},"addons":{"@storybook/addon-postcss":{"version":"2.0.0"},"@storybook/addon-actions":{"version":"6.5.3"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.3"},"@storybook/addon-controls":{"version":"6.5.3"},"@geometricpanda/storybook-addon-badges":{"version":"0.2.2"},"@storybook/addon-interactions":{"version":"6.5.15"}}}

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "17.8.1",
+    "version": "17.9.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/new-components/box/box.test.tsx

@@ -36,6 +36,7 @@ describe('Box', () => {
                 borderRadius="full"
                 background="aside"
                 overflow="hidden"
+                gap="medium"
             />,
         )
         expect(screen.getByTestId('box')).toHaveClass(
@@ -47,6 +48,7 @@ describe('Box', () => {
             'borderRadius-full',
             'border-primary',
             'overflow-hidden',
+            'gap-medium',
         )
     })
 

src/new-components/box/box.tsx

@@ -15,6 +15,7 @@ import styles from './box.module.css'
 import paddingStyles from './padding.module.css'
 import marginStyles from './margin.module.css'
 import widthStyles from './width.module.css'
+import gapStyles from './gap.module.css'
 
 interface BoxPaddingProps {
     padding?: ResponsiveProp<Space>
@@ -79,6 +80,7 @@ interface BoxProps extends WithEnhancedClassName, ReusableBoxProps, BoxMarginPro
     display?: ResponsiveProp<BoxDisplay>
     flexDirection?: ResponsiveProp<BoxFlexDirection>
     flexWrap?: BoxFlexWrap
+    gap?: ResponsiveProp<Space | 'none'>
     alignItems?: ResponsiveProp<BoxAlignItems>
     alignSelf?: ResponsiveProp<BoxAlignSelf>
     justifyContent?: ResponsiveProp<BoxJustifyContent>
@@ -96,6 +98,7 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(
         flexWrap,
         flexGrow,
         flexShrink,
+        gap,
         alignItems,
         justifyContent,
         alignSelf,
@@ -176,6 +179,7 @@ const Box = polymorphicComponent<'div', BoxProps, 'keepClassName'>(function Box(
                         ? getClassNames(styles, 'flexShrink', String(flexShrink))
                         : null,
                     flexGrow != null ? getClassNames(styles, 'flexGrow', String(flexGrow)) : null,
+                    gap ? getClassNames(gapStyles, 'gap', gap) : null,
                     // other props
                     getClassNames(styles, 'overflow', overflow),
                     width != null ? getClassNames(widthStyles, 'width', String(width)) : null,

src/new-components/box/gap.module.css

@@ -0,0 +1,71 @@
+.gap-none {
+    gap: 0px;
+}
+.gap-xsmall {
+    gap: var(--reactist-spacing-xsmall);
+}
+.gap-small {
+    gap: var(--reactist-spacing-small);
+}
+.gap-medium {
+    gap: var(--reactist-spacing-medium);
+}
+.gap-large {
+    gap: var(--reactist-spacing-large);
+}
+.gap-xlarge {
+    gap: var(--reactist-spacing-xlarge);
+}
+.gap-xxlarge {
+    gap: var(--reactist-spacing-xxlarge);
+}
+
+/* gap for tablet */
+@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
+    .tablet-gap-none {
+        gap: 0px;
+    }
+    .tablet-gap-xsmall {
+        gap: var(--reactist-spacing-xsmall);
+    }
+    .tablet-gap-small {
+        gap: var(--reactist-spacing-small);
+    }
+    .tablet-gap-medium {
+        gap: var(--reactist-spacing-medium);
+    }
+    .tablet-gap-large {
+        gap: var(--reactist-spacing-large);
+    }
+    .tablet-gap-xlarge {
+        gap: var(--reactist-spacing-xlarge);
+    }
+    .tablet-gap-xxlarge {
+        gap: var(--reactist-spacing-xxlarge);
+    }
+}
+
+/* gap for desktop */
+@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
+    .desktop-gap-none {
+        gap: 0px;
+    }
+    .desktop-gap-xsmall {
+        gap: var(--reactist-spacing-xsmall);
+    }
+    .desktop-gap-small {
+        gap: var(--reactist-spacing-small);
+    }
+    .desktop-gap-medium {
+        gap: var(--reactist-spacing-medium);
+    }
+    .desktop-gap-large {
+        gap: var(--reactist-spacing-large);
+    }
+    .desktop-gap-xlarge {
+        gap: var(--reactist-spacing-xlarge);
+    }
+    .desktop-gap-xxlarge {
+        gap: var(--reactist-spacing-xxlarge);
+    }
+}