BREAKING-CHANGE(web-react): Remove isUnderlined prop from Link component

- removing deprecation - solving #DS-1509
lmc-eu · Oct 9, 2024 · 183eab7 · 183eab7
1 parent 72f26f2
commit 183eab7
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 89 deletions.
diff --git 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
-- <Link isUnderlined … />
-+ <Link underlined="always" … />
-```
-
 [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
@@ -30,7 +30,7 @@ export const BreadcrumbsItem = (props: SpiritBreadcrumbsItemProps) => {
         <Link
           href={href}
           color={isCurrent ? 'secondary' : 'primary'}
-          isUnderlined={!isCurrent}
+          underlined={isCurrent ? 'hover' : 'always'}
           aria-current={isCurrent ? 'page' : undefined}
         >
           {children}

diff --git 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
 <Breadcrumbs>
   {items.map((item) => (
     <li key={`BreadcrumbsItem_${item.title}`}>
-      <Link color="primary" isUnderlined>
+      <Link color="primary" underlined="always">
         {item.title}
       </Link>
     </li>

diff --git 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 && (
               <li className="d-tablet-none">
                 <Icon name="chevron-left" />
-                <Link href={item.url} color="primary" isUnderlined>
+                <Link href={item.url} color="primary" underlined="always">
                   Back
                 </Link>
               </li>

diff --git 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 = <E extends ElementType = 'a', T = void>(
   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 (
     <ElementTag
       {...otherProps}

diff --git a/packages/web-react/src/components/Link/README.md b/packages/web-react/src/components/Link/README.md
@@ -48,28 +48,19 @@ The underline is never visible, even when the link is hovered over.
 
 ## API
 
-| 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                                                         |
-| `isUnderlined` | `bool`                                           | `false`   | ✕        | [**DEPRECATED**][deprecated] in favor of `underline`; Whether is the link underlined |
-| `ref`          | `ForwardedRef<HTMLAnchorElement>`                | —         | ✕        | 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<HTMLAnchorElement>`                | —         | ✕        | 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 = <T extends ElementType = 'button'>(
 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
@@ -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(
       <Link
         href="/"
         color={color as ActionLinkColorsDictionaryType<string>}
-        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(<Link href="/" underlined="always" />);
-
-    expect(screen.getByRole('link')).toHaveClass('link-underlined');
-  });
-
-  it('should have class link-not-underlined', () => {
-    render(<Link href="/" underlined="never" />);
-
-    expect(screen.getByRole('link')).toHaveClass('link-not-underlined');
-  });
-
   it('should have correct href', () => {
     render(<Link href="/test" />);
 

diff --git 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
@@ -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
@@ -37,13 +37,6 @@ const meta: Meta<typeof Link> = {
         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<typeof Link> = {
     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
@@ -11,7 +11,7 @@ export interface LinkStyles<E extends ElementType = 'p'> {
 }
 
 export function useLinkStyleProps<E extends ElementType = 'a', T = void>(props: SpiritLinkProps<E, T>): LinkStyles<E> {
-  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<E extends ElementType = 'a', T = void>(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
@@ -24,9 +24,6 @@ export interface LinkBaseProps<C = void> extends ChildrenProps, StyleProps, Tran
   target?: LinkTarget;
   /** Color of the Link */
   color?: ActionLinkColorsDictionaryType<C>;
-  /** 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 */