chore: Support baseline alignment (#523)

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.14
+
+-   [Fix] Add support for `baseline` alignment
+
 ## v9.2.0-beta.13
 
 -   [Fix] Allow nested `Columns` components to retain their own inner spacing

docs/iframe.html

@@ -245,4 +245,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.233fc521.iframe.bundle.js"></script><script src="vendors~main.829136cb.iframe.bundle.js"></script><script src="main.7e82a4c2.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.233fc521.iframe.bundle.js"></script><script src="vendors~main.1e793df3.iframe.bundle.js"></script><script src="main.e3b234ec.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -52,4 +52,4 @@
 
 
 
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.d19817689f726beb264f.manager.bundle.js"></script><script src="vendors~main.2d10f07dc46e02b35c70.manager.bundle.js"></script><script src="main.ecf76ec7b279514afee2.manager.bundle.js"></script></body></html>
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.d19817689f726beb264f.manager.bundle.js"></script><script src="vendors~main.686b306a71d615ea03c5.manager.bundle.js"></script><script src="main.ecf76ec7b279514afee2.manager.bundle.js"></script></body></html>

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.13",
+    "version": "9.2.0-beta.14",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

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

@@ -203,6 +203,9 @@
 .alignItems-flexEnd {
     align-items: flex-end;
 }
+.alignItems-baseline {
+    align-items: baseline;
+}
 @media (min-width: 768px /* --reactist-breakpoint-tablet */) {
     .tablet-alignItems-flexStart {
         align-items: flex-start;
@@ -213,6 +216,9 @@
     .tablet-alignItems-flexEnd {
         align-items: flex-end;
     }
+    .tablet-alignItems-baseline {
+        align-items: baseline;
+    }
 }
 @media (min-width: 992px /* --reactist-breakpoint-desktop */) {
     .desktop-alignItems-flexStart {
@@ -224,6 +230,9 @@
     .desktop-alignItems-flexEnd {
         align-items: flex-end;
     }
+    .desktop-alignItems-baseline {
+        align-items: baseline;
+    }
 }
 
 /* justify-content */

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

@@ -26,7 +26,10 @@ export default {
         display: select<BoxDisplay>(['block', 'inlineBlock', 'inline', 'flex', 'none'], 'block'),
         flexDirection: selectWithNone<BoxFlexDirection>(['column', 'row'], 'row'),
         flexWrap: selectWithNone<BoxFlexWrap>(['wrap', 'nowrap'], 'nowrap'),
-        alignItems: selectWithNone<BoxAlignItems>(['center', 'flexEnd', 'flexStart'], 'none'),
+        alignItems: selectWithNone<BoxAlignItems>(
+            ['center', 'flexEnd', 'flexStart', 'baseline'],
+            'none',
+        ),
         justifyContent: selectWithNone<BoxJustifyContent>(
             ['center', 'flexEnd', 'flexStart', 'spaceBetween'],
             'none',

src/new-components/box/box.tsx

@@ -22,7 +22,7 @@ type BoxMaxMinWidth = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
 type BoxDisplay = 'block' | 'flex' | 'inline' | 'inlineBlock' | 'inlineFlex' | 'none'
 type BoxFlexDirection = 'column' | 'row'
 type BoxFlexWrap = 'nowrap' | 'wrap'
-type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart'
+type BoxAlignItems = 'center' | 'flexEnd' | 'flexStart' | 'baseline'
 type BoxJustifyContent = 'center' | 'flexEnd' | 'flexStart' | 'spaceBetween'
 type BoxOverflow = 'hidden' | 'auto' | 'visible' | 'scroll'
 

src/new-components/columns/columns.stories.tsx

@@ -27,7 +27,7 @@ export default {
     argTypes: {
         space: selectSize(),
         align: selectWithNone<ColumnsHorizontalAlignment>(['left', 'center', 'right']),
-        alignY: selectWithNone<ColumnsVerticalAlignment>(['top', 'center', 'bottom']),
+        alignY: selectWithNone<ColumnsVerticalAlignment>(['top', 'center', 'bottom', 'baseline']),
         ...reusableBoxProps(),
     },
 }

src/new-components/columns/columns.tsx

@@ -50,7 +50,7 @@ const Column = forwardRefWithAs<ColumnProps>(function Column(
 })
 
 type ColumnsHorizontalAlignment = 'left' | 'center' | 'right'
-type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom'
+type ColumnsVerticalAlignment = 'top' | 'center' | 'bottom' | 'baseline'
 type ColumnsCollapseBelow = ResponsiveBreakpoints
 
 interface ColumnsProps extends ReusableBoxProps {
@@ -76,9 +76,22 @@ const Columns = forwardRefWithAs<ColumnsProps>(function Columns(
                     : 'row'
             }
             display="flex"
-            alignItems={mapResponsiveProp(alignY, (alignY) =>
-                alignY === 'top' ? 'flexStart' : alignY === 'bottom' ? 'flexEnd' : 'center',
-            )}
+            alignItems={mapResponsiveProp(alignY, (alignY) => {
+                switch (alignY) {
+                    case 'top':
+                        return 'flexStart'
+
+                    case 'bottom':
+                        return 'flexEnd'
+
+                    case 'baseline':
+                        return 'baseline'
+
+                    case 'center':
+                    default:
+                        return 'center'
+                }
+            })}
             justifyContent={mapResponsiveProp(align, (align) =>
                 align === 'left' ? 'flexStart' : align === 'right' ? 'flexEnd' : 'center',
             )}