From da4e5982d3b97e7852ab399363aca839b01345d1 Mon Sep 17 00:00:00 2001 From: "Yang Wooseong (Andrew)" Date: Thu, 1 Aug 2024 18:09:26 +0900 Subject: [PATCH] Deprecate `imageUrl` props in `Emoji` component (#2400) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Self Checklist - [x] I wrote a PR title in **English** and added an appropriate **label** to the PR. - [x] I wrote the commit message in **English** and to follow [**the Conventional Commits specification**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) about the changes that needed to be released. (or didn't have to) - [x] I wrote or updated **documentation** related to the changes. (or didn't have to) - [x] I wrote or updated **tests** related to the changes. (or didn't have to) - [x] I tested the changes in various browsers. (or didn't have to) - Windows: Chrome, Edge, (Optional) Firefox - macOS: Chrome, Edge, Safari, (Optional) Firefox ## Related Issue - resolves #2335 ## Summary - `Emoji` 컴포넌트에서 url 을 직접 받는 로직을 제거하고 컴포넌트 내부에서 `name`, `size` 속성으로부터 url 을 만드는 것으로 변경합니다. ## Details - breaking change를 발생시키지 않기 위해 imageUrl 만 optional 로 변경하고 `name` 타입을 아이콘 이름의 union type(e.g. 'smiley' | 'grinning' | ... )으로 좁히지 않았습니다. - 채널톡 데스크에서 자이언트 이모지를 보여주는 경우는 size=60 일 때이고, 이때는 asset size가 160인 url 을 넣어주고 있습니다. 이 기조에 맞춰서 size >= 60일 떄는 asset size 160으로 url 을 만들었습니다. ### Breaking change? (Yes/No) - No ## References - None --- .changeset/dry-icons-search.md | 5 +++++ .../src/components/Emoji/Emoji.stories.tsx | 20 +++++-------------- .../src/components/Emoji/Emoji.test.tsx | 4 +--- .../src/components/Emoji/Emoji.tsx | 12 +++++++++-- .../src/components/Emoji/Emoji.types.ts | 9 ++++++++- 5 files changed, 29 insertions(+), 21 deletions(-) create mode 100644 .changeset/dry-icons-search.md diff --git a/.changeset/dry-icons-search.md b/.changeset/dry-icons-search.md new file mode 100644 index 0000000000..f52f0a9394 --- /dev/null +++ b/.changeset/dry-icons-search.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-react': patch +--- + +Deprecate `imageUrl` props of `Emoji` component. diff --git a/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx b/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx index 2ff235da46..e81bfaea4b 100644 --- a/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx +++ b/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx @@ -3,25 +3,15 @@ import { type Meta, type StoryObj } from '@storybook/react' import { Emoji } from './Emoji' import { type EmojiProps } from './Emoji.types' -const MOCK_EMOJI_URL = - 'https://cf.exp.channel.io/asset/emoji/images/80/blush.png' - -const meta: Meta = { +const meta = { component: Emoji, - argTypes: { - imageUrl: { - control: { - type: 'text', - }, - }, - }, -} +} satisfies Meta export default meta -export const Primary: StoryObj = { +export const Primary = { args: { size: '24', - imageUrl: MOCK_EMOJI_URL, + name: 'blush', }, -} +} satisfies StoryObj diff --git a/packages/bezier-react/src/components/Emoji/Emoji.test.tsx b/packages/bezier-react/src/components/Emoji/Emoji.test.tsx index 3659b5f3ea..980fb0e94b 100644 --- a/packages/bezier-react/src/components/Emoji/Emoji.test.tsx +++ b/packages/bezier-react/src/components/Emoji/Emoji.test.tsx @@ -5,10 +5,8 @@ import { render } from '~/src/utils/test' import { EMOJI_TEST_ID, Emoji } from './Emoji' import { type EmojiProps } from './Emoji.types' -const MOCK_EMOJI_URL = 'https://cf.exp.channel.io/asset/emoji/images/80/a.png' - describe('Emoji Test >', () => { - const defaultProps: EmojiProps = { imageUrl: MOCK_EMOJI_URL, name: 'a' } + const defaultProps: EmojiProps = { size: '24', name: 'a' } const renderComponent = (props?: Partial) => render( diff --git a/packages/bezier-react/src/components/Emoji/Emoji.tsx b/packages/bezier-react/src/components/Emoji/Emoji.tsx index 08a5371f90..4ac7e8d1c9 100644 --- a/packages/bezier-react/src/components/Emoji/Emoji.tsx +++ b/packages/bezier-react/src/components/Emoji/Emoji.tsx @@ -2,6 +2,7 @@ import React, { type CSSProperties, forwardRef } from 'react' import classNames from 'classnames' +import { isDev } from '~/src/utils/assert' import { cssUrl } from '~/src/utils/style' import { type EmojiProps } from './Emoji.types' @@ -10,13 +11,16 @@ import styles from './Emoji.module.scss' export const EMOJI_TEST_ID = 'bezier-emoji' +const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => { + return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${name}.png` +} + /** * `Emoji` is a component for representing emoji with variant size. * @example * ```tsx * * ``` @@ -25,6 +29,8 @@ export const Emoji = forwardRef(function Emoji( { style, imageUrl, className, name, size = '24', ...rest }, forwardedRef ) { + const assetSize = Number(size) >= 60 ? '160' : '80' + return (
(function Emoji( aria-description={name} style={ { - '--b-emoji-background-image': cssUrl(imageUrl), + '--b-emoji-background-image': cssUrl( + imageUrl ?? getEmojiUrl(name, assetSize) + ), ...style, } as CSSProperties } diff --git a/packages/bezier-react/src/components/Emoji/Emoji.types.ts b/packages/bezier-react/src/components/Emoji/Emoji.types.ts index 73dc477109..9333755359 100644 --- a/packages/bezier-react/src/components/Emoji/Emoji.types.ts +++ b/packages/bezier-react/src/components/Emoji/Emoji.types.ts @@ -14,8 +14,15 @@ export type EmojiSize = | '120' interface EmojiOwnProps { + /** + * Name of the emoji. e.g. 'grinning', 'smiley', etc. + */ name: string - imageUrl: string + /** + * @deprecated + * `imageUrl` is created in the component and will be removed in the next major version. + */ + imageUrl?: string } export interface EmojiProps