Repository: marigold-ui/marigold
Pull request #3129 (2023-07-13 13:09:47)

chore: fix `Stack` alignment and improve alignX , alignY types

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: b0f3728105fa7e23898114ed15ea5cc9e9782eec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/stack-alignments?filename=.changeset/wild-turtles-warn.md&value=---%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Achore%3A%20fix%20%60Stack%60%20alignment%20and%20improve%20alignX%20%2C%20alignY%20types%0A)


vercel[bot]: [vc]: #I0AObrum2jo0CONJp0cszwIMgzNhglfqQx7eev/rDno=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJtYXJpZ29sZCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9tYXJpZ29sZC9tYXJpZ29sZC81QmdnUzFpQ0NkNm5tcWRVaWJQenpmNTRuNVBEIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkcifSx7Im5hbWUiOiJtYXJpZ29sZC1kb2NzIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL21hcmlnb2xkL21hcmlnb2xkLWRvY3MvNkNVM3RMb3NrdHFaTVl2emExR3pLaDJUWEw0ayIsInByZXZpZXdVcmwiOiJtYXJpZ29sZC1kb2NzLWdpdC1zdGFjay1hbGlnbm1lbnRzLW1hcmlnb2xkLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQifV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **marigold** | 🔄 Building ([Inspect](https://vercel.com/marigold/marigold/5BggS1iCCd6nmqdUibPzzf54n5PD)) |  | Jul 13, 2023 1:09pm |
| **marigold-docs** | ✅ Ready ([Inspect](https://vercel.com/marigold/marigold-docs/6CU3tLosktqZMYvza1GzKh2TXL4k)) | [Visit Preview](https://marigold-docs-git-stack-alignments-marigold.vercel.app) | Jul 13, 2023 1:09pm |




Patch:
diff --git a/packages/components/src/Breakout/Breakout.tsx b/packages/components/src/Breakout/Breakout.tsx
index 179ed4e3e..1d7e7044a 100755
--- a/packages/components/src/Breakout/Breakout.tsx
+++ b/packages/components/src/Breakout/Breakout.tsx
@@ -1,36 +1,29 @@
 import React, { ReactNode } from 'react';
 import { HtmlProps } from '@marigold/types';
-import {
-  cn,
-  createVar,
-  alignmentX,
-  alignmentY,
-  AlignmentXProp,
-  AlignmentYProp,
-} from '@marigold/system';
+import { cn, createVar, alignment, AlignmentProp } from '@marigold/system';
 
-export interface BreakoutProps
-  extends HtmlProps<'div'>,
-    AlignmentXProp,
-    AlignmentYProp {
+export interface BreakoutProps extends HtmlProps<'div'>, AlignmentProp {
   children?: ReactNode;
   height?: string;
+  alignX?: keyof typeof alignment.horizontal.alignmentX;
+  alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
 
 export const Breakout = ({
   height,
   children,
+  orientation,
   alignX = 'left',
-  alignY = 'top',
+  alignY = 'center',
   ...props
 }: BreakoutProps) => {
   return (
     <div
       className={cn(
         'col-start-[1_!important] col-end-[-1_!important] w-full',
-        alignmentX[alignX],
-        alignmentY[alignY],
-        alignmentX[alignX] || alignmentY[alignY] ? 'flex' : 'block',
+        alignX && alignment?.horizontal?.alignmentX[alignX],
+        alignY && alignment?.horizontal?.alignmentY[alignY],
+        alignX || alignY ? 'flex' : 'block',
         'h-[--height]'
       )}
       style={createVar({ height })}
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
index 97efd088f..8c5a2e4ee 100644
--- a/packages/components/src/Button/Button.tsx
+++ b/packages/components/src/Button/Button.tsx
@@ -89,7 +89,11 @@ export const Button = forwardRef(
         {...mergeProps(buttonProps, focusProps, hoverProps, props)}
         {...stateProps}
         ref={buttonRef}
-        className={cn(classNames, fullWidth ? 'w-full' : undefined)}
+        className={cn(
+          'inline-flex items-center justify-center gap-[0.5ch]',
+          classNames,
+          fullWidth ? 'w-full' : undefined
+        )}
       >
         {children}
       </Component>
diff --git a/packages/components/src/Inline/Inline.tsx b/packages/components/src/Inline/Inline.tsx
index c44a64529..b7284e9aa 100755
--- a/packages/components/src/Inline/Inline.tsx
+++ b/packages/components/src/Inline/Inline.tsx
@@ -1,29 +1,27 @@
 import React, { ReactNode } from 'react';
 import {
   gapSpace,
-  alignmentX,
-  alignmentY,
-  AlignmentXProp,
-  AlignmentYProp,
+  alignment,
+  AlignmentProp,
   GapSpaceProp,
   cn,
 } from '@marigold/system';
 
 // Props
 // ---------------
-export interface InlineProps
-  extends AlignmentXProp,
-    AlignmentYProp,
-    GapSpaceProp {
+export interface InlineProps extends AlignmentProp, GapSpaceProp {
   children?: ReactNode;
+  alignX?: keyof typeof alignment.horizontal.alignmentX;
+  alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
 
 // Component
 // ---------------
 export const Inline = ({
   space = 0,
-  alignX = 'left',
-  alignY = 'center',
+  orientation,
+  alignX = orientation?.horizontal?.alignX,
+  alignY = orientation?.horizontal?.alignY,
   children,
   ...props
 }: InlineProps) => (
@@ -31,8 +29,8 @@ export const Inline = ({
     className={cn(
       'flex flex-wrap',
       gapSpace[space],
-      alignmentX[alignX],
-      alignmentY[alignY]
+      alignX && alignment?.horizontal?.alignmentX[alignX],
+      alignY && alignment?.horizontal?.alignmentY[alignY]
     )}
     {...props}
   >
diff --git a/packages/components/src/Stack/Stack.tsx b/packages/components/src/Stack/Stack.tsx
index 0535d4298..9d39eab48 100755
--- a/packages/components/src/Stack/Stack.tsx
+++ b/packages/components/src/Stack/Stack.tsx
@@ -2,21 +2,18 @@ import React, { ReactNode } from 'react';
 import {
   cn,
   gapSpace,
-  alignmentX,
-  alignmentY,
-  AlignmentXProp,
-  AlignmentYProp,
+  alignment,
+  AlignmentProp,
   GapSpaceProp,
 } from '@marigold/system';
 
 // Props
 // ---------------
-export interface StackProps
-  extends AlignmentXProp,
-    AlignmentYProp,
-    GapSpaceProp {
+export interface StackProps extends AlignmentProp, GapSpaceProp {
   children?: ReactNode;
   stretch?: boolean;
+  alignX?: keyof typeof alignment.vertical.alignmentX;
+  alignY?: keyof typeof alignment.vertical.alignmentY;
 }
 
 // Component
@@ -24,21 +21,24 @@ export interface StackProps
 export const Stack = ({
   children,
   space = 0,
-  alignX = 'none',
-  alignY = 'none',
   stretch = false,
+  orientation,
+  alignX = 'left',
+  alignY = 'center',
   ...props
-}: StackProps) => (
-  <div
-    className={cn(
-      'flex flex-col',
-      gapSpace[space],
-      alignmentX[alignX],
-      alignmentY[alignY],
-      stretch && 'h-full w-full'
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
+}: StackProps) => {
+  return (
+    <div
+      className={cn(
+        'flex flex-col',
+        gapSpace[space],
+        alignX && alignment?.vertical?.alignmentX[alignX],
+        alignY && alignment?.vertical?.alignmentY[alignY],
+        stretch && 'h-full w-full'
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx
index 7805ec866..5af8fdc80 100644
--- a/packages/system/src/style-props.tsx
+++ b/packages/system/src/style-props.tsx
@@ -153,18 +153,35 @@ export const paddingBottom = {
   12: 'pb-12',
 };
 
-export const alignmentY = {
-  none: undefined,
-  top: 'items-start',
-  center: 'items-center',
-  bottom: 'items-end',
-};
-
-export const alignmentX = {
-  none: undefined,
-  left: 'justify-start',
-  center: 'justify-center',
-  right: 'justify-end',
+export const alignment = {
+  vertical: {
+    alignmentX: {
+      none: undefined,
+      left: 'items-start',
+      center: 'items-center',
+      right: 'items-end',
+    },
+    alignmentY: {
+      none: undefined,
+      top: 'justify-start',
+      center: 'justify-center',
+      bottom: 'justify-end',
+    },
+  },
+  horizontal: {
+    alignmentY: {
+      none: undefined,
+      top: 'items-start',
+      center: 'items-center',
+      bottom: 'items-end',
+    },
+    alignmentX: {
+      none: undefined,
+      left: 'justify-start',
+      center: 'justify-center',
+      right: 'justify-end',
+    },
+  },
 };
 
 export const placeItems = {
@@ -253,8 +270,22 @@ export const cursorStyle = {
 };
 
 export type AspectProp = { ratio?: keyof typeof aspect };
-export type AlignmentXProp = { alignX?: keyof typeof alignmentX };
-export type AlignmentYProp = { alignY?: keyof typeof alignmentY };
+
+export type AlignmentProp = {
+  orientation?: {
+    vertical?: {
+      alignY?: keyof typeof alignment.vertical.alignmentY;
+      alignX?: keyof typeof alignment.vertical.alignmentX;
+    };
+    horizontal?: {
+      alignX?: keyof typeof alignment.horizontal.alignmentX;
+      alignY?: keyof typeof alignment.horizontal.alignmentY;
+    };
+  };
+};
+
+export interface AlignmentProps extends AlignmentProp {}
+
 export type CursorProp = { cursor?: keyof typeof cursorStyle };
 export type FontStyleProp = { fontStyle?: keyof typeof textStyle };
 export type FontWeightProp = { weight?: keyof typeof fontWeight };
diff --git a/themes/theme-b2b/src/components/Calendar.styles.ts b/themes/theme-b2b/src/components/Calendar.styles.ts
index 7a0b9f00d..edaae0693 100644
--- a/themes/theme-b2b/src/components/Calendar.styles.ts
+++ b/themes/theme-b2b/src/components/Calendar.styles.ts
@@ -5,7 +5,7 @@ export const Calendar: ThemeComponent<'Calendar'> = {
   calendarCell: cva([
     'aria-disabled:text-text-disabled',
     'data-[hover]:bg-bg-primary-light',
-    'group-aria-selected/cell:bg-bg-selected outline-none group-aria-selected/cell:font-semibold group-aria-selected/cell:text-white',
+    'group-aria-selected/cell:bg-bg-selected-input outline-none group-aria-selected/cell:font-semibold group-aria-selected/cell:text-white',
   ]),
   calendarControllers: cva([
     ' data-[hover]:bg-bg-hover data-[hover]:text-text-hover',
diff --git a/themes/theme-b2b/src/components/Checkbox.styles.ts b/themes/theme-b2b/src/components/Checkbox.styles.ts
index 8b7e7f2cd..dcd35832c 100644
--- a/themes/theme-b2b/src/components/Checkbox.styles.ts
+++ b/themes/theme-b2b/src/components/Checkbox.styles.ts
@@ -4,7 +4,7 @@ export const Checkbox: ThemeComponent<'Checkbox'> = {
   checkbox: cva([
     'border-border-light group-hover/checkbox:border-border-hover rounded-sm',
     'group-focus/checkbox:outline-outline-focus group-focus/checkbox:outline group-focus/checkbox:outline-2 group-focus/checkbox:outline-offset-2',
-    'group-checked/checkbox:border-border-selected group-checked/checkbox:bg-bg-selected group-indeterminate/checkbox:border-border-selected group-indeterminate/checkbox:bg-bg-selected group-checked/checkbox:text-white group-indeterminate/checkbox:text-white',
+    'group-checked/checkbox:border-border-selected group-checked/checkbox:bg-bg-selected-input group-indeterminate/checkbox:border-border-selected group-indeterminate/checkbox:bg-bg-selected-input group-checked/checkbox:text-white group-indeterminate/checkbox:text-white',
     'group-disabled/checkbox:bg-bg-disabled group-disabled/:border-border-disabled',
   ]),
   container: cva(),
diff --git a/themes/theme-b2b/src/components/ListBox.styles.ts b/themes/theme-b2b/src/components/ListBox.styles.ts
index ce857ef28..794c1f8d7 100644
--- a/themes/theme-b2b/src/components/ListBox.styles.ts
+++ b/themes/theme-b2b/src/components/ListBox.styles.ts
@@ -17,7 +17,7 @@ export const ListBox: ThemeComponent<'ListBox'> = {
     'cursor-pointer p-2 outline-none',
     // Need to use data attributes here because `focus-visible` only works with <Select>
     'data-[focus-visible]:bg-bg-focus',
-    'aria-selected:text-text-light aria-selected:bg-bg-selected aria-selected:data-[focus-visible]:bg-bg-selected',
+    'aria-selected:text-text-light aria-selected:bg-bg-selected-input aria-selected:data-[focus-visible]:bg-bg-selected-input',
     'aria-disabled:text-text-disabled aria-disabled:cursor-not-allowed',
   ]),
   section: cva(
diff --git a/themes/theme-b2b/src/components/Radio.styles.ts b/themes/theme-b2b/src/components/Radio.styles.ts
index ee10fc7d4..264c47f78 100644
--- a/themes/theme-b2b/src/components/Radio.styles.ts
+++ b/themes/theme-b2b/src/components/Radio.styles.ts
@@ -7,7 +7,7 @@ export const Radio: ThemeComponent<'Radio'> = {
     'border-border-light',
     'group-hover/radio:border-border-hover',
     'group-focus/radio:outline-outline-focus group-focus/radio:outline group-focus/radio:outline-2 group-focus/radio:outline-offset-2',
-    'group-checked/radio:border-border-selected group-checked/radio:bg-bg-selected group-checked/radio:text-white',
+    'group-checked/radio:border-border-selected-input group-checked/radio:bg-bg-selected-input group-checked/radio:text-white',
     'group-disabled/radio:bg-bg-disabled group-disabled/radio:border-border-disabled',
   ]),
 };
diff --git a/themes/theme-b2b/src/components/Table.styles.ts b/themes/theme-b2b/src/components/Table.styles.ts
index 4422246d5..6a8cb1ac1 100644
--- a/themes/theme-b2b/src/components/Table.styles.ts
+++ b/themes/theme-b2b/src/components/Table.styles.ts
@@ -19,7 +19,7 @@ export const Table: ThemeComponent<'Table'> = {
   ),
   row: cva([
     'data-[hover]:bg-bg-hover-light',
-    'aria-selected:bg-bg-selected-light',
+    'aria-selected:bg-bg-selected',
     'focus-visible:outline-outline-focus',
   ]),
   cell: cva(
diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts
index a68db1d50..20459c0f7 100644
--- a/themes/theme-b2b/src/tokens.ts
+++ b/themes/theme-b2b/src/tokens.ts
@@ -150,8 +150,8 @@ export const colors = {
     hover: { DEFAULT: brand.secondary[400], light: brand.secondary[200] },
     focus: brand.primary[200],
     selected: {
-      DEFAULT: brand.primary[600],
-      light: brand.primary[100],
+      DEFAULT: brand.primary[100],
+      input: brand.primary[600],
     },
 
     // Status
diff --git a/themes/theme-core/src/components/Button.styles.ts b/themes/theme-core/src/components/Button.styles.ts
index 315d3ba1e..5220c1f79 100644
--- a/themes/theme-core/src/components/Button.styles.ts
+++ b/themes/theme-core/src/components/Button.styles.ts
@@ -2,7 +2,6 @@ import { ThemeComponent, cva } from '@marigold/system';
 
 export const Button: ThemeComponent<'Button'> = cva(
   [
-    'inline-flex items-center justify-center gap-[0.5ch]',
     'border-border-dark bg-bg-neutral text-text-dark ease-ease-out h-6 cursor-pointer rounded-sm border px-4 py-0 text-sm leading-6 transition-all duration-200 disabled:cursor-none',
     'disabled:border-border-disabled disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed',
     'outline-outline-focus outline-2 outline-offset-1 focus-visible:outline',


Test patch:
diff --git a/packages/components/src/Accordion/Accordion.test.tsx b/packages/components/src/Accordion/Accordion.test.tsx
index a37b67326..81a0d6727 100644
--- a/packages/components/src/Accordion/Accordion.test.tsx
+++ b/packages/components/src/Accordion/Accordion.test.tsx
@@ -129,7 +129,9 @@ test('accepts variant and size classnames', () => {
   const button = screen.getByText('Information');
 
   expect(button).toHaveAttribute('aria-expanded', 'false');
-  expect(button.className).toMatchInlineSnapshot(`"w-full bg-blue-600 p-8"`);
+  expect(button.className).toMatchInlineSnapshot(
+    `"inline-flex items-center justify-center gap-[0.5ch] w-full bg-blue-600 p-8"`
+  );
   fireEvent.click(button);
   expect(button).toHaveAttribute('aria-expanded', 'true');
 
@@ -150,7 +152,9 @@ test('default full width', () => {
 
   const button = screen.getByText('Information');
 
-  expect(button.className).toMatchInlineSnapshot(`"w-full"`);
+  expect(button.className).toMatchInlineSnapshot(
+    `"inline-flex items-center justify-center gap-[0.5ch] w-full"`
+  );
 });
 
 test('support default expanded keys', () => {
diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx
index 914eb7630..45efafa46 100644
--- a/packages/components/src/Breakout/Breakout.test.tsx
+++ b/packages/components/src/Breakout/Breakout.test.tsx
@@ -7,7 +7,7 @@ test('has gridColumn, alignment and default width via classname', () => {
   render(<Breakout data-testid="breakout">breakout</Breakout>);
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-start flex h-[--height]"`
+    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
   );
 });
 test('supports horizontal center', () => {
@@ -18,7 +18,7 @@ test('supports horizontal center', () => {
   );
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-center items-start flex h-[--height]"`
+    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-center items-center flex h-[--height]"`
   );
 });
 
@@ -35,7 +35,9 @@ test('supports horizontalAlign right', () => {
 test('supports default vertical align top', () => {
   render(<Breakout data-testid="breakout">breakout</Breakout>);
   const breakout = screen.getByTestId(/breakout/);
-  expect(breakout).toHaveClass(`items-start`);
+  expect(breakout.className).toMatchInlineSnapshot(
+    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
+  );
 });
 
 test('supports verticalAlign center', () => {
@@ -68,7 +70,7 @@ test('supports height prop', () => {
   );
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-start flex h-[--height]"`
+    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
   );
 });
 
@@ -80,6 +82,6 @@ test('no align set', () => {
   );
   const breakout = screen.getByTestId(/breakout/);
   expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full block h-[--height]"`
+    `"col-start-[1_!important] col-end-[-1_!important] w-full flex h-[--height]"`
   );
 });
diff --git a/packages/components/src/Button/Button.test.tsx b/packages/components/src/Button/Button.test.tsx
index 335ec5e03..864872cc7 100644
--- a/packages/components/src/Button/Button.test.tsx
+++ b/packages/components/src/Button/Button.test.tsx
@@ -43,7 +43,7 @@ test('supports base styling classes', () => {
 
   expect(button).toMatchInlineSnapshot(`
     <button
-      class="align-center flex disabled:bg-gray-600"
+      class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600"
       type="button"
     >
       button
@@ -73,7 +73,7 @@ test('accepts other variants', () => {
   expect(button).toHaveClass('text-secondary-800');
   expect(button).toMatchInlineSnapshot(`
     <button
-      class="align-center flex disabled:bg-gray-600 text-secondary-800"
+      class="items-center justify-center gap-[0.5ch] align-center flex disabled:bg-gray-600 text-secondary-800"
       type="button"
     >
       button
diff --git a/packages/components/src/ComboBox/ComboBox.test.tsx b/packages/components/src/ComboBox/ComboBox.test.tsx
index a92691e15..b9533a3ab 100644
--- a/packages/components/src/ComboBox/ComboBox.test.tsx
+++ b/packages/components/src/ComboBox/ComboBox.test.tsx
@@ -106,7 +106,7 @@ test('supports classnames', () => {
   const label = screen.getByText('Label');
   const button = screen.getByRole('button');
   expect(button.className).toMatchInlineSnapshot(
-    `"absolute right-2 h-4 w-4 border-none bg-transparent p-0"`
+    `"inline-flex items-center justify-center gap-[0.5ch] absolute right-2 h-4 w-4 border-none bg-transparent p-0"`
   );
   expect(container?.className).toMatchInlineSnapshot(
     `"group/field w-[--fieldWidth]"`
diff --git a/packages/components/src/Stack/Stack.test.tsx b/packages/components/src/Stack/Stack.test.tsx
index 01e72acb2..028764e7c 100644
--- a/packages/components/src/Stack/Stack.test.tsx
+++ b/packages/components/src/Stack/Stack.test.tsx
@@ -24,7 +24,9 @@ test('uses spacing from theme', () => {
     </Stack>
   );
   const first = screen.getByText(/first/).parentElement;
-  expect(first?.className).toMatchInlineSnapshot(`"flex flex-col gap-2"`);
+  expect(first?.className).toMatchInlineSnapshot(
+    `"flex flex-col gap-2 items-start justify-center"`
+  );
 });
 
 test('children are not aligned by default', () => {
@@ -44,7 +46,9 @@ test('allows to align children to the left', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveClass(`justify-start`);
+  expect(stack.className).toMatchInlineSnapshot(
+    `"flex flex-col gap-0 items-start justify-center"`
+  );
 });
 
 test('allows to align children to the center', () => {
@@ -64,7 +68,9 @@ test('allows to align children to the right', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveClass(`justify-end`);
+  expect(stack.className).toMatchInlineSnapshot(
+    `"flex flex-col gap-0 items-end justify-center"`
+  );
 });
 
 test('allows to align children to the vertical top', () => {
@@ -84,7 +90,9 @@ test('allows to align children to the vertical center', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveClass(`items-center`);
+  expect(stack.className).toMatchInlineSnapshot(
+    `"flex flex-col gap-0 items-start justify-center"`
+  );
 });
 
 test('allows to align children to the bottom', () => {
@@ -94,7 +102,9 @@ test('allows to align children to the bottom', () => {
     </Stack>
   );
   const stack = screen.getByTestId('stack');
-  expect(stack).toHaveClass(`items-end`);
+  expect(stack.className).toMatchInlineSnapshot(
+    `"flex flex-col gap-0 items-start justify-end"`
+  );
 });
 
 test('allows to fill space with stretch prop', () => {