fix: Columns/Column styles to not rely on Stack styles (#508)

Doist · Apr 28, 2021 · aabbaf2 · aabbaf2
1 parent 14f942a
commit aabbaf2
Show file tree

Hide file tree

Showing 17 changed files with 154 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 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.
 
+## v9.2.0-beta.8
+
+- Fix `Columns` styles, broken by the changes to `Stack` styling. This release now removes the interdependency of `Column's styles relying on `Stack` styles.
+
 ## v9.2.0-beta.7
 
 Various fixes to the new experimental components

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.87c53eb24e3aa248135f.bundle.js"></script><script src="vendors~main.87c53eb24e3aa248135f.bundle.js"></script><script src="main.87c53eb24e3aa248135f.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.e4fe40bfe0d361a3a01f.bundle.js"></script><script src="vendors~main.e4fe40bfe0d361a3a01f.bundle.js"></script><script src="main.e4fe40bfe0d361a3a01f.bundle.js"></script></body></html>
diff --git a/docs/main.87c53eb24e3aa248135f.bundle.js b/docs/main.87c53eb24e3aa248135f.bundle.js
diff --git a/docs/main.87c53eb24e3aa248135f.bundle.js.map b/docs/main.87c53eb24e3aa248135f.bundle.js.map
diff --git a/docs/main.e4fe40bfe0d361a3a01f.bundle.js b/docs/main.e4fe40bfe0d361a3a01f.bundle.js
diff --git a/docs/main.e4fe40bfe0d361a3a01f.bundle.js.map b/docs/main.e4fe40bfe0d361a3a01f.bundle.js.map
diff --git a/docs/runtime~main.87c53eb24e3aa248135f.bundle.js.map b/docs/runtime~main.87c53eb24e3aa248135f.bundle.js.map
diff --git a/...ntime~main.87c53eb24e3aa248135f.bundle.js → ...ntime~main.e4fe40bfe0d361a3a01f.bundle.js b/...ntime~main.87c53eb24e3aa248135f.bundle.js → ...ntime~main.e4fe40bfe0d361a3a01f.bundle.js
diff --git a/docs/runtime~main.e4fe40bfe0d361a3a01f.bundle.js.map b/docs/runtime~main.e4fe40bfe0d361a3a01f.bundle.js.map
diff --git a/docs/vendors~main.87c53eb24e3aa248135f.bundle.js.map b/docs/vendors~main.87c53eb24e3aa248135f.bundle.js.map
diff --git a/...ndors~main.87c53eb24e3aa248135f.bundle.js → ...ndors~main.e4fe40bfe0d361a3a01f.bundle.js b/...ndors~main.87c53eb24e3aa248135f.bundle.js → ...ndors~main.e4fe40bfe0d361a3a01f.bundle.js
diff --git a/...7c53eb24e3aa248135f.bundle.js.LICENSE.txt → ...4fe40bfe0d361a3a01f.bundle.js.LICENSE.txt b/...7c53eb24e3aa248135f.bundle.js.LICENSE.txt → ...4fe40bfe0d361a3a01f.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.e4fe40bfe0d361a3a01f.bundle.js.map b/docs/vendors~main.e4fe40bfe0d361a3a01f.bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <[email protected]> (http://doist.com)",
-    "version": "9.2.0-beta.7",
+    "version": "9.2.0-beta.8",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

diff --git a/src/new-components/columns/columns.module.css b/src/new-components/columns/columns.module.css
@@ -161,3 +161,139 @@
 .columnWidth-4-5 {
     flex: 0 0 80%;
 }
+
+/* styles for whan stacked */
+
+/* Default vertical spacing */
+.space-xsmall {
+    margin-top: calc(var(--reactist-spacing-xsmall) * -1);
+}
+.space-xsmall > * {
+    margin-top: var(--reactist-spacing-xsmall);
+}
+
+.space-small {
+    margin-top: calc(var(--reactist-spacing-small) * -1);
+}
+.space-small > * {
+    margin-top: var(--reactist-spacing-small);
+}
+
+.space-medium {
+    margin-top: calc(var(--reactist-spacing-medium) * -1);
+}
+.space-medium > * {
+    margin-top: var(--reactist-spacing-medium);
+}
+
+.space-large {
+    margin-top: calc(var(--reactist-spacing-large) * -1);
+}
+.space-large > * {
+    margin-top: var(--reactist-spacing-large);
+}
+
+.space-xlarge {
+    margin-top: calc(var(--reactist-spacing-xlarge) * -1);
+}
+.space-xlarge > * {
+    margin-top: var(--reactist-spacing-xlarge);
+}
+
+.space-xxlarge {
+    margin-top: calc(var(--reactist-spacing-xxlarge) * -1);
+}
+.space-xxlarge > * {
+    margin-top: var(--reactist-spacing-xxlarge);
+}
+
+/* Vertical spacing in tablet */
+@media (min-width: 768px /* --reactist-breakpoint-tablet */) {
+    .tablet-space-xsmall {
+        margin-top: calc(var(--reactist-spacing-xsmall) * -1);
+    }
+    .tablet-tablet-space-xsmall > * {
+        margin-top: var(--reactist-spacing-xsmall);
+    }
+
+    .tablet-space-small {
+        margin-top: calc(var(--reactist-spacing-small) * -1);
+    }
+    .tablet-space-small > * {
+        margin-top: var(--reactist-spacing-small);
+    }
+
+    .tablet-space-medium {
+        margin-top: calc(var(--reactist-spacing-medium) * -1);
+    }
+    .tablet-space-medium > * {
+        margin-top: var(--reactist-spacing-medium);
+    }
+
+    .tablet-space-large {
+        margin-top: calc(var(--reactist-spacing-large) * -1);
+    }
+    .tablet-space-large > * {
+        margin-top: var(--reactist-spacing-large);
+    }
+
+    .tablet-space-xlarge {
+        margin-top: calc(var(--reactist-spacing-xlarge) * -1);
+    }
+    .tablet-space-xlarge > * {
+        margin-top: var(--reactist-spacing-xlarge);
+    }
+
+    .tablet-space-xxlarge {
+        margin-top: calc(var(--reactist-spacing-xxlarge) * -1);
+    }
+    .tablet-space-xxlarge > * {
+        margin-top: var(--reactist-spacing-xxlarge);
+    }
+}
+
+/* Vertical spacing in desktop */
+
+@media (min-width: 992px /* --reactist-breakpoint-desktop */) {
+    .desktop-space-xsmall {
+        margin-top: calc(var(--reactist-spacing-xsmall) * -1);
+    }
+    .desktop-space-xsmall > * {
+        margin-top: var(--reactist-spacing-xsmall);
+    }
+
+    .desktop-space-small {
+        margin-top: calc(var(--reactist-spacing-small) * -1);
+    }
+    .desktop-space-small > * {
+        margin-top: var(--reactist-spacing-small);
+    }
+
+    .desktop-space-medium {
+        margin-top: calc(var(--reactist-spacing-medium) * -1);
+    }
+    .desktop-space-medium > * {
+        margin-top: var(--reactist-spacing-medium);
+    }
+
+    .desktop-space-large {
+        margin-top: calc(var(--reactist-spacing-large) * -1);
+    }
+    .desktop-space-large > * {
+        margin-top: var(--reactist-spacing-large);
+    }
+
+    .desktop-space-xlarge {
+        margin-top: calc(var(--reactist-spacing-xlarge) * -1);
+    }
+    .desktop-space-xlarge > * {
+        margin-top: var(--reactist-spacing-xlarge);
+    }
+
+    .desktop-space-xxlarge {
+        margin-top: calc(var(--reactist-spacing-xxlarge) * -1);
+    }
+    .desktop-space-xxlarge > * {
+        margin-top: var(--reactist-spacing-xxlarge);
+    }
+}
diff --git a/src/new-components/columns/columns.tsx b/src/new-components/columns/columns.tsx
@@ -8,7 +8,6 @@ import type { Space } from '../common-types'
 import type { ReusableBoxProps } from '../box'
 
 import styles from './columns.module.css'
-import stackStyles from '../stack/stack.module.css'
 
 type ColumnWidth =
     | 'auto'
@@ -67,10 +66,8 @@ const Columns = forwardRefWithAs<ColumnsProps>(function Columns(
 ) {
     return (
         <Box
-            className={[
-                getClassNames(styles, 'space', space),
-                getClassNames(stackStyles, 'space', space),
-            ]}
+            {...props}
+            className={getClassNames(styles, 'space', space)}
             flexDirection={
                 collapseBelow === 'desktop'
                     ? ['column', 'column', 'row']
@@ -86,7 +83,6 @@ const Columns = forwardRefWithAs<ColumnsProps>(function Columns(
                 align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',
             )}
             ref={ref}
-            {...props}
         >
             {children}
         </Box>