From 183eab74ab0e228aecf270f3f4f985800399ca8d Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Wed, 9 Oct 2024 21:34:00 +0200 Subject: [PATCH] BREAKING-CHANGE(web-react): Remove isUnderlined prop from Link component - removing deprecation - solving #DS-1509 --- packages/web-react/DEPRECATIONS.md | 13 ---------- .../Breadcrumbs/BreadcrumbsItem.tsx | 2 +- .../src/components/Breadcrumbs/README.md | 2 +- .../Breadcrumbs/demo/BreadcrumbsCustom.tsx | 4 +-- .../web-react/src/components/Link/Link.tsx | 16 ++---------- .../web-react/src/components/Link/README.md | 26 ++++++------------- .../components/Link/__tests__/Link.test.tsx | 18 +++---------- .../Link/__tests__/linkPropsDataProvider.ts | 23 +++++++++------- .../Link/__tests__/useLinkStyleProps.test.ts | 4 +-- .../components/Link/stories/Link.stories.tsx | 8 ------ .../src/components/Link/useLinkStyleProps.ts | 4 +-- packages/web-react/src/types/link.ts | 3 --- 12 files changed, 34 insertions(+), 89 deletions(-) diff --git a/packages/web-react/DEPRECATIONS.md b/packages/web-react/DEPRECATIONS.md index e234859750..ddfb09babb 100644 --- a/packages/web-react/DEPRECATIONS.md +++ b/packages/web-react/DEPRECATIONS.md @@ -8,17 +8,4 @@ This document lists all deprecations that will be removed in the next major vers 👉 [What are deprecations?][readme-deprecations] -### Link `isUnderlined` - -`isUnderlined` property will be replaced in the next major version. Please use `underlined` instead. - -#### Migration Guide - -We are providing a [codemod](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v3/web-react/README.md#v3web-reactlink-underlined-prop--link-isunderlined-to-udnerlined-prop-change) to assist with this change. - -```diff -- -+ -``` - [readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#deprecations diff --git a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx index 4f0dbc1e5a..ca0a927e6a 100644 --- a/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx +++ b/packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx @@ -30,7 +30,7 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => { {children} diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 95fbc2a832..428d2f46ef 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -45,7 +45,7 @@ Use custom content for the ordered list as component's children instead of passi {items.map((item) => (
  • - + {item.title}
    • diff --git a/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx b/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx index 0d98e7e90b..31a8070210 100644 --- a/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx +++ b/packages/web-react/src/components/Breadcrumbs/demo/BreadcrumbsCustom.tsx @@ -29,7 +29,7 @@ const BreadcrumbsCustom = () => { const isLastItem = index === items.length - 1; const linkParams = { - isUnderlined: !isLastItem, + underlined: !isLastItem ? 'always' : undefined, 'aria-current': isLastItem ? 'page' : undefined, color: isLastItem ? 'secondary' : 'primary', }; @@ -39,7 +39,7 @@ const BreadcrumbsCustom = () => { {index === items.length - 2 && (
  • - + Back
    • diff --git a/packages/web-react/src/components/Link/Link.tsx b/packages/web-react/src/components/Link/Link.tsx index b98f9bc0f5..95e8daa9cf 100644 --- a/packages/web-react/src/components/Link/Link.tsx +++ b/packages/web-react/src/components/Link/Link.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import React, { ElementType, forwardRef } from 'react'; -import { useDeprecationMessage, useStyleProps } from '../../hooks'; +import { useStyleProps } from '../../hooks'; import { PolymorphicRef, SpiritLinkProps } from '../../types'; import { useLinkStyleProps } from './useLinkStyleProps'; @@ -22,23 +22,11 @@ const _Link = ( const { elementType: ElementTag = defaultProps.elementType as ElementType, children, - /** @deprecated "isUnderlined" property will be replaced in the next major version. Please use "underlined" instead. */ - isUnderlined, ...restProps } = propsWithDefaults; - const { classProps, props: modifiedProps } = useLinkStyleProps({ isUnderlined, ...restProps }); + const { classProps, props: modifiedProps } = useLinkStyleProps(restProps); const { styleProps, props: otherProps } = useStyleProps(modifiedProps); - useDeprecationMessage({ - method: 'property', - trigger: !!isUnderlined, - componentName: 'Link', - propertyProps: { - deprecatedName: 'isUnderlined', - newName: 'underlined', - }, - }); - return ( ` | — | ✕ | Link element reference | -| `underlined` | `hover` \| `always` \| `never` | `hover` | ✕ | When is the link underlined | +| Name | Type | Default | Required | Description | +| ------------- | ------------------------------------------------ | --------- | -------- | ---------------------------- | +| `color` | [Action Link Color dictionary][dictionary-color] | `primary` | ✕ | Color of the link | +| `elementType` | `ElementType` | `a` | ✕ | Type of element used as | +| `href` | `string` | — | ✕ | Link's href attribute | +| `isDisabled` | `bool` | `false` | ✕ | Whether is the link disabled | +| `ref` | `ForwardedRef` | — | ✕ | Link element reference | +| `underlined` | `hover` \| `always` \| `never` | `hover` | ✕ | When is the link underlined | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] and [escape hatches][readme-escape-hatches]. -#### ⚠️ DEPRECATION NOTICE - -`isUnderlined` property will be replaced in the next major version. Please use `underlined` instead. - -We are providing a [codemod](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/codemods/src/transforms/v3/web-react/README.md#v3web-reactlink-underlined-prop--link-isunderlined-to-udnerlined-prop-change) to assist with this change. - -[What are deprecations?][deprecated] - ## Custom component Link classes are fabricated using `useLinkStyleProps` hook. You can use it to create your own custom Link component. @@ -111,7 +102,6 @@ const CustomLinkRoot = ( export const CustomLink = forwardRef(CustomLinkRoot); ``` -[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations [dictionary-color]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#color [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches diff --git a/packages/web-react/src/components/Link/__tests__/Link.test.tsx b/packages/web-react/src/components/Link/__tests__/Link.test.tsx index 7f79eb8b9f..031dca39e0 100644 --- a/packages/web-react/src/components/Link/__tests__/Link.test.tsx +++ b/packages/web-react/src/components/Link/__tests__/Link.test.tsx @@ -18,31 +18,19 @@ describe('Link', () => { restPropsTest(Link, 'a'); - it.each(linkPropsDataProvider)('should have class', (color, isUnderlined, isDisabled, expectedClassName) => { + it.each(linkPropsDataProvider)('should have class', (color, underlined, isDisabled, expectedClassName) => { render( } - isUnderlined={isUnderlined as boolean} - isDisabled={isDisabled as boolean} + underlined={underlined} + isDisabled={isDisabled} />, ); expect(screen.getByRole('link')).toHaveClass(expectedClassName as string); }); - it('should have class link-underlined', () => { - render(); - - expect(screen.getByRole('link')).toHaveClass('link-underlined'); - }); - - it('should have class link-not-underlined', () => { - render(); - - expect(screen.getByRole('link')).toHaveClass('link-not-underlined'); - }); - it('should have correct href', () => { render(); diff --git a/packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts b/packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts index 09938a79ae..f8d03c668c 100644 --- a/packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts +++ b/packages/web-react/src/components/Link/__tests__/linkPropsDataProvider.ts @@ -1,14 +1,17 @@ const linkPropsDataProvider = [ - // color, isUnderlined, isDisabled, expectedClassName - ['primary', false, false, 'link-primary'], - ['secondary', false, false, 'link-secondary'], - ['tertiary', false, false, 'link-tertiary'], - ['primary', true, false, 'link-primary link-underlined'], - ['secondary', true, false, 'link-secondary link-underlined'], - ['tertiary', true, false, 'link-tertiary link-underlined'], - ['primary', true, true, 'link-primary link-disabled link-underlined'], - ['secondary', true, true, 'link-secondary link-disabled link-underlined'], - ['tertiary', true, true, 'link-tertiary link-disabled link-underlined'], + // color, underlined, isDisabled, expectedClassName + ['primary', undefined, false, 'link-primary'], + ['secondary', undefined, false, 'link-secondary'], + ['tertiary', undefined, false, 'link-tertiary'], + ['primary', 'hover', false, 'link-primary'], + ['secondary', 'hover', false, 'link-secondary'], + ['tertiary', 'hover', false, 'link-tertiary'], + ['primary', 'hover', true, 'link-primary link-disabled'], + ['secondary', 'hover', true, 'link-secondary link-disabled'], + ['tertiary', 'hover', true, 'link-tertiary link-disabled'], + ['primary', 'hover', false, 'link-primary'], + ['primary', 'never', false, 'link-primary link-not-underlined'], + ['primary', 'always', false, 'link-primary link-underlined'], ]; export default linkPropsDataProvider; diff --git a/packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts b/packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts index 0437fdde03..9da845e33a 100644 --- a/packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts +++ b/packages/web-react/src/components/Link/__tests__/useLinkStyleProps.test.ts @@ -4,8 +4,8 @@ import { useLinkStyleProps } from '../useLinkStyleProps'; import linkPropsDataProvider from './linkPropsDataProvider'; describe('useLinkStyleProps', () => { - it.each(linkPropsDataProvider)('should return classname', (color, isUnderlined, isDisabled, expectedClassName) => { - const props = { color, isUnderlined, isDisabled } as SpiritLinkProps; + it.each(linkPropsDataProvider)('should return classname', (color, underlined, isDisabled, expectedClassName) => { + const props = { color, underlined, isDisabled } as SpiritLinkProps; const { result } = renderHook(() => useLinkStyleProps(props)); expect(result.current.classProps).toBe(expectedClassName); diff --git a/packages/web-react/src/components/Link/stories/Link.stories.tsx b/packages/web-react/src/components/Link/stories/Link.stories.tsx index faa4289fea..13cd39e01e 100644 --- a/packages/web-react/src/components/Link/stories/Link.stories.tsx +++ b/packages/web-react/src/components/Link/stories/Link.stories.tsx @@ -37,13 +37,6 @@ const meta: Meta = { defaultValue: { summary: 'false' }, }, }, - isUnderlined: { - control: 'boolean', - description: '⚠️ **Deprecated**. Please use `underlined` instead. \n\n', - table: { - defaultValue: { summary: 'false' }, - }, - }, target: { control: 'select', options: ['_blank', '_self', '_parent', '_top', undefined], @@ -65,7 +58,6 @@ const meta: Meta = { elementType: 'a', href: 'https://www.example.com', isDisabled: false, - isUnderlined: false, target: '_blank', underlined: undefined, }, diff --git a/packages/web-react/src/components/Link/useLinkStyleProps.ts b/packages/web-react/src/components/Link/useLinkStyleProps.ts index f7352ec7ae..190465d4d0 100644 --- a/packages/web-react/src/components/Link/useLinkStyleProps.ts +++ b/packages/web-react/src/components/Link/useLinkStyleProps.ts @@ -11,7 +11,7 @@ export interface LinkStyles { } export function useLinkStyleProps(props: SpiritLinkProps): LinkStyles { - const { color, isDisabled, isUnderlined, underlined, ...restProps } = props; + const { color, isDisabled, underlined, ...restProps } = props; const linkClass = useClassNamePrefix('link'); const linkColorClass = `${linkClass}-${color}`; @@ -21,7 +21,7 @@ export function useLinkStyleProps(props: const className = classNames(linkColorClass, { [linkDisabledClass]: isDisabled, - [linkUnderlinedClass]: isUnderlined || underlined === UNDERLINED_OPTIONS.ALWAYS, + [linkUnderlinedClass]: underlined === UNDERLINED_OPTIONS.ALWAYS, [linkNotUnderlinedClass]: underlined === UNDERLINED_OPTIONS.NEVER, }); diff --git a/packages/web-react/src/types/link.ts b/packages/web-react/src/types/link.ts index f3a2759020..0892f25850 100644 --- a/packages/web-react/src/types/link.ts +++ b/packages/web-react/src/types/link.ts @@ -24,9 +24,6 @@ export interface LinkBaseProps extends ChildrenProps, StyleProps, Tran target?: LinkTarget; /** Color of the Link */ color?: ActionLinkColorsDictionaryType; - /** Whether is the Link underlined */ - /** @deprecated "isUnderlined" property will be replaced in the next major version. Please use "underlined" instead. */ - isUnderlined?: boolean; /** When is the Link underlined */ underlined?: UnderlineOptions; /** Whether is the Link disabled */