Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add deprecation notice to userprofileimage #6223

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open
5 changes: 2 additions & 3 deletions cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,10 @@
"disttags",
"dragbar",
"draggable",
"interstitialscreenviewmodule",
"draghandle",
"dragmode",
"editinplace",
"editsidepanel",
"explainability",
"emptystate",
"erroremptystate",
"explainability",
Expand Down Expand Up @@ -133,8 +131,8 @@
"Menlo",
"mordech",
"namor",
"nocheck",
"Neue",
"nocheck",
"nodataemptystate",
"noninteractive",
"nonlinearreading",
Expand Down Expand Up @@ -201,6 +199,7 @@
"typeahead",
"typeof",
"unauthorizedemptystate",
"useravatar",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"useravatar",

Let’s keep the cspell disables for useravatar inline since I think it only applies when we’re putting it in the URL. (I do realize a lot of our other components probably made it into cspell for the same reason, but it does make us a bit more prone to spelling/stylistic errors.)

"userprofileimage",
"uuidv",
"webfonts"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
19 changes: 18 additions & 1 deletion packages/ibm-products/src/components/UserAvatar/UserAvatar.mdx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anamikaanu96 thoughts on adding some docs on the codemod here? :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea we already have an issue for that, we can do codemod doc along this with PR,
"This component is deprecated and will be removed in the next major version. You can migrate this component to 'User avatar' using the below command"
npx @carbon/upgrade migrate ibm-products-update-userprofileimage --write

Original file line number Diff line number Diff line change
Expand Up @@ -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. */}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* cSpell:disable */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/* cSpell:disable */

I would just disable the next line in this case too, but you could alternatively do ...

/* cspell:words useravatar */

/**
* Copyright IBM Corp. 2024
*
Expand All @@ -11,6 +12,7 @@ import * as stories from './UserProfileImage.stories';

const DocsPage = () => (
<StoryDocsPage
deprecationNotice="This component is deprecated and will be removed in the next major version. Please migrate to [UserAvatar](?path=/docs/ibm-products-components-user-avatar-useravatar--docs#migration-from-userprofileimage)."
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
deprecationNotice="This component is deprecated and will be removed in the next major version. Please migrate to [UserAvatar](?path=/docs/ibm-products-components-user-avatar-useravatar--docs#migration-from-userprofileimage)."
// cspell:disable-next-line
deprecationNotice="This component is deprecated and will be removed in the next major version. Please migrate to [UserAvatar](?path=/docs/ibm-products-components-user-avatar-useravatar--docs#migration-from-userprofileimage)."

blocks={[
{
story: stories.Default,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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: {
Expand Down Expand Up @@ -69,6 +70,27 @@ export default {
page: DocsPage,
},
},
decorators: [
(story) => (
<div>
<Annotation
type="deprecation-notice"
text={
<div>
This component is deprecated and will be removed in the next major
version. Please migrate to{' '}
<a href="/?path=/docs/ibm-products-components-user-avatar-useravatar--docs">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<a href="/?path=/docs/ibm-products-components-user-avatar-useravatar--docs">
{/* cspell:disable-next-line */}
<a href="/?path=/docs/ibm-products-components-user-avatar-useravatar--docs">

UserAvatar
</a>
.
</div>
}
>
{story()}
</Annotation>
</div>
),
],
};

const Template = (args) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ const renderComponent = ({ ...rest } = {}) =>
render(<UserProfileImage {...{ kind, size, theme, ...rest }} />);

describe(componentName, () => {
beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => {});
});

it('should return a circle with background color', async () => {
const { container } = renderComponent({
backgroundColor: 'light-cyan',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);

Expand Down
Loading