From 2db6112bea993de27c817ca6a0f84f3b7f2b3e47 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Tue, 15 Oct 2024 13:18:24 -0500 Subject: [PATCH 1/8] chore: add deprecation notice to userprofileimage --- .../components/UserProfileImage/UserProfileImage.test.js | 4 ++++ .../src/components/UserProfileImage/UserProfileImage.tsx | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.test.js b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.test.js index b11e3ec8e3..6ec1ef51bb 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.test.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.test.js @@ -27,6 +27,10 @@ const renderComponent = ({ ...rest } = {}) => render(); describe(componentName, () => { + beforeEach(() => { + jest.spyOn(console, 'warn').mockImplementation(() => {}); + }); + it('should return a circle with background color', async () => { const { container } = renderComponent({ backgroundColor: 'light-cyan', diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx index 1df3b98199..1a7cb70f6d 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx @@ -234,6 +234,12 @@ export let UserProfileImage = React.forwardRef< } ); +/**@ts-ignore*/ +UserProfileImage.deprecated = { + level: 'warn', + details: `Please replace ${componentName} with UserAvatar`, +}; + // Return a placeholder if not released and not enabled by feature flag UserProfileImage = pkg.checkComponentEnabled(UserProfileImage, componentName); From 76f1ae29223df7d66baac752d2b1d91280065383 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Tue, 15 Oct 2024 13:59:47 -0500 Subject: [PATCH 2/8] chore: add migration docs --- .../src/components/UserAvatar/UserAvatar.mdx | 19 ++++++++++++++++++- .../UserProfileImage.docs-page.js | 6 ++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx index 1dd6366fe4..bd7587350b 100644 --- a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx +++ b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx @@ -11,7 +11,24 @@ import * as UserAvatarStories from './UserAvatar.stories'; - [Example usage](#example-usage) - [Component API](#component-api) -## Overview +## Migration from `UserProfileImage` + +If you are currently using `UserProfileImage` you can use the following guide to +migrate to the newer `UserAvatar` component. + +The following props have been updated in `UserAvatar`: + +`icon` has been replaced with `renderIcon` + +`backgroundColor` remains the same but the values have changed. To see the new +values please refer to the component API table below. + +`initials` has been replaced with `name`. Please refer to the component API +table below to see the new specifications. + +`sm` has been removed from the options for `size` + +`theme` and `kind` have been removed {/* TODO: Overview. */} diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js index 2c620d9dd1..657d0793ef 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js @@ -1,3 +1,4 @@ +/* cSpell:disable */ /** * Copyright IBM Corp. 2024 * @@ -12,6 +13,11 @@ import * as stories from './UserProfileImage.stories'; const DocsPage = () => ( Date: Wed, 13 Nov 2024 14:59:32 -0600 Subject: [PATCH 3/8] fix: add deprecation annotation --- cspell.json | 5 ++-- .../UserProfileImage-test.avt.e2e.js | 2 +- .../UserProfileImage.stories.jsx | 24 ++++++++++++++++++- 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/cspell.json b/cspell.json index 042e6ab0eb..2a23a9989e 100644 --- a/cspell.json +++ b/cspell.json @@ -99,12 +99,10 @@ "disttags", "dragbar", "draggable", - "interstitialscreenviewmodule", "draghandle", "dragmode", "editinplace", "editsidepanel", - "explainability", "emptystate", "erroremptystate", "explainability", @@ -133,8 +131,8 @@ "Menlo", "mordech", "namor", - "nocheck", "Neue", + "nocheck", "nodataemptystate", "noninteractive", "nonlinearreading", @@ -200,6 +198,7 @@ "typeahead", "typeof", "unauthorizedemptystate", + "useravatar", "userprofileimage", "uuidv", "webfonts" diff --git a/e2e/components/UserProfileImage/UserProfileImage-test.avt.e2e.js b/e2e/components/UserProfileImage/UserProfileImage-test.avt.e2e.js index 9a92a69022..6fa50f47a0 100644 --- a/e2e/components/UserProfileImage/UserProfileImage-test.avt.e2e.js +++ b/e2e/components/UserProfileImage/UserProfileImage-test.avt.e2e.js @@ -14,7 +14,7 @@ test.describe('UserProfileImage @avt', () => { test('@avt-default-state', async ({ page }) => { await visitStory(page, { component: 'UserProfileImage', - id: 'ibm-products-patterns-user-profile-images-userprofileimage--default', + id: 'deprecated-user-profile-images-userprofileimage--default', globals: { carbonTheme: 'white', }, diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx index 44c89229f4..2f53ddb454 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx @@ -9,6 +9,7 @@ import React from 'react'; import { UserProfileImage } from '.'; import image from './headshot.jpg'; // cspell:disable-line import DocsPage from './UserProfileImage.docs-page'; +import { Annotation } from '../../../../core/.storybook/Annotation'; // import styles from './_storybook.scss'; // import storybook which includes component and additional storybook styles @@ -19,7 +20,7 @@ const defaultArgs = { }; export default { - title: 'IBM Products/Patterns/User profile images/UserProfileImage', + title: 'Deprecated/User profile images/UserProfileImage', component: UserProfileImage, tags: ['autodocs'], argTypes: { @@ -69,6 +70,27 @@ export default { page: DocsPage, }, }, + decorators: [ + (story) => ( +
+ + This component is deprecated and will be removed in the next major + version. Please migrate to{' '} + + UserAvatar + + . +
+ } + > + {story()} + + + ), + ], }; const Template = (args) => { From 730fedf46b13659f0eeeb40e1c84552928b1d8fd Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 14 Nov 2024 08:29:50 -0600 Subject: [PATCH 4/8] fix: add deprecated flag --- .../src/components/UserProfileImage/UserProfileImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx index 6e2d4be83d..6802a25910 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.tsx @@ -98,6 +98,7 @@ export type UserProfileImageProps = UserProfileImageBaseProps & imageProps; /** * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background. + * @deprecated */ export let UserProfileImage = React.forwardRef< HTMLDivElement, From 3c1c43334e7f59f03d3ab3edad11a4964beebb12 Mon Sep 17 00:00:00 2001 From: David Menendez Date: Fri, 15 Nov 2024 10:37:33 -0600 Subject: [PATCH 5/8] fix: update to use deprecationNotice prop --- .../UserProfileImage/UserProfileImage.docs-page.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js index 657d0793ef..baad12fd74 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js @@ -12,12 +12,8 @@ import * as stories from './UserProfileImage.stories'; const DocsPage = () => ( Date: Wed, 4 Dec 2024 13:34:49 -0600 Subject: [PATCH 6/8] fix: url doc update --- .../components/UserProfileImage/UserProfileImage.docs-page.js | 2 +- .../components/UserProfileImage/UserProfileImage.stories.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js index baad12fd74..ba898d3a24 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js @@ -12,7 +12,7 @@ import * as stories from './UserProfileImage.stories'; const DocsPage = () => ( This component is deprecated and will be removed in the next major version. Please migrate to{' '} - + UserAvatar . From 805df30f97b4e0ff88e89ce3f75daa5e8c5ed81d Mon Sep 17 00:00:00 2001 From: David Menendez Date: Mon, 9 Dec 2024 08:00:38 -0600 Subject: [PATCH 7/8] fix: spellcheck --- cspell.json | 1 - .../components/UserProfileImage/UserProfileImage.docs-page.js | 2 +- .../components/UserProfileImage/UserProfileImage.stories.jsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/cspell.json b/cspell.json index cf69e0555e..ec1f6c76df 100644 --- a/cspell.json +++ b/cspell.json @@ -199,7 +199,6 @@ "typeahead", "typeof", "unauthorizedemptystate", - "useravatar", "userprofileimage", "uuidv", "webfonts" diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js index ba898d3a24..556f08ee4f 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js @@ -1,4 +1,3 @@ -/* cSpell:disable */ /** * Copyright IBM Corp. 2024 * @@ -12,6 +11,7 @@ import * as stories from './UserProfileImage.stories'; const DocsPage = () => ( This component is deprecated and will be removed in the next major - version. Please migrate to{' '} + version. Please migrate to {/* cspell:disable-next-line */} UserAvatar From 7497bed5674eb1f9f0dfb621771234399e447b4d Mon Sep 17 00:00:00 2001 From: David Menendez Date: Thu, 2 Jan 2025 10:59:52 -0600 Subject: [PATCH 8/8] fix: remove migration docs --- .../src/components/UserAvatar/UserAvatar.mdx | 19 ------------------- .../UserProfileImage.stories.jsx | 3 ++- 2 files changed, 2 insertions(+), 20 deletions(-) diff --git a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx index 8017b1f3f4..447c0d7c2b 100644 --- a/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx +++ b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx @@ -11,25 +11,6 @@ import * as UserAvatarStories from './UserAvatar.stories'; - [Example usage](#example-usage) - [Component API](#component-api) -## Migration from `UserProfileImage` - -If you are currently using `UserProfileImage` you can use the following guide to -migrate to the newer `UserAvatar` component. - -The following props have been updated in `UserAvatar`: - -`icon` has been replaced with `renderIcon` - -`backgroundColor` remains the same but the values have changed. To see the new -values please refer to the component API table below. - -`initials` has been replaced with `name`. Please refer to the component API -table below to see the new specifications. - -`sm` has been removed from the options for `size` - -`theme` and `kind` have been removed - {/* TODO: Overview. */} ## Note on theming diff --git a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx index f3b3df21d3..c826d8b277 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.stories.jsx @@ -78,7 +78,8 @@ export default { text={
This component is deprecated and will be removed in the next major - version. Please migrate to {/* cspell:disable-next-line */} + version. Please migrate to + {/* cspell:disable-next-line */} UserAvatar