Merge branch 'next' into v33-remove-radio

.changeset/brave-eagles-teach.md

@@ -0,0 +1,24 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Stack
+---
+
+**Stack:** Consumers need to render `li` elements
+
+When setting `component` to `ul` or `ol` on a `Stack`, consumers need to ensure they render children as `li` elements.
+Previously Braid owned an intermediate HTML element, ensuring it was an `li` when required.
+Moving to CSS gap means child elements are no longer being wrapped, requiring consumers to update their child elements to the correct HTML element, e.g. `li`.
+
+**MIGRATION GUIDE:**
+```diff
+ <Stack component="ul">
+-  <Text>Item 1</Text>
++  <Text component="li">Item 1</Text>
+-  <Text>Item 2</Text>
++  <Text component="li">Item 2</Text>
+ </Stack>
+```

.changeset/brown-socks-talk.md

@@ -0,0 +1,23 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Autosuggest
+---
+
+**Autosuggest:** Remove deprecated message syntax from `suggestions` prop
+
+Remove the deprecated message syntax from the `suggestions` prop in favour of the `noSuggestionsMessage` prop.
+
+### MIGRATION GUIDE:
+
+```diff
+ <Autosuggest
+   ...
+-  suggestions={{ message: 'No results found' }}
++  suggestions={[]}
++  noSuggestionsMessage="No results found"
+ />
+```

.changeset/curvy-countries-grab.md

@@ -0,0 +1,22 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Text
+  - Heading
+---
+
+**Text, Heading:** Remove deprecated `truncate` prop
+
+Remove the deprecated `truncate` prop in favour of the `maxLines` prop which accepts a number of lines to truncate the text to.
+
+### MIGRATION GUIDE:
+
+```diff
+ <Text
+-   truncate
++   maxLines={1}
+ />
+```

.changeset/empty-numbers-live.md

@@ -0,0 +1,101 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Stack
+  - Tiles
+---
+
+**Stack, Tiles:** Remove `divider` support
+
+As part of migrating our layout components to leverage flex gap, the `Stack` & `Tiles` components no longer iterate over their children, making `dividers` no longer feasible to implement centrally.
+
+While we could have exposed an API to apply this behaviour conditionally, there are edge cases that cannot be handled correctly without consumer-side rendering logic, such as when child components render nothing or a hidden element.
+
+### MIGRATION GUIDE:
+For `Stack`s with static children you can manually interleave `Divider` components:
+```diff
+-<Stack space="..." dividers>
++<Stack space="...">
+   <Component />
++  <Divider />
+   <Component />
++  <Divider />
+   <Component />
+ </Stack>
+```
+
+Or for conditionally rendering children you can return a [React Fragment], including the `Divider` and child:
+```diff
+-<Stack space="..." dividers>
++<Stack space="...">
+   <Component />
+   {condition ? (
+-    <Component />
++    <>
++      <Divider />
++      <Component />
++    </>
+   ) : null}
+ </Stack>
+```
+
+For `Stack`s with iterable children you can return a [React Fragment] and conditionally render the `Divider` component as the first child, before each item (except the first):
+```diff
+-<Stack space="..." dividers>
++<Stack space="...">
+  {items.map((item, index) => (
+-    <Component>{item}</Component>
++    <Fragment key={...}>
++      {index > 0 ? <Divider /> : null}
++      <Component>{item}</Component>
++    </Fragment>
+  ))}
+</Stack>
+```
+
+For `Tiles` the `dividers` prop was only applied when showing a single column.
+
+For this you can conditionally render the `Divider` in a `Stack` with the same spacing as specified on the `Tiles` instance, and hide it on breakpoints showing more than one column.
+
+Here is an example of this with static children:
+
+```diff
+-<Tiles space="..." columns={{mobile: 1, tablet: 2}} dividers>
++<Tiles space="..." columns={{mobile: 1, tablet: 2}}>
+    <Component>{item}</Component>
++   <Stack space="...">
++     <Hidden above="mobile">
++       <Divider />
++     </Hidden>
+      <Component>{item}</Component>
++   </Stack>
++   <Stack space="...">
++     <Hidden above="mobile">
++       <Divider />
++     </Hidden>
+      <Component>{item}</Component>
++   </Stack>
+</Tiles>
+```
+
+Here is an example of this with iterable children:
+
+```diff
+-<Tiles space="..." columns={{mobile: 1, tablet: 2}} dividers>
++<Tiles space="..." columns={{mobile: 1, tablet: 2}}>
+  {items.map((item, index) => (
+-    <Component>{item}</Component>
++    <Stack space="..." key={...}>
++      {index > 0 ? (
++        <Hidden above="mobile">
++          <Divider />
++        </Hidden>
++      ) : null}
+       <Component>{item}</Component>
++    </Stack>
+  ))}
+</Tiles>
+```

.changeset/fresh-pots-bathe.md

@@ -0,0 +1,26 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Button
+  - ButtonLink
+---
+
+**Button, ButtonLink:** Remove deprecated `bleedY` prop
+
+Remove the deprecated `bleedY` prop from the `Button` and `ButtonLink` components.
+Consumers should use the `bleed` prop instead, which bleeds based on the selected `variant`.
+
+### MIGRATION GUIDE:
+
+```diff
+ <Button
+-  bleedY
++  bleed
+   {...}
+ >
+   Button
+ </Button>
+```

.changeset/large-turkeys-wait.md

@@ -0,0 +1,22 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - ButtonIcon
+---
+
+**ButtonIcon:** Remove deprecated `secondary` tone
+
+Remove the deprecated `secondary` tone from `ButtonIcon` in favour of providing the `tone` directly to the `Icon` itself.
+
+### MIGRATION GUIDE:
+
+```diff
+ <ButtonIcon
+-  tone="secondary"
+-  icon={<IconAdd />}
++  icon={<IconAdd tone="secondary" />}
+ />
+```

.changeset/pink-carrots-switch.md

@@ -0,0 +1,17 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - useBreakpoint
+---
+
+**useBreakpoint:** Remove deprecated Hook
+
+This Hook has been deprecated since [v30.1.0] in favour of `useResponsiveValue`, to prevent consumers from inadvertently coupling themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.
+
+See the [migration guide] for more information.
+
+[v30.1.0]: https://seek-oss.github.io/braid-design-system/components/useBreakpoint/releases/#v30.1.0
+[migration guide]: https://seek-oss.github.io/braid-design-system/components/useBreakpoint/releases/#v30.1.0

.changeset/plenty-dancers-serve.md

@@ -0,0 +1,22 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Rating
+---
+
+**Rating:** Remove deprecated `showTextRating` prop
+
+Remove the deprecated `showTextRating` prop in favour of `variant="starsOnly"`.
+
+### MIGRATION GUIDE:
+
+```diff
+ <Rating
+   rating={3.7}
+-  showTextRating={false}
++  variant="starsOnly"
+ />
+```

.changeset/tasty-weeks-search.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - Stack
+---
+
+**Stack:** Widen `component` support
+
+With `Stack` no longer adding intermediary elements, the `component` prop can now accept a wider range of elements.
+Valid options are kept to a white list of elements relevant to `Stack` that do not require other HTML attributes, keeping in mind that props are not blindly spread in Braid.

.changeset/three-squids-explode.md

@@ -0,0 +1,12 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Spread
+---
+
+**Spread:** Narrow `component` options to valid layout elements
+
+Not all HTML elements make sense to be a layout container, e.g. `input`, so scoping the `component` prop to only surface relevant element types.

.changeset/tough-kangaroos-sell.md

@@ -0,0 +1,24 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - Box
+  - atoms
+---
+
+**Box, atoms:** Add responsive `gap` support
+
+Add the `gap` property to the available styling atoms, inclusive of responsive spacing values.
+
+**EXAMPLE USAGE:**
+```jsx
+<Box gap="small" />
+```
+
+```jsx
+import { atoms } from 'braid-design-system/css';
+
+atoms({ gap: 'small' });
+```

.changeset/tricky-penguins-search.md

@@ -0,0 +1,17 @@
+---
+'braid-design-system': major
+---
+
+---
+updated:
+  - Stack
+---
+
+Migrate to CSS `gap` internally.
+
+With the browser support policy now enabling adoption of CSS [gap], Braid’s layout components are now able to lean into the platform directly for its declarative, parent-driven approach to white space management.
+
+Previously to enable gap-like behaviour, layout components iterated over their children wrapping them in container elements that applied padding.
+The trade off of this technique was increased number of DOM elements and the introduction of unwanted space if the child element was hidden or returned `null`, requiring developers to hoist logic to the parent component.
+
+[gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap