Inheritance bug in Badge internal text color #2006
Labels
bug
Issues related to anything that isn't working
Comments
6 tasks
sungik-choi
added a commit
that referenced
this issue
Feb 21, 2024
…rit' to 'initial' (#2009) <!-- 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 #2006 ## Summary <!-- Please brief explanation of the changes made --> Change incorrect default value of css variable 'inherit' to 'initial' ## Details <!-- Please elaborate description of the changes --> 잘못된 마이그레이션을 수정합니다. 기존에는 아래와 같은 사고 흐름으로 마이그레이션을 진행했었습니다. ``` // AS-IS color: colorProp ? colorProp : inherit // TO-BE // 스타일 외부에서 --color를 조건부 주입하면 되겠다. --color: inherit; color: var(--color) ``` 하지만 CSS variable의 초기 키워드로 `inherit` 을 설정하는 것과 해당 속성에 직접적으로 `inherit` 을 설정하는 건 동작이 아예 다릅니다. 위의 예를 들어, `--color: inherit` 은 color 속성에 상위 속성을 적용하는 게 아니라, 접근 가능한 가장 가까운 곳에 위치하는 `--color` 의 값을 상속하게됩니다. 한번 더 자세히 풀어보자면 아래와 같습니다. ``` <div style={{ '--color': 'red' }}> <div style={{ 'color': 'blue: }}> <Foo /> </div> </div> ``` 맨 위 예제의 스타일이 적용된 컴포넌트를 `Foo` 라고 했을 때 `Foo` 의 color는 `red` 가 됩니다. **`--color` 는 color가 아니라 상위 `--color` 의 값을 상속받고, color는 `--color` 의 값을 가르키기 때문입니다**. 이를 오버라이드하기 위해선 상위에서 정확하게 `Foo` 요소를 선택하여 color 속성을 지정해줘야 합니다. 이러한 상속 방식은 마이그레이션 이전 컴포넌트의 동작과 다릅니다. [color 속성](https://developer.mozilla.org/ko/docs/Web/CSS/color)은 기본적으로 **[상속을 지원하는 속성](https://developer.mozilla.org/ko/docs/Web/CSS/Inheritance#%EC%83%81%EC%86%8D%EB%90%98%EB%8A%94_%EC%86%8D%EC%84%B1)이기 때문에** inherit 키워드를 지정할 필요가 없습니다. 값을 지정하지 않는다면, 부모의 값을 상속하게 됩니다. CSS variable을 유효하지 않은 값(Invalid Value)으로 만들면 color의 값은 값을 지정하지 않은 것으로 평가됩니다. 그러므로, 기존과 같이 부모의 값을 상속하게 됩니다. CSS variable에는 `initial` 키워드를 사용하여 [명시적으로 유효하지 않은 값](https://drafts.csswg.org/css-variables/#guaranteed-invalid)으로 설정했습니다. ### 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 --> > If, for whatever reason, one wants to manually reset a variable to the guaranteed-invalid value, using the keyword [initial](https://drafts.csswg.org/css-cascade-5/#valdef-all-initial) will do this. - https://drafts.csswg.org/css-variables/#guaranteed-invalid
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Summary
Inheritance bug in Badge internal text color
Reproduction process
color: var(--b-text-color);이며,--b-text-color지정되지 않았을 경우 기본값이inherit입니다.--b-text-color)을 상속받게 되어, 의도한대로 Badge의 색상을 오버라이드할 수 없습니다.color속성의 값을 오버라이드해야 합니다.Version of bezier-react
2.0.0-alpha.12
Browser
No response
Operating system
Additonal Information
No response
The text was updated successfully, but these errors were encountered: