From 74790ef4546a51125c03eda3fdae277c512af3c8 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:57:54 +0900 Subject: [PATCH 01/18] feat(alpha-icon): implement --- .../src/components/AlphaIcon/Icon.module.scss | 25 +++++++++ .../src/components/AlphaIcon/Icon.tsx | 52 +++++++++++++++++++ .../src/components/AlphaIcon/Icon.types.ts | 35 +++++++++++++ .../src/components/AlphaIcon/index.ts | 5 ++ packages/bezier-react/src/utils/style.ts | 16 ++++++ 5 files changed, 133 insertions(+) create mode 100644 packages/bezier-react/src/components/AlphaIcon/Icon.module.scss create mode 100644 packages/bezier-react/src/components/AlphaIcon/Icon.tsx create mode 100644 packages/bezier-react/src/components/AlphaIcon/Icon.types.ts create mode 100644 packages/bezier-react/src/components/AlphaIcon/index.ts diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.module.scss b/packages/bezier-react/src/components/AlphaIcon/Icon.module.scss new file mode 100644 index 0000000000..927a4fd42c --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.module.scss @@ -0,0 +1,25 @@ +@use '../../styles/mixins/dimension'; + +$size-map: ( + xxxs: 10, + xxs: 12, + xs: 16, + s: 20, + m: 24, + l: 36, + xl: 44, +); + +.Icon { + --b-icon-color: initial; + + flex: 0 0 auto; + color: var(--b-icon-color); + transition: color var(--transition-s); + + @each $size, $value in $size-map { + &:where(.size-#{$size}) { + @include dimension.square(#{$value}px); + } + } +} diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx new file mode 100644 index 0000000000..5dcbfdaacf --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx @@ -0,0 +1,52 @@ +'use client' + +import { forwardRef, memo } from 'react' +import * as React from 'react' + +import classNames from 'classnames' + +import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers' +import { alphaColorTokenCssVar } from '~/src/utils/style' + +import { type IconProps } from './Icon.types' + +import styles from './Icon.module.scss' + +export const ICON_TEST_ID = 'bezier-alpha-icon' + +export const Icon = memo( + forwardRef(function Icon(props, forwardedRef) { + const [marginProps, marginRest] = splitByMarginProps(props) + const marginStyles = getMarginStyles(marginProps) + + const { + className, + size = 'm', + color, + source: SourceElement, + style, + ...rest + } = marginRest + + return ( + + ) + }) +) diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.types.ts b/packages/bezier-react/src/components/AlphaIcon/Icon.types.ts new file mode 100644 index 0000000000..4c8d6fabe3 --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.types.ts @@ -0,0 +1,35 @@ +import { type BezierIcon } from '@channel.io/bezier-icons' + +import type { FunctionalColor, SemanticColor } from '~/src/types/alpha-tokens' +import { + type BezierComponentProps, + type MarginProps, + type SizeProps, +} from '~/src/types/props' + +export type IconSize = 'xs' | 's' | 'm' | 'l' | 'xl' + +interface IconOwnProps { + /** + * Controls which icon should be rendered. + * Inject the icon component from the `@channel.io/bezier-icons` package into this prop. + * @example + * ```tsx + * import { HeartFilledIcon } from '@channel.io/bezier-icons' + * import { Icon } from '@channel.io/bezier-react' + * + * + * ``` + */ + source: BezierIcon + /** + * Color from the design system's functional or semantic color. + */ + color?: FunctionalColor | SemanticColor +} + +export interface IconProps + extends Omit, keyof IconOwnProps>, + MarginProps, + SizeProps, + IconOwnProps {} diff --git a/packages/bezier-react/src/components/AlphaIcon/index.ts b/packages/bezier-react/src/components/AlphaIcon/index.ts new file mode 100644 index 0000000000..ba3adaa35d --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/index.ts @@ -0,0 +1,5 @@ +export { Icon as AlphaIcon } from './Icon' +export type { + IconProps as AlphaIconProps, + IconSize as AlphaIconSize, +} from './Icon.types' diff --git a/packages/bezier-react/src/utils/style.ts b/packages/bezier-react/src/utils/style.ts index 705e0f367c..d1a380f022 100644 --- a/packages/bezier-react/src/utils/style.ts +++ b/packages/bezier-react/src/utils/style.ts @@ -1,3 +1,4 @@ +import type * as AlphaTokens from '~/src/types/alpha-tokens' import { type FlattenAllToken } from '~/src/types/tokens' import { isNil, isString } from '~/src/utils/type' @@ -59,3 +60,18 @@ export function tokenCssVar( export function cssUrl(url?: string) { return isNil(url) ? undefined : `url(${url})` } + +/** + * TODO: (@ed) Implement + */ +export function alphaTokenCssVar< + PropertyName extends AlphaTokens.FlattenAllToken | undefined, +>(propertyName: PropertyName) { + return cssVar(propertyName) +} + +export function alphaColorTokenCssVar< + PropertyName extends AlphaTokens.BaseSemanticColor | undefined, +>(propertyName: PropertyName) { + return cssVar(`alpha-color-${propertyName}`) +} From abc955305d92032c449fafafa5a553d0271dee9c Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 16 Dec 2024 19:58:27 +0900 Subject: [PATCH 02/18] feat(alpha-icon): export modules --- packages/bezier-react/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bezier-react/src/index.ts b/packages/bezier-react/src/index.ts index 33a52dd5c2..42ecdc7c9d 100644 --- a/packages/bezier-react/src/index.ts +++ b/packages/bezier-react/src/index.ts @@ -12,6 +12,7 @@ export * from '~/src/components/AlphaButton' export * from '~/src/components/AlphaDialogPrimitive' export * from '~/src/components/AlphaFloatingButton' export * from '~/src/components/AlphaFloatingIconButton' +export * from '~/src/components/AlphaIcon' export * from '~/src/components/AlphaIconButton' export * from '~/src/components/AlphaLoader' export * from '~/src/components/AlphaStatusBadge' From 85458b9535cb7fae4f205d21d2f6ccd38c8bc740 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Tue, 17 Dec 2024 16:59:58 +0900 Subject: [PATCH 03/18] feat(bezier-tokens): add alpha source-size dimension tokens --- .../src/alpha/global/source-size.json | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 packages/bezier-tokens/src/alpha/global/source-size.json diff --git a/packages/bezier-tokens/src/alpha/global/source-size.json b/packages/bezier-tokens/src/alpha/global/source-size.json new file mode 100644 index 0000000000..4686275831 --- /dev/null +++ b/packages/bezier-tokens/src/alpha/global/source-size.json @@ -0,0 +1,56 @@ +{ + "source-size": { + "10": { + "value": "10px", + "type": "dimension" + }, + "12": { + "value": "12px", + "type": "dimension" + }, + "16": { + "value": "16px", + "type": "dimension" + }, + "20": { + "value": "20px", + "type": "dimension" + }, + "24": { + "value": "24px", + "type": "dimension" + }, + "30": { + "value": "30px", + "type": "dimension" + }, + "36": { + "value": "36px", + "type": "dimension" + }, + "42": { + "value": "42px", + "type": "dimension" + }, + "48": { + "value": "48px", + "type": "dimension" + }, + "60": { + "value": "60px", + "type": "dimension" + }, + "72": { + "value": "72px", + "type": "dimension" + }, + "90": { + "value": "90px", + "type": "dimension" + }, + "120": { + "value": "120px", + "type": "dimension" + } + } +} From de3980b6309e492022520e1af082132b61640eba Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Tue, 17 Dec 2024 17:00:31 +0900 Subject: [PATCH 04/18] feat: add SourceSize type --- packages/bezier-react/src/types/alpha-tokens.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/bezier-react/src/types/alpha-tokens.ts b/packages/bezier-react/src/types/alpha-tokens.ts index 4ea4938fac..5086556f58 100644 --- a/packages/bezier-react/src/types/alpha-tokens.ts +++ b/packages/bezier-react/src/types/alpha-tokens.ts @@ -77,6 +77,10 @@ export type Typography = RemovePrefix< 'alpha-typography', keyof GlobalToken['typography'] > +export type SourceSize = RemovePrefix< + 'alpha-source-size', + keyof GlobalToken['source-size'] +> export type GlobalGradient = RemovePrefix< 'alpha-gradient', keyof GlobalToken['gradient'] From c0cc4aa00025df43ef5fe58eb5908096a6749bcf Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Tue, 17 Dec 2024 17:01:45 +0900 Subject: [PATCH 05/18] fix(vscode): exclude source-size tokens from the suggestion group --- packages/bezier-vscode/src/server.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/bezier-vscode/src/server.ts b/packages/bezier-vscode/src/server.ts index 67c806412d..2a14e59761 100644 --- a/packages/bezier-vscode/src/server.ts +++ b/packages/bezier-vscode/src/server.ts @@ -90,8 +90,9 @@ const tokenGroupPatterns = { shadow: /box-shadow:/, gradient: /background:|background-image:/, 'z-index': /z-index:/, - // FIXME: delete Exclude when dimension token is removed -} satisfies Record, RegExp> + // NOTE: (@ed) `source-size` is used in the internal component + // so we don't need to suggest it +} satisfies Record, RegExp> const allCompletionItems = Object.values(completionItemsByTokenGroup).flat() From 82175b4cfdfd52962366be471a03420945b0e6a5 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Tue, 17 Dec 2024 17:08:11 +0900 Subject: [PATCH 06/18] feat: add classnames & props helpers --- .../styles/components/alpha-source-size.module.scss | 9 +++++++++ packages/bezier-react/src/types/alpha-props-helpers.ts | 10 ++++++++++ 2 files changed, 19 insertions(+) create mode 100644 packages/bezier-react/src/styles/components/alpha-source-size.module.scss create mode 100644 packages/bezier-react/src/types/alpha-props-helpers.ts diff --git a/packages/bezier-react/src/styles/components/alpha-source-size.module.scss b/packages/bezier-react/src/styles/components/alpha-source-size.module.scss new file mode 100644 index 0000000000..a348d7e159 --- /dev/null +++ b/packages/bezier-react/src/styles/components/alpha-source-size.module.scss @@ -0,0 +1,9 @@ +@use '../mixins/dimension'; + +$sizes: 10, 12, 16, 20, 24, 30, 36, 42, 48, 60, 72, 90, 120; + +@each $size in $sizes { + :where(.size-#{$size}) { + @include dimension.square(var(--alpha-source-size-#{$size})); + } +} diff --git a/packages/bezier-react/src/types/alpha-props-helpers.ts b/packages/bezier-react/src/types/alpha-props-helpers.ts new file mode 100644 index 0000000000..74b8ac9929 --- /dev/null +++ b/packages/bezier-react/src/types/alpha-props-helpers.ts @@ -0,0 +1,10 @@ +import { type SourceSize } from '~/src/types/alpha-tokens' + +// NOTE: 'typescript-plugin-css-modules' does not support path alias +/* eslint-disable no-restricted-imports */ +import sourceSizeStyles from '../styles/components/alpha-source-size.module.scss' +/* eslint-enable no-restricted-imports */ + +export function getSourceSizeClassName(size: SourceSize) { + return sourceSizeStyles[`size-${size}`] +} From e771a36f91ea19deaab5c57b74b3dd453d4df668 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Tue, 17 Dec 2024 17:09:04 +0900 Subject: [PATCH 07/18] feat(components): apply the new alpha source size style to related components --- .../components/AlphaAvatar/Avatar.module.scss | 8 -------- .../src/components/AlphaAvatar/Avatar.tsx | 5 ++++- .../src/components/AlphaAvatar/Avatar.types.ts | 13 ++----------- .../AlphaAvatarGroup/AvatarGroup.module.scss | 11 +---------- .../AlphaAvatarGroup/AvatarGroup.tsx | 12 +++++++----- .../src/components/AlphaIcon/Icon.module.scss | 18 ------------------ .../src/components/AlphaIcon/Icon.tsx | 5 +++-- .../src/components/AlphaIcon/Icon.types.ts | 8 ++++++-- 8 files changed, 23 insertions(+), 57 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss b/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss index 4280403bc0..ae7d3aeb5a 100644 --- a/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss +++ b/packages/bezier-react/src/components/AlphaAvatar/Avatar.module.scss @@ -1,7 +1,5 @@ @use '../../styles/mixins/dimension'; -$avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120; - .Avatar { position: relative; display: block; @@ -10,12 +8,6 @@ $avatar-sizes: 16, 20, 24, 30, 36, 42, 48, 72, 90, 120; pointer-events: none; opacity: var(--alpha-opacity-disabled); } - - @each $size in $avatar-sizes { - &:where(.size-#{$size}) { - @include dimension.square(#{$size}px); - } - } } .AvatarImage { diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx index e8cc6f6b4d..182b736395 100644 --- a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx +++ b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx @@ -4,6 +4,7 @@ import { forwardRef, isValidElement, useMemo } from 'react' import classNames from 'classnames' +import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers' import { isEmpty } from '~/src/utils/type' import { useAvatarContext } from '~/src/components/AlphaAvatar/AvatarSizeContext' @@ -127,11 +128,13 @@ export const Avatar = forwardRef(function Avatar( ) }, [status, size, children]) + console.log(getSourceSizeClassName(size)) + return (
* + * { margin-left: var(--b-avatar-group-spacing); } @@ -49,5 +40,5 @@ position: relative; display: flex; align-items: center; - height: var(--b-avatar-group-size); + height: 100%; } diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx index ee65fe7897..cc53dcc2ea 100644 --- a/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx +++ b/packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.tsx @@ -37,6 +37,8 @@ function getRestAvatarListCountText(count: number, max: number) { function getProperIconSize(size: AlphaAvatarSize) { return ( { + 10: 'xxs', + 12: 'xxs', 16: 'xxs', 20: 'xxs', 24: 'xs', @@ -44,6 +46,7 @@ function getProperIconSize(size: AlphaAvatarSize) { 36: 'm', 42: 'm', 48: 'l', + 60: 'l', 72: 'l', 90: 'l', 120: 'l', @@ -55,6 +58,8 @@ function getProperIconSize(size: AlphaAvatarSize) { function getProperTypoSize(size: AlphaAvatarSize) { return ( { + 10: '12', + 12: '12', 16: '12', 20: '12', 24: '13', @@ -62,6 +67,7 @@ function getProperTypoSize(size: AlphaAvatarSize) { 36: '16', 42: '18', 48: '24', + 60: '24', 72: '24', 90: '24', 120: '24', @@ -202,11 +208,7 @@ export const AvatarGroup = forwardRef(
Date: Wed, 18 Dec 2024 14:28:21 +0900 Subject: [PATCH 08/18] test: update snapshot --- .../AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap b/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap index ad96cb7008..bb8e229506 100644 --- a/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap +++ b/packages/bezier-react/src/components/AlphaAvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap @@ -2,7 +2,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
@@ -101,7 +101,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = ` exports[`AvatarGroup Ellipsis type - Icon Snapshot 1`] = `
From 09b80ce0ad2cec311a5da699b87abf1db0a557c7 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 18 Dec 2024 16:27:52 +0900 Subject: [PATCH 09/18] refactor: rm comment --- packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx index 182b736395..9a8f652435 100644 --- a/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx +++ b/packages/bezier-react/src/components/AlphaAvatar/Avatar.tsx @@ -128,8 +128,6 @@ export const Avatar = forwardRef(function Avatar( ) }, [status, size, children]) - console.log(getSourceSizeClassName(size)) - return (
Date: Wed, 18 Dec 2024 16:30:05 +0900 Subject: [PATCH 10/18] refactor: get source size classnames via scss map --- .../src/styles/components/alpha-source-size.module.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/bezier-react/src/styles/components/alpha-source-size.module.scss b/packages/bezier-react/src/styles/components/alpha-source-size.module.scss index a348d7e159..b176b500fc 100644 --- a/packages/bezier-react/src/styles/components/alpha-source-size.module.scss +++ b/packages/bezier-react/src/styles/components/alpha-source-size.module.scss @@ -1,8 +1,9 @@ +@use 'sass:map'; +@use '../../../../../node_modules/@channel.io/bezier-tokens/dist/alpha/scss' + as *; @use '../mixins/dimension'; -$sizes: 10, 12, 16, 20, 24, 30, 36, 42, 48, 60, 72, 90, 120; - -@each $size in $sizes { +@each $size in map.keys(map.get($tokens, 'global', 'source-size')) { :where(.size-#{$size}) { @include dimension.square(var(--alpha-source-size-#{$size})); } From 78961c2fed840fc14fdbc6c0e600d7942006fdc8 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 18 Dec 2024 16:52:24 +0900 Subject: [PATCH 11/18] feat: add AlphaIcon stories --- .../AlphaIcon/AlphaIcon.stories.tsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 packages/bezier-react/src/components/AlphaIcon/AlphaIcon.stories.tsx diff --git a/packages/bezier-react/src/components/AlphaIcon/AlphaIcon.stories.tsx b/packages/bezier-react/src/components/AlphaIcon/AlphaIcon.stories.tsx new file mode 100644 index 0000000000..49005e0760 --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/AlphaIcon.stories.tsx @@ -0,0 +1,66 @@ +import { + ChannelBtnFilledIcon, + type IconName, + icons, +} from '@channel.io/bezier-icons' +import { type Meta, type StoryObj } from '@storybook/react' + +import { camelCase } from '~/src/utils/string' + +import { AlphaIconButton } from '~/src/components/AlphaIconButton' +import { Stack } from '~/src/components/Stack' +import { Tooltip } from '~/src/components/Tooltip' + +import { Icon } from './Icon' +import { type IconProps } from './Icon.types' + +const meta: Meta = { + component: Icon, +} + +export default meta + +export const Primary: StoryObj = { + args: { + source: ChannelBtnFilledIcon, + size: '24', + color: 'fg-black-darker', + }, +} + +const pascalCase = (str: string) => + camelCase(str).replace(/^./, (char) => char.toUpperCase()) + +const iconNames = Object.keys(icons) as IconName[] + +export const IconGallery: StoryObj = { + render: () => ( + + {iconNames.map((iconName) => ( + + + + + + ))} + + ), +} From 0512740154ac3fc50652dba7e426b3b4c3e096ec Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 18 Dec 2024 16:57:16 +0900 Subject: [PATCH 12/18] refactor: rm test id --- packages/bezier-react/src/components/AlphaIcon/Icon.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx index 2afe875f5c..4d289cd5c0 100644 --- a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx @@ -13,8 +13,6 @@ import { type IconProps } from './Icon.types' import styles from './Icon.module.scss' -export const ICON_TEST_ID = 'bezier-alpha-icon' - export const Icon = memo( forwardRef(function Icon(props, forwardedRef) { const [marginProps, marginRest] = splitByMarginProps(props) @@ -45,7 +43,6 @@ export const Icon = memo( marginStyles.className, className )} - data-testid={ICON_TEST_ID} {...rest} /> ) From 547f3d91825ae2fb78c3652ff71e3c9e04046b94 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 18 Dec 2024 17:04:10 +0900 Subject: [PATCH 13/18] docs: add jsdoc --- .../bezier-react/src/components/AlphaIcon/Icon.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx index 4d289cd5c0..b3186a5f19 100644 --- a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx @@ -13,6 +13,19 @@ import { type IconProps } from './Icon.types' import styles from './Icon.module.scss' +/** + * `Icon` is a component that renders SVG icons from "@channel.io/bezier-icons" + * @example + * ```tsx + * import { ChannelBtnFilledIcon } from '@channel.io/bezier-icons' + * + * + * ``` + */ export const Icon = memo( forwardRef(function Icon(props, forwardedRef) { const [marginProps, marginRest] = splitByMarginProps(props) From a95ede73d438de5befe22b681c05089d06461d9a Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Wed, 18 Dec 2024 17:40:47 +0900 Subject: [PATCH 14/18] feat(icon): enhance a11y --- .../src/components/AlphaIcon/Icon.tsx | 8 ++++++++ .../src/components/AlphaIcon/Icon.types.ts | 15 +++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx index b3186a5f19..9ff8ea1ecd 100644 --- a/packages/bezier-react/src/components/AlphaIcon/Icon.tsx +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.tsx @@ -37,12 +37,20 @@ export const Icon = memo( color, source: SourceElement, style, + 'aria-hidden': ariaHidden, + 'aria-label': ariaLabel, + role = 'img', ...rest } = marginRest + const isDecorative = !ariaLabel && ariaHidden !== false + return ( Date: Wed, 18 Dec 2024 17:52:33 +0900 Subject: [PATCH 15/18] feat(icon-button): use AlphaIcon instead of Icon --- .../AlphaIconButton/IconButton.module.scss | 32 ++++++++----------- .../components/AlphaIconButton/IconButton.tsx | 19 +++++------ 2 files changed, 23 insertions(+), 28 deletions(-) diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss index c900b6d333..52b149371b 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.module.scss @@ -1,43 +1,39 @@ @use '../../styles/mixins/dimension'; -@use '../Icon/Icon.module'; - $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; .IconButton { + --b-icon-button-padding: initial; + position: relative; box-sizing: border-box; + padding: var(--b-icon-button-padding); transition: background-color var(--transition-s); /* dimension */ &:where(.size-xs) { + --b-icon-button-padding: 2px; @include dimension.square(20px); - - padding: 2px; } &:where(.size-s) { + --b-icon-button-padding: 4px; @include dimension.square(24px); - - padding: 4px; } &:where(.size-m) { + --b-icon-button-padding: 8px; @include dimension.square(36px); - - padding: 8px; } &:where(.size-l) { + --b-icon-button-padding: 12px; @include dimension.square(44px); - - padding: 12px; } &:where(.size-xl) { + --b-icon-button-padding: 15px; @include dimension.square(54px); - - padding: 15px; } /* background-color */ @@ -265,18 +261,16 @@ $chromatic-colors: 'blue', 'red', 'green', 'cobalt', 'orange', 'pink', 'purple'; & :where(.ButtonLoader) { position: absolute; - inset: 0; + top: var(--b-icon-button-padding); + left: var(--b-icon-button-padding); display: flex; align-items: center; justify-content: center; - @each $size, $value in Icon.$size-map { - &:where(.size-#{$size}) { - & :is(.Loader) { - @include dimension.square(#{$value}px); - } - } + & :is(.Loader) { + width: inherit; + height: inherit; } } } diff --git a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx index 52d076f103..4aa5a6f733 100644 --- a/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx +++ b/packages/bezier-react/src/components/AlphaIconButton/IconButton.tsx @@ -5,22 +5,24 @@ import { forwardRef } from 'react' import { isBezierIcon } from '@channel.io/bezier-icons' import classNames from 'classnames' +import { getSourceSizeClassName } from '~/src/types/alpha-props-helpers' + +import { AlphaIcon } from '~/src/components/AlphaIcon' import { type AlphaIconButtonProps } from '~/src/components/AlphaIconButton' import { AlphaLoader } from '~/src/components/AlphaLoader' import { BaseButton } from '~/src/components/BaseButton' import { type ButtonSize } from '~/src/components/Button' -import { Icon } from '~/src/components/Icon' import styles from './IconButton.module.scss' function getIconSize(size: ButtonSize) { return ( { - xs: 'xs', - s: 'xs', - m: 's', - l: 's', - xl: 'm', + xs: '16', + s: '16', + m: '20', + l: '20', + xl: '24', } as const )[size] } @@ -68,7 +70,7 @@ export const IconButton = forwardRef( )} > {isBezierIcon(content) ? ( - (
Date: Mon, 23 Dec 2024 15:20:07 +0900 Subject: [PATCH 16/18] test: add unit test --- .../src/components/AlphaIcon/Icon.test.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/bezier-react/src/components/AlphaIcon/Icon.test.tsx diff --git a/packages/bezier-react/src/components/AlphaIcon/Icon.test.tsx b/packages/bezier-react/src/components/AlphaIcon/Icon.test.tsx new file mode 100644 index 0000000000..3ff9f3d38f --- /dev/null +++ b/packages/bezier-react/src/components/AlphaIcon/Icon.test.tsx @@ -0,0 +1,43 @@ +import { ChannelBtnFilledIcon } from '@channel.io/bezier-icons' +import { render, screen } from '@testing-library/react' + +import { Icon } from './Icon' + +describe('Icon', () => { + const renderIcon = (props = {}) => + render( + + ) + + it('should render', () => { + renderIcon() + expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument() + }) + + describe('Accessibility', () => { + it('should be decorative by default', () => { + renderIcon() + expect(screen.getByRole('img', { hidden: true })).toHaveAttribute( + 'aria-hidden', + 'true' + ) + }) + + it('should be accessible with aria-label', () => { + renderIcon({ 'aria-label': 'Channel Button' }) + expect(screen.getByRole('img')).toHaveAttribute( + 'aria-label', + 'Channel Button' + ) + expect(screen.getByRole('img')).toBeInTheDocument() + }) + + it('should respect explicit aria-hidden', () => { + renderIcon({ 'aria-hidden': false }) + expect(screen.getByRole('img')).toBeInTheDocument() + }) + }) +}) From cbdccfc7e50412f87c6eae96ace475333fa0479c Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 23 Dec 2024 15:21:39 +0900 Subject: [PATCH 17/18] chore: add changeset --- .changeset/stupid-countries-yawn.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-countries-yawn.md diff --git a/.changeset/stupid-countries-yawn.md b/.changeset/stupid-countries-yawn.md new file mode 100644 index 0000000000..a169adcaba --- /dev/null +++ b/.changeset/stupid-countries-yawn.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-react': patch +--- + +Add `AlphaIcon` component From 125c175b124bf0e86f0cc2e4a8134c06382acfa1 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 23 Dec 2024 15:26:08 +0900 Subject: [PATCH 18/18] chore: add changeset --- .changeset/many-tips-float.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/many-tips-float.md diff --git a/.changeset/many-tips-float.md b/.changeset/many-tips-float.md new file mode 100644 index 0000000000..1cd0493c3c --- /dev/null +++ b/.changeset/many-tips-float.md @@ -0,0 +1,5 @@ +--- +'@channel.io/bezier-tokens': patch +--- + +Add source size tokens