Merge branch 'next' into layout-next

.changeset/eighty-dots-agree.md

@@ -9,8 +9,8 @@ new:
 
 **Column:** Add `component` support
 
-With `Columns` no longer adding intermidiary elements, consumers are free to control the underlying HTML element of the `Column` themselves via the `component` prop.
-The list is kept to a white list of relevant elements to the component that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.
+With `Columns` no longer adding intermediary elements, consumers are free to control the underlying HTML element of the `Column` themselves via the `component` prop.
+Valid options are kept to a white list of elements relevant to `Column` that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.
 
 **EXAMPLE USAGE:**
 ```jsx

.changeset/fair-donuts-worry.md

@@ -0,0 +1,33 @@
+---
+'braid-design-system': major
+---
+
+Drop support for React 17.x
+
+To enable Braid to leverage newer React APIs, we are no longer providing support for React v17.x.
+React 18 was released in March 2022 and consumers were encouraged to upgrade to this as part of the Braid v32 release in Feb 2023 (which dropped React 16 support).
+
+Removing support for React 17 allows us to simplify and streamline a lot of our component APIs, which will have downstream improvements on consumer codebases.
+
+### MIGRATION GUIDE:
+Consumers still on v17 should follow the [How to Upgrade to React 18 guide].
+
+For [sku] consumers who upgraded to Braid v32 and added the "`jsx-runtime` workaround for ESM incompatibility", this can now be safely removed from their webpack configuration once updated to React 18:
+
+```diff
+// sku.config.ts
+{
+  dangerouslySetWebpackConfig: (config) =>
+    webpackMerge(config, {
+-      resolve: {
+-        fallback: {
+-          'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+-        },
+-      },
+    }),
+}
+```
+
+[sku]: https://seek-oss.github.io/sku/
+[How to Upgrade to React 18 guide]: https://react.dev/blog/2022/03/08/react-18-upgrade-guide
+[migration guide]: https://seek-oss.github.io/braid-design-system/releases#32.0.0

.changeset/heavy-donuts-hug.md

@@ -0,0 +1,15 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Column
+---
+
+**Column:** Prevent growing when `content` width specified
+
+Ensure that when a column `width` is specified, the column does not grow or shrink.
+Only a column with no `width` specified will fluidly adapt to the available space.
+
+Fixes a bug when all `Column` components have a defined `width`, a column specifying `content` width would incorrectly grow to consume the available space.

.changeset/red-ladybugs-doubt.md

@@ -0,0 +1,14 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Stack
+---
+
+**Stack:** Set default text alignment based on `align`
+
+As a convenience, the `align` prop sets the text alignment for the container, meaning any nested `Text` or `Heading` components will inherit this alignment by default.
+
+This can be overridden by setting the alignment explicitly on the relevant `Text` or `Heading` component.

packages/braid-design-system/package.json

@@ -253,8 +253,8 @@
     "title-case": "^3.0.3"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^18",
+    "react-dom": "^18",
     "sku": ">=10.13.1"
   },
   "skuSkipConfigure": true,

packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentDocs } from 'site/types';
-import { Stack, Text, TextLink, Strong, Divider } from '../';
+import { Stack, Text, TextLink, Strong, Divider, Notice } from '../';
 import { Placeholder } from '../private/Placeholder/Placeholder';
 import source from '@braid-design-system/source.macro';
 
@@ -66,11 +66,23 @@ const docs: ComponentDocs = {
     {
       label: 'Horizontal alignment',
       description: (
-        <Text>
-          Items can be aligned horizontally using the <Strong>align</Strong>{' '}
-          prop. Responsive values are supported, e.g.{' '}
-          <Strong>{"align={{ mobile: 'center', tablet: 'left' }}"}</Strong>
-        </Text>
+        <>
+          <Text>
+            Items can be aligned horizontally using the <Strong>align</Strong>{' '}
+            prop. Responsive values are supported, e.g.{' '}
+            <Strong>{"align={{ mobile: 'center', tablet: 'left' }}"}</Strong>
+          </Text>
+          <Notice>
+            <Text>
+              As a convenience, the <Strong>align</Strong> prop also sets the
+              text alignment for the container. This can be overridden by
+              setting alignment explicitly on the relevant{' '}
+              <TextLink href="/components/Text#alignment">Text</TextLink> or{' '}
+              <TextLink href="/components/Heading#alignment">Heading</TextLink>{' '}
+              component.
+            </Text>
+          </Notice>
+        </>
       ),
       Example: () =>
         source(

packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode, Fragment } from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Box, Stack, Hidden } from '../';
+import { Box, Stack, Hidden, Heading, Text, Strong } from '../';
 import { Placeholder } from '../private/Placeholder/Placeholder';
 import { spaces } from '../../utils/docsHelpers';
 
@@ -161,5 +161,56 @@ export const screenshots: ComponentScreenshot = {
         </Stack>
       ),
     },
+    {
+      label: 'Test - Default text alignment (left)',
+      Container,
+      Example: () => (
+        <Stack space="large" align="left">
+          <Heading level="3">Default heading alignment (left).</Heading>
+          <Text>
+            <Strong>Default text alignment (left).</Strong> Est quis incididunt
+            do laboris eiusmod et..
+          </Text>
+          <Text align="right">
+            <Strong>Explicit right alignment.</Strong> Pariatur ad aute esse
+            esse sunt aliqua.
+          </Text>
+        </Stack>
+      ),
+    },
+    {
+      label: 'Test - Default text alignment (center)',
+      Container,
+      Example: () => (
+        <Stack space="large" align="center">
+          <Heading level="3">Default heading alignment (center).</Heading>
+          <Text>
+            <Strong>Default text alignment (center).</Strong> Est quis
+            incididunt do laboris eiusmod et..
+          </Text>
+          <Text align="right">
+            <Strong>Explicit right alignment.</Strong> Pariatur ad aute esse
+            esse sunt aliqua.
+          </Text>
+        </Stack>
+      ),
+    },
+    {
+      label: 'Test - Default text alignment (right)',
+      Container,
+      Example: () => (
+        <Stack space="large" align="right">
+          <Heading level="3">Default heading alignment (right).</Heading>
+          <Text>
+            <Strong>Default text alignment (right).</Strong> Est quis incididunt
+            do laboris eiusmod et..
+          </Text>
+          <Text align="center">
+            <Strong>Explicit center alignment.</Strong> Pariatur ad aute esse
+            esse sunt aliqua.
+          </Text>
+        </Stack>
+      ),
+    },
   ],
 };

packages/braid-design-system/src/lib/components/Stack/Stack.tsx

@@ -39,18 +39,28 @@ export const Stack = ({
   component = 'div',
   children,
   space = 'none',
-  align = 'left',
+  align: alignProp,
   data,
   ...restProps
-}: StackProps) => (
-  <Box
-    component={component}
-    display="flex"
-    flexDirection="column"
-    gap={space}
-    alignItems={align !== 'left' ? alignToFlexAlign(align) : undefined}
-    {...buildDataAttributes({ data, validateRestProps: restProps })}
-  >
-    {children}
-  </Box>
-);
+}: StackProps) => {
+  /**
+   * Creating a seam between the provided prop and the default value
+   * to enable only setting the text alignment when the `align` prop
+   * is provided — not when it's defaulted.
+   */
+  const align = alignProp || 'left';
+
+  return (
+    <Box
+      component={component}
+      display="flex"
+      flexDirection="column"
+      gap={space}
+      alignItems={align !== 'left' ? alignToFlexAlign(align) : undefined}
+      textAlign={alignProp}
+      {...buildDataAttributes({ data, validateRestProps: restProps })}
+    >
+      {children}
+    </Box>
+  );
+};