From 8dc1c0fb1854798e29dc176ce6eac6386b95ddc5 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Tue, 3 Sep 2024 13:58:26 +1000 Subject: [PATCH] More tweaks --- .changeset/tidy-fans-mate.md | 15 --- .../src/lib/components/Column/Column.tsx | 14 +-- .../lib/components/Columns/Columns.docs.tsx | 30 +----- .../src/lib/components/Columns/Columns.tsx | 44 ++------- .../lib/components/Columns/ColumnsContext.ts | 15 +-- .../src/lib/components/Inline/Inline.tsx | 46 ++------- .../lib/utils/collapsibleAlignmentProps.ts | 93 +++++++++++++------ 7 files changed, 100 insertions(+), 157 deletions(-) delete mode 100644 .changeset/tidy-fans-mate.md diff --git a/.changeset/tidy-fans-mate.md b/.changeset/tidy-fans-mate.md deleted file mode 100644 index 64ea51307ce..00000000000 --- a/.changeset/tidy-fans-mate.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -'braid-design-system': minor ---- - ---- -new: - - Columns ---- - -**Columns:** Add `fill` support to `alignY` - -**EXAMPLE USAGE:** -```jsx - -``` \ No newline at end of file diff --git a/packages/braid-design-system/src/lib/components/Column/Column.tsx b/packages/braid-design-system/src/lib/components/Column/Column.tsx index 55e088ce0b9..c3098944654 100644 --- 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 = ({ - - Columns with content of varying height can be vertically aligned - using the alignY prop. Responsive values are - supported. - - - - When using fill, if you are not wrapping content - in a Column component, ensure you are not setting - the height as a percentage as this will not be respected by the - flex container. - - - + + Columns with content of varying height can be vertically aligned using + the alignY prop. Responsive values are supported. + ), 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 index 4aabbb06179..202a5db47f4 100644 --- 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; children: | Array | null> | ReactElement @@ -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 ( ['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; - // collapsibleAlignmentChildProps: CollapsibleAlignmentChildProps | null; - // component: (typeof validColumnsComponents)[number]; } export const ColumnsContext = createContext({ @@ -32,6 +23,4 @@ export const ColumnsContext = createContext({ 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 index ad0e3620a39..3605ca5af2e 100644 --- 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; component?: (typeof validInlineComponents)[number]; data?: DataAttributeMap; children: ReactNodeNoStrings; @@ -49,41 +40,24 @@ 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 ( (alignment: Alignment) { if (alignment === 'flexStart') { @@ -24,14 +29,21 @@ function invertAlignment(alignment: Alignment) { export interface CollapsibleAlignmentProps { collapseBelow?: ResponsiveRangeProps['below']; align?: OptionalResponsiveValue; + alignY?: OptionalResponsiveValue; reverse?: boolean; } +interface PrivateCollapsibleProps { + defaultAlignItems: 'flexStart' | 'center' | 'flexEnd' | 'stretch'; +} + export function resolveCollapsibleAlignmentProps({ align, + alignY, collapseBelow, reverse = false, -}: CollapsibleAlignmentProps) { + defaultAlignItems, +}: CollapsibleAlignmentProps & PrivateCollapsibleProps) { const [collapseMobile, collapseTablet, collapseDesktop] = resolveResponsiveRangeProps({ below: collapseBelow, @@ -53,31 +65,58 @@ export function resolveCollapsibleAlignmentProps({ wide: justifyContentWide = justifyContentDesktop, } = normalizedAlign; + const normalizedAlignY = normalizeResponsiveValue( + alignYToFlexAlign(alignY) || defaultAlignItems, + ); + const { + mobile: alignItemsMobile = defaultAlignItems, + tablet: alignItemsTablet = alignItemsMobile, + desktop: alignItemsDesktop = alignItemsTablet, + wide: alignItemsWide = alignItemsDesktop, + } = normalizedAlignY; + return { - display: 'flex', - flexDirection: collapseBelow - ? optimizeResponsiveArray([ - collapseMobile ? 'column' : 'row', - // eslint-disable-next-line no-nested-ternary - collapseTablet ? 'column' : rowReverseTablet ? 'rowReverse' : 'row', - // eslint-disable-next-line no-nested-ternary - collapseDesktop ? 'column' : rowReverseDesktop ? 'rowReverse' : 'row', - rowReverseWide ? 'rowReverse' : 'row', - ]) - : rowReverse, - justifyContent: align - ? optimizeResponsiveArray([ - justifyContentMobile, - rowReverseTablet - ? invertAlignment(justifyContentTablet) - : justifyContentTablet, - rowReverseDesktop - ? invertAlignment(justifyContentDesktop) - : justifyContentDesktop, - rowReverseWide - ? invertAlignment(justifyContentWide) - : justifyContentWide, - ]) - : undefined, + collapseMobile, + collapseTablet, + collapseDesktop, + collapsibleAlignmentProps: { + display: 'flex', + flexDirection: collapseBelow + ? optimizeResponsiveArray([ + collapseMobile ? 'column' : 'row', + // eslint-disable-next-line no-nested-ternary + collapseTablet ? 'column' : rowReverseTablet ? 'rowReverse' : 'row', + // eslint-disable-next-line no-nested-ternary + collapseDesktop + ? 'column' + : rowReverseDesktop + ? 'rowReverse' + : 'row', + rowReverseWide ? 'rowReverse' : 'row', + ]) + : rowReverse, + justifyContent: align + ? optimizeResponsiveArray([ + justifyContentMobile, + rowReverseTablet + ? invertAlignment(justifyContentTablet) + : justifyContentTablet, + rowReverseDesktop + ? invertAlignment(justifyContentDesktop) + : justifyContentDesktop, + rowReverseWide + ? invertAlignment(justifyContentWide) + : justifyContentWide, + ]) + : undefined, + alignItems: collapseBelow + ? optimizeResponsiveArray([ + collapseMobile ? 'stretch' : alignItemsMobile, + collapseTablet ? 'stretch' : alignItemsTablet, + collapseDesktop ? 'stretch' : alignItemsDesktop, + alignItemsWide, + ]) + : defaultAlignItems, + }, } as const; }