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.

Sign up for GitHub

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

Enhancement Text component to support new typography token #1820

Merged
merged 21 commits into from
Dec 19, 2023
Merged

Enhancement Text component to support new typography token #1820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
ba3e3c5
feat(text): migrate to scss
sungik-choi Dec 15, 2023
b17fb3f
refactor(token): rm unused typography type
sungik-choi Dec 15, 2023
59dfa47
fix(text): fix nested style & storybook preview style
sungik-choi Dec 15, 2023
aadfc03
test(text): update story
sungik-choi Dec 15, 2023
5328f1a
fix(text): add missing style
sungik-choi Dec 15, 2023
6603f64
refactor(text.types): rm duplicated element type
sungik-choi Dec 18, 2023
66bc2df
docs(box/text): add jsdoc
sungik-choi Dec 18, 2023
ac93611
chore(changeset): add changeset
sungik-choi Dec 18, 2023
4826717
style(text): rm empty line
sungik-choi Dec 18, 2023
c884d7c
feat(text): add align prop
sungik-choi Dec 18, 2023
d003509
Merge branch 'alpha' into feat/text
sungik-choi Dec 19, 2023
b941935
refactor(banner): fix typo
sungik-choi Dec 19, 2023
bb1df7e
docs(text): fix jsdoc
sungik-choi Dec 19, 2023
bdb2c03
test(text): update test cases
sungik-choi Dec 19, 2023
067a7be
feat(foundation): correctly narrowing SemanticNames type
sungik-choi Dec 19, 2023
f504477
refactor: migrating typo changes in text props
sungik-choi Dec 19, 2023
a8bd96f
feat: migrating type changes in text props
sungik-choi Dec 19, 2023
51a7a10
test: update snapshot
sungik-choi Dec 19, 2023
e8a6f87
test: fix Text-related test cases
sungik-choi Dec 19, 2023
ce5c3d4
refactor(bezier-figma-plugin): migrate typo
sungik-choi Dec 19, 2023
f7e6992
Merge branch 'alpha' into feat/text
sungik-choi Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions .changeset/modern-houses-give.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
"@channel.io/bezier-react": major
---

`typo` prop of `Text` component is changed to a string literal. Please migrate it like below. With the removal of the styled-component from bezier-react, CSS interpolation is no longer available.

```tsx
/* AS-IS */
<Text typo={Typography.Size11} />
<Text typo={Typography.Size12} />
<Text typo={Typography.Size13} />
<Text typo={Typography.Size14} />
<Text typo={Typography.Size15} />
<Text typo={Typography.Size16} />
<Text typo={Typography.Size17} />
<Text typo={Typography.Size18} />
<Text typo={Typography.Size22} />
<Text typo={Typography.Size24} />
<Text typo={Typography.Size30} />
<Text typo={Typography.Size36} />

/* TO-BE */
<Text typo="11" />
<Text typo="12" />
<Text typo="13" />
<Text typo="14" />
<Text typo="15" />
<Text typo="16" />
<Text typo="17" />
<Text typo="18" />
<Text typo="22" />
<Text typo="24" />
<Text typo="30" />
<Text typo="36" />
```
11 changes: 11 additions & 0 deletions .changeset/three-mirrors-hunt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@channel.io/bezier-react": minor
---

Add `align` prop to `Text` component. This prop is used to set horizontal alignment of text.

```tsx
<Text align="left" />
<Text align="center" />
<Text align="right" />
```
3 changes: 1 addition & 2 deletions packages/bezier-figma-plugin/src/ui/components/ExtractSuccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
ButtonStyleVariant,
StackItem,
Text,
Typography,
VStack,
} from '@channel.io/bezier-react'

Expand All @@ -27,7 +26,7 @@ function ExtractSuccess() {
return (
<VStack align="center" justify="center" spacing={2}>
<StackItem>
<Text typo={Typography.Size18}>아이콘 추출 성공!</Text>
<Text typo="18">아이콘 추출 성공!</Text>
</StackItem>
<StackItem>
{ /* @ts-ignore */ }
Expand Down
2 changes: 0 additions & 2 deletions packages/bezier-react/.storybook/WithFoundationProvider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import { AppProvider } from '~/src/providers/AppProvider'
import { InvertedThemeProvider } from '~/src/providers/ThemeProvider'
import { Text } from '~/src/components/Text'

import '~/src/styles/index.scss'

const FoundationKeyword = {
Light: 'light',
Dark: 'dark',
Expand Down
2 changes: 2 additions & 0 deletions packages/bezier-react/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { Preview } from "@storybook/react"

import '~/src/styles/index.scss'

Comment on lines +3 to +4
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Storybook에서 스타일시트가 잘못 적용되고 있어서, cascade layer의 순서가 뒤섞이는 문제가 있었습니다. style import를 Preview 파일로 이동하니 해결됐습니다.

import { WithFoundationProvider } from './WithFoundationProvider'

const preview: Preview = {
Expand Down
2 changes: 0 additions & 2 deletions packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ export const AvatarEllipsisCount = styled(Text)`
align-items: center;
height: var(--b-avatar-group-size);
color: var(--txt-black-dark);

${({ interpolation }) => interpolation}
`

export const AvatarGroup = styled.div`
Expand Down
22 changes: 8 additions & 14 deletions packages/bezier-react/src/components/Avatars/AvatarGroup/AvatarGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import React, {

import { MoreIcon } from '@channel.io/bezier-icons'

import { Typography } from '~/src/foundation'

import { isLastIndex } from '~/src/utils/array'
import { noop } from '~/src/utils/function'
import { px } from '~/src/utils/style'
Expand Down Expand Up @@ -58,14 +56,14 @@ function getProperIconSize(avatarSize: AvatarSize) {
// TODO: Not specified
function getProperTypoSize(avatarSize: AvatarSize) {
return {
[AvatarSize.Size20]: Typography.Size12,
[AvatarSize.Size24]: Typography.Size13,
[AvatarSize.Size30]: Typography.Size15,
[AvatarSize.Size36]: Typography.Size16,
[AvatarSize.Size42]: Typography.Size18,
[AvatarSize.Size48]: Typography.Size24,
[AvatarSize.Size90]: Typography.Size24,
[AvatarSize.Size120]: Typography.Size24,
[AvatarSize.Size20]: '12',
[AvatarSize.Size24]: '13',
[AvatarSize.Size30]: '15',
[AvatarSize.Size36]: '16',
[AvatarSize.Size42]: '18',
[AvatarSize.Size48]: '24',
[AvatarSize.Size90]: '24',
[AvatarSize.Size120]: '24',
}[avatarSize]
}

Expand All @@ -90,7 +88,6 @@ export const AvatarGroup = forwardRef(function AvatarGroup({
ellipsisType = AvatarGroupEllipsisType.Icon,
onMouseEnterEllipsis = noop,
onMouseLeaveEllipsis = noop,
ellipsisInterpolation,
style,
className,
children,
Expand Down Expand Up @@ -139,7 +136,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
<Styled.AvatarEllipsisIconWrapper
data-testid={AVATAR_GROUP_ELLIPSIS_ICON_TEST_ID}
key="ellipsis"
interpolation={ellipsisInterpolation}
onMouseEnter={onMouseEnterEllipsis}
onMouseLeave={onMouseLeaveEllipsis}
>
Expand Down Expand Up @@ -172,7 +168,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
>
<Styled.AvatarEllipsisCount
forwardedAs="span"
interpolation={ellipsisInterpolation}
typo={getProperTypoSize(size)}
>
{ getRestAvatarListCountText(avatarListCount, max) }
Expand All @@ -190,7 +185,6 @@ forwardedRef: React.Ref<HTMLDivElement>,
children,
spacing,
ellipsisType,
ellipsisInterpolation,
avatarListCount,
renderAvatarElement,
onMouseEnterEllipsis,
Expand Down
22 changes: 3 additions & 19 deletions ...s/bezier-react/src/components/Avatars/AvatarGroup/__snapshots__/AvatarGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
.c5 {
font-size: 1.3rem;
line-height: 1.8rem;
margin: 0px 0px 0px 0px;
font-style: normal;
font-weight: normal;
color: inherit;
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transition-timing-function: cubic-bezier(.3,0,0,1);
transition-timing-function: cubic-bezier(.3,0,0,1);
-webkit-transition-duration: 150ms;
transition-duration: 150ms;
-webkit-transition-property: color;
transition-property: color;
}

.c2 {
--b-alpha-smooth-corners-box-border-radius: 0;
--b-alpha-smooth-corners-box-shadow-offset-x: 0;
Expand Down Expand Up @@ -124,7 +107,7 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
--b-avatar-computed-status-gap: calc(var(--b-avatar-status-gap) + (2 * var(--b-alpha-smooth-corners-box-shadow-spread-radius)));
}

.c6 {
.c5 {
position: relative;
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -263,8 +246,9 @@ exports[`AvatarGroup Ellipsis type - Count Snapshot 1`] = `
style="--b-avatar-group-ellipsis-mr: 5px; --b-avatar-group-ellipsis-ml: 4px;"
>
<span
class="c5 c6"
class="margin Text typo-13 c5"
data-testid="bezier-react-text"
foundation="[object Object]"
>
+1
</span>
Expand Down
2 changes: 0 additions & 2 deletions packages/bezier-react/src/components/Banner/Banner.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,6 @@ describe('Banner >', () => {

expect(bannerLink.tagName).toBe('A')
expect(bannerLink.children.item(0)).toHaveStyle('text-decoration: underline;')
expect(bannerLink.children.item(0)).toHaveStyle('font-weight: bold;')
expect(bannerLink.children.item(0)).toHaveStyle('font-size: 1.4rem;')
})

it('renders action button if actionIcon is correct value', () => {
Expand Down
6 changes: 2 additions & 4 deletions packages/bezier-react/src/components/Banner/Banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { forwardRef } from 'react'

import { isBezierIcon } from '@channel.io/bezier-icons'

import { Typography } from '~/src/foundation'

import { warn } from '~/src/utils/assert'
import {
isNil,
Expand Down Expand Up @@ -62,7 +60,7 @@ function Link({
return renderLink({
content: (
<Styled.Link
typo={Typography.Size14}
typo="14"
color={TEXT_COLORS[variant]}
bold
>
Expand Down Expand Up @@ -130,7 +128,7 @@ export const Banner = forwardRef(function Banner(
<Styled.ContentWrapper variant={variant}>
{ isString(content) ? (
<Text
typo={Typography.Size14}
typo="14"
color={TEXT_COLORS[variant]}
>
{ content }
Expand Down
3 changes: 3 additions & 0 deletions packages/bezier-react/src/components/Box/Box.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ type Display = 'block' | 'inline' | 'inline-block'
type BoxElementType = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li'

interface BoxOwnProps {
/**
* Display type of the box.
*/
display?: Display
}

Expand Down
31 changes: 14 additions & 17 deletions packages/bezier-react/src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,7 @@ import {
type StoryObj,
} from '@storybook/react'

import {
Typography,
styled,
} from '~/src/foundation'
import { styled } from '~/src/foundation'

import { Avatar } from '~/src/components/Avatars/Avatar'
import { ButtonGroup } from '~/src/components/ButtonGroup'
Expand Down Expand Up @@ -389,7 +386,7 @@ export const UsageVariousContentsCustom: StoryObj<{}> = {
text="New messages"
rightContent={(
<AlertBadge>
<Text typo={Typography.Size13} color="txt-white-normal">
<Text typo="13" color="txt-white-normal">
1
</Text>
</AlertBadge>
Expand Down Expand Up @@ -468,7 +465,7 @@ const OpenDropdownButton = () => {
marginY={6}
>
<Dropdown>
<Text typo={Typography.Size13} marginLeft={6}>Dropdown content</Text>
<Text typo="13" ml={6}>Dropdown content</Text>
</Dropdown>
</Overlay>
</div>
Expand All @@ -493,7 +490,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Blue</Text>
<Text typo="13">Blue</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -507,7 +504,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Red</Text>
<Text typo="13">Red</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -521,7 +518,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Green</Text>
<Text typo="13">Green</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -535,7 +532,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Cobalt</Text>
<Text typo="13">Cobalt</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -549,7 +546,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Orange</Text>
<Text typo="13">Orange</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -563,7 +560,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Pink</Text>
<Text typo="13">Pink</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -577,7 +574,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Purple</Text>
<Text typo="13">Purple</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -591,7 +588,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Monochrome Dark</Text>
<Text typo="13">Monochrome Dark</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -605,7 +602,7 @@ export const VariantsColor: StoryObj<{}> = {
<StackItem>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>Monochrome Light</Text>
<Text typo="13">Monochrome Light</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -629,7 +626,7 @@ export const VariantsStyle: StoryObj<{}> = {
<StackItem key={styleVariant}>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>{ key }</Text>
<Text typo="13">{ key }</Text>
</StackItem>
<StackItem>
<Button
Expand All @@ -656,7 +653,7 @@ export const VariantsSize: StoryObj<{}> = {
<StackItem key={key}>
<HStack spacing={24} align="center">
<StackItem size={80}>
<Text typo={Typography.Size13}>{ key }</Text>
<Text typo="13">{ key }</Text>
</StackItem>
<StackItem>
<Button
Expand Down
Loading