diff --git a/cspell.json b/cspell.json index 774b2c9f64..ec1f6c76df 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", 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/UserAvatar/UserAvatar.mdx b/packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx index 17652accc8..8017b1f3f4 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..556f08ee4f 100644 --- a/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js +++ b/packages/ibm-products/src/components/UserProfileImage/UserProfileImage.docs-page.js @@ -11,6 +11,8 @@ import * as stories from './UserProfileImage.stories'; const DocsPage = () => ( ( +
+ + This component is deprecated and will be removed in the next major + version. Please migrate to {/* cspell:disable-next-line */} + + UserAvatar + + . +
+ } + > + {story()} + + + ), + ], }; const Template = (args) => { 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 cbc1b884f1..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, @@ -227,6 +228,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);