BREAKING CHANGE(web-react): Remove Grid tablet and desktop props …

…#DS-1068

See the Grid: Breakpoint Props section in the web-react package Migration Guide to version 2.

packages/web-react/DEPRECATIONS-v2.md

@@ -132,27 +132,6 @@ The `off` placement is deprecated and will be removed in the next major version.
 Please use the `TooltipModern` component instead, which is the successor of the `Tooltip` component and
 provides improved functionality.
 
-### Grid Breakpoint Props
-
-The `cols` prop in the `Grid` now supports object values for different breakpoints.
-The `tablet` and `desktop` props will be removed in the next major version.
-
-#### Migration Guide
-
-Use codemod to automatically update your codebase.
-
-```sh
-npx @lmc-eu/spirit-codemods -p <path> -t v2/web-react/grid-breakpoint-props
-```
-
-See [Codemods documentation][readme-codemods] for more details.
-
-Or manually replace `tablet` and `desktop` props with the `cols` object prop.
-
-- `<Grid cols="2" tablet="3" … />` → `<Grid cols={{ mobile: 2, tablet: 3 }} … />`
-- `<Grid desktop="3" … />` → `<Grid cols={{ desktop: 3 }} … />`
-- `<Grid cols="1" tablet="2" desktop="3" … />` → `<Grid cols={{ mobile: 1, tablet: 2, desktop: 3 }} … />`
-
 ### ModalDialog `isScrollable` Prop
 
 The `isScrollable` prop will be set to `false` by default in the next major release and the ModalDialog will be made

packages/web-react/src/components/Grid/README.md

@@ -20,9 +20,7 @@ Use Grid to build multiple column layouts. This Grid works on twelve column syst
 | Name          | Type                                                         | Default | Required | Description                                                                                                |
 | ------------- | ------------------------------------------------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------- |
 | `cols`        | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | —       | ✕        | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` |
-| `desktop`     | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | —       | ✕        | [**DEPRECATED**][readme-deprecations] in favor of `cols`; Number of columns to use on desktop              |
 | `elementType` | HTML element                                                 | `div`   | ✕        | Element type to use for the Grid                                                                           |
-| `tablet`      | [`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12`]             | —       | ✕        | [**DEPRECATED**][readme-deprecations] in favor of `cols`; Number of columns to use on tablet               |
 
 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]
@@ -100,6 +98,5 @@ and [escape hatches][readme-escape-hatches].
 [grid]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Grid/README.md
 [digitalocean-span]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-span-keyword
 [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes
-[readme-deprecations]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
 [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches
 [readme-style-props]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#style-props

packages/web-react/src/components/Grid/__tests__/useGridStyleProps.test.tsx

@@ -11,7 +11,7 @@ describe('useGridStyleProps', () => {
   });
 
   it('should return responsive variants', () => {
-    const props: SpiritGridProps = { cols: 2, tablet: 4, desktop: 12 };
+    const props: SpiritGridProps = { cols: { mobile: 2, tablet: 4, desktop: 12 } };
     const { result } = renderHook(() => useGridStyleProps(props));
 
     expect(result.current.classProps).toBe('Grid Grid--cols-2 Grid--tablet--cols-4 Grid--desktop--cols-12');

packages/web-react/src/components/Grid/useGridStyleProps.ts

@@ -1,9 +1,7 @@
-/* eslint no-console: ["error", { allow: ["warn"] }] */
 import { ElementType } from 'react';
 import classNames from 'classnames';
-import { useClassNamePrefix, useDeprecationMessage } from '../../hooks';
+import { useClassNamePrefix } from '../../hooks';
 import { SpiritGridProps } from '../../types';
-import { useGridClasses } from './useGridClasses';
 
 export interface GridStyles<T> {
   /** className props */
@@ -16,27 +14,6 @@ export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyl
   const { cols, ...restProps } = props;
 
   const gridClass = useClassNamePrefix('Grid');
-  const { props: modifiedProps, classes: gridClasses } = useGridClasses(gridClass, restProps, 'cols');
-
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!restProps.tablet,
-    componentName: 'Grid',
-    propertyProps: {
-      deprecatedName: 'tablet',
-      newName: 'cols',
-    },
-  });
-
-  useDeprecationMessage({
-    method: 'property',
-    trigger: !!restProps.desktop,
-    componentName: 'Grid',
-    propertyProps: {
-      deprecatedName: 'desktop',
-      newName: 'cols',
-    },
-  });
 
   if (typeof cols === 'object' && cols !== null) {
     const classes: string[] = [];
@@ -51,10 +28,10 @@ export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyl
     };
   }
   const gridColsClass = `${gridClass}--cols-${cols}`;
-  const classes = classNames(gridClass, { [gridColsClass]: cols }, gridClasses);
+  const classes = classNames(gridClass, { [gridColsClass]: cols });
 
   return {
     classProps: classes,
-    props: modifiedProps,
+    props: restProps,
   };
 }

packages/web-react/src/types/grid.ts

@@ -35,10 +35,6 @@ export interface GridItemElementTypeProps<T extends ElementType = 'div'> {
 
 export interface GridCustomLayoutProps {
   cols?: GridColumns | GridColsBreakpoints;
-  // @deprecated Use `cols` with object instead. This prop will be removed in the next major version.
-  tablet?: GridColumns;
-  // @deprecated Use `cols` with object instead. This prop will be removed in the next major version.
-  desktop?: GridColumns;
 }
 
 export interface GridItemCustomLayoutProps {