From f1512e9992d448b1828ad9d50d91e695c53206a3 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 09:58:58 +1000 Subject: [PATCH 01/10] useBreakpoint: Remove deprecated Hook (#1595) --- .changeset/pink-carrots-switch.md | 17 +++++ .../src/lib/components/index.ts | 1 - .../useBreakpoint/useBreakpoint.docs.tsx | 69 ------------------- .../useBreakpoint/useBreakpoint.test.tsx | 32 --------- .../components/useBreakpoint/useBreakpoint.ts | 19 ----- .../src/__snapshots__/contract.test.ts.snap | 12 ---- 6 files changed, 17 insertions(+), 133 deletions(-) create mode 100644 .changeset/pink-carrots-switch.md delete mode 100644 packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.docs.tsx delete mode 100644 packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.test.tsx delete mode 100644 packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.ts 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/packages/braid-design-system/src/lib/components/index.ts b/packages/braid-design-system/src/lib/components/index.ts index 5a4ec85fc4..6e4eb322db 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/useBreakpoint/useBreakpoint.docs.tsx b/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.docs.tsx deleted file mode 100644 index 2bc9d45fe3..0000000000 --- a/packages/braid-design-system/src/lib/components/useBreakpoint/useBreakpoint.docs.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import type { ComponentDocs } from 'site/types'; -import { useBreakpoint, Stack, Strong, Text, TextLink } from '../'; -import source from '@braid-design-system/source.macro'; - -const docs: ComponentDocs = { - category: 'Logic', - deprecationWarning: ( - - - 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/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index 5e369a9167..4ca2e9915d 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -8942,18 +8942,6 @@ exports[`makeLinkComponent 1`] = ` } `; -exports[`useBreakpoint 1`] = ` -{ - exportType: hook, - params: [], - returnType: - | "desktop" - | "mobile" - | "tablet" - | null, -} -`; - exports[`useColor 1`] = ` { exportType: hook, From 503f330760e3ac596ac6cd53176533c061ce87b5 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 10:05:39 +1000 Subject: [PATCH 02/10] Autosuggest: Remove deprecated message syntax from `suggestions` (#1596) --- .changeset/brown-socks-talk.md | 23 +++++++++++ .../Autosuggest/Autosuggest.test.tsx | 36 ---------------- .../components/Autosuggest/Autosuggest.tsx | 41 ++----------------- .../src/__snapshots__/contract.test.ts.snap | 5 +-- 4 files changed, 28 insertions(+), 77 deletions(-) create mode 100644 .changeset/brown-socks-talk.md 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/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/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index 4ca2e9915d..c5f958de53 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" From dc5fa19d0f35be71051db8ad23e32d818b68603e Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 10:12:28 +1000 Subject: [PATCH 03/10] Rating: Remove deprecated `showTextRating` prop (#1597) --- .changeset/plenty-dancers-serve.md | 22 +++++++++++++ .../src/lib/components/Rating/Rating.tsx | 31 +++---------------- .../src/__snapshots__/contract.test.ts.snap | 1 - 3 files changed, 26 insertions(+), 28 deletions(-) create mode 100644 .changeset/plenty-dancers-serve.md 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/packages/braid-design-system/src/lib/components/Rating/Rating.tsx b/packages/braid-design-system/src/lib/components/Rating/Rating.tsx index 459bad7273..60c54c253b 100644 --- a/packages/braid-design-system/src/lib/components/Rating/Rating.tsx +++ b/packages/braid-design-system/src/lib/components/Rating/Rating.tsx @@ -55,8 +55,6 @@ const ratingArr = [...Array(5)]; interface RatingBaseProps { rating: number; size?: TextProps['size']; - /** @deprecated Use `variant="starsOnly"` instead */ - showTextRating?: boolean; 'aria-label'?: string; data?: TextProps['data']; } @@ -75,8 +73,7 @@ export const Rating = ({ rating, size = 'standard', weight, - showTextRating, - variant: variantProp, + variant = 'full', 'aria-label': ariaLabel, data, }: RatingProps) => { @@ -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/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index c5f958de53..ee522ee8de 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -7453,7 +7453,6 @@ exports[`Rating 1`] = ` aria-label?: string data?: DataAttributeMap rating: number - showTextRating?: boolean size?: | "large" | "small" From d2d532dd2329768bff913cfca13facb90acbdc2b Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 10:20:29 +1000 Subject: [PATCH 04/10] ButtonIcon: Remove deprecated `secondary` tone (#1598) --- .changeset/large-turkeys-wait.md | 22 +++++++++++++ .../ButtonIcon/ButtonIcon.screenshots.tsx | 26 ++-------------- .../lib/components/ButtonIcon/ButtonIcon.tsx | 31 +++---------------- .../src/__snapshots__/contract.test.ts.snap | 1 - 4 files changed, 28 insertions(+), 52 deletions(-) create mode 100644 .changeset/large-turkeys-wait.md 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/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/generate-component-docs/src/__snapshots__/contract.test.ts.snap b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap index ee522ee8de..7e5562e7d8 100644 --- a/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap +++ b/packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap @@ -2134,7 +2134,6 @@ exports[`ButtonIcon 1`] = ` tone?: | "formAccent" | "neutral" - | "secondary" tooltipPlacement?: | "bottom" | "top" From c256f47b25ff76f0ac61315ea5c3657afe878088 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 2 Oct 2024 11:31:23 +1000 Subject: [PATCH 05/10] Text, Heading: Remove deprecated `truncate` prop (#1599) --- .changeset/curvy-countries-grab.md | 22 +++++++++++++++ .../lib/components/Heading/Heading.docs.tsx | 20 ++++---------- .../Heading/Heading.screenshots.tsx | 16 ++--------- .../src/lib/components/Text/Text.docs.tsx | 20 ++++---------- .../lib/components/Text/Text.screenshots.tsx | 14 ++-------- .../private/Typography/Typography.tsx | 27 ++----------------- .../src/__snapshots__/contract.test.ts.snap | 2 -- 7 files changed, 38 insertions(+), 83 deletions(-) create mode 100644 .changeset/curvy-countries-grab.md 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/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/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/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 ( Date: Wed, 2 Oct 2024 11:39:07 +1000 Subject: [PATCH 06/10] Button, ButtonLink: Remove deprecated `bleedY` prop (#1600) --- .changeset/fresh-pots-bathe.md | 26 +++++ .../components/Button/Button.screenshots.tsx | 16 --- .../src/lib/components/Button/Button.tsx | 104 +++++++----------- .../lib/components/ButtonLink/ButtonLink.tsx | 22 +--- .../src/__snapshots__/contract.test.ts.snap | 2 - 5 files changed, 67 insertions(+), 103 deletions(-) create mode 100644 .changeset/fresh-pots-bathe.md 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/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. -