More tweaks

seek-oss · Sep 3, 2024 · 8dc1c0f · 8dc1c0f
1 parent 9674561
commit 8dc1c0f
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 157 deletions.
diff --git a/.changeset/tidy-fans-mate.md b/.changeset/tidy-fans-mate.md
diff --git a/packages/braid-design-system/src/lib/components/Column/Column.tsx b/packages/braid-design-system/src/lib/components/Column/Column.tsx
@@ -9,9 +9,9 @@ import {
   resolveResponsiveRangeProps,
   type ResponsiveRangeProps,
 } from '../../utils/resolveResponsiveRangeProps';
-import * as styles from './Column.css';
-import { normalizeResponsiveValue } from '../../css/atoms/sprinkles.css';
 import { alignToFlexAlign } from '../../utils/align';
+import { normalizeResponsiveValue } from '../../css/atoms/sprinkles.css';
+import * as styles from './Column.css';
 
 const validColumnComponents = [
   'div',
@@ -72,7 +72,7 @@ export const Column = ({
     wide: justifyContentWide = justifyContentDesktop,
   } = normalizedAlign;
 
-  const alignment = {
+  const display = {
     mobile: collapseMobile && align !== 'left' ? 'flex' : 'block',
     tablet: collapseTablet && align !== 'left' ? 'flex' : 'block',
     desktop: collapseDesktop && align !== 'left' ? 'flex' : 'block',
@@ -83,10 +83,10 @@ export const Column = ({
     <Box
       component={component}
       display={optimizeResponsiveArray([
-        hideOnMobile ? 'none' : alignment.mobile,
-        hideOnTablet ? 'none' : alignment.tablet,
-        hideOnDesktop ? 'none' : alignment.desktop,
-        hideOnWide ? 'none' : alignment.wide,
+        hideOnMobile ? 'none' : display.mobile,
+        hideOnTablet ? 'none' : display.tablet,
+        hideOnDesktop ? 'none' : display.desktop,
+        hideOnWide ? 'none' : display.wide,
       ])}
       minWidth={0}
       width={width !== 'content' ? 'full' : undefined}

diff --git a/packages/braid-design-system/src/lib/components/Columns/Columns.docs.tsx b/packages/braid-design-system/src/lib/components/Columns/Columns.docs.tsx
@@ -1,16 +1,7 @@
 import React from 'react';
 import type { ComponentDocs } from 'site/types';
 import { Placeholder } from '../private/Placeholder/Placeholder';
-import {
-  Columns,
-  Column,
-  Strong,
-  Text,
-  Stack,
-  Tiles,
-  Divider,
-  Notice,
-} from '../';
+import { Columns, Column, Strong, Text, Stack, Tiles, Divider } from '../';
 import source from '@braid-design-system/source.macro';
 import { TextLink } from '../TextLink/TextLink';
 
@@ -201,21 +192,10 @@ const docs: ComponentDocs = {
     {
       label: 'Vertical alignment',
       description: (
-        <>
-          <Text>
-            Columns with content of varying height can be vertically aligned
-            using the <Strong>alignY</Strong> prop. Responsive values are
-            supported.
-          </Text>
-          <Notice>
-            <Text>
-              When using <Strong>fill</Strong>, if you are not wrapping content
-              in a <Strong>Column</Strong> component, ensure you are not setting
-              the height as a percentage as this will not be respected by the
-              flex container.
-            </Text>
-          </Notice>
-        </>
+        <Text>
+          Columns with content of varying height can be vertically aligned using
+          the <Strong>alignY</Strong> prop. Responsive values are supported.
+        </Text>
       ),
       Example: () =>
         source(

diff --git a/packages/braid-design-system/src/lib/components/Columns/Columns.tsx b/packages/braid-design-system/src/lib/components/Columns/Columns.tsx
@@ -1,23 +1,17 @@
 import React, { type ReactElement } from 'react';
 import { Box } from '../Box/Box';
 import type { ColumnProps } from '../Column/Column';
-import { ResponsiveSpace } from '../../css/atoms/atoms';
+import type { ResponsiveSpace } from '../../css/atoms/atoms';
 import { negativeMargin } from '../../css/negativeMargin/negativeMargin';
 import {
   type CollapsibleAlignmentProps,
   resolveCollapsibleAlignmentProps,
 } from '../../utils/collapsibleAlignmentProps';
-import {
-  normalizeResponsiveValue,
-  type RequiredResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
+import { normalizeResponsiveValue } from '../../css/atoms/sprinkles.css';
 import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { ColumnsContext } from './ColumnsContext';
-import { AlignY, alignYToFlexAlign } from '../../utils/align';
-import { optimizeResponsiveArray } from '../../utils/optimizeResponsiveArray';
-import { resolveResponsiveRangeProps } from '../../utils/resolveResponsiveRangeProps';
 
 const validColumnsComponents = [
   'div',
@@ -35,7 +29,6 @@ const validColumnsComponents = [
 
 export interface ColumnsProps extends CollapsibleAlignmentProps {
   space: ResponsiveSpace;
-  alignY?: RequiredResponsiveValue<AlignY>;
   children:
     | Array<ReactElement<ColumnProps> | null>
     | ReactElement<ColumnProps>
@@ -63,40 +56,23 @@ export const Columns = ({
     wide: wideSpace = desktopSpace,
   } = normalizedSpace;
 
-  const collapsibleAlignmentProps = resolveCollapsibleAlignmentProps({
+  const {
+    collapseMobile,
+    collapseTablet,
+    collapseDesktop,
+    collapsibleAlignmentProps,
+  } = resolveCollapsibleAlignmentProps({
     collapseBelow,
     align,
+    alignY,
+    defaultAlignItems: 'stretch',
     reverse,
   });
 
-  const [collapseMobile, collapseTablet, collapseDesktop] =
-    resolveResponsiveRangeProps({
-      below: collapseBelow,
-    });
-
-  const defaultAlignY = alignYToFlexAlign(alignY) || 'stretch';
-  const normalizedAlignY = normalizeResponsiveValue(defaultAlignY);
-  const {
-    mobile: alignItemsMobile = 'stretch',
-    tablet: alignItemsTablet = alignItemsMobile,
-    desktop: alignItemsDesktop = alignItemsTablet,
-    wide: alignItemsWide = alignItemsDesktop,
-  } = normalizedAlignY;
-
   return (
     <Box
       component={component}
       {...collapsibleAlignmentProps}
-      alignItems={
-        collapseBelow
-          ? optimizeResponsiveArray([
-              collapseMobile ? 'stretch' : alignItemsMobile,
-              collapseTablet ? 'stretch' : alignItemsTablet,
-              collapseDesktop ? 'stretch' : alignItemsDesktop,
-              alignItemsWide,
-            ])
-          : defaultAlignY
-      }
       className={negativeMargin('left', {
         mobile: collapseMobile ? 'none' : mobileSpace,
         tablet: collapseTablet ? 'none' : tabletSpace,

diff --git a/packages/braid-design-system/src/lib/components/Columns/ColumnsContext.ts b/packages/braid-design-system/src/lib/components/Columns/ColumnsContext.ts
@@ -1,14 +1,7 @@
 import { createContext } from 'react';
 import type { Space } from '../../css/atoms/atoms';
-import { OptionalResponsiveValue } from '../../css/atoms/sprinkles.css';
-import { Align } from '../../utils/align';
-// import type { resolveCollapsibleAlignmentProps } from '../../utils/collapsibleAlignmentProps';
-
-// export const validColumnsComponents = ['div', 'span'] as const;
-
-// type CollapsibleAlignmentChildProps = ReturnType<
-//   typeof resolveCollapsibleAlignmentProps
-// >['collapsibleAlignmentChildProps'];
+import type { OptionalResponsiveValue } from '../../css/atoms/sprinkles.css';
+import type { Align } from '../../utils/align';
 
 interface ColumnsContextValue {
   collapseMobile: boolean;
@@ -19,8 +12,6 @@ interface ColumnsContextValue {
   desktopSpace: Space;
   wideSpace: Space;
   align: OptionalResponsiveValue<Align>;
-  // collapsibleAlignmentChildProps: CollapsibleAlignmentChildProps | null;
-  // component: (typeof validColumnsComponents)[number];
 }
 
 export const ColumnsContext = createContext<ColumnsContextValue>({
@@ -32,6 +23,4 @@ export const ColumnsContext = createContext<ColumnsContextValue>({
   desktopSpace: 'none',
   wideSpace: 'none',
   align: 'left',
-  // collapsibleAlignmentChildProps: null,
-  // component: 'div',
 });
diff --git a/packages/braid-design-system/src/lib/components/Inline/Inline.tsx b/packages/braid-design-system/src/lib/components/Inline/Inline.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Box } from '../Box/Box';
+import type { ResponsiveSpace } from '../../css/atoms/atoms';
 import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
 import {
   type CollapsibleAlignmentProps,
@@ -9,16 +10,7 @@ import {
 import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
-
 import * as styles from './Inline.css';
-import { resolveResponsiveRangeProps } from '../../utils/resolveResponsiveRangeProps';
-import {
-  normalizeResponsiveValue,
-  type OptionalResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
-import { type AlignY, alignYToFlexAlign } from '../../utils/align';
-import { optimizeResponsiveArray } from '../../utils/optimizeResponsiveArray';
-import { ResponsiveSpace } from '../../css/atoms/atoms';
 
 export const validInlineComponents = [
   'div',
@@ -32,7 +24,6 @@ export const validInlineComponents = [
 
 export interface InlineProps extends CollapsibleAlignmentProps {
   space: ResponsiveSpace;
-  alignY?: OptionalResponsiveValue<AlignY>;
   component?: (typeof validInlineComponents)[number];
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
@@ -49,49 +40,32 @@ export const Inline = ({
   children,
   ...restProps
 }: InlineProps) => {
-  const collapsibleAlignmentProps = resolveCollapsibleAlignmentProps({
+  const {
+    collapseMobile,
+    collapseTablet,
+    collapseDesktop,
+    collapsibleAlignmentProps,
+  } = resolveCollapsibleAlignmentProps({
     align,
+    alignY,
+    defaultAlignItems: 'flexStart',
     collapseBelow,
     reverse,
   });
 
-  const [collapseMobile, collapseTablet, collapseDesktop, collapseWide] =
-    resolveResponsiveRangeProps({
-      below: collapseBelow,
-    });
-
-  const defaultAlignY = alignYToFlexAlign(alignY) || 'flexStart';
-  const normalizedAlignY = normalizeResponsiveValue(defaultAlignY);
-  const {
-    mobile: alignItemsMobile = 'flexStart',
-    tablet: alignItemsTablet = alignItemsMobile,
-    desktop: alignItemsDesktop = alignItemsTablet,
-    wide: alignItemsWide = alignItemsDesktop,
-  } = normalizedAlignY;
-
   return (
     <Box
       component={component}
       {...collapsibleAlignmentProps}
       gap={space}
-      alignItems={
-        collapseBelow
-          ? optimizeResponsiveArray([
-              collapseMobile ? 'stretch' : alignItemsMobile,
-              collapseTablet ? 'stretch' : alignItemsTablet,
-              collapseDesktop ? 'stretch' : alignItemsDesktop,
-              alignItemsWide,
-            ])
-          : defaultAlignY
-      }
       flexWrap="wrap"
       className={
         collapseBelow
           ? {
               [styles.fitContentMobile]: !collapseMobile,
               [styles.fitContentTablet]: !collapseTablet,
               [styles.fitContentDesktop]: !collapseDesktop,
-              [styles.fitContentWide]: !collapseWide,
+              [styles.fitContentWide]: true,
             }
           : styles.fitContentMobile
       }