From 7404c0954bfc8be096ae2ffc18c0ea0f326eb640 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 19 Dec 2024 15:15:33 +0000 Subject: [PATCH] Fix Inline + Stack props Signed-off-by: Charles de Dreuille --- .../src/components/Inline/Inline.stories.tsx | 51 +++++++++++++++---- .../canon/src/components/Inline/Inline.tsx | 44 ++++++++++++++-- packages/canon/src/components/Inline/types.ts | 22 +++++--- .../src/components/Stack/Stack.stories.tsx | 10 ++-- packages/canon/src/components/Stack/Stack.tsx | 23 ++++++++- packages/canon/src/components/Stack/types.ts | 13 ++++- 6 files changed, 134 insertions(+), 29 deletions(-) diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx index 32c03bc8c6..b6653a3067 100644 --- a/packages/canon/src/components/Inline/Inline.stories.tsx +++ b/packages/canon/src/components/Inline/Inline.stories.tsx @@ -46,6 +46,41 @@ const meta = { export default meta; type Story = StoryObj; +const fakeBlockList = [ + { width: 45, height: 60 }, + { width: 150, height: 75 }, + { width: 80, height: 50 }, + { width: 120, height: 70 }, + { width: 95, height: 65 }, + { width: 110, height: 55 }, + { width: 130, height: 60 }, + { width: 100, height: 80 }, + { width: 140, height: 45 }, + { width: 85, height: 70 }, + { width: 125, height: 50 }, + { width: 105, height: 75 }, + { width: 115, height: 65 }, + { width: 135, height: 55 }, + { width: 90, height: 60 }, + { width: 145, height: 80 }, + { width: 75, height: 45 }, + { width: 155, height: 70 }, + { width: 60, height: 50 }, + { width: 160, height: 75 }, + { width: 70, height: 65 }, + { width: 150, height: 55 }, + { width: 95, height: 60 }, + { width: 120, height: 80 }, + { width: 85, height: 45 }, + { width: 130, height: 70 }, + { width: 100, height: 50 }, + { width: 140, height: 75 }, + { width: 110, height: 65 }, + { width: 125, height: 55 }, + { width: 105, height: 60 }, + { width: 145, height: 80 }, +]; + const FakeBox = ({ width = 120, height = 80, @@ -63,12 +98,8 @@ export const Default: Story = { args: { children: ( <> - {Array.from({ length: 32 }).map((_, index) => ( - + {fakeBlockList.map((block, index) => ( + ))} ), @@ -78,7 +109,7 @@ export const Default: Story = { export const AlignLeft: Story = { args: { ...Default.args, - align: 'start', + align: 'left', }, }; @@ -92,14 +123,14 @@ export const AlignCenter: Story = { export const AlignRight: Story = { args: { ...Default.args, - align: 'end', + align: 'right', }, }; export const VerticalAlignTop: Story = { args: { ...Default.args, - alignY: 'start', + alignY: 'top', }, }; @@ -113,7 +144,7 @@ export const VerticalAlignCenter: Story = { export const VerticalAlignBottom: Story = { args: { ...Default.args, - alignY: 'end', + alignY: 'bottom', }, }; diff --git a/packages/canon/src/components/Inline/Inline.tsx b/packages/canon/src/components/Inline/Inline.tsx index 5283fbf067..b3aaeaf082 100644 --- a/packages/canon/src/components/Inline/Inline.tsx +++ b/packages/canon/src/components/Inline/Inline.tsx @@ -17,14 +17,50 @@ import { createElement, forwardRef } from 'react'; import type { InlineProps } from './types'; import { getClassNames } from '../../utils/getClassNames'; +import { JustifyContent, Breakpoint, AlignItems } from '../../types'; + +// Function to map align values +const mapAlignValue = (value?: InlineProps['align']) => { + if (typeof value === 'string') { + let returnedValue: JustifyContent = 'stretch'; + if (value === 'left') returnedValue = 'start'; + if (value === 'center') returnedValue = 'center'; + if (value === 'right') returnedValue = 'end'; + return returnedValue; + } else if (typeof value === 'object') { + const returnedValue: Partial> = {}; + for (const [key, val] of Object.entries(value)) { + returnedValue[key as Breakpoint] = mapAlignValue(val) as JustifyContent; + } + return returnedValue; + } + return 'stretch'; +}; + +const mapAlignYValue = (value?: InlineProps['alignY']) => { + if (typeof value === 'string') { + let returnedValue: AlignItems = 'stretch'; + if (value === 'top') returnedValue = 'start'; + if (value === 'center') returnedValue = 'center'; + if (value === 'bottom') returnedValue = 'end'; + return returnedValue; + } else if (typeof value === 'object') { + const returnedValue: Partial> = {}; + for (const [key, val] of Object.entries(value)) { + returnedValue[key as Breakpoint] = mapAlignYValue(val) as AlignItems; + } + return returnedValue; + } + return 'stretch'; +}; /** @public */ export const Inline = forwardRef((props, ref) => { const { as = 'div', children, - align = 'start', - alignY = 'start', + align = 'left', + alignY = 'top', gap = 'xs', className, style, @@ -34,8 +70,8 @@ export const Inline = forwardRef((props, ref) => { // Generate utility class names const utilityClassNames = getClassNames({ gap, - alignItems: alignY, - justifyContent: align, + alignItems: mapAlignYValue(alignY), + justifyContent: mapAlignValue(align), ...restProps, }); diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts index 32a48f52a5..c86f500018 100644 --- a/packages/canon/src/components/Inline/types.ts +++ b/packages/canon/src/components/Inline/types.ts @@ -14,18 +14,28 @@ * limitations under the License. */ -import type { SpaceProps, UtilityProps, AsProps } from '../../types'; +import type { + SpaceProps, + UtilityProps, + AsProps, + Breakpoint, +} from '../../types'; /** @public */ export interface InlineProps extends SpaceProps { children: React.ReactNode; as?: AsProps; gap?: UtilityProps['gap']; - align?: Omit< - UtilityProps['justifyContent'], - 'stretch' | 'around' | 'between' - >; - alignY?: UtilityProps['alignItems']; + align?: + | 'left' + | 'center' + | 'right' + | Partial>; + alignY?: + | 'top' + | 'center' + | 'bottom' + | Partial>; className?: string; style?: React.CSSProperties; } diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx index 47eb0fb46a..7e77bc861d 100644 --- a/packages/canon/src/components/Stack/Stack.stories.tsx +++ b/packages/canon/src/components/Stack/Stack.stories.tsx @@ -38,7 +38,7 @@ const meta = { }, }, args: { - align: 'start', + align: 'left', gap: 'xs', }, } satisfies Meta; @@ -72,7 +72,7 @@ export const Default: Story = { export const AlignLeft: Story = { args: { ...Default.args, - align: 'start', + align: 'left', }, }; @@ -86,7 +86,7 @@ export const AlignCenter: Story = { export const AlignRight: Story = { args: { ...Default.args, - align: 'end', + align: 'right', }, }; @@ -94,9 +94,9 @@ export const ResponsiveAlign: Story = { args: { ...Default.args, align: { - xs: 'start', + xs: 'left', md: 'center', - lg: 'end', + lg: 'right', }, }, }; diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx index 08525bcd92..9de0cd3777 100644 --- a/packages/canon/src/components/Stack/Stack.tsx +++ b/packages/canon/src/components/Stack/Stack.tsx @@ -17,13 +17,32 @@ import { createElement, forwardRef } from 'react'; import { StackProps } from './types'; import { getClassNames } from '../../utils/getClassNames'; +import type { AlignItems, Breakpoint } from '../../types'; + +// Function to map align values +const mapAlignValue = (value?: StackProps['align']) => { + if (typeof value === 'string') { + let returnedValue: AlignItems = 'stretch'; + if (value === 'left') returnedValue = 'start'; + if (value === 'center') returnedValue = 'center'; + if (value === 'right') returnedValue = 'end'; + return returnedValue; + } else if (typeof value === 'object') { + const returnedValue: Partial> = {}; + for (const [key, val] of Object.entries(value)) { + returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems; + } + return returnedValue; + } + return 'stretch'; +}; /** @public */ export const Stack = forwardRef((props, ref) => { const { as = 'div', children, - align = 'start', + align = 'left', gap = 'xs', className, style, @@ -33,7 +52,7 @@ export const Stack = forwardRef((props, ref) => { // Generate utility class names const utilityClassNames = getClassNames({ gap, - alignItems: align === 'start' ? 'stretch' : align, + alignItems: mapAlignValue(align), ...restProps, }); diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts index eb8aff7d32..bccdc59a57 100644 --- a/packages/canon/src/components/Stack/types.ts +++ b/packages/canon/src/components/Stack/types.ts @@ -14,14 +14,23 @@ * limitations under the License. */ -import type { SpaceProps, UtilityProps, AsProps } from '../../types'; +import type { + SpaceProps, + UtilityProps, + AsProps, + Breakpoint, +} from '../../types'; /** @public */ export interface StackProps extends SpaceProps { children: React.ReactNode; as?: AsProps; gap?: UtilityProps['gap']; - align?: UtilityProps['alignItems']; + align?: + | 'left' + | 'center' + | 'right' + | Partial>; className?: string; style?: React.CSSProperties; }