From ca47057bd6249ca7f18c7cf557a393077e85665c Mon Sep 17 00:00:00 2001 From: Ed Date: Wed, 20 Dec 2023 16:57:15 +0900 Subject: [PATCH] fix(styles): fix to explicitly initialize CSS variables (#1846) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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 ## Summary #1837 에서 이어집니다. d074178e534101ad1abea5b1ade258760d94c1fa 부터 CSS variable을 사용할 때 명시적으로 Rule 안에서 초깃값을 지정하도록 합니다. ## Details - CSS variable(CSS Custom property)의 값은 상속의 대상이 되기 때문에, 명시적으로 값을 초기화해두지 않으면 부모의 값을 상속하게 됩니다. - 이전 Box 등의 레이아웃 컴포넌트를 구현할 때, 공용 margin 속성 및 layout 속성에 초기화 대신 fallback 값으로만 기본값을 정의해두었습니다. - 이렇게 구현할 경우, 부모에 같은 스타일이 있으면(e.g. `--b-margin: 10px`) 자식 엘리먼트가 fallback 값을 적용하지 않고 **부모의 스타일을 적용하게됩니다.** - 이를 명시적으로 기본값을 부여하여 해결했습니다. 기본적으로 `initial` 키워드로 브라우저 기본값을 따랐고, margin/padding 등 shorthand property에서는 shorthand property로 initial 키워드를 사용할 수 없으므로(`margin: initial initial initial initial => invalid`) MDN 문서를 참고하여 속성의 기본값을 직접 지정해주었습니다. - border-style의 경우 기본값이 `none` 이므로, border-width가 있을 때 별도의 style 지정 없이도 바로 보일 수 있게 `solid` 로 지정했습니다. - border-width의 경우 기본값이 `middle` 이므로, border-width가 없을 때 보이지 않도록 `0` 으로 지정했습니다. ### Breaking change? (Yes/No) No ## References - https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties#%EC%82%AC%EC%9A%A9%EC%9E%90_%EC%A7%80%EC%A0%95_%EC%86%8D%EC%84%B1%EC%9D%98_%EC%83%81%EC%86%8D - https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Box/Box.module.scss --- .changeset/quick-peaches-fail.md | 5 + .../src/components/Stack/Stack.module.scss | 4 +- .../src/components/Text/Text.module.scss | 4 +- .../src/components/shared.module.scss | 102 +++++++++++------- packages/bezier-react/src/utils/props.ts | 4 +- 5 files changed, 75 insertions(+), 44 deletions(-) create mode 100644 .changeset/quick-peaches-fail.md diff --git a/.changeset/quick-peaches-fail.md b/.changeset/quick-peaches-fail.md new file mode 100644 index 0000000000..a330058339 --- /dev/null +++ b/.changeset/quick-peaches-fail.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": minor +--- + +Fixes style inheritance issues by explicitly giving CSS custom properties an initial value. diff --git a/packages/bezier-react/src/components/Stack/Stack.module.scss b/packages/bezier-react/src/components/Stack/Stack.module.scss index 05a2c230f3..b42a3c7fd0 100644 --- a/packages/bezier-react/src/components/Stack/Stack.module.scss +++ b/packages/bezier-react/src/components/Stack/Stack.module.scss @@ -1,7 +1,9 @@ @layer components { .Stack { + --b-stack-spacing: initial; + box-sizing: border-box; - gap: var(--b-stack-spacing, normal); + gap: var(--b-stack-spacing); &.display-flex { display: flex; diff --git a/packages/bezier-react/src/components/Text/Text.module.scss b/packages/bezier-react/src/components/Text/Text.module.scss index b53978dfb0..42334f8b4e 100644 --- a/packages/bezier-react/src/components/Text/Text.module.scss +++ b/packages/bezier-react/src/components/Text/Text.module.scss @@ -1,6 +1,8 @@ @layer components { .Text { - color: var(--b-text-color, inherit); + --b-text-color: inherit; + + color: var(--b-text-color); font-style: normal; font-weight: var(--font-weight-400); transition: color var(--transition-s); diff --git a/packages/bezier-react/src/components/shared.module.scss b/packages/bezier-react/src/components/shared.module.scss index ef3201515c..7884a0d2c5 100644 --- a/packages/bezier-react/src/components/shared.module.scss +++ b/packages/bezier-react/src/components/shared.module.scss @@ -1,49 +1,71 @@ @layer components { .margin { - --margin-all: var(--b-margin-all, 0); + --b-margin: 0; + --b-margin-x: var(--b-margin); + --b-margin-y: var(--b-margin); + --b-margin-top: var(--b-margin-y); + --b-margin-right: var(--b-margin-x); + --b-margin-bottom: var(--b-margin-y); + --b-margin-left: var(--b-margin-x); - margin: - var(--b-margin-top, var(--b-margin-y, var(--margin-all))) - var(--b-margin-right, var(--b-margin-x, var(--margin-all))) - var(--b-margin-bottom, var(--b-margin-y, var(--margin-all))) - var(--b-margin-left, var(--b-margin-x, var(--margin-all))); + margin: var(--b-margin-top) var(--b-margin-right) var(--b-margin-bottom) var(--b-margin-left); } .layout { - --padding-all: var(--b-padding-all, 0); - --border-width: var(--b-border-width, 0); - --overflow: var(--b-overflow, visible); + --b-padding: 0; + --b-padding-x: var(--b-padding); + --b-padding-y: var(--b-padding); + --b-padding-top: var(--b-padding-y); + --b-padding-right: var(--b-padding-x); + --b-padding-bottom: var(--b-padding-y); + --b-padding-left: var(--b-padding-x); + --b-width: initial; + --b-height: initial; + --b-max-width: initial; + --b-max-height: initial; + --b-min-width: initial; + --b-min-height: initial; + --b-position: initial; + --b-inset: auto; + --b-top: var(--b-inset); + --b-right: var(--b-inset); + --b-bottom: var(--b-inset); + --b-left: var(--b-inset); + --b-shrink: initial; + --b-grow: initial; + --b-bg-color: initial; + --b-border-color: initial; + --b-border-radius: initial; + --b-border-width: 0; + --b-border-top-width: var(--b-border-width); + --b-border-right-width: var(--b-border-width); + --b-border-bottom-width: var(--b-border-width); + --b-border-left-width: var(--b-border-width); + --b-border-style: solid; + --b-elevation: initial; + --b-z-index: initial; + --b-overflow: initial; + --b-overflow-x: var(--b-overflow); + --b-overflow-y: var(--b-overflow); - padding: - var(--b-padding-top, var(--b-padding-y, var(--padding-all))) - var(--b-padding-right, var(--b-padding-x, var(--padding-all))) - var(--b-padding-bottom, var(--b-padding-y, var(--padding-all))) - var(--b-padding-left, var(--b-padding-x, var(--padding-all))); - width: var(--b-width, auto); - height: var(--b-height, auto); - max-width: var(--b-max-width, none); - max-height: var(--b-max-height, none); - min-width: var(--b-min-width, none); - min-height: var(--b-min-height, none); - position: var(--b-position, static); - inset: var(--b-inset, auto); - top: var(--b-top, auto); - right: var(--b-right, auto); - bottom: var(--b-bottom, auto); - left: var(--b-left, auto); - flex-shrink: var(--b-shrink, 1); - flex-grow: var(--b-grow, 0); - background-color: var(--b-bg-color, transparent); - border-color: var(--b-border-color, transparent); - border-radius: var(--b-border-radius, 0); - border-top-width: var(--b-border-top-width, var(--border-width)); - border-right-width: var(--b-border-right-width, var(--border-width)); - border-bottom-width: var(--b-border-bottom-width, var(--border-width)); - border-left-width: var(--b-border-left-width, var(--border-width)); - border-style: var(--b-border-style, solid); - box-shadow: var(--b-elevation, none); - z-index: var(--b-z-index, auto); - overflow-x: var(--b-overflow-x, var(--overflow)); - overflow-y: var(--b-overflow-y, var(--overflow)); + padding: var(--b-padding-top) var(--b-padding-right) var(--b-padding-bottom) var(--b-padding-left); + width: var(--b-width); + height: var(--b-height); + max-width: var(--b-max-width); + max-height: var(--b-max-height); + min-width: var(--b-min-width); + min-height: var(--b-min-height); + position: var(--b-position); + inset: var(--b-top) var(--b-right) var(--b-bottom) var(--b-left); + flex-shrink: var(--b-shrink); + flex-grow: var(--b-grow); + background-color: var(--b-bg-color); + border-color: var(--b-border-color); + border-radius: var(--b-border-radius); + border-width: var(--b-border-top-width) var(--b-border-right-width) var(--b-border-bottom-width) var(--b-border-left-width); + border-style: var(--b-border-style); + box-shadow: var(--b-elevation); + z-index: var(--b-z-index); + overflow: var(--b-overflow-x) var(--b-overflow-y); } } diff --git a/packages/bezier-react/src/utils/props.ts b/packages/bezier-react/src/utils/props.ts index 5bc92de4d9..01ed36bf70 100644 --- a/packages/bezier-react/src/utils/props.ts +++ b/packages/bezier-react/src/utils/props.ts @@ -140,7 +140,7 @@ export const getMarginStyle = ({ mb, ml, }: Props) => ({ - '--b-margin-all': cssDimension(m), + '--b-margin': cssDimension(m), '--b-margin-x': cssDimension(mx), '--b-margin-y': cssDimension(my), '--b-margin-top': cssDimension(mt), @@ -186,7 +186,7 @@ export const getLayoutStyle = ({ overflowX, overflowY, }: Props) => ({ - '--b-padding-all': cssDimension(p), + '--b-padding': cssDimension(p), '--b-padding-x': cssDimension(px), '--b-padding-y': cssDimension(py), '--b-padding-top': cssDimension(pt),