diff --git a/.changeset/brave-eagles-teach.md b/.changeset/brave-eagles-teach.md
new file mode 100644
index 0000000000..3124b95815
--- /dev/null
+++ b/.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
+
+- Item 1
++ Item 1
+- Item 2
++ Item 2
+
+```
diff --git a/.changeset/brown-socks-talk.md b/.changeset/brown-socks-talk.md
new file mode 100644
index 0000000000..39868f301c
--- /dev/null
+++ b/.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
+
+```
diff --git a/.changeset/curvy-countries-grab.md b/.changeset/curvy-countries-grab.md
new file mode 100644
index 0000000000..29c84eb86f
--- /dev/null
+++ b/.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
+
+```
diff --git a/.changeset/empty-numbers-live.md b/.changeset/empty-numbers-live.md
new file mode 100644
index 0000000000..536af0a098
--- /dev/null
+++ b/.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
+-
++
+
++
+
++
+
+
+```
+
+Or for conditionally rendering children you can return a [React Fragment], including the `Divider` and child:
+```diff
+-
++
+
+ {condition ? (
+-
++ <>
++
++
++ >
+ ) : null}
+
+```
+
+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
+-
++
+ {items.map((item, index) => (
+- {item}
++
++ {index > 0 ? : null}
++ {item}
++
+ ))}
+
+```
+
+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
+-
++
+ {item}
++
++
++
++
+ {item}
++
++
++
++
++
+ {item}
++
+
+```
+
+Here is an example of this with iterable children:
+
+```diff
+-
++
+ {items.map((item, index) => (
+- {item}
++
++ {index > 0 ? (
++
++
++
++ ) : null}
+ {item}
++
+ ))}
+
+```
diff --git a/.changeset/fresh-pots-bathe.md b/.changeset/fresh-pots-bathe.md
new file mode 100644
index 0000000000..cfd7ea92bf
--- /dev/null
+++ b/.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
+
+```
diff --git a/.changeset/large-turkeys-wait.md b/.changeset/large-turkeys-wait.md
new file mode 100644
index 0000000000..5821189fae
--- /dev/null
+++ b/.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
+ }
++ icon={}
+ />
+```
diff --git a/.changeset/pink-carrots-switch.md b/.changeset/pink-carrots-switch.md
new file mode 100644
index 0000000000..167ecbf16e
--- /dev/null
+++ b/.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
diff --git a/.changeset/plenty-dancers-serve.md b/.changeset/plenty-dancers-serve.md
new file mode 100644
index 0000000000..3baff7db3a
--- /dev/null
+++ b/.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
+
+```
diff --git a/.changeset/tasty-weeks-search.md b/.changeset/tasty-weeks-search.md
new file mode 100644
index 0000000000..8d7816ada8
--- /dev/null
+++ b/.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.
diff --git a/.changeset/three-squids-explode.md b/.changeset/three-squids-explode.md
new file mode 100644
index 0000000000..2355d9393b
--- /dev/null
+++ b/.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.
diff --git a/.changeset/tough-kangaroos-sell.md b/.changeset/tough-kangaroos-sell.md
new file mode 100644
index 0000000000..d249145148
--- /dev/null
+++ b/.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
+
+```
+
+```jsx
+import { atoms } from 'braid-design-system/css';
+
+atoms({ gap: 'small' });
+```
diff --git a/.changeset/tricky-penguins-search.md b/.changeset/tricky-penguins-search.md
new file mode 100644
index 0000000000..69b7ee1541
--- /dev/null
+++ b/.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
diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx
index 6e5c4d18a6..f1ff900cd9 100644
--- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx
+++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
import assert from 'assert';
-import React, { useMemo } from 'react';
+import React, { Children, useMemo } from 'react';
import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
import {
type RequiredResponsiveValue,
@@ -8,7 +8,6 @@ import {
import buildDataAttributes, {
type DataAttributeMap,
} from '../private/buildDataAttributes';
-import { Box } from '../Box/Box';
import { Stack } from '../Stack/Stack';
import { Divider } from '../Divider/Divider';
import {
@@ -16,6 +15,7 @@ import {
AccordionContext,
validTones,
} from './AccordionContext';
+import flattenChildren from '../../utils/flattenChildren';
export const validSpaceValues = ['medium', 'large', 'xlarge'] as const;
@@ -81,21 +81,29 @@ export const Accordion = ({
return (
- {!dividers ? (
-
- {children}
-
- ) : (
-
-
-
-
- {children}
-
-
-
-
- )}
+
+ {!dividers ? (
+ children
+ ) : (
+ <>
+
+ {Children.map(flattenChildren(children), (child, index) => (
+ <>
+ {index > 0 ? (
+
+ ) : null}
+ {child}
+ >
+ ))}
+
+ >
+ )}
+
);
};
diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.test.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.test.tsx
index 6c1099e997..05de11feb5 100644
--- a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.test.tsx
+++ b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.test.tsx
@@ -894,42 +894,6 @@ describe('Autosuggest', () => {
expect(getAnnouncements()).toBeNull();
});
- it('should support legacy no results messages via `suggestions`', async () => {
- // Hide deprecation warning from test log
- jest.spyOn(console, 'warn').mockImplementation(() => {});
-
- const TestCase = () => (
-
- {}}
- hideSuggestionsOnSelection={false}
- suggestions={{ message: 'Legacy no suggestions message' }}
- />
-
- );
-
- const { getByRole, queryByRole } = render();
- expect(queryByRole('listitem')).not.toBeInTheDocument();
- expect(getAnnouncements()).toBeNull();
-
- const input = getByRole('combobox');
- await userEvent.click(input);
- expect(queryByRole('listitem')).toHaveTextContent(
- 'Legacy no suggestions message',
- );
- expect(getAnnouncements()).toBe('Legacy no suggestions message');
-
- fireEvent.blur(input);
- expect(queryByRole('listitem')).not.toBeInTheDocument();
- expect(getAnnouncements()).toBeNull();
-
- // Restore console warnings
- jest.spyOn(console, 'warn').mockRestore();
- });
-
it('should not show `noSuggestionsMessage` when suggestions are provided', async () => {
const TestCase = () => (
diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
index 093de4a36d..4cea86a6bf 100644
--- a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
+++ b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx
@@ -271,12 +271,6 @@ const noop = () => {
const fallbackValue = { text: '' };
const fallbackSuggestions: Suggestion[] = [];
-/** @deprecated Use `noSuggestionsMessage` prop instead */
-interface LegacyMessageSuggestion {
- /** @deprecated Use `noSuggestionsMessage` prop instead */
- message: string;
-}
-
type HighlightOptions = 'matching' | 'remaining';
export type AutosuggestBaseProps = Omit<
@@ -286,10 +280,7 @@ export type AutosuggestBaseProps = Omit<
value: AutosuggestValue;
suggestions:
| Suggestions
- | LegacyMessageSuggestion
- | ((
- value: AutosuggestValue,
- ) => Suggestions | LegacyMessageSuggestion);
+ | ((value: AutosuggestValue) => Suggestions);
noSuggestionsMessage?: string | { title: string; description: string };
onChange: (value: AutosuggestValue) => void;
clearLabel?: string;
@@ -311,33 +302,10 @@ export type AutosuggestProps = AutosuggestBaseProps &
function normaliseNoSuggestionMessage(
noSuggestionsMessage: AutosuggestBaseProps['noSuggestionsMessage'],
- suggestionProp: AutosuggestBaseProps['suggestions'],
): { title?: string; description: string } | undefined {
- if (noSuggestionsMessage) {
- return typeof noSuggestionsMessage === 'string'
- ? { description: noSuggestionsMessage }
- : noSuggestionsMessage;
- }
-
- if ('message' in suggestionProp) {
- const message = suggestionProp.message;
- if (process.env.NODE_ENV !== 'production') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- Passing \`message\` to \`suggestions\` is deprecated and will be removed in a future version. Use "noSuggestionsMessage" instead. See the documentation for usage: https://seek-oss.github.io/braid-design-system/components/Autosuggest#messaging-when-no-suggestions-are-available
-
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
- return { description: message };
- }
+ return typeof noSuggestionsMessage === 'string'
+ ? { description: noSuggestionsMessage }
+ : noSuggestionsMessage;
}
export function highlightSuggestions(
@@ -387,7 +355,6 @@ export const Autosuggest = forwardRef(function (
: [];
const noSuggestionsMessage = normaliseNoSuggestionMessage(
noSuggestionsMessageProp,
- suggestionsPropValue,
);
const hasItems = suggestions.length > 0 || Boolean(noSuggestionsMessage);
diff --git a/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx b/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx
index 206d7eab7a..0cdc2c340d 100644
--- a/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Button/Button.screenshots.tsx
@@ -175,22 +175,6 @@ export const screenshots: ComponentScreenshot = {
),
},
- {
- label: 'With legacy bleedY (transparent)',
- background: 'surface',
- Example: () => (
-
-
- Heading
-
-
-
-
-
- ),
- },
{
label: 'With full bleed (transparent)',
background: 'surface',
diff --git a/packages/braid-design-system/src/lib/components/Button/Button.tsx b/packages/braid-design-system/src/lib/components/Button/Button.tsx
index 6e61e4b762..6c496afb05 100644
--- a/packages/braid-design-system/src/lib/components/Button/Button.tsx
+++ b/packages/braid-design-system/src/lib/components/Button/Button.tsx
@@ -1,5 +1,4 @@
import assert from 'assert';
-import dedent from 'dedent';
import React, {
type ReactNode,
type AllHTMLAttributes,
@@ -42,8 +41,6 @@ export interface ButtonStyleProps {
size?: ButtonSize;
tone?: ButtonTone;
variant?: ButtonVariant;
- /** @deprecated Use `bleed` prop instead https://seek-oss.github.io/braid-design-system/components/Button#bleed */
- bleedY?: boolean;
bleed?: boolean;
loading?: boolean;
}
@@ -491,7 +488,6 @@ export const Button = forwardRef(
tone,
icon,
iconPosition,
- bleedY,
bleed,
variant,
loading,
@@ -509,68 +505,48 @@ export const Button = forwardRef(
...restProps
},
ref,
- ) => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof bleedY !== 'undefined') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "bleedY" prop has been deprecated and will be removed in a future version. Use "bleed" instead.
-
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
- }
+ ) => (
+
+
+
- return (
-
-
-
-
-
- {children}
-
-
-
- );
- },
+ {children}
+
+
+
+ ),
);
Button.displayName = 'Button';
diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx
index fe9916125a..f4e311b4dd 100644
--- a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.screenshots.tsx
@@ -132,28 +132,6 @@ export const screenshots: ComponentScreenshot = {
),
},
- {
- label: 'Tone - secondary (deprecated)',
- background: 'surface',
- Example: () => (
-
- }
- label="Bookmark"
- id="1"
- />
- }
- label="Bookmark"
- id="1"
- />
-
- ),
- },
{
label: 'Virtual touch target',
Example: () => (
@@ -261,8 +239,8 @@ export const screenshots: ComponentScreenshot = {
}
+ tone="formAccent"
+ icon={}
label="Bookmark"
id="1"
/>
diff --git a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx
index 3ca74c3df8..a718704bff 100644
--- a/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx
+++ b/packages/braid-design-system/src/lib/components/ButtonIcon/ButtonIcon.tsx
@@ -24,15 +24,14 @@ import { Bleed } from '../Bleed/Bleed';
import { TooltipRenderer } from '../TooltipRenderer/TooltipRenderer';
import type { Space } from '../../css/atoms/atoms';
import * as styles from './ButtonIcon.css';
-import dedent from 'dedent';
export const buttonIconVariants: Array<
Extract
> = ['soft', 'transparent'];
export const buttonIconTones: Array<
- Extract | 'secondary'
-> = ['neutral', 'formAccent', 'secondary'];
+ Extract
+> = ['neutral', 'formAccent'];
export const buttonIconSizes = ['small', 'standard', 'large'] as const;
type ButtonIconSize = (typeof buttonIconSizes)[number];
@@ -90,35 +89,13 @@ const PrivateButtonIcon = forwardRef<
},
forwardedRef,
) => {
- if (process.env.NODE_ENV !== 'production') {
- if (tone === 'secondary') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "secondary" tone has been deprecated for \`ButtonIcon\` and will be removed in a future version. Apply the "tone" directly to the icon.
- }
- %c+ icon={}
- %c/>
- `,
- 'color: red',
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
- }
-
- const buttonTone = tone === 'secondary' ? 'neutral' : tone;
-
const {
className: buttonClasses,
width: _,
...buttonStyleProps
} = useButtonStyles({
variant,
- tone: buttonTone,
+ tone,
size: size === 'small' ? 'small' : 'standard',
radius: 'full',
});
@@ -153,7 +130,7 @@ const PrivateButtonIcon = forwardRef<
>
= 0}
forceActive={ariaExpanded === 'true' || ariaExpanded === true}
diff --git a/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.tsx b/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.tsx
index 1ad4f26b5b..da3f29d4c7 100644
--- a/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.tsx
+++ b/packages/braid-design-system/src/lib/components/ButtonLink/ButtonLink.tsx
@@ -1,4 +1,3 @@
-import dedent from 'dedent';
import React, { type ReactNode, forwardRef } from 'react';
import {
type LinkComponentProps,
@@ -33,7 +32,6 @@ export const ButtonLink = forwardRef(
size,
tone,
variant,
- bleedY,
bleed,
icon,
iconPosition,
@@ -45,24 +43,6 @@ export const ButtonLink = forwardRef(
) => {
const LinkComponent = useLinkComponent(ref);
- if (process.env.NODE_ENV !== 'production') {
- if (typeof bleedY !== 'undefined') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "bleedY" prop has been deprecated and will be removed in a future version. Use "bleed" instead.
-
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
- }
-
return (
(
variant,
tone,
size,
- bleed: bleed || bleedY,
+ bleed,
loading,
})}
>
diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx
index d849fbac69..7983955361 100644
--- a/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Heading/Heading.docs.tsx
@@ -9,7 +9,6 @@ import {
Strong,
TextLink,
IconImage,
- Alert,
Divider,
} from '../';
@@ -112,20 +111,11 @@ const docs: ComponentDocs = {
{
label: 'Limiting the number of lines',
description: (
- <>
-
- When displaying user-generated content that may not fit within your
- layout, you can control the number of lines to display with the{' '}
- maxLines prop.
-
-
-
- The truncate prop has been deprecated in favour
- of {`maxLines={1}`}, and will be removed in a
- future version.
-
-
- >
+
+ When displaying user-generated content that may not fit within your
+ layout, you can control the number of lines to display with the{' '}
+ maxLines prop.
+
),
Example: () =>
source(
diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx
index 2aa67bf53e..6d1926a8d2 100644
--- a/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Heading/Heading.screenshots.tsx
@@ -87,19 +87,7 @@ export const screenshots: ComponentScreenshot = {
),
},
{
- label: 'Truncation (legacy)',
- Example: () => (
-
-
-
- Limiting to 1 line that won’t fit in the layout
-
-
-
- ),
- },
- {
- label: 'Max lines = 1 (should be same as truncation)',
+ label: 'Max lines = 1',
Example: () => (
@@ -111,7 +99,7 @@ export const screenshots: ComponentScreenshot = {
),
},
{
- label: 'Max lines = 1 (in flex container, should be same as truncation)',
+ label: 'Max lines = 1 (in flex container)',
Example: () => (
diff --git a/packages/braid-design-system/src/lib/components/List/List.tsx b/packages/braid-design-system/src/lib/components/List/List.tsx
index d743a2928c..a2bdbc4c4b 100644
--- a/packages/braid-design-system/src/lib/components/List/List.tsx
+++ b/packages/braid-design-system/src/lib/components/List/List.tsx
@@ -123,7 +123,7 @@ export const List = ({
const resolvedIndex = index + (start - 1);
return (
-
+
{
@@ -85,28 +82,8 @@ export const Rating = ({
'Rating must be between 0 and 5',
);
- const variant = variantProp || 'full';
- const resolvedVariant =
- showTextRating === false && !variantProp ? 'starsOnly' : variant;
-
if (process.env.NODE_ENV !== 'production') {
- if (typeof showTextRating !== 'undefined') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "showTextRating" prop has been deprecated and will be removed in a future version. Use \`variant="starsOnly"\` instead.
-
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
-
- if (typeof weight !== 'undefined' && resolvedVariant === 'starsOnly') {
+ if (typeof weight !== 'undefined' && variant === 'starsOnly') {
// eslint-disable-next-line no-console
console.warn(
dedent`
@@ -130,7 +107,7 @@ export const Rating = ({
ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`
}
>
- {resolvedVariant === 'minimal' ? (
+ {variant === 'minimal' ? (
@@ -149,7 +126,7 @@ export const Rating = ({
))
)}
- {resolvedVariant !== 'starsOnly' && (
+ {variant !== 'starsOnly' && (
{rating.toFixed(1)}
diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts b/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts
index e0a20ab800..fa8ff1e886 100644
--- a/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts
+++ b/packages/braid-design-system/src/lib/components/Spread/Spread.css.ts
@@ -1,11 +1,4 @@
import { globalStyle, style } from '@vanilla-extract/css';
-import {
- defineProperties,
- createSprinkles,
- type RequiredConditionalValue,
-} from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../css/breakpoints';
-import { space } from '../../css/atoms/atomicProperties';
export const fitContent = style({});
globalStyle(`${fitContent} > *`, {
@@ -17,27 +10,3 @@ export const maxWidth = style({});
globalStyle(`${maxWidth} > *`, {
maxWidth: '100%',
});
-
-const responsiveGapProperties = defineProperties({
- defaultCondition: 'mobile',
- conditions: {
- mobile: {},
- tablet: {
- '@media': `screen and (min-width: ${breakpoints.tablet}px)`,
- },
- desktop: {
- '@media': `screen and (min-width: ${breakpoints.desktop}px)`,
- },
- wide: {
- '@media': `screen and (min-width: ${breakpoints.wide}px)`,
- },
- },
- properties: {
- gap: space,
- },
-});
-
-export const responsiveGap = createSprinkles(responsiveGapProperties);
-
-export type RequiredResponsiveValue =
- RequiredConditionalValue;
diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.playroom.tsx b/packages/braid-design-system/src/lib/components/Spread/Spread.playroom.tsx
index 5e38b6dc64..04a16b4a81 100644
--- a/packages/braid-design-system/src/lib/components/Spread/Spread.playroom.tsx
+++ b/packages/braid-design-system/src/lib/components/Spread/Spread.playroom.tsx
@@ -1,11 +1,7 @@
import React from 'react';
import { type SpreadProps, Spread as BraidSpread } from './Spread';
import { cleanSpaceValue } from '../../playroom/cleanSpaceValue';
-import type { RequiredResponsiveValue } from './Spread.css';
-import type { Space } from '../../css/atoms/atoms';
-export const Spread = ({ space, ...restProps }: SpreadProps) => {
- /* Temporary cast to satisfy `cleanSpaceValue`. Wont be required when `gap` moves to core atoms */
- const cleanSpace = cleanSpaceValue(space) as RequiredResponsiveValue;
- return ;
-};
+export const Spread = ({ space, ...restProps }: SpreadProps) => (
+
+);
diff --git a/packages/braid-design-system/src/lib/components/Spread/Spread.tsx b/packages/braid-design-system/src/lib/components/Spread/Spread.tsx
index 3d46219b69..06fbc69811 100644
--- a/packages/braid-design-system/src/lib/components/Spread/Spread.tsx
+++ b/packages/braid-design-system/src/lib/components/Spread/Spread.tsx
@@ -1,4 +1,4 @@
-import type { Space } from '../../css/atoms/atoms';
+import type { ResponsiveSpace } from '../../css/atoms/atoms';
import { Box, type BoxProps } from '../Box/Box';
import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
import type { OptionalResponsiveValue } from '../../css/atoms/sprinkles.css';
@@ -8,20 +8,27 @@ import {
type Align,
alignToFlexAlign,
} from '../../utils/align';
-import {
- fitContent,
- maxWidth,
- type RequiredResponsiveValue,
- responsiveGap,
-} from './Spread.css';
import buildDataAttributes, {
type DataAttributeMap,
} from '../private/buildDataAttributes';
+import * as styles from './Spread.css';
+
+const validSpreadComponents = [
+ 'div',
+ 'span',
+ 'p',
+ 'article',
+ 'section',
+ 'main',
+ 'nav',
+ 'aside',
+ 'li',
+] as const;
export interface SpreadProps {
- component?: BoxProps['component'];
+ component?: (typeof validSpreadComponents)[number];
children: ReactNodeNoStrings;
- space: RequiredResponsiveValue;
+ space: ResponsiveSpace;
direction?: 'horizontal' | 'vertical';
align?: OptionalResponsiveValue;
alignY?: OptionalResponsiveValue;
@@ -57,10 +64,10 @@ export const Spread = ({
height={isVertical ? 'full' : undefined}
justifyContent="spaceBetween"
alignItems={alignItems}
+ gap={space}
className={[
- isHorizontal ? fitContent : undefined,
- isVertical ? maxWidth : undefined,
- responsiveGap({ gap: space }),
+ isHorizontal ? styles.fitContent : undefined,
+ isVertical ? styles.maxWidth : undefined,
]}
{...buildDataAttributes({ data, validateRestProps: restProps })}
>
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
index 89cb671939..dbb596c205 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.docs.tsx
+++ b/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, Hidden, Text, TextLink, Strong, Divider } from '../';
+import { Stack, Text, TextLink, Strong, Divider } from '../';
import { Placeholder } from '../private/Placeholder/Placeholder';
import source from '@braid-design-system/source.macro';
@@ -95,55 +95,6 @@ const docs: ComponentDocs = {
,
),
},
- {
- label: 'Dividers',
- deprecated: true,
- description: (
-
- Dividers can be placed between each item using the{' '}
- dividers prop. Supports both regular{' '}
- and strong variants
-
- ),
- Example: () =>
- source(
-
-
-
-
-
-
-
-
-
-
-
- ,
- ),
- },
-
- {
- label: 'Responsively hiding stack items',
- description: (
-
- The Hidden component
- can be used to responsively hide specific items.
-
- ),
- Example: () =>
- source(
-
-
-
-
-
-
-
-
-
- ,
- ),
- },
{
label: 'Semantic elements',
description: (
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.gallery.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.gallery.tsx
index bc198e61b4..fb04fe6911 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.gallery.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.gallery.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import type { GalleryComponent } from 'site/types';
-import { Stack, Hidden } from '../';
+import { Stack } from '../';
import { Placeholder } from '../private/Placeholder/Placeholder';
import source from '@braid-design-system/source.macro';
@@ -50,43 +50,5 @@ export const galleryItems: GalleryComponent = {
,
),
},
- {
- label: 'Dividers',
- Example: () =>
- source(
-
-
-
-
- ,
- ),
- },
- {
- label: 'Strong dividers',
- Example: () =>
- source(
-
-
-
-
- ,
- ),
- },
- {
- label: 'Responsively hiding stack items',
- Example: () =>
- source(
-
-
-
-
-
-
-
-
-
- ,
- ),
- },
],
};
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.playroom.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.playroom.tsx
index 8a0d533316..24a23fd634 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.playroom.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.playroom.tsx
@@ -1,10 +1,6 @@
import React from 'react';
import { cleanSpaceValue } from '../../playroom/cleanSpaceValue';
-import {
- type StackProps,
- Stack as BraidStack,
- validStackComponents,
-} from './Stack';
+import { type StackProps, Stack as BraidStack } from './Stack';
export const Stack = ({
space,
@@ -15,11 +11,6 @@ export const Stack = ({
-1
- ? component
- : undefined
- }
{...restProps}
/>
);
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
index 1ad7181ff5..66844bf743 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.screenshots.tsx
@@ -57,31 +57,9 @@ export const screenshots: ComponentScreenshot = {
),
},
- {
- label: 'Dividers',
- Container,
- Example: () => (
-
-
-
-
-
- ),
- },
- {
- label: 'Strong dividers',
- Container,
- Example: () => (
-
-
-
-
-
- ),
- },
{
label:
- 'Test - Should flatten fragments (6 placeholders should be evenly spaced)',
+ 'Test - Should handle fragments (6 placeholders should be evenly spaced)',
Container,
Example: () => (
@@ -150,34 +128,6 @@ export const screenshots: ComponentScreenshot = {
),
},
- {
- label:
- 'Test - Hidden stack items with dividers (should show 4 + 5 + 6 on mobile, 3 + 4 + 5 + 6 on tablet, 2 + 3 + 4 + 6 on desktop, 1 + 2 + 3 + 4 on wide)',
- Container,
- Example: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ),
- },
{
label: 'Test - Span align to left',
Container,
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.test.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.test.tsx
deleted file mode 100644
index bc379bb30c..0000000000
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render } from '@testing-library/react';
-import { BraidTestProvider } from '../../../entries/test';
-import { Stack, Text } from '..';
-
-describe('Stack', () => {
- it('should not render a list by default', () => {
- const { queryAllByRole } = render(
-
-
- 1
- 2
- 3
-
- ,
- );
-
- expect(queryAllByRole('list').length).toBe(0);
- expect(queryAllByRole('listItem').length).toBe(0);
- });
-
- it('should render a valid unordered list when "component" is "ul"', () => {
- const { getByRole } = render(
-
-
- 1
- 2
- 3
-
- ,
- );
-
- const list = getByRole('list');
- expect(list.nodeName).toBe('UL');
-
- expect(
- Array.from(list.childNodes).map((childNode) => childNode.nodeName),
- ).toEqual(['LI', 'LI', 'LI']);
- });
-
- it('should render a valid ordered list when "component" is "ol"', () => {
- const { getByRole } = render(
-
-
- 1
- 2
- 3
-
- ,
- );
-
- const list = getByRole('list');
- expect(list.nodeName).toBe('OL');
-
- expect(
- Array.from(list.childNodes).map((childNode) => childNode.nodeName),
- ).toEqual(['LI', 'LI', 'LI']);
- });
-});
diff --git a/packages/braid-design-system/src/lib/components/Stack/Stack.tsx b/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
index 0918991c10..54d0924a94 100644
--- a/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
+++ b/packages/braid-design-system/src/lib/components/Stack/Stack.tsx
@@ -1,110 +1,37 @@
-import dedent from 'dedent';
-import React, { type ReactNode, Children } from 'react';
-import flattenChildren from '../../utils/flattenChildren';
-import assert from 'assert';
+import React from 'react';
+import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
import { Box } from '../Box/Box';
import type { ResponsiveSpace } from '../../css/atoms/atoms';
-import { type DividerProps, Divider } from '../Divider/Divider';
-import { type HiddenProps, Hidden } from '../Hidden/Hidden';
-import * as hiddenStyles from '../Hidden/Hidden.css';
import { type Align, alignToFlexAlign } from '../../utils/align';
-import { resolveResponsiveRangeProps } from '../../utils/resolveResponsiveRangeProps';
-import { optimizeResponsiveArray } from '../../utils/optimizeResponsiveArray';
-import { negativeMargin } from '../../css/negativeMargin/negativeMargin';
-import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
-import {
- type OptionalResponsiveValue,
- mapResponsiveValue,
- normalizeResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
+import type { OptionalResponsiveValue } from '../../css/atoms/sprinkles.css';
import buildDataAttributes, {
type DataAttributeMap,
} from '../private/buildDataAttributes';
-const alignToDisplay = {
- left: 'block',
- center: 'flex',
- right: 'flex',
-} as const;
-
-export const validStackComponents = ['div', 'span', 'ol', 'ul'] as const;
-
-interface UseStackItemProps {
- align: OptionalResponsiveValue;
- space: ResponsiveSpace;
- component: (typeof validStackComponents)[number];
-}
-
-const useStackItem = ({ align, space, component }: UseStackItemProps) =>
- ({
- paddingTop: space,
- display: component === 'span' ? 'block' : undefined,
- // If we're aligned left across all screen sizes,
- // there's actually no alignment work to do.
- ...(align === 'left'
- ? null
- : {
- display: mapResponsiveValue(align, (value) => alignToDisplay[value]),
- flexDirection: 'column' as const,
- alignItems: alignToFlexAlign(align),
- }),
- } as const);
-
-const extractHiddenPropsFromChild = (child: ReactNode) =>
- child && typeof child === 'object' && 'type' in child && child.type === Hidden
- ? (child.props as HiddenProps)
- : null;
-
-const resolveHiddenProps = ({ screen, above, below }: HiddenProps) =>
- screen
- ? ([true, true, true, true] as const)
- : resolveResponsiveRangeProps({
- above,
- below,
- });
-
-const calculateHiddenStackItemProps = (
- stackItemProps: ReturnType,
- [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide]: Readonly<
- [boolean, boolean, boolean, boolean]
- >,
-) => {
- const normalizedValue = normalizeResponsiveValue(
- stackItemProps.display !== undefined ? stackItemProps.display : 'block',
- );
-
- const {
- mobile: displayMobile = 'block',
- tablet: displayTablet = displayMobile,
- desktop: displayDesktop = displayTablet,
- wide: displayWide = displayDesktop,
- } = normalizedValue;
-
- return {
- ...stackItemProps,
- display: optimizeResponsiveArray([
- hiddenOnMobile ? 'none' : displayMobile,
- hiddenOnTablet ? 'none' : displayTablet,
- hiddenOnDesktop ? 'none' : displayDesktop,
- hiddenOnWide ? 'none' : displayWide,
- ]),
- };
-};
+const validStackComponents = [
+ 'div',
+ 'span',
+ 'p',
+ 'article',
+ 'section',
+ 'main',
+ 'nav',
+ 'aside',
+ 'ul',
+ 'ol',
+ 'li',
+ 'details',
+ 'summary',
+ 'dd',
+ 'dl',
+ 'dt',
+] as const;
export interface StackProps {
component?: (typeof validStackComponents)[number];
children: ReactNodeNoStrings;
space: ResponsiveSpace;
align?: OptionalResponsiveValue;
- /**
- * @deprecated Will be removed in v33 to enable [CSS gap] in layout components.
- *
- * See [migration guide] for details.
- *
- * [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
- * [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
- * */
- dividers?: boolean | DividerProps['weight'];
data?: DataAttributeMap;
}
@@ -113,133 +40,17 @@ export const Stack = ({
children,
space = 'none',
align = 'left',
- dividers,
data,
...restProps
-}: StackProps) => {
- assert(
- validStackComponents.includes(component),
- `Invalid Stack component: '${component}'. Should be one of [${validStackComponents
- .map((c) => `'${c}'`)
- .join(', ')}]`,
- );
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof dividers !== 'undefined') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
- Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
- %c-
- %c+
- %c {item}
- %c+
- %c {item}****
- %c+
- %c {item}
-
- See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- 'color: green',
- 'color: inherit',
- 'color: green',
- 'color: inherit',
- );
- }
- }
-
- const stackItemProps = useStackItem({ space, align, component });
- const stackItems = flattenChildren(children);
- const isList = component === 'ol' || component === 'ul';
- const stackItemComponent = isList ? 'li' : component;
-
- let firstItemOnMobile: number | null = null;
- let firstItemOnTablet: number | null = null;
- let firstItemOnDesktop: number | null = null;
- let firstItemOnWide: number | null = null;
-
- return (
-
- {Children.map(stackItems, (child, index) => {
- assert(
- !(
- typeof child === 'object' &&
- child.type === Hidden &&
- (child.props as HiddenProps).inline !== undefined
- ),
- 'The "inline" prop is invalid on Hidden elements within a Stack',
- );
-
- const hiddenProps = extractHiddenPropsFromChild(child);
- const hidden = hiddenProps
- ? resolveHiddenProps(hiddenProps)
- : ([false, false, false, false] as const);
- const [hiddenOnMobile, hiddenOnTablet, hiddenOnDesktop, hiddenOnWide] =
- hidden;
-
- const responsivelyHidden =
- hiddenOnMobile || hiddenOnTablet || hiddenOnDesktop || hiddenOnWide;
-
- if (firstItemOnMobile === null && !hiddenOnMobile) {
- firstItemOnMobile = index;
- }
-
- if (firstItemOnTablet === null && !hiddenOnTablet) {
- firstItemOnTablet = index;
- }
-
- if (firstItemOnDesktop === null && !hiddenOnDesktop) {
- firstItemOnDesktop = index;
- }
-
- if (firstItemOnWide === null && !hiddenOnWide) {
- firstItemOnWide = index;
- }
-
- return (
-
- {dividers && index > 0 ? (
-
- {typeof dividers === 'string' ? (
-
- ) : (
-
- )}
-
- ) : null}
- {hiddenProps ? hiddenProps.children : child}
-
- );
- })}
-
- );
-};
+}: StackProps) => (
+
+ {children}
+
+);
diff --git a/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx b/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx
index 0f96ee489a..8fb8773746 100644
--- a/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Text/Text.docs.tsx
@@ -9,7 +9,6 @@ import {
Inline,
List,
IconImage,
- Alert,
Divider,
} from '../';
import source from '@braid-design-system/source.macro';
@@ -104,20 +103,11 @@ const docs: ComponentDocs = {
{
label: 'Limiting the number of lines',
description: (
- <>
-
- When displaying user-generated content that may not fit within your
- layout, you can control the number of lines to display with the{' '}
- maxLines prop.
-
-
-
- The truncate prop has been deprecated in favour
- of {`maxLines={1}`}, and will be removed in a
- future version.
-
-
- >
+
+ When displaying user-generated content that may not fit within your
+ layout, you can control the number of lines to display with the{' '}
+ maxLines prop.
+
),
Example: () =>
source(
diff --git a/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx b/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx
index 9bb74f2441..18f9655e5d 100644
--- a/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Text/Text.screenshots.tsx
@@ -120,17 +120,7 @@ export const screenshots: ComponentScreenshot = {
),
},
{
- label: 'Truncation (legacy)',
- Example: () => (
-
-
- Text limited to 1 line that won’t fit in the layout
-
-
- ),
- },
- {
- label: 'Max lines = 1 (should be same as truncation)',
+ label: 'Max lines = 1',
Example: () => (
@@ -140,7 +130,7 @@ export const screenshots: ComponentScreenshot = {
),
},
{
- label: 'Max lines = 1 (in flex container, should be same as truncation)',
+ label: 'Max lines = 1 (in flex container)',
Example: () => (
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.docs.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.docs.tsx
index 94809bab3b..5188d76026 100644
--- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.docs.tsx
@@ -101,25 +101,6 @@ const docs: ComponentDocs = {
,
),
},
- {
- label: 'Dividers',
- deprecated: true,
- description: (
-
- When in a single column, dividers can be placed between each tile
- using the dividers prop. Supports both{' '}
- regular and strong variants.
-
- ),
- Example: () =>
- source(
-
-
-
-
- ,
- ),
- },
],
};
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.gallery.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.gallery.tsx
index 4d4e86d90f..4d28784572 100644
--- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.gallery.tsx
+++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.gallery.tsx
@@ -58,16 +58,5 @@ export const galleryItems: GalleryComponent = {
,
),
},
- {
- label: 'Dividers (when in single column)',
- Example: () =>
- source(
-
-
-
-
- ,
- ),
- },
],
};
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx
index 52af0948ec..7583426606 100644
--- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx
+++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.screenshots.tsx
@@ -1,6 +1,6 @@
import React, { Fragment } from 'react';
import type { ComponentScreenshot } from 'site/types';
-import { Tiles, Box, Text } from '../';
+import { Tiles } from '../';
import { Placeholder } from '../private/Placeholder/Placeholder';
const exampleRows = 3;
@@ -29,30 +29,6 @@ export const screenshots: ComponentScreenshot = {
),
},
- {
- label: 'Dividers (when in a single column)',
- Example: () => (
-
- {[...new Array(2 * exampleRows)].map((_, i) => (
-
- Tile
-
- ))}
-
- ),
- },
- {
- label: 'Strong dividers (when in a single column)',
- Example: () => (
-
- {[...new Array(2 * exampleRows)].map((_, i) => (
-
- Tile
-
- ))}
-
- ),
- },
{
label:
'Test - Should flatten fragments (6 tiles should be evenly spaced)',
diff --git a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
index 58d006f332..157ca29000 100644
--- a/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
+++ b/packages/braid-design-system/src/lib/components/Tiles/Tiles.tsx
@@ -1,17 +1,12 @@
-import dedent from 'dedent';
import React, { Children } from 'react';
import flattenChildren from '../../utils/flattenChildren';
import { Box } from '../Box/Box';
-import { type DividerProps, Divider } from '../Divider/Divider';
import type { Space } from '../../css/atoms/atoms';
import { negativeMargin } from '../../css/negativeMargin/negativeMargin';
import { resolveResponsiveProp } from '../../utils/resolveResponsiveProp';
import * as styles from './Tiles.css';
import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
-import {
- type RequiredResponsiveValue,
- mapResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
+import type { RequiredResponsiveValue } from '../../css/atoms/sprinkles.css';
import buildDataAttributes, {
type DataAttributeMap,
} from '../private/buildDataAttributes';
@@ -20,15 +15,6 @@ export interface TilesProps {
children: ReactNodeNoStrings;
space: RequiredResponsiveValue;
columns: RequiredResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
- /**
- * @deprecated Will be removed in v33 to enable [CSS gap] in layout components.
- *
- * See [migration guide] for details.
- *
- * [CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
- * [migration guide]: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
- * */
- dividers?: boolean | DividerProps['weight'];
data?: DataAttributeMap;
}
@@ -36,90 +22,39 @@ export const Tiles = ({
children,
space = 'none',
columns = 1,
- dividers,
data,
...restProps
-}: TilesProps) => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof dividers !== 'undefined') {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "dividers" prop is deprecated and will be removed in v33 to enable CSS gap in layout components.
- Update your usage now to make upgrading easier by manually inserting "Divider" components as required:
- %c-
- %c+
- %c {item}
- %c+
- +
- %c {item}
- %c+
- +
- +
- %c {item}
- %c+
- %c
- See migration guide for details: https://github.com/seek-oss/braid-design-system/blob/master/docs/Removing%20dividers%20support%20from%20layout%20components.md
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- 'color: green',
- 'color: inherit',
- 'color: green',
- 'color: inherit',
- 'color: green',
- 'color: inherit',
- );
- }
- }
-
- return (
+}: TilesProps) => (
+
-
- {Children.map(flattenChildren(children), (child, i) => (
+ {Children.map(flattenChildren(children), (child) => (
+
-
- {dividers && i > 0 ? (
-
- column === 1 ? 'block' : 'none',
- )}
- >
- {typeof dividers === 'string' ? (
-
- ) : (
-
- )}
-
- ) : null}
- {child}
-
+ {child}
- ))}
-
+
+ ))}
- );
-};
+
+);
diff --git a/packages/braid-design-system/src/lib/components/index.ts b/packages/braid-design-system/src/lib/components/index.ts
index 1cb7fdd06a..fb8715e0f6 100644
--- a/packages/braid-design-system/src/lib/components/index.ts
+++ b/packages/braid-design-system/src/lib/components/index.ts
@@ -10,7 +10,6 @@ export { ThemeNameConsumer } from './ThemeNameConsumer/ThemeNameConsumer';
export { useThemeName } from './useThemeName/useThemeName';
export { useSpace } from './useSpace/useSpace';
export { useColor } from './useColor/useColor';
-export { useBreakpoint } from './useBreakpoint/useBreakpoint';
export { useResponsiveValue } from './useResponsiveValue/useResponsiveValue';
export { Accordion } from './Accordion/Accordion';
export { AccordionItem } from './Accordion/AccordionItem';
diff --git a/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx b/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
index 387b1cfc54..da711552c4 100644
--- a/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
+++ b/packages/braid-design-system/src/lib/components/private/Typography/Typography.tsx
@@ -6,15 +6,12 @@ import buildDataAttributes, {
import { MaxLines } from '../MaxLines/MaxLines';
import type { UseIconProps } from '../../../hooks/useIcon';
import { alignToFlexAlign } from '../../../utils/align';
-import dedent from 'dedent';
import { descenderCropFixForWebkitBox } from '../MaxLines/MaxLines.css';
export interface TypographyProps extends Pick {
children?: ReactNode;
icon?: ReactElement;
align?: BoxProps['textAlign'];
- /** @deprecated Use `maxLines={1}` instead. */
- truncate?: boolean;
maxLines?: number;
data?: DataAttributeMap;
}
@@ -27,39 +24,19 @@ export const Typography = ({
component = 'span',
className,
align,
- truncate = false,
maxLines,
icon,
data,
children,
...restProps
}: PrivateTypographyProps) => {
- const lines = truncate ? 1 : maxLines;
- const isTruncated = typeof lines === 'number';
+ const isTruncated = typeof maxLines === 'number';
const contents = isTruncated ? (
- {children}
+ {children}
) : (
children
);
- if (process.env.NODE_ENV !== 'production') {
- if (truncate) {
- // eslint-disable-next-line no-console
- console.warn(
- dedent`
- The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
-
- `,
- 'color: red',
- 'color: green',
- 'color: inherit',
- );
- }
- }
-
return (
-
- This Hook has been deprecated in favour of{' '}
-
-
- useResponsiveValue.
-
-
-
-
- This is because useBreakpoint leads consumers to
- inadvertently couple themselves to the current set of breakpoints,
- making it risky for us to introduce new breakpoints.
-
-
- For example, you may have chosen to detect large screens by checking
- that the user is on the (current) largest breakpoint (e.g.{' '}
- {`const isDesktop = useBreakpoint() === "desktop"`}
- ), but this logic would break if we introduced an even larger breakpoint
- and the Hook started returning other values.
-
-
- To maintain backwards compatibility, useBreakpoint will
- continue to return {`"desktop"`} when the user is
- technically on larger breakpoints.
-
-
- ),
- Example: () =>
- source(
-
- Current breakpoint: {useBreakpoint()}
- ,
- ),
- alternatives: [{ name: 'Box', description: 'For custom layouts.' }],
- additional: [
- {
- label: 'Development considerations',
- playroom: false,
- showCodeByDefault: true,
- description: (
-
- This Hook will return the breakpoint the browser viewport currently
- falls within (mobile, tablet,{' '}
- desktop). To maintain backwards compatibility,
- breakpoints above desktop will still be reported as{' '}
- desktop. As this can only be calculated in the
- browser, the value will also be null when rendering
- server-side or statically rendering. Window resizing is supported.
-
- ),
- code: `
- const breakpoint = useBreakpoint();
-
- return Current breakpoint: {breakpoint};
- `,
- },
- ],
-};
-
-export default docs;
diff --git a/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.test.tsx b/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.test.tsx
deleted file mode 100644
index 7a3b89f741..0000000000
--- a/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import '@testing-library/jest-dom';
-import React from 'react';
-import { renderHook } from '@testing-library/react';
-import { BraidTestProvider } from '../../../entries/test';
-import { useBreakpoint } from '..';
-
-describe('useResponsiveValue', () => {
- const testData = [
- [{ breakpoint: null, expected: null }],
- [{ breakpoint: 'mobile', expected: 'mobile' }],
- [{ breakpoint: 'tablet', expected: 'tablet' }],
- [{ breakpoint: 'desktop', expected: 'desktop' }],
- [{ breakpoint: 'wide', expected: 'desktop' }], // Backwards compatibility
- ] as const;
-
- test.each(testData)('%p from %p returns %p', ({ breakpoint, expected }) => {
- const spy = jest.spyOn(console, 'warn').mockImplementation();
-
- const { result } = renderHook(() => useBreakpoint(), {
- wrapper: ({ children }) => (
-
- {children}
-
- ),
- });
-
- expect(result.current).toEqual(expected);
-
- expect(spy).toHaveBeenCalledTimes(1);
- spy.mockRestore();
- });
-});
diff --git a/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.ts b/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.ts
deleted file mode 100644
index f183ffac90..0000000000
--- a/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useResponsiveValue } from '../useResponsiveValue/useResponsiveValue';
-
-type LegacyBreakpoint = 'mobile' | 'tablet' | 'desktop';
-
-/** @deprecated Use 'useResponsiveValue' instead: https://seek-oss.github.io/braid-design-system/components/useResponsiveValue */
-export const useBreakpoint = (): LegacyBreakpoint | null => {
- if (process.env.NODE_ENV !== 'production') {
- // eslint-disable-next-line no-console
- console.warn(
- `'useBreakpoint' has been deprecated. Use 'useResponsiveValue' instead: https://seek-oss.github.io/braid-design-system/components/useResponsiveValue`,
- );
- }
-
- return useResponsiveValue()({
- mobile: 'mobile',
- tablet: 'tablet',
- desktop: 'desktop',
- } as const);
-};
diff --git a/packages/braid-design-system/src/lib/css/atoms/atomicProperties.ts b/packages/braid-design-system/src/lib/css/atoms/atomicProperties.ts
index 42361c980d..52be1aba14 100644
--- a/packages/braid-design-system/src/lib/css/atoms/atomicProperties.ts
+++ b/packages/braid-design-system/src/lib/css/atoms/atomicProperties.ts
@@ -105,6 +105,7 @@ export const responsiveProperties = {
full: '9999px',
...vars.borderRadius,
},
+ gap: space,
paddingTop: space,
paddingBottom: space,
paddingRight: space,
diff --git a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
index 3a917030ae..2c3780c354 100644
--- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
+++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap
@@ -130,11 +130,8 @@ exports[`Autosuggest 1`] = `
| "matching"
| "remaining"
suggestions:
- | (value: AutosuggestValue) => LegacyMessageSuggestion | Suggestions
+ | (value: AutosuggestValue) => Suggestions
| Suggestions
- | {
- message: string
- }
tertiaryLabel?: ReactNode
tone?:
| "caution"
@@ -841,6 +838,19 @@ exports[`Box 1`] = `
frameBorder?:
| number
| string
+ gap?:
+ | "gutter"
+ | "large"
+ | "medium"
+ | "none"
+ | "small"
+ | "xlarge"
+ | "xsmall"
+ | "xxlarge"
+ | "xxsmall"
+ | "xxxlarge"
+ | ResponsiveArray<1 | 2 | 3 | 4, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>
+ | { mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined; tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | ... 6 more ... | undefined; desktop?: "gutter" | ... 9 more ... | undefined; wide?: "gutter" | ... 9 more ... | undefined; }
headers?: string
height?:
| "full"
@@ -1743,6 +1753,19 @@ exports[`BoxRenderer 1`] = `
| "wrap"
| ResponsiveArray<1 | 2 | 3 | 4, "wrap" | "nowrap" | null>
| { mobile?: "wrap" | "nowrap" | undefined; tablet?: "wrap" | "nowrap" | undefined; desktop?: "wrap" | "nowrap" | undefined; wide?: "wrap" | "nowrap" | undefined; }
+ gap?:
+ | "gutter"
+ | "large"
+ | "medium"
+ | "none"
+ | "small"
+ | "xlarge"
+ | "xsmall"
+ | "xxlarge"
+ | "xxsmall"
+ | "xxxlarge"
+ | ResponsiveArray<1 | 2 | 3 | 4, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | null>
+ | { mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge" | "none" | undefined; tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | ... 6 more ... | undefined; desktop?: "gutter" | ... 9 more ... | undefined; wide?: "gutter" | ... 9 more ... | undefined; }
height?:
| "full"
| "touchable"
@@ -2059,7 +2082,6 @@ exports[`Button 1`] = `
| true
aria-label?: string
bleed?: boolean
- bleedY?: boolean
children?: ReactNode
data?: DataAttributeMap
icon?: ReactElement>
@@ -2137,7 +2159,6 @@ exports[`ButtonIcon 1`] = `
tone?:
| "formAccent"
| "neutral"
- | "secondary"
tooltipPlacement?:
| "bottom"
| "top"
@@ -2327,7 +2348,6 @@ exports[`ButtonLink 1`] = `
autoFocus?: boolean
autoSave?: string
bleed?: boolean
- bleedY?: boolean
children?: ReactNode
color?: string
content?: string
@@ -3246,7 +3266,6 @@ exports[`Heading 1`] = `
| "3"
| "4"
maxLines?: number
- truncate?: boolean
weight?:
| "regular"
| "weak"
@@ -7424,7 +7443,6 @@ exports[`Rating 1`] = `
aria-label?: string
data?: DataAttributeMap
rating: number
- showTextRating?: boolean
size?:
| "large"
| "small"
@@ -7471,186 +7489,15 @@ exports[`Spread 1`] = `
| ResponsiveArray<1 | 2 | 3 | 4, AlignY | null>
children: ReactNodeNoStrings
component?:
- | "a"
- | "abbr"
- | "address"
- | "animate"
- | "animateMotion"
- | "animateTransform"
- | "area"
| "article"
| "aside"
- | "audio"
- | "b"
- | "base"
- | "bdi"
- | "bdo"
- | "big"
- | "blockquote"
- | "body"
- | "br"
- | "button"
- | "canvas"
- | "caption"
- | "center"
- | "circle"
- | "cite"
- | "clipPath"
- | "code"
- | "col"
- | "colgroup"
- | "data"
- | "datalist"
- | "dd"
- | "defs"
- | "del"
- | "desc"
- | "details"
- | "dfn"
- | "dialog"
| "div"
- | "dl"
- | "dt"
- | "ellipse"
- | "em"
- | "embed"
- | "feBlend"
- | "feColorMatrix"
- | "feComponentTransfer"
- | "feComposite"
- | "feConvolveMatrix"
- | "feDiffuseLighting"
- | "feDisplacementMap"
- | "feDistantLight"
- | "feDropShadow"
- | "feFlood"
- | "feFuncA"
- | "feFuncB"
- | "feFuncG"
- | "feFuncR"
- | "feGaussianBlur"
- | "feImage"
- | "feMerge"
- | "feMergeNode"
- | "feMorphology"
- | "feOffset"
- | "fePointLight"
- | "feSpecularLighting"
- | "feSpotLight"
- | "feTile"
- | "feTurbulence"
- | "fieldset"
- | "figcaption"
- | "figure"
- | "filter"
- | "footer"
- | "foreignObject"
- | "form"
- | "g"
- | "h1"
- | "h2"
- | "h3"
- | "h4"
- | "h5"
- | "h6"
- | "head"
- | "header"
- | "hgroup"
- | "hr"
- | "html"
- | "i"
- | "iframe"
- | "image"
- | "img"
- | "input"
- | "ins"
- | "kbd"
- | "keygen"
- | "label"
- | "legend"
| "li"
- | "line"
- | "linearGradient"
- | "link"
| "main"
- | "map"
- | "mark"
- | "marker"
- | "mask"
- | "menu"
- | "menuitem"
- | "meta"
- | "metadata"
- | "meter"
- | "mpath"
| "nav"
- | "noindex"
- | "noscript"
- | "object"
- | "ol"
- | "optgroup"
- | "option"
- | "output"
| "p"
- | "param"
- | "path"
- | "pattern"
- | "picture"
- | "polygon"
- | "polyline"
- | "pre"
- | "progress"
- | "q"
- | "radialGradient"
- | "rect"
- | "rp"
- | "rt"
- | "ruby"
- | "s"
- | "samp"
- | "script"
- | "search"
| "section"
- | "select"
- | "set"
- | "slot"
- | "small"
- | "source"
| "span"
- | "stop"
- | "strong"
- | "style"
- | "sub"
- | "summary"
- | "sup"
- | "svg"
- | "switch"
- | "symbol"
- | "table"
- | "tbody"
- | "td"
- | "template"
- | "text"
- | "textPath"
- | "textarea"
- | "tfoot"
- | "th"
- | "thead"
- | "time"
- | "title"
- | "tr"
- | "track"
- | "tspan"
- | "u"
- | "ul"
- | "use"
- | "var"
- | "video"
- | "view"
- | "wbr"
- | "webview"
- | ComponentClass
- | FunctionComponent
data?: DataAttributeMap
direction?:
| "horizontal"
@@ -7667,6 +7514,7 @@ exports[`Spread 1`] = `
| "xxsmall"
| "xxxlarge"
| RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", Space>
+ | RequiredResponsiveArray<1 | 2 | 3 | 4, Space | null>
},
}
`;
@@ -7683,16 +7531,23 @@ exports[`Stack 1`] = `
| ResponsiveArray<1 | 2 | 3 | 4, Align | null>
children: ReactNodeNoStrings
component?:
+ | "article"
+ | "aside"
+ | "dd"
+ | "details"
| "div"
+ | "dl"
+ | "dt"
+ | "li"
+ | "main"
+ | "nav"
| "ol"
+ | "p"
+ | "section"
| "span"
+ | "summary"
| "ul"
data?: DataAttributeMap
- dividers?:
- | "regular"
- | "strong"
- | false
- | true
space:
| "gutter"
| "large"
@@ -8071,7 +7926,6 @@ exports[`Text 1`] = `
| "positive"
| "promote"
| "secondary"
- truncate?: boolean
weight?:
| "medium"
| "regular"
@@ -8785,11 +8639,6 @@ exports[`Tiles 1`] = `
| RequiredConditionalObject<"mobile", "tablet" | "desktop" | "wide", 1 | 2 | 3 | 4 | 5 | 6>
| RequiredResponsiveArray<1 | 2 | 3 | 4, 1 | 2 | 3 | 4 | 5 | 6 | null>
data?: DataAttributeMap
- dividers?:
- | "regular"
- | "strong"
- | false
- | true
space:
| "gutter"
| "large"
@@ -8910,18 +8759,6 @@ exports[`makeLinkComponent 1`] = `
}
`;
-exports[`useBreakpoint 1`] = `
-{
- exportType: hook,
- params: [],
- returnType:
- | "desktop"
- | "mobile"
- | "tablet"
- | null,
-}
-`;
-
exports[`useColor 1`] = `
{
exportType: hook,
diff --git a/site/src/App/routes/foundations/layout/layout.tsx b/site/src/App/routes/foundations/layout/layout.tsx
index a4fc7b90e3..7ecb2c2d38 100644
--- a/site/src/App/routes/foundations/layout/layout.tsx
+++ b/site/src/App/routes/foundations/layout/layout.tsx
@@ -307,36 +307,6 @@ const page: DocsPage = {
,
)}
-
- To visually break up content, you can insert dividers between all stack
- elements by setting the{' '}
- dividers prop on
- Stack:
-
-
- {source(
-
- Heading
- {lipsum1}
- {lipsum2}
- ,
- )}
-
-
- If you’d prefer to take control over the placement of dividers, you can
- use the Divider{' '}
- component directly:
-
-
- {source(
-
- Heading
- {lipsum1}
-
- {lipsum2}
- ,
- )}
-
Multiple Stack components
can be nested to create more complex white space rules. For example, if
@@ -794,50 +764,6 @@ const page: DocsPage = {
)}
-
- When the tiles are collapsed to a single column, you can optionally show
- dividers between them with the{' '}
- dividers prop:
-
-
-
- {source(
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
-
- Tile
-
- ,
- )}
-
-
ContentBlock