BREAKING CHANGE(web-react): Remove size prop from Icon in favor o…

…f `boxSize` #DS-647 ## Migration Guide Instead of the `size` prop, use `boxSize` in `Icon` component. - `<Icon size="333" …>` → `<Icon boxSize="333" …>` Please refer back to this guide or reach out to our team if you encounter any issues during migration.
lmc-eu · Jul 21, 2023 · f19f8bb · f19f8bb
1 parent bef2d7a
commit f19f8bb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 32 deletions.
diff --git a/packages/web-react/src/components/Icon/Icon.tsx b/packages/web-react/src/components/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useDeprecationMessage, useIcon, useStyleProps } from '../../hooks';
+import { useIcon, useStyleProps } from '../../hooks';
 import { IconProps } from '../../types';
 
 const defaultProps = {
@@ -8,28 +8,10 @@ const defaultProps = {
 };
 
 export const Icon = (props: IconProps): JSX.Element => {
- const {
- boxSize,
- name,
- title,
- /** @deprecated Will be removed in the next major version. */
- size,
- ariaHidden,
- ...restProps
- } = props;
+ const { boxSize, name, title, ariaHidden, ...restProps } = props;
  let icon = useIcon(name);
  const { styleProps, props: otherProps } = useStyleProps(restProps);
 
- useDeprecationMessage({
- method: 'property',
- trigger: !!size,
- componentName: 'Icon',
- propertyProps: {
- deprecatedName: 'size',
- newName: 'boxSize',
- },
- });
-
  if (title) {
  icon = `<title>${title}</title>${icon}`;
  }
@@ -40,8 +22,8 @@ export const Icon = (props: IconProps): JSX.Element => {
  <svg
  viewBox="0 0 24 24"
  fill="none"
- width={size || boxSize}
- height={size || boxSize}
+ width={boxSize}
+ height={boxSize}
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{ __html: icon }}
  aria-hidden={ariaHidden}

diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md
@@ -16,13 +16,10 @@ import icons from '@lmc-eu/spirit-icons/icons';
 
 ## Available props
 
-| Name | Type | Required | Description |
-| --------- | -------- | -------- | ---------------------------------------------------------------------------------- |
-| `boxSize` | `number` | no | Size of the icon, default `24` |
-| `name` | `string` | yes | Name of the icon |
-| `size` | `number` | no | [**DEPRECATED**][deprecated] in favor of `boxSize`; Size of the icon, default `24` |
-| `title` | `string` | no | Title of the icon |
+| Name | Type | Required | Description |
+| --------- | -------- | -------- | ------------------------------ |
+| `boxSize` | `number` | no | Size of the icon, default `24` |
+| `name` | `string` | yes | Name of the icon |
+| `title` | `string` | no | Title of the icon |
 
 For more details about Icons see [Spirit Icons](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/icons/README.md) package.
-
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations
diff --git a/packages/web-react/src/types/icon.ts b/packages/web-react/src/types/icon.ts
@@ -8,8 +8,6 @@ export interface IconProps extends StyleProps, ChildrenProps, React.SVGAttribute
  boxSize?: number;
  /** Name of the icon */
  name: string;
- /** Deprecated: Will be removed in the next major version; Size of the icon */
- size?: number;
  /** Title of the icon */
  title?: string;
 }