From ca72b8779578343c220434dc1bc4ce60afeb01d1 Mon Sep 17 00:00:00 2001 From: Felix Habib <33821218+felixhabib@users.noreply.github.com> Date: Fri, 13 Sep 2024 15:23:16 +1000 Subject: [PATCH 1/7] Autosuggest: Fix bug in `suggestionHighlight` prop when using `remaining` (#1572) Co-authored-by: Michael Taranto --- .changeset/forty-coins-wait.md | 13 +++++ .../Autosuggest/Autosuggest.docs.tsx | 22 ++++--- .../components/Autosuggest/Autosuggest.tsx | 14 ++--- .../Autosuggest/reverseMatches.test.ts | 58 +++++++++++++++++++ .../components/Autosuggest/reverseMatches.ts | 31 ++++++++++ 5 files changed, 119 insertions(+), 19 deletions(-) create mode 100644 .changeset/forty-coins-wait.md create mode 100644 packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.test.ts create mode 100644 packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.ts diff --git a/.changeset/forty-coins-wait.md b/.changeset/forty-coins-wait.md new file mode 100644 index 00000000000..2a4786d0467 --- /dev/null +++ b/.changeset/forty-coins-wait.md @@ -0,0 +1,13 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Autosuggest +--- + +**Autosuggest**: Improve handling of `suggestionHighlight` prop when set to `remaining` + +Fixes a bug in `Autosuggest` when using `suggestionHighlight` prop set to `remaining`. +If the input contained multiple words, the highlighted portion would be appended to the end of matching suggestions. diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx index 8d5be7a03ff..328818f3df1 100644 --- a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.docs.tsx @@ -14,7 +14,6 @@ import { Column, Columns, TextField, - Inline, } from '../'; import { IconHelp, IconLanguage } from '../icons'; import { highlightSuggestions } from './Autosuggest'; @@ -478,7 +477,7 @@ const docs: ComponentDocs = { source( <> {setDefaultState('textfield', 'App')} - {setDefaultState('suggestion', 'Apples')} + {setDefaultState('suggestion', 'Apples and Bananas')} Highlight {highlightType} - + {parseHighlights( getState('suggestion'), highlightSuggestions( @@ -504,15 +503,14 @@ const docs: ComponentDocs = { ? 'matching' : 'remaining', ).map(({ start, end }) => [start, end]), - ).map((part, index) => ( - - {part.text} - - ))} - + ).map((part, index) => + part.highlight ? ( + {part.text} + ) : ( + part.text + ), + )} + ))} 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 96fe31f5713..e38f9b5d14f 100644 --- a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx +++ b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx @@ -44,6 +44,7 @@ import { type AutosuggestTranslations, autosuggest, } from '../../translations/en'; +import { reverseMatches } from './reverseMatches'; import * as styles from './Autosuggest.css'; @@ -346,14 +347,13 @@ export function highlightSuggestions( value: string, variant: HighlightOptions = 'matching', ): SuggestionMatch { - const matches = matchHighlights(suggestion, value); + const matchedHighlights = matchHighlights(suggestion, value); + const matches = + variant === 'matching' + ? matchedHighlights + : reverseMatches(suggestion, matchedHighlights); - const formattedMatches = - variant === 'remaining' - ? matches.map(([_, end]) => ({ start: end, end: suggestion.length })) - : matches.map(([start, end]) => ({ start, end })); - - return formattedMatches; + return matches.map(([start, end]) => ({ start, end })); } export const Autosuggest = forwardRef(function ( diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.test.ts b/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.test.ts new file mode 100644 index 00000000000..e46b087a02f --- /dev/null +++ b/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.test.ts @@ -0,0 +1,58 @@ +import { type Match, reverseMatches } from './reverseMatches'; + +describe('reverseMatches', () => { + it('should return intervals for non-matching parts of the suggestion', () => { + const suggestion = 'Apples etc'; + const matches: Match[] = [ + [2, 4], + [6, 8], + ]; + const expected: Match[] = [ + [0, 2], + [4, 6], + [8, 10], + ]; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); + + it('should handle no matches', () => { + const suggestion = 'Apple'; + const matches: Match[] = []; + const expected: Match[] = [[0, 5]]; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); + + it('should handle matches that cover the entire suggestion', () => { + const suggestion = 'Apple'; + const matches: Match[] = [[0, 5]]; + const expected: Match[] = []; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); + + it('should handle matches at the start of the suggestion', () => { + const suggestion = 'Apple'; + const matches: Match[] = [[0, 2]]; + const expected: Match[] = [[2, 5]]; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); + + it('should handle matches at the end of the suggestion', () => { + const suggestion = 'Apple'; + const matches: Match[] = [[3, 5]]; + const expected: Match[] = [[0, 3]]; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); + + it('should handle matches for a single character suggestion', () => { + const suggestion = 'A'; + const matches: Match[] = [[0, 1]]; + const expected: Match[] = []; + + expect(reverseMatches(suggestion, matches)).toEqual(expected); + }); +}); diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.ts b/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.ts new file mode 100644 index 00000000000..9e96d74d709 --- /dev/null +++ b/packages/braid-design-system/src/lib/components/Autosuggest/reverseMatches.ts @@ -0,0 +1,31 @@ +/* + In each Match, + - First number: index of the first highlighted character in the match + - Second number: index of the last highlighted character in the match *plus one* + + This matches the format expected by the parse function + See https://github.com/moroshko/autosuggest-highlight?tab=readme-ov-file#parsetext-matches +*/ + +export type Match = [number, number]; + +export function reverseMatches(suggestion: string, matches: Match[]): Match[] { + const suggestionLength = suggestion.length; + const reversedMatches: Match[] = []; + + let currentStart = 0; + + for (const [start, end] of matches) { + if (currentStart < start) { + reversedMatches.push([currentStart, start]); + } + + currentStart = end; + } + + if (currentStart < suggestionLength) { + reversedMatches.push([currentStart, suggestionLength]); + } + + return reversedMatches; +} From 7c4cae8e0c1afce24aef730e82cb14392e07239c Mon Sep 17 00:00:00 2001 From: Felix Habib <33821218+felixhabib@users.noreply.github.com> Date: Mon, 16 Sep 2024 13:50:33 +1000 Subject: [PATCH 2/7] Autosuggest: use `scrollIntoView` API (#1571) --- .changeset/smart-needles-cross.md | 10 ++++++ jest/setupTests.ts | 3 ++ .../components/Autosuggest/Autosuggest.tsx | 3 +- .../Autosuggest/useScrollIntoView.ts | 35 ------------------- 4 files changed, 14 insertions(+), 37 deletions(-) create mode 100644 .changeset/smart-needles-cross.md delete mode 100644 packages/braid-design-system/src/lib/components/Autosuggest/useScrollIntoView.ts diff --git a/.changeset/smart-needles-cross.md b/.changeset/smart-needles-cross.md new file mode 100644 index 00000000000..31d1642e72b --- /dev/null +++ b/.changeset/smart-needles-cross.md @@ -0,0 +1,10 @@ +--- +'braid-design-system': minor +--- + +--- +updated: + - Autosuggest +--- + +**Autosuggest**: Optimise automatic scrolling to selected suggestion by using native browser methods. \ No newline at end of file diff --git a/jest/setupTests.ts b/jest/setupTests.ts index 2c282c52ca1..7f848aaec4f 100644 --- a/jest/setupTests.ts +++ b/jest/setupTests.ts @@ -6,6 +6,9 @@ import { format, TextEncoder, TextDecoder } from 'util'; global.TextEncoder = TextEncoder; global.TextDecoder = TextDecoder; +// Mocking for `jsdom` +window.HTMLElement.prototype.scrollIntoView = function () {}; + const error = global.console.error; globalThis.IS_REACT_ACT_ENVIRONMENT = true; 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 e38f9b5d14f..92b4818c3ec 100644 --- a/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx +++ b/packages/braid-design-system/src/lib/components/Autosuggest/Autosuggest.tsx @@ -33,7 +33,6 @@ import { getNextIndex } from '../private/getNextIndex'; import { normalizeKey } from '../private/normalizeKey'; import { ClearField } from '../private/Field/ClearField'; import { smoothScroll } from '../private/smoothScroll'; -import { useScrollIntoView } from './useScrollIntoView'; import { useResponsiveValue } from '../useResponsiveValue/useResponsiveValue'; import { RemoveScroll } from 'react-remove-scroll'; import { @@ -582,7 +581,7 @@ export const Autosuggest = forwardRef(function ( ? document.getElementById(getItemId(id, highlightedIndex)) : null; - useScrollIntoView(highlightedItem, menuRef.current); + highlightedItem?.scrollIntoView({ block: 'nearest' }); useEffect(() => { dispatch({ diff --git a/packages/braid-design-system/src/lib/components/Autosuggest/useScrollIntoView.ts b/packages/braid-design-system/src/lib/components/Autosuggest/useScrollIntoView.ts deleted file mode 100644 index 778fb93fb38..00000000000 --- a/packages/braid-design-system/src/lib/components/Autosuggest/useScrollIntoView.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { useEffect } from 'react'; - -export function useScrollIntoView( - element: HTMLElement | null, - scrollContainer: HTMLElement | null, -) { - useEffect(() => { - if (scrollContainer && element) { - const itemOffsetRelativeToContainer = - element.offsetParent === scrollContainer - ? element.offsetTop - : element.offsetTop - scrollContainer.offsetTop; - - let { scrollTop } = scrollContainer; // Top of the visible area - - if (itemOffsetRelativeToContainer < scrollTop) { - // Item is off the top of the visible area - scrollTop = itemOffsetRelativeToContainer; - } else if ( - itemOffsetRelativeToContainer + element.offsetHeight > - scrollTop + scrollContainer.offsetHeight - ) { - // Item is off the bottom of the visible area - scrollTop = - itemOffsetRelativeToContainer + - element.offsetHeight - - scrollContainer.offsetHeight; - } - - if (scrollTop !== scrollContainer.scrollTop) { - scrollContainer.scrollTop = scrollTop; - } - } - }, [scrollContainer, element]); -} From 9c327dba5cb3ad98260458203a37728383b2add7 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:02:27 +1000 Subject: [PATCH 3/7] Update dependency sku to v13.1.2 (#1576) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- packages/braid-design-system/package.json | 2 +- pnpm-lock.yaml | 54 ++++++++++++++++++----- site/package.json | 2 +- 3 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/braid-design-system/package.json b/packages/braid-design-system/package.json index dce0737688d..4aa9e825413 100644 --- a/packages/braid-design-system/package.json +++ b/packages/braid-design-system/package.json @@ -247,7 +247,7 @@ "react-dom": "^18.3.1", "react-router-dom": "^6.3.0", "sanitize-html": "^2.12.1", - "sku": "13.1.1", + "sku": "13.1.2", "storybook": "7.6.20", "svgo": "^2.8.0", "title-case": "^3.0.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5f9abf73e4c..c20ae87a49e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -352,8 +352,8 @@ importers: specifier: ^2.12.1 version: 2.13.0 sku: - specifier: 13.1.1 - version: 13.1.1(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) + specifier: 13.1.2 + version: 13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) storybook: specifier: 7.6.20 version: 7.6.20 @@ -611,8 +611,8 @@ importers: specifier: ^0.7.2 version: 0.7.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) sku: - specifier: 13.1.1 - version: 13.1.1(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) + specifier: 13.1.2 + version: 13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) webpack: specifier: ^5.76.0 version: 5.91.0(@swc/core@1.7.14) @@ -1326,6 +1326,10 @@ packages: resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==} engines: {node: '>=6.9.0'} + '@babel/runtime@7.25.6': + resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==} + engines: {node: '>=6.9.0'} + '@babel/template@7.25.0': resolution: {integrity: sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==} engines: {node: '>=6.9.0'} @@ -4489,6 +4493,10 @@ packages: resolution: {integrity: sha512-PSy0zQwMg5O+LjT5Mz7vnKC8I7DfWLPF6M7oepqW7WP5mn2CY3hz46xZOa1GJY+KVfyXhdmz6+tdgXwrHlZc5g==} engines: {node: ^16.14.0 || >=18.12.0} + didyoumean2@7.0.2: + resolution: {integrity: sha512-zK9I8vmMjmhwhFv52Trd4we5cr++mvhPp2HWswZK/+8vmozMNR7WelZqtCNV+4OHspgKfMvHexBp9wxgCGs56w==} + engines: {node: ^18.12.0 || >=20.9.0} + diff-sequences@29.0.0: resolution: {integrity: sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -4877,6 +4885,10 @@ packages: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} + eta@3.5.0: + resolution: {integrity: sha512-e3x3FBvGzeCIHhF+zhK8FZA2vC5uFn6b4HJjegUbIWrDb4mJ7JjTGMJY9VGIbRVpmSwHopNiaJibhjIr+HfLug==} + engines: {node: '>=6.0.0'} + etag@1.8.1: resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==} engines: {node: '>= 0.6'} @@ -4967,6 +4979,10 @@ packages: fastest-levenshtein@1.0.12: resolution: {integrity: sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==} + fastest-levenshtein@1.0.16: + resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==} + engines: {node: '>= 4.9.1'} + fastest-stable-stringify@2.0.2: resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==} @@ -8222,8 +8238,8 @@ packages: resolution: {integrity: sha512-r1X49+6Xnf5ahzf0KwoezYvyU97mo/K0tcUaIIUPaNNCG5epYxllnMZmo+XdmWmuxfk4jKcY+C5jz6Uwq69iAA==} hasBin: true - sku@13.1.1: - resolution: {integrity: sha512-LclZC+PPCCk1QZ4oIrW8WfTLC97w/hG+jEcH69rqK+g+v4kizWpK3b4PDwzMrwHU1v/GMFxI5au3AnuMbuE+KQ==} + sku@13.1.2: + resolution: {integrity: sha512-+rUWqebEr8LbeypgtMZcy1OzB7DvHHfh1DO7Ep5gHEUtacgs12I9tTOL2Q4dFTeSN2ED1LQFJhwu86hkTqdhwA==} engines: {node: '>=18.20'} hasBin: true peerDependencies: @@ -10325,6 +10341,10 @@ snapshots: dependencies: regenerator-runtime: 0.14.1 + '@babel/runtime@7.25.6': + dependencies: + regenerator-runtime: 0.14.1 + '@babel/template@7.25.0': dependencies: '@babel/code-frame': 7.24.7 @@ -14429,6 +14449,12 @@ snapshots: fastest-levenshtein: 1.0.12 lodash.deburr: 4.1.0 + didyoumean2@7.0.2: + dependencies: + '@babel/runtime': 7.25.6 + fastest-levenshtein: 1.0.16 + lodash.deburr: 4.1.0 + diff-sequences@29.0.0: {} digraph-js@2.2.3: @@ -15016,6 +15042,8 @@ snapshots: esutils@2.0.3: {} + eta@3.5.0: {} + etag@1.8.1: {} eval@0.1.8: @@ -15158,6 +15186,8 @@ snapshots: fastest-levenshtein@1.0.12: {} + fastest-levenshtein@1.0.16: {} + fastest-stable-stringify@2.0.2: {} fastest-validator@1.18.0: {} @@ -19117,7 +19147,7 @@ snapshots: transitivePeerDependencies: - supports-color - sku@13.1.1(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): + sku@13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): dependencies: '@babel/core': 7.24.5 '@babel/plugin-transform-react-constant-elements': 7.22.3(@babel/core@7.24.5) @@ -19163,8 +19193,7 @@ snapshots: debug: 4.3.6(supports-color@8.1.1) dedent: 1.5.3(babel-plugin-macros@3.1.0) default-browser: 5.2.1 - didyoumean2: 6.0.1 - ejs: 3.1.10 + didyoumean2: 7.0.2 ensure-gitignore: 1.2.0 env-ci: 7.3.0 esbuild: 0.21.5 @@ -19172,6 +19201,7 @@ snapshots: escape-string-regexp: 4.0.0 eslint: 8.57.0 eslint-config-seek: 13.1.1(eslint@8.57.0)(jest@29.1.2(@types/node@18.13.0))(typescript@5.5.4) + eta: 3.5.0 exception-formatter: 2.1.2 express: 4.19.2 fastest-validator: 1.18.0 @@ -19242,7 +19272,7 @@ snapshots: - webpack-hot-middleware - webpack-plugin-serve - sku@13.1.1(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): + sku@13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): dependencies: '@babel/core': 7.24.5 '@babel/plugin-transform-react-constant-elements': 7.22.3(@babel/core@7.24.5) @@ -19288,8 +19318,7 @@ snapshots: debug: 4.3.6(supports-color@8.1.1) dedent: 1.5.3(babel-plugin-macros@3.1.0) default-browser: 5.2.1 - didyoumean2: 6.0.1 - ejs: 3.1.10 + didyoumean2: 7.0.2 ensure-gitignore: 1.2.0 env-ci: 7.3.0 esbuild: 0.21.5 @@ -19297,6 +19326,7 @@ snapshots: escape-string-regexp: 4.0.0 eslint: 8.57.0 eslint-config-seek: 13.1.1(eslint@8.57.0)(jest@29.1.2(@types/node@18.13.0))(typescript@5.5.4) + eta: 3.5.0 exception-formatter: 2.1.2 express: 4.19.2 fastest-validator: 1.18.0 diff --git a/site/package.json b/site/package.json index 09e8ca19e74..c981414a48c 100644 --- a/site/package.json +++ b/site/package.json @@ -57,7 +57,7 @@ "react-syntax-highlighter": "^15.5.0", "react-use": "^17.4.0", "recoil": "^0.7.2", - "sku": "13.1.1", + "sku": "13.1.2", "webpack": "^5.76.0" }, "skuSkipPostInstall": true, From 9615558c37d4fb80d8bf0d2f5f22e8d2ffeeffc0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:10:33 +1000 Subject: [PATCH 4/7] Update pnpm to v9.10.0 (#1575) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5d3811311d8..79a9c8766d7 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "volta": { "node": "20.17.0" }, - "packageManager": "pnpm@9.9.0", + "packageManager": "pnpm@9.10.0", "pnpm": { "patchedDependencies": { "panzoom@9.4.2": "patches/panzoom@9.4.2.patch", From e4d5cea8de6736c2c4887e77587f5b7fdfd00e7c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 16 Sep 2024 14:52:46 +1000 Subject: [PATCH 5/7] Update dependency @capsizecss/metrics to v3.3.0 (#1577) --- pnpm-lock.yaml | 86 +++++++++++++++++++++++++------------------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c20ae87a49e..72716dcdfaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -175,7 +175,7 @@ importers: version: 4.1.2 '@capsizecss/metrics': specifier: ^3.0.0 - version: 3.2.0 + version: 3.3.0 '@capsizecss/vanilla-extract': specifier: ^2.0.0 version: 2.0.0(@vanilla-extract/css@1.15.5(babel-plugin-macros@3.1.0)) @@ -251,7 +251,7 @@ importers: version: 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4) '@storybook/react-webpack5': specifier: 7.6.20 - version: 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + version: 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) '@svgr/core': specifier: ^5.5.0 version: 5.5.0 @@ -353,7 +353,7 @@ importers: version: 2.13.0 sku: specifier: 13.1.2 - version: 13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) + version: 13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1) storybook: specifier: 7.6.20 version: 7.6.20 @@ -1355,8 +1355,8 @@ packages: '@capsizecss/core@4.1.2': resolution: {integrity: sha512-5tMjLsVsaEEwJ816y3eTfhhTIyUWNFt58x6YcHni0eV5tta8MGDOAIe+CV5ICb5pguXgDpNGLprqhPqBWtkFSg==} - '@capsizecss/metrics@3.2.0': - resolution: {integrity: sha512-EVWRXJaakH6NTq+7cZawgFiqA+UyESMszN/c1oDHbC/b0SAzQJ/QLS0xpaa3Y+YMfXOkEEjkuChYIV5pSkgmcg==} + '@capsizecss/metrics@3.3.0': + resolution: {integrity: sha512-WAQtKgyz7fZDEMuERSLPmWXuV53O/HDJZLof8BMWEX1GTWYiiNdqGA6j56+GCSSeVyzYDxkBnm5taIh0YyW6fQ==} '@capsizecss/vanilla-extract@2.0.0': resolution: {integrity: sha512-6FNLEOcAYo2AklxT7XVEm9Yam2hv76DLEhD6RWK3hJ87Nb9i95Y+rdYHJ3LBlbrzb+ZVJXxzZvg5OAZAqr/K3Q==} @@ -10392,7 +10392,7 @@ snapshots: dependencies: csstype: 3.1.3 - '@capsizecss/metrics@3.2.0': {} + '@capsizecss/metrics@3.3.0': {} '@capsizecss/vanilla-extract@2.0.0(@vanilla-extract/css@1.15.5(babel-plugin-macros@3.1.0))': dependencies: @@ -11152,10 +11152,10 @@ snapshots: lodash: 4.17.21 react: 18.3.1 - '@loadable/webpack-plugin@5.15.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': + '@loadable/webpack-plugin@5.15.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5))': dependencies: make-dir: 3.1.0 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) '@loadable/webpack-plugin@5.15.2(webpack@5.91.0(@swc/core@1.7.14))': dependencies: @@ -11391,7 +11391,7 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true - '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': + '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': dependencies: ansi-html: 0.0.9 core-js-pure: 3.26.1 @@ -11401,10 +11401,10 @@ snapshots: react-refresh: 0.14.0 schema-utils: 4.2.0 source-map: 0.7.3 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) optionalDependencies: type-fest: 3.13.1 - webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) webpack-hot-middleware: 2.26.1 '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14))': @@ -11515,7 +11515,7 @@ snapshots: error-stack-parser: 2.0.7 string-width: 4.2.3 strip-ansi: 6.0.1 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) '@soda/friendly-errors-webpack-plugin@1.8.1(webpack@5.91.0(@swc/core@1.7.14))': dependencies: @@ -11864,11 +11864,11 @@ snapshots: '@storybook/node-logger@7.6.20': {} - '@storybook/preset-react-webpack@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': + '@storybook/preset-react-webpack@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': dependencies: '@babel/preset-flow': 7.24.7(@babel/core@7.24.5) '@babel/preset-react': 7.24.7(@babel/core@7.24.5) - '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) '@storybook/core-webpack': 7.6.20 '@storybook/docs-tools': 7.6.20 '@storybook/node-logger': 7.6.20 @@ -11970,7 +11970,7 @@ snapshots: react-docgen-typescript: 2.2.2(typescript@5.5.4) tslib: 2.6.3 typescript: 5.5.4 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) transitivePeerDependencies: - supports-color @@ -11994,10 +11994,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - '@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': + '@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)': dependencies: '@storybook/builder-webpack5': 7.6.20(esbuild@0.18.20)(typescript@5.5.4) - '@storybook/preset-react-webpack': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + '@storybook/preset-react-webpack': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) '@storybook/react': 7.6.20(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.5.4) '@types/node': 18.13.0 react: 18.3.1 @@ -12804,7 +12804,7 @@ snapshots: debug: 4.3.6(supports-color@8.1.1) loader-utils: 2.0.4 picocolors: 1.0.1 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -12868,7 +12868,7 @@ snapshots: '@vocab/pseudo-localize@1.0.1': {} - '@vocab/webpack@1.2.9(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20))': + '@vocab/webpack@1.2.9(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5))': dependencies: '@vocab/core': 1.6.2 cjs-module-lexer: 1.3.1 @@ -12876,7 +12876,7 @@ snapshots: es-module-lexer: 1.5.2 picocolors: 1.0.1 virtual-resource-loader: 1.0.1 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) transitivePeerDependencies: - supports-color @@ -13378,7 +13378,7 @@ snapshots: '@babel/core': 7.24.5 find-cache-dir: 3.3.2 schema-utils: 4.2.0 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) babel-loader@9.1.2(@babel/core@7.24.5)(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -14119,7 +14119,7 @@ snapshots: postcss-modules-values: 4.0.0(postcss@8.4.41) postcss-value-parser: 4.2.0 semver: 7.6.3 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) css-loader@6.7.3(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -15362,7 +15362,7 @@ snapshots: semver: 7.6.3 tapable: 2.2.1 typescript: 5.5.4 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) fork-ts-checker-webpack-plugin@8.0.0(typescript@5.5.4)(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -15857,7 +15857,7 @@ snapshots: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) html-webpack-plugin@5.5.0(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -17185,7 +17185,7 @@ snapshots: mini-css-extract-plugin@2.7.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)): dependencies: schema-utils: 4.2.0 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) mini-css-extract-plugin@2.7.2(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -17866,7 +17866,7 @@ snapshots: typescript: 5.5.4 use-debounce: 10.0.0(react@18.3.1) webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) - webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) webpack-merge: 5.8.0 transitivePeerDependencies: - '@swc/core' @@ -18023,14 +18023,14 @@ snapshots: dependencies: postcss: 8.4.41 - postcss-loader@8.1.0(postcss@8.4.41)(typescript@5.5.4)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)): + postcss-loader@8.1.0(postcss@8.4.41)(typescript@5.5.4)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)): dependencies: cosmiconfig: 9.0.0(typescript@5.5.4) jiti: 1.21.6 postcss: 8.4.41 semver: 7.6.3 optionalDependencies: - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) transitivePeerDependencies: - typescript @@ -19147,7 +19147,7 @@ snapshots: transitivePeerDependencies: - supports-color - sku@13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): + sku@13.1.2(@storybook/react-webpack5@7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1))(@types/node@18.13.0)(@types/react@18.3.3)(react@18.3.1)(sass@1.54.3)(terser@5.31.0)(type-fest@3.13.1)(webpack-hot-middleware@2.26.1): dependencies: '@babel/core': 7.24.5 '@babel/plugin-transform-react-constant-elements': 7.22.3(@babel/core@7.24.5) @@ -19160,8 +19160,8 @@ snapshots: '@loadable/babel-plugin': 5.13.2(@babel/core@7.24.5) '@loadable/component': 5.15.2(react@18.3.1) '@loadable/server': 5.15.2(@loadable/component@5.15.2(react@18.3.1))(react@18.3.1) - '@loadable/webpack-plugin': 5.15.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) - '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + '@loadable/webpack-plugin': 5.15.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) + '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.0)(type-fest@3.13.1)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) '@swc/core': 1.7.14 '@types/express': 4.17.21 '@types/jest': 29.1.2 @@ -19173,7 +19173,7 @@ snapshots: '@vocab/core': 1.6.2 '@vocab/phrase': 2.0.1 '@vocab/pseudo-localize': 1.0.1 - '@vocab/webpack': 1.2.9(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + '@vocab/webpack': 1.2.9(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) '@zendesk/babel-plugin-react-displayname': https://codeload.github.com/zendesk/babel-plugin-react-displayname/tar.gz/7a837f2(@babel/core@7.24.5)(@babel/preset-react@7.24.7(@babel/core@7.24.5)) autoprefixer: 10.4.7(postcss@8.4.41) babel-jest: 29.1.2(@babel/core@7.24.5) @@ -19224,7 +19224,7 @@ snapshots: path-to-regexp: 6.2.1 picomatch: 3.0.1 postcss: 8.4.41 - postcss-loader: 8.1.0(postcss@8.4.41)(typescript@5.5.4)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + postcss-loader: 8.1.0(postcss@8.4.41)(typescript@5.5.4)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) prettier: 2.8.8 pretty-ms: 7.0.1 react: 18.3.1 @@ -19239,12 +19239,12 @@ snapshots: typescript: 5.5.4 webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) webpack-bundle-analyzer: 4.6.1 - webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) + webpack-dev-server: 5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)) webpack-merge: 5.8.0 webpack-node-externals: 3.0.0 wrap-ansi: 7.0.0 optionalDependencies: - '@storybook/react-webpack5': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) + '@storybook/react-webpack5': 7.6.20(@babel/core@7.24.5)(@swc/core@1.7.14)(esbuild@0.18.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(type-fest@3.13.1)(typescript@5.5.4)(webpack-dev-server@5.0.2(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)))(webpack-hot-middleware@2.26.1) transitivePeerDependencies: - '@rspack/core' - '@swc/helpers' @@ -19723,7 +19723,7 @@ snapshots: style-loader@3.3.4(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)): dependencies: - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) style-loader@3.3.4(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -19822,7 +19822,7 @@ snapshots: dependencies: '@swc/core': 1.7.14 '@swc/counter': 0.1.3 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) swc-loader@0.2.6(@swc/core@1.7.14)(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -19906,7 +19906,7 @@ snapshots: schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.0 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) optionalDependencies: '@swc/core': 1.7.14 esbuild: 0.18.20 @@ -19918,7 +19918,7 @@ snapshots: schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.0 - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) optionalDependencies: '@swc/core': 1.7.14 esbuild: 0.21.5 @@ -20428,7 +20428,7 @@ snapshots: range-parser: 1.2.1 schema-utils: 4.2.0 optionalDependencies: - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) webpack-dev-middleware@6.1.3(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -20449,7 +20449,7 @@ snapshots: range-parser: 1.2.1 schema-utils: 4.2.0 optionalDependencies: - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) webpack-dev-middleware@7.0.0(webpack@5.91.0(@swc/core@1.7.14)): dependencies: @@ -20461,7 +20461,7 @@ snapshots: optionalDependencies: webpack: 5.91.0(@swc/core@1.7.14) - webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)): + webpack-dev-server@5.0.2(debug@4.3.6)(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.21.5)): dependencies: '@types/bonjour': 3.5.13 '@types/connect-history-api-fallback': 1.5.4 @@ -20494,7 +20494,7 @@ snapshots: webpack-dev-middleware: 7.0.0(webpack@5.91.0(@swc/core@1.7.14)(esbuild@0.18.20)) ws: 8.16.0 optionalDependencies: - webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.18.20) + webpack: 5.91.0(@swc/core@1.7.14)(esbuild@0.21.5) transitivePeerDependencies: - bufferutil - debug From ce123846ca1a74836a13c3916d7535d782d5b764 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Mon, 16 Sep 2024 15:15:41 +1000 Subject: [PATCH 6/7] Stack, Tiles: Deprecate dividers prop (#1574) --- .changeset/five-ads-warn.md | 22 ++ .changeset/gentle-days-happen.md | 15 + .changeset/shiny-shirts-teach.md | 12 + ...dividers support from layout components.md | 95 ++++++ .../src/entries/css/breakpoints.docs.tsx | 48 +-- .../src/entries/css/vars.docs.tsx | 276 ++++++++++-------- .../Accordion/Accordion.screenshots.tsx | 20 +- .../lib/components/Checkbox/Checkbox.docs.tsx | 4 +- .../lib/components/Columns/Columns.docs.tsx | 10 +- .../components/Columns/Columns.gallery.tsx | 10 +- .../lib/components/Divider/Divider.docs.tsx | 14 +- .../src/lib/components/Divider/Divider.tsx | 5 +- .../lib/components/Heading/Heading.docs.tsx | 6 +- .../components/Heading/Heading.gallery.tsx | 7 +- .../src/lib/components/Inline/Inline.docs.tsx | 10 +- .../lib/components/Inline/Inline.gallery.tsx | 10 +- .../src/lib/components/Loader/Loader.docs.tsx | 5 +- .../src/lib/components/Spread/Spread.docs.tsx | 6 +- .../lib/components/Spread/Spread.gallery.tsx | 10 +- .../src/lib/components/Stack/Stack.docs.tsx | 7 +- .../src/lib/components/Stack/Stack.tsx | 39 ++- .../src/lib/components/Text/Text.docs.tsx | 6 +- .../src/lib/components/Text/Text.gallery.tsx | 7 +- .../src/lib/components/Tiles/Tiles.docs.tsx | 1 + .../src/lib/components/Tiles/Tiles.tsx | 131 ++++++--- .../src/lib/components/Toggle/Toggle.docs.tsx | 9 +- .../icons/IconArrow/IconArrow.docs.tsx | 4 +- .../icons/IconChevron/IconChevron.docs.tsx | 4 +- .../icons/IconStar/IconStar.docs.tsx | 14 +- .../icons/IconThumb/IconThumb.docs.tsx | 4 +- .../IconVisibility/IconVisibility.docs.tsx | 4 +- .../LinkableHeading/LinkableHeading.tsx | 20 +- site/src/App/DocNavigation/DocDetails.tsx | 12 +- site/src/App/DocNavigation/DocReleases.tsx | 17 +- site/src/types.d.ts | 1 + 35 files changed, 617 insertions(+), 248 deletions(-) create mode 100644 .changeset/five-ads-warn.md create mode 100644 .changeset/gentle-days-happen.md create mode 100644 .changeset/shiny-shirts-teach.md create mode 100644 docs/Removing dividers support from layout components.md diff --git a/.changeset/five-ads-warn.md b/.changeset/five-ads-warn.md new file mode 100644 index 00000000000..a2f1b4c1d36 --- /dev/null +++ b/.changeset/five-ads-warn.md @@ -0,0 +1,22 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Stack + - Tiles +--- + +**Stack, Tiles:** Deprecate `dividers` prop + +In preparation for migrating Braid layout components to use [CSS gap], the `dividers` prop has been deprecated on `Stack` and `Tiles`. + +Consumers are encouraged to migrate now in advance of its removal in v33. + +#### Migration Guide + +See [the migration guide] for details on how to migrate off the `dividers` prop. + +[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 \ No newline at end of file diff --git a/.changeset/gentle-days-happen.md b/.changeset/gentle-days-happen.md new file mode 100644 index 00000000000..59eb971d10e --- /dev/null +++ b/.changeset/gentle-days-happen.md @@ -0,0 +1,15 @@ +--- +'@braid-design-system/docs-ui': minor +--- + +**LinkableHeading:** Add `badge` support + +**EXAMPLE USAGE:** +```jsx +Deprecated} +> + Heading + +``` \ No newline at end of file diff --git a/.changeset/shiny-shirts-teach.md b/.changeset/shiny-shirts-teach.md new file mode 100644 index 00000000000..2f37dcc948f --- /dev/null +++ b/.changeset/shiny-shirts-teach.md @@ -0,0 +1,12 @@ +--- +'braid-design-system': patch +--- + +--- +updated: + - Divider +--- + +**Divider:** Ensure full width in flex container + +Ensures the `Divider` component remains full width when used as a flex child inside a flex container. diff --git a/docs/Removing dividers support from layout components.md b/docs/Removing dividers support from layout components.md new file mode 100644 index 00000000000..42797861bfd --- /dev/null +++ b/docs/Removing dividers support from layout components.md @@ -0,0 +1,95 @@ +# Removing `dividers` support from layout components + +Following the update to SEEK’s Browser Support Policy, we are now able to leverage [CSS gap] in Braid, and more importantly, our layout components. This will be landing in Braid in the v33 release. + +Previously, to enable gap-like behaviour layout components iterated over their children, wrapping them in container elements and applying padding. The trade off of this technique was an 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. + +Migrating to CSS gap mitigates all of the above trade offs. + +However, because `Stack` and `Tiles` no longer iterate over their children, implementing the `dividers` feature centrally is no longer feasible. + +While we could have conditionally maintained this behaviour, it would have resulted in inconsistent edge cases when using `dividers`. E.g. if a child component rendered nothing or a hidden element, the `divider` would still be rendered, resulting in an inconsistent layout. + +## Migration guide + +Braid already provides the [`Divider` component], so migrating away from the `dividers` prop is a matter of inserting a `Divider` as required into your layout. +How you migrate will depend on whether the children of your layout component are static or being iterated over. + +### `Stack` + +For `Stack`s with static children you can manually interleave `Divider` components: + +```diff +- ++ + {item} ++ + {item}**** ++ + {item} + +``` + +For `Stack`s with iterable children you can conditionally render `Divider` components, before each item (except the first): + +```diff +- ++ + {items.map((item, index) => ( +- {item} ++ ++ {index > 0 ? : null} ++ {item} ++ + ))} + +``` + +### `Tiles` + +For `Tiles` the `dividers` prop was only applied when rendered as 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} ++ + ))} + +``` + +[CSS gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/gap +[`Divider` component]: https://seek-oss.github.io/braid-design-system/components/Divider/ diff --git a/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx b/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx index ed80e82d251..3078b7a2759 100644 --- a/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx +++ b/packages/braid-design-system/src/entries/css/breakpoints.docs.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { Box, Column, Columns, + Divider, IconDesktop, IconMobile, Stack, @@ -42,27 +43,32 @@ const docs: CssDoc = { themes to maintain a consistent set of conditions when designing experiences.`} - + {bps.map((b, index) => ( - - - - {iconForBp[b]} - - - - - {b} - - - - {`${breakpoints[b]}${index !== 0 ? 'px' : ''}`} - - + + {index > 0 ? : null} + + + + {iconForBp[b]} + + + + + {b} + + + + {`${breakpoints[b]}${ + index !== 0 ? 'px' : '' + }`} + + + ))} diff --git a/packages/braid-design-system/src/entries/css/vars.docs.tsx b/packages/braid-design-system/src/entries/css/vars.docs.tsx index 1e0a5fd6dff..b24188dac75 100644 --- a/packages/braid-design-system/src/entries/css/vars.docs.tsx +++ b/packages/braid-design-system/src/entries/css/vars.docs.tsx @@ -1,4 +1,10 @@ -import React, { type ReactNode, useEffect, useRef, useState } from 'react'; +import React, { + Fragment, + type ReactNode, + useEffect, + useRef, + useState, +} from 'react'; import { vars } from 'braid-src/entries/css'; import { Text, @@ -10,6 +16,7 @@ import { Hidden, Alert, List, + Divider, } from 'braid-src/lib/components'; import { Box } from 'braid-src/lib/components/Box/Box'; import type { ReactNodeNoStrings } from 'braid-src/lib/components/private/ReactNodeNoStrings'; @@ -98,153 +105,186 @@ const varDocs: Record = { ), contentWidth: ( - - {Object.entries(vars.contentWidth).map(([widthName, widthVar]) => ( - - - - - + + {Object.entries(vars.contentWidth).map(([widthName, widthVar], index) => ( + + {index > 0 ? : null} + + + + + + ))} ), space: ( - - {Object.entries(vars.space).map(([spaceName, spaceVar]) => ( - - - + + {Object.entries(vars.space).map(([spaceName, spaceVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), foregroundColor: ( - - {Object.entries(vars.foregroundColor).map(([colorName, colorVar]) => ( - - - + {Object.entries(vars.foregroundColor).map( + ([colorName, colorVar], index) => ( + + {index > 0 ? : null} + - Aa - - - - ))} + + + Aa + + + + + ), + )} ), backgroundColor: ( - - {Object.entries(vars.backgroundColor).map(([colorName, colorVar]) => ( - - - - ))} + + {Object.entries(vars.backgroundColor).map( + ([colorName, colorVar], index) => ( + + {index > 0 ? : null} + + + + + ), + )} ), textWeight: ( - - {Object.entries(vars.textWeight).map(([weight, weightVar]) => ( - - - Aa - - + + {Object.entries(vars.textWeight).map(([weight, weightVar], index) => ( + + {index > 0 ? : null} + + + Aa + + + ))} ), borderColor: ( - - {Object.entries(vars.borderColor).map(([colorName, colorVar]) => ( - - - + + {Object.entries(vars.borderColor).map(([colorName, colorVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), borderWidth: ( - - {Object.entries(vars.borderWidth).map(([widthName, widthVar]) => ( - - - + + {Object.entries(vars.borderWidth).map(([widthName, widthVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), borderRadius: ( - - {Object.entries(vars.borderRadius).map(([radiusName, radiusVar]) => ( - - - - ))} + + {Object.entries(vars.borderRadius).map( + ([radiusName, radiusVar], index) => ( + + {index > 0 ? : null} + + + + + ), + )} ), shadow: ( - - {Object.entries(vars.shadow).map(([shadowName, shadowVar]) => ( - - - + + {Object.entries(vars.shadow).map(([shadowName, shadowVar], index) => ( + + {index > 0 ? : null} + + + + ))} ), diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx index 7b68dae54b2..8bbdc6d7c16 100644 --- a/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx +++ b/packages/braid-design-system/src/lib/components/Accordion/Accordion.screenshots.tsx @@ -1,6 +1,14 @@ import React, { useState } from 'react'; import type { ComponentScreenshot } from 'site/types'; -import { AccordionItem, Accordion, Badge, Text, IconImage, Stack } from '../'; +import { + AccordionItem, + Accordion, + Badge, + Text, + IconImage, + Stack, + Divider, +} from '../'; import { Placeholder } from '../../playroom/components'; import { Box } from '../Box/Box'; import { debugTouchableAttrForDataProp } from '../private/touchable/debugTouchable'; @@ -422,7 +430,7 @@ export const screenshots: ComponentScreenshot = { label: 'AccordionItem with an icon - should follow size', Example: ({ id }) => ( - + Content + Content + Content + ( - + Content + Content + Content + source( - + + source( - + @@ -211,6 +211,7 @@ const docs: ComponentDocs = { + @@ -222,6 +223,7 @@ const docs: ComponentDocs = { + @@ -247,7 +249,7 @@ const docs: ComponentDocs = { ), Example: () => source( - + @@ -256,6 +258,7 @@ const docs: ComponentDocs = { + @@ -264,6 +267,7 @@ const docs: ComponentDocs = { + diff --git a/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx b/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx index 0b794b9efd6..19d1698833e 100644 --- a/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Columns/Columns.gallery.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Columns, Column, Stack } from '../'; +import { Columns, Column, Stack, Divider } from '../'; import source from '@braid-design-system/source.macro'; export const galleryItems: GalleryComponent = { @@ -24,7 +24,7 @@ export const galleryItems: GalleryComponent = { label: 'Vertical alignment', Example: () => source( - + @@ -36,6 +36,7 @@ export const galleryItems: GalleryComponent = { + @@ -47,6 +48,7 @@ export const galleryItems: GalleryComponent = { + @@ -65,7 +67,7 @@ export const galleryItems: GalleryComponent = { label: 'Horizontal alignment', Example: () => source( - + @@ -74,6 +76,7 @@ export const galleryItems: GalleryComponent = { + @@ -82,6 +85,7 @@ export const galleryItems: GalleryComponent = { + diff --git a/packages/braid-design-system/src/lib/components/Divider/Divider.docs.tsx b/packages/braid-design-system/src/lib/components/Divider/Divider.docs.tsx index e4ce03fdc06..8460d8ee5d4 100644 --- a/packages/braid-design-system/src/lib/components/Divider/Divider.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Divider/Divider.docs.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { ComponentDocs } from 'site/types'; -import { Divider, Stack, Text, Strong } from '../'; +import { Divider, Stack, Text } from '../'; import source from '@braid-design-system/source.macro'; const docs: ComponentDocs = { @@ -18,17 +18,7 @@ const docs: ComponentDocs = { , ), - accessibility: ( - - Renders a semantic hr element. - - ), - alternatives: [ - { - name: 'Stack', - description: 'Supports rendering dividers between every stack item.', - }, - ], + alternatives: [], }; export default docs; diff --git a/packages/braid-design-system/src/lib/components/Divider/Divider.tsx b/packages/braid-design-system/src/lib/components/Divider/Divider.tsx index 78cceef4226..a1379eb1f8c 100644 --- a/packages/braid-design-system/src/lib/components/Divider/Divider.tsx +++ b/packages/braid-design-system/src/lib/components/Divider/Divider.tsx @@ -11,11 +11,12 @@ export const Divider = ({ weight = 'regular' }: DividerProps) => { const lightness = useBackgroundLightness(); return ( - + source( - + Left + Center + Right + Center on mobile diff --git a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx index 272fa7bcd42..23dcc75cc0b 100644 --- a/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Heading/Heading.gallery.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; -import { Box, Heading, Stack, IconImage } from '../'; +import { Box, Heading, Stack, IconImage, Divider } from '../'; import source from '@braid-design-system/source.macro'; @@ -42,16 +42,19 @@ export const galleryItems: GalleryComponent = { label: 'Alignment', Example: () => source( - + Left (default) + Center + Right + Center on mobile diff --git a/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx b/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx index afdb24f1eba..4a5d3c317d6 100644 --- a/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Inline/Inline.docs.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { ComponentDocs } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Inline, Stack, Strong, Text, TextLink, Tiles } from '../'; +import { Divider, Inline, Stack, Strong, Text, TextLink, Tiles } from '../'; import source from '@braid-design-system/source.macro'; const docs: ComponentDocs = { @@ -93,17 +93,19 @@ const docs: ComponentDocs = { ), Example: () => source( - + + + @@ -122,17 +124,19 @@ const docs: ComponentDocs = { ), Example: () => source( - + + + diff --git a/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx b/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx index 05d30d77826..bde0f760ca5 100644 --- a/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx +++ b/packages/braid-design-system/src/lib/components/Inline/Inline.gallery.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { GalleryComponent } from 'site/types'; import { Placeholder } from '../private/Placeholder/Placeholder'; -import { Inline, Stack } from '../'; +import { Divider, Inline, Stack } from '../'; import source from '@braid-design-system/source.macro'; export const galleryItems: GalleryComponent = { @@ -23,17 +23,19 @@ export const galleryItems: GalleryComponent = { label: 'Vertical alignment', Example: () => source( - + + + @@ -46,17 +48,19 @@ export const galleryItems: GalleryComponent = { label: 'Horizontal alignment', Example: () => source( - + + + diff --git a/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx b/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx index 4a55a4c1287..c803bedbf9b 100644 --- a/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx +++ b/packages/braid-design-system/src/lib/components/Loader/Loader.docs.tsx @@ -10,6 +10,7 @@ import { TextLink, Strong, Button, + Divider, } from '../'; import source from '@braid-design-system/source.macro'; import { animationDelayValueInMs } from './Loader.css'; @@ -108,9 +109,9 @@ const docs: ComponentDocs = { <> {setDefaultState('counter', 0)} - + - +