typography 디자인 토큰 스토리 작성 #23
Conversation
Chromatic ReportSee Our Preivew ⚪️🔳🔲 |
| import typography from "./typography"; | ||
|
|
||
| const meta: Meta<typeof Text> = { | ||
| title: "Design Tokens/Typography", |
There was a problem hiding this comment.
- Components
- Button
- Design Tokens
- Typography디자인 토큰 / 컴포넌트 그룹으로 나누면 좋을 거 같아서 우선 디자인 토큰만 폴더로 나눠봤습니다. 괜찮나요?
|
|
||
| import typography from "./typography"; | ||
|
|
||
| const meta: Meta<typeof Text> = { |
There was a problem hiding this comment.
typography는 컴포넌트가 아니라서 docs가 없어도 괜찮을 거 같은데 어떻게 생각하시나요!
There was a problem hiding this comment.
저는 개인적으로 통일성때문에 있었으면 좋겠어요...😊
className에 적용해서 사용하면 된다는 간단한 설명 있으면 좋지 않을까요?
| // radio label을 mm-semantic-typography-h1에서 h1로 변경 | ||
| labels: Object.fromEntries( | ||
| Object.entries(typography.$semantic).map(([key, value]) => [ | ||
| value, | ||
| key, | ||
| ]), | ||
| ), | ||
| }, |
There was a problem hiding this comment.
labels이 없으면 아래처럼 options 값으로 보이는데 "mm-sementic-typography" 는 없어도 괜찮을 거 같아서 변경해봤습니다! (다시 보니 라벨 없을 때도 괜찮은 거 같네요🤔)
| 라벨 없을 때 | 라벨 있을 때 |
|---|---|
 |
 |
There was a problem hiding this comment.
ㅎㅎ 둘 다 좋아요! 보편적으로는 오른쪽이 보기 편한 것 같아요! 굿굿👍🏻
YuHyun-P
force-pushed
the
feature-#19
branch
from
90cf333 to
7bf8eba
Compare
|
|
||
| import typography from "./typography"; | ||
|
|
||
| const meta: Meta<typeof Text> = { |
| export interface TextProps<Key extends TypographySementicKey> { | ||
| /** className에 typography 토큰을 설정해 적용할 수 있습니다. */ | ||
| className: (typeof typography.$semantic)[Key]; | ||
| children: string; | ||
| } | ||
|
|
||
| export function Text<Key extends TypographySementicKey>({ |
There was a problem hiding this comment.
TextProps, Text는 스토리에서만 사용되는데 외부로 export 하는 이유는 스토리북 autodocs 때문입니다. autodocs 기능은 내부적으로 react-docgen-typescript를 사용하는데 props랑 컴포넌트를 named export 해야 적용된다네요!
closed #19
✅ 작업 내용
typography.$semantic상수 타입화📌 이슈 사항
✍ 궁금한 점