Developing the next version of foundation, component #2074
Assignees
Labels
epic
Issue consisting of multiple issues of the same purpose
Comments
sungik-choi
added
the
epic
sungik-choi
changed the title
sungik-choi
changed the title
6 tasks
sungik-choi
added a commit
that referenced
this issue
Jan 8, 2025
<!-- How to write a good PR title: - Follow [the Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ## 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 <!-- Please link to issue if one exists --> - #2074 ## Summary <!-- Please brief explanation of the changes made --> 알파 컬러 마이그레이션 중 일부입니다. ColorProps(`color`)를 사용하는 레거시 컴포넌트에서 레거시 시맨틱 컬러를 알파 컬러로 런타임 변환합니다. ## Details <!-- Please elaborate description of the changes --> 커밋별로 확인해주세요 - 레거시 컬러를 사용하는 `ColorProps`, `elevation` 유틸 클래스에서 알파 컬러를 지원 & 대체하도록 변경합니다. - bezier-tokens에서 알파 컬러 토큰의 `color` prefix가 불필요하다고 판단하여 제거했습니다. 피그마에선 functional만 color prefix가 있고, semantic은 없는 등 레거시 시맨틱 컬러와 동일하게 굳이 추가할 필요가 없겠다고 생각하여 제거했습니다. - 컬러 토큰의 값을 직접적으로 비교하는 테스트 케이스들을 제거했습니다. css variable 변환 함수 내부 구현에 기대고 있으므로 각 컴포넌트의 단위 테스트에 포함되기에 큰 의미없다고 판단했습니다. - 스냅샷 업데이트 이 PR 이후에 아래와 같은 작업이 필요합니다. - bezier-react 내부의 레거시 컬러 CSS variable을 알파 컬러로 변경 - codemod: CSS variable 변경은 필수이고, color prop은 런타임에 변환하고 있으므로 나중에 만들어도 될 듯 - stylelint: 타입스크립트 컴파일러의 한계로 유니온 타입의 특정 속성만 deprecated 처리하기가 어려워서 레거시 토큰의 warning 발생은 린트의 힘을 빌려야할 듯 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes 알파 컬러로 변환된 일부 색상의 값이 변경됩니다. (Chromatic UI Review 확인) ## References <!-- Please list any other resources or points the reviewer should be aware of --> 초기에 토큰의 이름을 동일하게 두고, CSS layer를 `tokens`, `alpha-tokens` 두개로 분리하고 알파 토큰에 더 우선순위를 두어 맵핑이 필요한 요소 말고는 최대한 변경이 적게 동일한 CSS variable 이름을 유지하는 방향을 생각했습니다(alpha-*** 가 붙지 않음). 테스트해보니 레거시 시맨틱 네임이 CSS layer의 우선순위로 인해 팔레트(e.g. `blue-200`) 값을 참조할 때 우선순위로 인해 tokens 레이어가 아닌 alpha-tokens 레이어를 참조하는 문제가 있었습니다. 레거시 컬러를 사용했을 땐 레거시 컬러대로 잘 보여져야하는게 올바른 동작이라고 판단해서 이 방식은 기각했습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
Bezier 디자인 시스템 v2의 Foundation과 Component를 개발합니다.
Description
Tasks
Tasks
References
The text was updated successfully, but these errors were encountered: