Migrating component styling to Sass-based #1733
Assignees
Labels
epic
Issue consisting of multiple issues of the same purpose
priority:A
Issue that important and urgent
Comments
sungik-choi
added
the
epic
sungik-choi
changed the title
This was referenced Dec 5, 2023
This was referenced Dec 15, 2023
sungik-choi
added a commit
that referenced
this issue
Dec 15, 2023
<!-- 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 ## Summary <!-- Please brief explanation of the changes made --> 스토리북에 `AlphaAppProvider` 를 적용합니다. ## Details <!-- Please elaborate description of the changes --> - CSS variable 테스트를 할 수 있도록 환경을 구축합니다. #1733 마이그레이션이 완료되면, BezierProvider를 제거할 수 있습니다. - 중복되거나 불필요한 글로벌 스타일, Provider를 제거했습니다. <img width="926" alt="image" src="https://github.com/channel-io/bezier-react/assets/58209009/d52ff885-768b-4e0e-a861-f58d1ce14a37"> 적용된 모습 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> No
Closed
6 tasks
sungik-choi
added a commit
that referenced
this issue
Dec 19, 2023
<!-- 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 --> - Fixes #1833 - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `Text` 컴포넌트의 스타일링을 scss 기반으로 변경 - typo의 타입을 CSS interpolation에서 string literal로 변경 ## Details <!-- Please elaborate description of the changes --> - `typo` : CSS interpolation에서 string literal로 변경합니다. - `align` 속성을 추가합니다. text-align 속성을 지원하기 위한 속성입니다. - `TextElementType` : 라이브러리들을 참고하여 최대한 broad하게 잡았습니다. `div` 타입은 블록 요소로 사용하고 싶을 때, 채널 데스크 애플리케이션에서 자주 사용하던 방법이라 포함했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes ## References <!-- Please list any other resources or points the reviewer should be aware of --> - https://polaris.shopify.com/components/typography/text - https://www.radix-ui.com/themes/docs/components/text
This was referenced Dec 26, 2023
yangwooseong
added a commit
that referenced
this issue
Dec 28, 2023
<!-- 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 --> <!-- Fixes #0000 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `Divider` 컴포넌트의 스타일링을 styled-components 에서 scss 으로 변경합니다. - 기존의 조건부 스타일링을 scss기반의 nested한 형태로 구현합니다 ## Details <!-- Please elaborate description of the changes --> - `Divider` 컴포넌트의 인터페이스에 `MarginProps`가 추가됩니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - None
yangwooseong
added a commit
that referenced
this issue
Dec 28, 2023
<!-- 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 --> <!-- Fixes #0000 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `Icon` 컴포넌트를 scss로 마이그레이션하고 `MarginProps`를 추가합니다. ## Details <!-- Please elaborate description of the changes --> - `IconSize`를 literal type으로 변경하는 작업은 하지 않았습니다. 변경사항이 꽤 많아보여서, 여러 컴포넌트에 대해 일괄적으로 타입을 변경하고 codemod를 돌리는 게 나아보입니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - Yes ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1733
This was referenced Jan 2, 2024
yangwooseong
added a commit
that referenced
this issue
Jan 3, 2024
<!-- 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 --> <!-- Fixes #0000 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `Status` 컴포넌트를 scss 로 마이그레이션 합니다. 인터페이스에 `MarginProps` 를 추가해도 무방할듯 하여 추가했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No
yangwooseong
added a commit
that referenced
this issue
Jan 3, 2024
<!-- 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 --> <!-- Fixes #0000 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `Tooltip`, `Help` 컴포넌트를 scss 로 마이그레이션합니다. ## Details <!-- Please elaborate description of the changes --> - `Tooltip` 은 이미 offset 속성으로 트리거 대상과 얼마나 떨어질지를 지정할 수 있어서 `MarginProps` 를 지원하지는 않았습니다. - ellipsis 를 scss mixin 으로 변경합니다. line height 의 디자인 토큰에 rem 단위까지 들어가 있어서 mixin 에서 rem 을 제거합니다. - ~~`Icon` 컴포넌트가 scss 로 변환되기 전이라 관련 스타일링이 제대로 적용되지 않았습니다. color 가 inverted color 로 안되고 margin 이 제대로 적용되기 전입니다.~~ -> #1863 rebase 후 스타일링 확인했습니다 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - No ## References <!-- Please list any other resources or points the reviewer should be aware of --> - #1733
sungik-choi
added a commit
that referenced
this issue
Jan 18, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `CheckableAvatar` component with scss ## Details <!-- Please elaborate description of the changes --> - Checkbox PR base - as 속성을 제거합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
sungik-choi
added a commit
that referenced
this issue
Jan 18, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `RadioGroup` component with scss ## Details <!-- Please elaborate description of the changes --> - Checkbox PR base - Radio의 as, interpolation 속성 지원 제거 - 파일을 RadioGroup.tsx 하나로 병합 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
This was referenced Jan 18, 2024
6 tasks
sungik-choi
added a commit
that referenced
this issue
Jan 19, 2024
<!-- 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 --> - #1733 - Fixes #1117 - Fixes #1314 ## Summary <!-- Please brief explanation of the changes made --> Migrate `ListItem` component with scss ## Details <!-- Please elaborate description of the changes --> - 컴포넌트 인터페이스를 다른 컴포넌트보다 비교적 많이 변경했습니다. 레거시 컴포넌트이며, 사용하지 않는 속성들이 너무나 많고 현재 다른 베지어 컴포넌트의 사용 방식과 일관성이 맞지 않는 부분이 있었습니다. - `interpolation`, `name`, `optionKey`, `leftIcon` 속성을 제외하고 채널 데스크 애플리케이션 기준 사용처는 없는 것으로 보입니다. - `name`, `optionKey` 는 사실상 무의미한 속성이라, 제거해도 동작은 동일합니다. - `leftIcon` 속성은 Button 컴포넌트 등과 동일하게 `leftContent` 속성에서 `isBezierIcon` 여부를 체크하도록 변경했습니다. 라이브러리 사용자가 일관적으로 컴포넌트를 사용할 수 있도록 하는 변경입니다. - `useAdjacentElementBorderRadius.ts` : 이제 `:has` 선택자로 해당 기능 구현이 가능해짐에따라 제거했습니다. - #1117 을 함께 수정합니다. Breaking change 있는 김에 포함하고자 했습니다. - XL 사이즈의 잘못된 타이포 사이즈를 수정합니다. **기타** - `ActivatableProps` 에서 `active` 속성을 제외하고 제거합니다. 사용하지도 않고, 불필요한 속성이 너무 많았습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes **Breaking Changes: Property updates in `ListItem` component** - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `iconStyle`, `iconClassName`, `iconInterpolation`, `contentStyle`, `contentClassName` and `contentInterpolation`. This decision was made to reduce excessive flexibility in the interface. - No longer support `leftIcon` property. Removed for consistency with other component interfaces. Replace it to `leftContent`. - No longer support `name` property. The second argument (name) of `onClick` is also removed. If you need an identifier, combine functions outside of the component. - No longer support `hide`, `nested`, `optionKey` and `disableIconActive` property. Removed because it is a legacy property. Replace `hide` property with conditional rendering. - The size changes according to the `ListItemSize`. This is a change to unify the design. Please change it like below. - `ListItemSize.S` -> `ListItemSize.XS` - `ListItemSize.M` -> `ListItemSize.S` - `ListItemSize.L` -> `ListItemSize.M` - `ListItemSize.XL` -> `ListItemSize.L` **Minor Changes:** - Fix incorrect text size for `XL`(now `L`) size. ## References <!-- Please list any other resources or points the reviewer should be aware of -->
6 tasks
yangwooseong
added a commit
that referenced
this issue
Jan 22, 2024
<!-- 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 --> <!-- Fixes #0000 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> - `FormControl` 컴포넌트를 scss 로 마이그레이션 합니다. ## Details <!-- Please elaborate description of the changes --> - `FormFieldSize`를 다른 컴포넌트와 공유하게 되면 스타일 코드를 className으로 변환해야 합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> - Yes ## References <!-- Please list any other resources or points the reviewer should be aware of -->
sungik-choi
added a commit
that referenced
this issue
Jan 22, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `OutlineItem` component with scss ## Details <!-- Please elaborate description of the changes --> OutlineItem을 전반적으로 재구현하였습니다. 체인지로그에도 적었듯, OutlineItem은 그 자체로 트리 뷰를 그리기 위한 상태를 포함하고 있는 컴포넌트였습니다. 하지만, 주된 사용처인 채널 데스크 및 다른 채널의 사용례를 보았을 때 **의도한대로 사용되는 곳은 단 한군데도 없었습니다..!** Nested한 구조를 전부 사용처에서 직접 구현하여 사용하고 있었습니다. **모든** 사용처에서 children 없이, `disableChevron` 를 true로 두고 사용하고 있었어요. 대부분의 속성을 제거해도 타입 체크가 정상적으로 통과하는 것을 확인했습니다... 😂 Chevron 자체를 제거하는 것을 고민하다, 피그마 스펙상 OutlineItem이 Chevron을 가지고 있기는 해서 open 로직(children의 조건부 렌더링 + Chevron 아이콘 변경)과 indent 로직은 남겨두었습니다. 이마저 제거하면 정체성(?)을 아예 잃어버릴 거 같아서, 흔적을 남겨놓았다 정도로 생각해주시면 될 거 같습니다. 나머지 불필요하다고 판단한 속성 및 로직은 전부 제거했습니다. **데스크 마이그레이션 시에는 아래와 같은 점을 신경써야합니다.** - `leftIcon` -> `leftContent` (변경 이유는 #1929를 참고해주세요) - `paddingLeft` 속성을 제거했습니다. 데스크의 경우, 팀챗(4)을 제외하고 **모든 케이스에 `paddingLeft: 6` 속성이 있는 걸 확인할 수 있었습니다.** 피그마를 확인해보니 좌측 패딩 6px이 기본적으로 있었기에 이를 기본값으로 둡니다. 커스텀하고 싶다면, 스타일 오버라이드를 해야합니다. 그 외 자잘하게 chevron 아이콘 색상을 피그마와 동일하게 darker -> dark 로 변경했습니다. (데스크에선 사용하지 않기 때문에, 영향은 없습니다..) ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes **Breaking Changes: Reorganizing `OutlineItem` component** `OutlineItem` component was originally designed as a component to draw a tree-like view, *but it was not used as intended in production*. We simplified the component's responsibilities by removing unused properties while retaining the component's ability to apply indentation to subcomponents. - No longer support `paddingLeft` property. **By default, 6px of left padding has been added.** If you need to make changes, override the style. - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `iconStyle`, `iconClassName`, `iconInterpolation`, `contentStyle`, `contentClassName` and `contentInterpolation`. This decision was made to reduce excessive flexibility in the interface. - No longer support `leftIcon` property. Removed for consistency with other component interfaces. Replace it to `leftContent`. - No longer support `leftIconColor` and `leftIconTestId` property. - No longer support `name` property. The second argument (name) of `onClick` is also removed. If you need an identifier, combine functions outside of the component. - No longer support `hide`, `optionKey` and `disableIconActive` property. Replace `hide` property with conditional rendering. - No longer support `onOpen`, `onClickArrow`, `selectedOutlineItemIndex` and `onChangeOption` property. ## References <!-- Please list any other resources or points the reviewer should be aware of --> - [Figma](https://www.figma.com/file/99k33ZxchcPKTz2tzJlZeE/Components?type=design&node-id=7974%3A55350&mode=dev)
sungik-choi
added a commit
that referenced
this issue
Jan 22, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate(Reorganize) `SectionLabel` component with scss ## Details <!-- Please elaborate description of the changes --> SectionLabel의 역할은 다양합니다. 1. Chevron 아이콘, children과 함께 아코디언의 역할을 하는 케이스 2. 단순 제목 (with `divider`) 3. 제목과 우측 2개 이상의 right action을 가지는 경우 모든 케이스를 잘 지원하기 위해 scss 마이그레이션을 진행하면서 구조를 일부 변경했습니다. - onClick 속성이 존재할 경우 button의 역할을 하며, 키보드 포커스링을 표시합니다. (1번 케이스) - 사이드 컨텐츠 아이템 속성 타입을 좁혔습니다. 왼쪽 컨텐츠의 경우 클릭 핸들러가 아닌 단순 장식용 아이콘만 들어가기 때문에 아이콘으로만 타입을 한정지었으며, 우측의 경우 액션을 발생시키는 아이콘 버튼이 들어가기 때문에 onClick을 기존처럼 주입할 수 있도록 했습니다. iconColor를 오버라이드하는 경우는 레거시이며 이제 존재하지 않기 때문에, 제거하였습니다. - 액션 아이템 컴포넌트를 별도 구현하고, 컴포넌트 합성을 통하여 리팩토링하는 방법도 있겠으나 마이그레이션의 취지를 너무 많이 벗어난다고 생각하여 선택하지 않았습니다. - 루트의 div wrapper를 제거했습니다. style, className 속성을 다른 컴포넌트들과 마찬가지로 루트 엘리먼트에 주입하기 위한 변경입니다. 이를 구현하기 위해, divider는 루트 엘리먼트의 before 수도 엘리먼트를 통해 구현하였습니다. 나머지 내부 wrapper에 들어가는 추가 스타일 속성들은 모두 제거했습니다. 사용처도 없는 것을 확인했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes ## References <!-- Please list any other resources or points the reviewer should be aware of --> <img width="900" alt="image" src="https://github.com/channel-io/bezier-react/assets/58209009/b09ff709-e675-407b-9331-b0cc3447c891"> - [피그마](https://www.figma.com/file/99k33ZxchcPKTz2tzJlZeE/Components?type=design&node-id=1164%3A12605&mode=design&t=Lu5mTIYFXqKlTIq8-1) - 피그마에서 divider가 있는 케이스를 보면 divider - content 사이의 6px의 마진이 없으나, 기존 구현되어있던 스펙을 존중하여 이를 그대로 구현합니다. UI 균형(?)적으로도 더 적절해보였어요.
This was referenced Jan 23, 2024
sungik-choi
added a commit
that referenced
this issue
Jan 24, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `KeyValueListItem` component with scss ## Details <!-- Please elaborate description of the changes --> changeset과 동일한 내용입니다. - **피그마와 동일하게 KeyValueItem 으로 이름을 변경합니다.** 원래부터 KeyValueItem이었는데, 이름이 왜 KeyValueListItem이었는지 잘 모르겠네요. - ItemAction의 AdditionalColorProps, show 속성을 제거합니다. 데스크에 사용처가 없는 걸 확인했습니다. - ItemAction의 액션 내부 구현을 Button을 사용하도록 변경합니다. - onClickKey, onClickValue의 경우 해당 핸들러가 주입됐을 경우 Key, Value 영역을 button으로 변경하고자 했으나, 두 영역(멀티라인 컴포넌트 포함) 모두 내부에 액션 버튼을 가질 수 있기에 적용하기가 어려웠습니다. [interactive content 내부에 interactive content가 들어가는 것은 잘못된 마크업이므로](https://giovanicamara.com/blog/nested-buttons-and-links/) 기존과 동일하게 div 엘리먼트로 렌더합니다. - interpolation 속성을 모두 지원 중지합니다. 데스크를 확인해보면, `valueWrapperInterpolation` 를 오버라이드하는 경우만 존재합니다. 두 케이스가 존재하는데, 1. Value 컴포넌트가 부모 Flex container의 남은 너비를 채우기 하기 위함: `flex: 1` 을 추가하여서 interpolation이 필요없도록 했습니다. 2. empty placeholder 텍스트 색상을 조건부 interpolation으로 적용: 사용처에서 interpolation이 아니라, 해당 색상이 적용된 html element로 감싸서 넘기도록 변경해야합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes ## References <!-- Please list any other resources or points the reviewer should be aware of --> - [Figma](https://www.figma.com/file/99k33ZxchcPKTz2tzJlZeE/Components?type=design&node-id=1164%3A12605&mode=dev&t=SwrIc7uSJXlguduO-1)
sungik-choi
added a commit
that referenced
this issue
Jan 24, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `LegacyTooltip` component with scss ## Details <!-- Please elaborate description of the changes --> 다음 메이저 버전에서는 제거하는 걸 목표로 하고 있어서, SCSS로 변경 외 리팩토링 등은 진행하지 않았습니다. 자세한 내용은 체인지로그로 대체합니다. **Breaking Changes: Property updates in `LegacyTooltip` component** - No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations. - No longer support `contentInterpolation` property. Replace any usage of `contentInterpolation` property with appropriate `contentStyle` or `contentClassName` implementations. - No longer support `contentWrapperInterpolation` property. Replace any usage of `contentWrapperInterpolation` property with appropriate `contentWrapperStyle` or `contentWrapperClassName` implementations. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
sungik-choi
added a commit
that referenced
this issue
Jan 24, 2024
<!-- 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 --> - #1733 - Fixes #1734 ## Summary <!-- Please brief explanation of the changes made --> Remove LegacyRadio and make Radio available without labels ## Details <!-- Please elaborate description of the changes --> - Radio를 라벨 없이도 스타일링할 수 있도록 변경합니다. 라벨이 존재하는 경우에만 36px의 높이를 가지도록 합니다. 라벨이 없는 경우, 접근성에 위배되나 이는 사용처의 책임에 맡깁니다. label id를 직접 연결하거나, VisuallyHidden 등을 사용하여 구현할 수도 있을 것입니다. - LegacyRadio의 사용처는 데스크에 2곳이 있는데, 위 변경으로 RadioGroup + Radio로 대체할 수 있게되면서 완전히 삭제합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
sungik-choi
added a commit
that referenced
this issue
Jan 24, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `LegacyStack` component with scss ## Details <!-- Please elaborate description of the changes --> - 더 이상 interpolation 속성을 지원하지 않습니다. - Legacy prefix를 디렉토리, 파일명에 명확하게 추가했습니다. - class 기반으로 테스트를 변경했습니다. - AxisAlignment 타입 export를 제거합니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
This was referenced Jan 24, 2024
sungik-choi
added a commit
that referenced
this issue
Jan 29, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `Overlay` component with scss ## Details <!-- Please elaborate description of the changes --> SCSS 마이그레이션 외 아래와 같은 점들을 변경했습니다. - as 및 interpolation 관련 속성을 제거합니다 - 컴포넌트 리팩토링 - 내부 컴포넌트의 useMemo 제거 - prop 순서 정렬 - 함수의 noop 기본값 제거 - 스타일 관련 테스트 제거 - 스토리에서 styled 사용을 제거하고, 단순한 Primary 테스트 하나만 남깁니다. - 마이너: 공용 elevation css module의 클래스명이 잘못되어있던 부분을 수정합니다. ### Footnotes - 새로 구현하고 싶었으나... 리팩토링의 범위를 한참 뛰어넘는다고 생각하여 진행하지 않았습니다. - 다음 버전의 디자인 시스템에서 스펙 잘 정의하고, 그 때는 [floating-ui](https://floating-ui.com/)같은 라이브러리를 사용하여 재구현(혹은 새로운 컴포넌트 구현)하면 높은 퀄리티의 컴포넌트를 손쉽게 구현할 수 있어 좋을 거 같아요. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
sungik-choi
added a commit
that referenced
this issue
Jan 29, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `ProgressBar` component with scss ## Details <!-- Please elaborate description of the changes --> - as, interpolation 및 active 관련 스타일 속성을 제거합니다. - background-color의 그라이던트에서 시맨틱 컬러와 레거시 Inverted 시맨틱 컬러를 **동시에** 사용하는 부분을 해결하기가 어려웠습니다. 현재 테마 네임을 참고하여 팔레트 색상을 사용하는 방식으로 '일단은' 해결했습니다. - `memo` 제거: 메모이제이션 여부는 사용처에 맡깁니다. - 테스트 코드 수정, JSDoc 수정, 컨벤션 수정 진행 ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
This was referenced Jan 29, 2024
sungik-choi
added a commit
that referenced
this issue
Jan 30, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `Tabs` components with scss ## Details <!-- Please elaborate description of the changes --> - as, interpolation 지원이 중지되나, 이전에 제대로 지원하고 있지는 않은 상태였어서 오히려 큰 문제가 없을 거로 예상됩니다..! - 디렉토리 컨벤션 - `Tabs` 파일 하나로 병합합니다. - 누락되어있던 HTML attributes 타입 추가. rest prop으로 런타임에는 전달이 되고 있었습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
sungik-choi
added a commit
that referenced
this issue
Jan 30, 2024
<!-- 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 --> - #1733 ## Summary <!-- Please brief explanation of the changes made --> Migrate `Toast` component with scss ## Details <!-- Please elaborate description of the changes --> ### 변경 - onClick, actionContent 의 데스크 사용처가 없어 제거했습니다. deprecate 상태였으며, 피그마상 스펙은 있으나 데스크에서는 모두 사용처에서 직접 구현하여 사용하고 있었습니다. Link 컴포넌트 사용 등을 고려해봤을 때 더 깊은 고민들이 필요하다고 판단하여 우선은 제거하는 방향으로 결정했습니다. (Breaking change) - onDismiss 타입을 교정합니다. event 객체가 불필요합니다. ### 개선 - dismiss 로직을 TransitionDuration + setTimeout 로직에서 CSS animation + onAnimationEnd 로직으로 변경했습니다. TransitionDuration을 CSS 내부로 캡슐화하고자 했습니다. - ToastElement, ToastController 컴포넌트를 병합했습니다(Toast). 책임에 따라 잘 나뉘어있었으나, 함수 분리로 인해 오히려 컴포넌트 로직이 한 눈에 읽혀지지 않는다고 판단했습니다. - enum, ToastService, useToast 등은 사용처가 많고 복잡도(난이도)가 높아 그대로 유지했습니다. ### Breaking change? (Yes/No) <!-- If Yes, please describe the impact and migration path for users --> Yes
This was referenced Feb 6, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
styled-components로 스타일링된 컴포넌트의 스타일링을 Sass 기반의 스타일링으로 변경합니다.
Description
Box, Text 컴포넌트를 참고해주세요.
as속성은 직접 구현합니다.as속성이 꼭 필요한지 체크하고, 불필요하다면 제거. 왠만한 컴포넌트에는 불필요할 것으로 예상합니다.@layer components로 감싸줘야합니다.유의사항
interpolation속성은 제거해주세요. CSS-in-JS 를 사용하지 않으므로 사용할 수 없는 속성입니다.style속성을 통해 외부에서 인라인 스타일로 주입하는 방식으로 변경합니다. 마찬가지로***Interpolation속성은***Style속성으로 변경합니다.S: 20->S: 's')Components
Components (Composition)
References
The text was updated successfully, but these errors were encountered: