From 68138d3fad8b0c8db9b5414f5b5fee5b9ec2e593 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 05:33:22 +0900 Subject: [PATCH 1/6] add `ko` translation to h1-h6 flags --- packages/support-flags/docs/--as-h1.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h1.md | 3 ++ packages/support-flags/docs/--as-h2.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h2.md | 3 ++ packages/support-flags/docs/--as-h3.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h3.md | 3 ++ packages/support-flags/docs/--as-h4.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h4.md | 3 ++ packages/support-flags/docs/--as-h5.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h5.md | 3 ++ packages/support-flags/docs/--as-h6.ko.md | 58 +++++++++++++++++++++++ packages/support-flags/docs/--as-h6.md | 3 ++ 12 files changed, 366 insertions(+) create mode 100644 packages/support-flags/docs/--as-h1.ko.md create mode 100644 packages/support-flags/docs/--as-h2.ko.md create mode 100644 packages/support-flags/docs/--as-h3.ko.md create mode 100644 packages/support-flags/docs/--as-h4.ko.md create mode 100644 packages/support-flags/docs/--as-h5.ko.md create mode 100644 packages/support-flags/docs/--as-h6.ko.md diff --git a/packages/support-flags/docs/--as-h1.ko.md b/packages/support-flags/docs/--as-h1.ko.md new file mode 100644 index 00000000..7f3822a2 --- /dev/null +++ b/packages/support-flags/docs/--as-h1.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H1 flag +id: "--as-h1" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h1` 헤딩1 명시 플래그 + +**지정 가능한 키** + +- `--as-h1` +- `--as-heading1` +- `--as-headline1` +- `--h1` +- `--heading1` +- `--headline1` + +## 문법 + +```ts +`--h1${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `

` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h2`](../--as-h2) +- [`--as-h3`](../--as-h3) +- [`--as-h4`](../--as-h4) +- [`--as-h5`](../--as-h5) +- [`--as-h6`](../--as-h6) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h1.md b/packages/support-flags/docs/--as-h1.md index e5cd9812..61f38343 100644 --- a/packages/support-flags/docs/--as-h1.md +++ b/packages/support-flags/docs/--as-h1.md @@ -1,4 +1,7 @@ --- +title: As-H1 flag +id: "--as-h1" +locale: en stage: - production - staging diff --git a/packages/support-flags/docs/--as-h2.ko.md b/packages/support-flags/docs/--as-h2.ko.md new file mode 100644 index 00000000..a081a5f6 --- /dev/null +++ b/packages/support-flags/docs/--as-h2.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H2 flag +id: "--as-h2" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h2` 헤딩2 명시 플래그 + +**지정 가능한 키** + +- `--as-h2` +- `--as-heading2` +- `--as-headline2` +- `--h2` +- `--heading2` +- `--headline2` + +## 문법 + +```ts +`--h2${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `

` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h1`](../--as-h1) +- [`--as-h3`](../--as-h3) +- [`--as-h4`](../--as-h4) +- [`--as-h5`](../--as-h5) +- [`--as-h6`](../--as-h6) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h2.md b/packages/support-flags/docs/--as-h2.md index 9bd9cc32..53ffd6b6 100644 --- a/packages/support-flags/docs/--as-h2.md +++ b/packages/support-flags/docs/--as-h2.md @@ -1,4 +1,7 @@ --- +title: As-H2 flag +id: "--as-h2" +locale: en stage: - production - staging diff --git a/packages/support-flags/docs/--as-h3.ko.md b/packages/support-flags/docs/--as-h3.ko.md new file mode 100644 index 00000000..ac8b9e09 --- /dev/null +++ b/packages/support-flags/docs/--as-h3.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H3 flag +id: "--as-h3" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h3` 헤딩3 명시 플래그 + +**지정 가능한 키** + +- `--as-h3` +- `--as-heading3` +- `--as-headline3` +- `--h3` +- `--heading3` +- `--headline3` + +## 문법 + +```ts +`--h3${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `

` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h1`](../--as-h1) +- [`--as-h2`](../--as-h2) +- [`--as-h4`](../--as-h4) +- [`--as-h5`](../--as-h5) +- [`--as-h6`](../--as-h6) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h3.md b/packages/support-flags/docs/--as-h3.md index 8adfd930..cf9f8f7c 100644 --- a/packages/support-flags/docs/--as-h3.md +++ b/packages/support-flags/docs/--as-h3.md @@ -1,4 +1,7 @@ --- +title: As-H3 flag +id: "--as-h3" +locale: en stage: - production - staging diff --git a/packages/support-flags/docs/--as-h4.ko.md b/packages/support-flags/docs/--as-h4.ko.md new file mode 100644 index 00000000..7427dc35 --- /dev/null +++ b/packages/support-flags/docs/--as-h4.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H4 flag +id: "--as-h4" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h4` 헤딩4 명시 플래그 + +**지정 가능한 키** + +- `--as-h4` +- `--as-heading4` +- `--as-headline4` +- `--h4` +- `--heading4` +- `--headline4` + +## 문법 + +```ts +`--h4${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `

` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h1`](../--as-h1) +- [`--as-h2`](../--as-h2) +- [`--as-h3`](../--as-h3) +- [`--as-h5`](../--as-h5) +- [`--as-h6`](../--as-h6) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h4.md b/packages/support-flags/docs/--as-h4.md index bbae2a70..959f8e3a 100644 --- a/packages/support-flags/docs/--as-h4.md +++ b/packages/support-flags/docs/--as-h4.md @@ -1,4 +1,7 @@ --- +title: As-H4 flag +id: "--as-h4" +locale: en stage: - production - staging diff --git a/packages/support-flags/docs/--as-h5.ko.md b/packages/support-flags/docs/--as-h5.ko.md new file mode 100644 index 00000000..d45403e2 --- /dev/null +++ b/packages/support-flags/docs/--as-h5.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H5 flag +id: "--as-h5" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h5` 헤딩5 명시 플래그 + +**지정 가능한 키** + +- `--as-h5` +- `--as-heading5` +- `--as-headline5` +- `--h5` +- `--heading5` +- `--headline5` + +## 문법 + +```ts +`--h5${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `

` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h1`](../--as-h1) +- [`--as-h2`](../--as-h2) +- [`--as-h3`](../--as-h3) +- [`--as-h4`](../--as-h4) +- [`--as-h6`](../--as-h6) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h5.md b/packages/support-flags/docs/--as-h5.md index 5503a80a..461cc5ee 100644 --- a/packages/support-flags/docs/--as-h5.md +++ b/packages/support-flags/docs/--as-h5.md @@ -1,4 +1,7 @@ --- +title: As-H5 flag +id: "--as-h5" +locale: en stage: - production - staging diff --git a/packages/support-flags/docs/--as-h6.ko.md b/packages/support-flags/docs/--as-h6.ko.md new file mode 100644 index 00000000..6ef45052 --- /dev/null +++ b/packages/support-flags/docs/--as-h6.ko.md @@ -0,0 +1,58 @@ +--- +title: As-H6 flag +id: "--as-h6" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--as-h6` 헤딩6 명시 플래그 + +**지정 가능한 키** + +- `--as-h6` +- `--as-heading6` +- `--as-headline6` +- `--h6` +- `--heading6` +- `--headline6` + +## 문법 + +```ts +`--h6${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--h1 + +--h1=true +--h1=false + +--h1=yes +--h1=no + +----h1 +``` + +## 동작 + +**엘레먼트 (Element)** +이 플래그가 적용된다면, 해당 노드의 html 생성 엘레먼트는 `
` 로 렌더되어 표시됩니다. (이외의 로직에는 영향이 없으며, 태그가 변경되었기에 이에 따른 부작용은 사용자의 커스텀 css 또는 query 에 따라 변경될 수 있습니다.) + +**텍스트 스타일 (Text style)** +`--h1` 을 적용함으로, 엘레먼트가 수정되더라도, 아직 Grida 는 이에 따른 추가적인 스타일링 지원을 하지 않습니다. 타 `span`, `p`, 와 동일하게 블록단위의 스타일이 지정됩니다. 공용 헤딩 스타일에 대한 Global css 를 지원하지 않습니다. + +## 같이보기 + +- [`--as-h1`](../--as-h1) +- [`--as-h2`](../--as-h2) +- [`--as-h3`](../--as-h3) +- [`--as-h4`](../--as-h4) +- [`--as-h5`](../--as-h5) +- [`--as-p`](../--as-p) +- [`--as-br`](../--as-br) diff --git a/packages/support-flags/docs/--as-h6.md b/packages/support-flags/docs/--as-h6.md index 3db14248..852899f6 100644 --- a/packages/support-flags/docs/--as-h6.md +++ b/packages/support-flags/docs/--as-h6.md @@ -1,4 +1,7 @@ --- +title: As-H6 flag +id: "--as-h6" +locale: en stage: - production - staging From 0e5d205f0fe275c0dab7d1b3a2897136bb521134 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 05:36:44 +0900 Subject: [PATCH 2/6] add --artwork flag `ko` translation --- packages/support-flags/docs/--artwork.ko.md | 52 +++++++++++++++++++++ packages/support-flags/docs/--artwork.md | 12 ++++- 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 packages/support-flags/docs/--artwork.ko.md diff --git a/packages/support-flags/docs/--artwork.ko.md b/packages/support-flags/docs/--artwork.ko.md new file mode 100644 index 00000000..00a9158f --- /dev/null +++ b/packages/support-flags/docs/--artwork.ko.md @@ -0,0 +1,52 @@ +--- +title: Artwork flag +id: "--artwork" +locale: ko +stage: + - production + - staging + - experimental +--- + +# 아트워크 플래그 + +아트워크 플래그는 그룹 또는 프레임으로 감싸진 디자인을 tree 형태가 아닌, 하나의 아트워크 에셋으로써 지정할수 있는 플래그 입니다. 일러스트나, 아이콘등을 에셋으로써 사용할때 유용합니다. 또는 임베딩되어, 코드로 변환될 필요가 없는 노드를 지정할때도 사용할수 있습니다. + +**지정 가능한 키** + +- `--artwork` + +## 문법 + +```ts +`--artwork${"="typeof boolean}` +``` + +## 적용 예시 + +``` +--artwork + +--artwork=true +--artwork=false + +--artwork=yes +--artwork=no + +----artwork +``` + +## 동작 + +**인터프리터** + +해당 플래그가 반영된다면, 반영된 노드를 기점으로 이미지로 인식, 변환 됩니다. 이후, 하위 노드는 방문하지도, 처리 하지도 않습니다. + +**렌더** + +- HTML: `` element 로 렌더링 됩니다. +- Flutter: `Image` widget 으로 렌더링 됩니다. + +## 같이보기 + +- [`--export-as`](../--export-as) diff --git a/packages/support-flags/docs/--artwork.md b/packages/support-flags/docs/--artwork.md index 192273c1..dfe8cb65 100644 --- a/packages/support-flags/docs/--artwork.md +++ b/packages/support-flags/docs/--artwork.md @@ -1,4 +1,14 @@ -## Artwork flag +--- +title: Artwork flag +id: "--artwork" +locale: en +stage: + - production + - staging + - experimental +--- + +# Artwork flag **Accepted keys** From 7e5b6ad91a1fec11c1f5bf8f20063e47e61d36f4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 06:13:09 +0900 Subject: [PATCH 3/6] update `--as-wrap` docs & add `ko` translation --- packages/support-flags/docs/--as-wrap.ko.md | 98 +++++++++++++++++++++ packages/support-flags/docs/--as-wrap.md | 75 ++++++++++++++-- 2 files changed, 168 insertions(+), 5 deletions(-) create mode 100644 packages/support-flags/docs/--as-wrap.ko.md diff --git a/packages/support-flags/docs/--as-wrap.ko.md b/packages/support-flags/docs/--as-wrap.ko.md new file mode 100644 index 00000000..1fb489eb --- /dev/null +++ b/packages/support-flags/docs/--as-wrap.ko.md @@ -0,0 +1,98 @@ +--- +title: As Wrap flag +id: "--as-wrap" +locale: ko +stage: + - production + - staging + - experimental +--- + + + +# `--as-wrap` - flexbox / Wrap 윗젯 지정 플래그 + +(피그마를 기준으로 설명합니다.) +디자인툴에서 wrap 과 관련된 반응형 동작을 지원하지 않음에 따라, 우리는 그리드 형태의 디자인을 표현할때 어려움을 겪습니다. + +여기서 말하는 Wrap 은 사이즈가 줄어듬에 따라 리스트\*리스트 형의 그리드에서 아이템이 아래로 내려가며 재정렬 되는 것을 말합니다. [(예시 - Flutter#Wrap)](https://api.flutter.dev/flutter/widgets/Wrap-class.html) + +이럴때 우리는 Wrap 플래그를 사용하여, autolayout x autolayout 형태로 디자인된 그리드를 자동으로 Wrap 형태로 변환되도록 만들수 있습니다. + +``` +- autolayout root frame (column) + - row 1 (autolayout) + - row 2 (autolayout) + - row 3 (autolayout) + - row 4 (autolayout) +``` + +위와 같이 디자인 하이라키가 구성되었다면, 루트에 간단히 `--as-wrap` 플래그를 추가하면 완성됩니다. (루트가 row 여도 무관합니다. 다만 그럴경우 height 에 의해 자동으로 조정됩니다.) + +결과적으로 `row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)` 와 같이 하이라키가 변경되게 됩니다. + +## Syntax + +**허용되는 키** + +- `--as-wrap` + +```ts +`--as-wrap${"="typeof boolean}` +`--as=wrap` // under development (do not use) +``` + +## 적용 예시 + +``` +--as-wrap + +--as-wrap=true +--as-wrap=false + +--as-wrap=yes +--as-wrap=no + +----as-wrap +``` + +## 동작 + +**엘레먼트 (Element)** + +- Web - 웹 에서는 div 인 parent 가 [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) 의 속성을 띄게 됩니다. (`flex-wrap: wrap`) +- Flutter - 플러터 에서는 [`Wrap`](https://api.flutter.dev/flutter/widgets/Wrap-class.html) 윗젯으로 parent 가 변형됩니다. + +_정리하자면, 다음과 같습니다._ + +- flexbox on css +- Wrap on flutter +- Wrap with reflect-ui + +**구조의 변화** +Wrap 이 구성될때, 디자인 상에서는 아이템의 시점에서 루트를 포함하여 2개의 parent 가 존재하지만, 이는 코드상에서 하나의 parent, 즉 Wrap parent 아래에 모든 아이템들이 다이렉트로 있어야 합니다. + +위에서도 말한것 처럼 아래와 같이 변형되며, + +`row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)` + +이에 따라 col, col 은 width, height 값이외의 그 어떤값도 최종 코드에 영향을 끼치지 않습니다. + +예시를 들어 설명하자면, 아래와 같이 디자인이 구성되었을때 row 3 번만이 갖게 되는 🔴 red 값은 읽히지도, 처리되지도, 결과 코드에 반영되지도 않습니다. +이는 버그가 아니며, 기술적으로 지원이 불가능합니다. (위에 언급을 참조해주세요) + +``` +- autolayout root frame (column) 🔵 + - row 1 (autolayout) ⚪️ + - row 2 (autolayout) ⚪️ + - row 3 (autolayout) 🔴 + - row 4 (autolayout) ⚪️ + +🔵 = blue +🔴 = red +⚪️ = transparent (no bg) +``` + +## 같이보기 + +- 같이 볼 문서 없음 diff --git a/packages/support-flags/docs/--as-wrap.md b/packages/support-flags/docs/--as-wrap.md index d6971554..a4867cba 100644 --- a/packages/support-flags/docs/--as-wrap.md +++ b/packages/support-flags/docs/--as-wrap.md @@ -1,15 +1,80 @@ -# `--as=wrap` - flexbox / Wrap / [Reflect UI](https://reflect-ui.com) Wrap Widget Indication Flag +--- +title: As Wrap flag +id: "--as-wrap" +locale: en +stage: + - production + - staging + - experimental +--- + +# `--as-wrap` - flexbox / Wrap / [Reflect UI](https://reflect-ui.com) Wrap Widget Indication Flag (describing based on figma) Since no major design tool supports wrapping behaviour of the layout, we can use --as-wrap flag to indicate nested autolayout (e.g. `row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)` -## Syntax +**Accepted keys** - `--as-wrap` -- `--as-wrap=true` -- `--as=wrap` -## Can be +## Syntax + +```ts +`--as-wrap${"="typeof boolean}` +`--as=wrap` // under development (do not use) +``` + +## Examples + +``` +--as-wrap + +--as-wrap=true +--as-wrap=false + +--as-wrap=yes +--as-wrap=no + +----as-wrap +``` + +## Behavior + +**Element** + +- Web - On web, the parent will have [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) property. (`flex-wrap: wrap`) +- Flutter - On Flutter, the parent will be Tokenized as [`Wrap`](https://api.flutter.dev/flutter/widgets/Wrap-class.html) Widget. + +_Summing up._ - flexbox on css - Wrap on flutter - Wrap with reflect-ui + +**Transformed Hierarchy** +When Wrap being composed, for design, on the item's perspective, it has a 2 parent including the root. +But this will be transformed when generated to code. The item must be placed directly under the root Wrap. + +As a result, the hierarchy will be transformed as below. + +`row([col([row, row, row]), col([row, row, row])])`) as a `wrap(item, item, item, item, item, item)` + +By this, the "col, col" does not impact any part of the final output code. + +For example, if the design is composed as below, the "red" color property held by row 3 will not be read, be interpreted or be applied to the final output code. +This is not a bug, It's technically impossible. (Reason: mentioned above) + +``` +- autolayout root frame (column) 🔵 + - row 1 (autolayout) ⚪️ + - row 2 (autolayout) ⚪️ + - row 3 (autolayout) 🔴 + - row 4 (autolayout) ⚪️ + +🔵 = blue +🔴 = red +⚪️ = transparent (no bg) +``` + +## See also + +- No related documents From 5ce64d9f03b8f811607c2741607ee368704e66e4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 06:27:17 +0900 Subject: [PATCH 4/6] add seo section to heading flags docs - en, ko --- packages/support-flags/docs/--as-h1.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h1.md | 14 +++++++++++++- packages/support-flags/docs/--as-h2.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h2.md | 12 ++++++++++++ packages/support-flags/docs/--as-h3.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h3.md | 12 ++++++++++++ packages/support-flags/docs/--as-h4.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h4.md | 12 ++++++++++++ packages/support-flags/docs/--as-h5.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h5.md | 12 ++++++++++++ packages/support-flags/docs/--as-h6.ko.md | 9 +++++++++ packages/support-flags/docs/--as-h6.md | 12 ++++++++++++ 12 files changed, 127 insertions(+), 1 deletion(-) diff --git a/packages/support-flags/docs/--as-h1.ko.md b/packages/support-flags/docs/--as-h1.ko.md index 7f3822a2..c8d43399 100644 --- a/packages/support-flags/docs/--as-h1.ko.md +++ b/packages/support-flags/docs/--as-h1.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h1.md b/packages/support-flags/docs/--as-h1.md index 61f38343..530690bf 100644 --- a/packages/support-flags/docs/--as-h1.md +++ b/packages/support-flags/docs/--as-h1.md @@ -2,6 +2,9 @@ title: As-H1 flag id: "--as-h1" locale: en +locales: + - en + - ko stage: - production - staging @@ -25,7 +28,7 @@ stage: `--h1${"="typeof boolean}` ``` -## Example +## Examples ``` --h1 @@ -39,6 +42,15 @@ stage: ----h1 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** diff --git a/packages/support-flags/docs/--as-h2.ko.md b/packages/support-flags/docs/--as-h2.ko.md index a081a5f6..bb2d1f42 100644 --- a/packages/support-flags/docs/--as-h2.ko.md +++ b/packages/support-flags/docs/--as-h2.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h2.md b/packages/support-flags/docs/--as-h2.md index 53ffd6b6..cafb26a0 100644 --- a/packages/support-flags/docs/--as-h2.md +++ b/packages/support-flags/docs/--as-h2.md @@ -2,6 +2,9 @@ title: As-H2 flag id: "--as-h2" locale: en +locales: + - en + - ko stage: - production - staging @@ -39,6 +42,15 @@ stage: ----h2 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** diff --git a/packages/support-flags/docs/--as-h3.ko.md b/packages/support-flags/docs/--as-h3.ko.md index ac8b9e09..0517806b 100644 --- a/packages/support-flags/docs/--as-h3.ko.md +++ b/packages/support-flags/docs/--as-h3.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h3.md b/packages/support-flags/docs/--as-h3.md index cf9f8f7c..fe453a87 100644 --- a/packages/support-flags/docs/--as-h3.md +++ b/packages/support-flags/docs/--as-h3.md @@ -2,6 +2,9 @@ title: As-H3 flag id: "--as-h3" locale: en +locales: + - en + - ko stage: - production - staging @@ -39,6 +42,15 @@ stage: ----h3 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** diff --git a/packages/support-flags/docs/--as-h4.ko.md b/packages/support-flags/docs/--as-h4.ko.md index 7427dc35..194611f2 100644 --- a/packages/support-flags/docs/--as-h4.ko.md +++ b/packages/support-flags/docs/--as-h4.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h4.md b/packages/support-flags/docs/--as-h4.md index 959f8e3a..7670d98c 100644 --- a/packages/support-flags/docs/--as-h4.md +++ b/packages/support-flags/docs/--as-h4.md @@ -2,6 +2,9 @@ title: As-H4 flag id: "--as-h4" locale: en +locales: + - en + - ko stage: - production - staging @@ -39,6 +42,15 @@ stage: ----h4 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** diff --git a/packages/support-flags/docs/--as-h5.ko.md b/packages/support-flags/docs/--as-h5.ko.md index d45403e2..702580da 100644 --- a/packages/support-flags/docs/--as-h5.ko.md +++ b/packages/support-flags/docs/--as-h5.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h5.md b/packages/support-flags/docs/--as-h5.md index 461cc5ee..18b3c47d 100644 --- a/packages/support-flags/docs/--as-h5.md +++ b/packages/support-flags/docs/--as-h5.md @@ -2,6 +2,9 @@ title: As-H5 flag id: "--as-h5" locale: en +locales: + - en + - ko stage: - production - staging @@ -39,6 +42,15 @@ stage: ----h5 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** diff --git a/packages/support-flags/docs/--as-h6.ko.md b/packages/support-flags/docs/--as-h6.ko.md index 6ef45052..9710f57b 100644 --- a/packages/support-flags/docs/--as-h6.ko.md +++ b/packages/support-flags/docs/--as-h6.ko.md @@ -39,6 +39,15 @@ stage: ----h1 ``` +## 언제 사용하면 좋을까 + + + +**SEO** + +element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 헤딩일 경우, 그 효과는 더 큽니다. +모바일 앱의 경우, 해당 사항이 없겠지만, 웹어서는 의미에 맞게 h1~h6 을 지정하는 것이 좋습니다. + ## 동작 **엘레먼트 (Element)** diff --git a/packages/support-flags/docs/--as-h6.md b/packages/support-flags/docs/--as-h6.md index 852899f6..d8b1a3f3 100644 --- a/packages/support-flags/docs/--as-h6.md +++ b/packages/support-flags/docs/--as-h6.md @@ -2,6 +2,9 @@ title: As-H6 flag id: "--as-h6" locale: en +locales: + - en + - ko stage: - production - staging @@ -39,6 +42,15 @@ stage: ----h6 ``` +## When to use + + + +**SEO** + +Explicitly specifying the heading element tag, ofcourse, is essential for SEO. +This does not applies to mobile apps, but for web, you might want to specify headings in a semantic sence. + ## Behavior **Element** From f2f15d7c31f6ecf258af6246a66336c09356674b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 06:39:33 +0900 Subject: [PATCH 5/6] update fix-height docs & add `ko` translation --- .../support-flags/docs/--fix-height.ko.md | 53 +++++++++++++++++++ packages/support-flags/docs/--fix-height.md | 33 +++++++++++- 2 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 packages/support-flags/docs/--fix-height.ko.md diff --git a/packages/support-flags/docs/--fix-height.ko.md b/packages/support-flags/docs/--fix-height.ko.md new file mode 100644 index 00000000..656f1c5a --- /dev/null +++ b/packages/support-flags/docs/--fix-height.ko.md @@ -0,0 +1,53 @@ +--- +title: Fix Height flag +description: fix-height 플래그를 이용하여 엘레먼트의 height 값 고정하기. +id: "--fix-height" +locale: ko +stage: + - production + - staging + - experimental +--- + +# `--fix-height` 플래그 + +적용시, 엘레먼트의 height 값을 parent 또는 child 에 의해 리사이징하지 않고, 고정값을 부여합니다. 현제 디자인 상에서 리사이징에 의해 변화하더라도, fix-height 플래그를 적용하면 엘레먼트의 height 값이 항상 고정됩니다. + +## 문법 + +```ts +`--fix-height${"="typeof boolean}` +``` + +**적용 예시** + +``` +--fix-height + +--fix-height=true +--fix-height=false + +--fix-height=True +--fix-height=False + +--fix-height=yes +--fix-height=no +``` + +## 동작 + +**변경되는 프로퍼티** +사이즈 고정을 위해, `min`, `max` 값또한 지정되게 됩니다. 플랫폼에 따른 적용 프로퍼티는 다음과 같습니다. + +- 웹, css 기반의 모든 프레임워크 + - [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) + - [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) + - [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) +- Flutter, [`ConstrainedBox`](https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html) 윗젯 사용 + - `height` + - `minHeight` + - `maxHeight` + +## 같이보기 + +- [`--fix-width`](./--fix-width) diff --git a/packages/support-flags/docs/--fix-height.md b/packages/support-flags/docs/--fix-height.md index e6e13e7a..9ab877da 100644 --- a/packages/support-flags/docs/--fix-height.md +++ b/packages/support-flags/docs/--fix-height.md @@ -1,4 +1,15 @@ -# `--fix-height` Flag (Draft) +--- +title: Fix Height flag +description: Fixing the height with fix-height flag for statically sized elements. +id: "--fix-height" +locale: en +stage: + - production + - staging + - experimental +--- + +# `--fix-height` Flag When applied, this will force dedicated layer's `height` to be ignore responsive `height`, use current `height` as fixed `height` instead. @@ -8,7 +19,7 @@ When applied, this will force dedicated layer's `height` to be ignore responsive `--fix-height${"="typeof boolean}` ``` -## Example +**Examples** ``` --fix-height @@ -22,3 +33,21 @@ When applied, this will force dedicated layer's `height` to be ignore responsive --fix-height=yes --fix-height=no ``` + +## Behaviour + +**Modifying Properties** +For fixing the sizing, we also specify `min` and `max` values as well. Here is the list of properties that will be modified by platforms. + +- Web, css based frameworks + - [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) + - [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) + - [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) +- Flutter, Using [`ConstrainedBox`](https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html) Widget + - `height` + - `minHeight` + - `maxHeight` + +## See also + +- [`--fix-width`](./--fix-width) From f144a9f68b45017978e66e8967dc29af3916d500 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 4 Jan 2022 06:41:23 +0900 Subject: [PATCH 6/6] update docs rel path referencing --- packages/support-flags/docs/--artwork.ko.md | 2 +- packages/support-flags/docs/--artwork.md | 2 +- packages/support-flags/docs/--as-h1.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h1.md | 14 ++++++------- packages/support-flags/docs/--as-h2.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h2.md | 14 ++++++------- packages/support-flags/docs/--as-h3.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h3.md | 14 ++++++------- packages/support-flags/docs/--as-h4.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h4.md | 14 ++++++------- packages/support-flags/docs/--as-h5.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h5.md | 14 ++++++------- packages/support-flags/docs/--as-h6.ko.md | 14 ++++++------- packages/support-flags/docs/--as-h6.md | 14 ++++++------- packages/support-flags/docs/--as-nbsp.md | 2 +- packages/support-flags/docs/--as-p.md | 16 +++++++-------- packages/support-flags/docs/--as-span.md | 14 ++++++------- packages/support-flags/docs/--as-wrap.ko.md | 1 + packages/support-flags/docs/--as-wrap.md | 4 ++++ .../support-flags/docs/--empty-content.md | 4 ++-- packages/support-flags/docs/--hash.md | 2 +- packages/support-flags/docs/--height.md | 6 +++--- packages/support-flags/docs/--id.md | 2 +- packages/support-flags/docs/--max-height.md | 20 ++++++++++++++++--- packages/support-flags/docs/--max-width.md | 20 ++++++++++++++++--- packages/support-flags/docs/--min-height.md | 20 ++++++++++++++++--- packages/support-flags/docs/--min-width.md | 20 ++++++++++++++++--- packages/support-flags/docs/--overflow.md | 2 +- packages/support-flags/docs/--scroll.md | 2 +- packages/support-flags/docs/--width.md | 6 +++--- 30 files changed, 187 insertions(+), 126 deletions(-) diff --git a/packages/support-flags/docs/--artwork.ko.md b/packages/support-flags/docs/--artwork.ko.md index 00a9158f..91933366 100644 --- a/packages/support-flags/docs/--artwork.ko.md +++ b/packages/support-flags/docs/--artwork.ko.md @@ -49,4 +49,4 @@ stage: ## 같이보기 -- [`--export-as`](../--export-as) +- [`--export-as`](./--export-as) diff --git a/packages/support-flags/docs/--artwork.md b/packages/support-flags/docs/--artwork.md index dfe8cb65..938c4f86 100644 --- a/packages/support-flags/docs/--artwork.md +++ b/packages/support-flags/docs/--artwork.md @@ -47,4 +47,4 @@ When applied, this will force the node to be exported as an image. ## See Also -- [`--export-as`](../--export-as) +- [`--export-as`](./--export-as) diff --git a/packages/support-flags/docs/--as-h1.ko.md b/packages/support-flags/docs/--as-h1.ko.md index c8d43399..b7efe3b0 100644 --- a/packages/support-flags/docs/--as-h1.ko.md +++ b/packages/support-flags/docs/--as-h1.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h1.md b/packages/support-flags/docs/--as-h1.md index 530690bf..c1a8e7e4 100644 --- a/packages/support-flags/docs/--as-h1.md +++ b/packages/support-flags/docs/--as-h1.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h1` flag. ## See Also -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h2.ko.md b/packages/support-flags/docs/--as-h2.ko.md index bb2d1f42..918b0505 100644 --- a/packages/support-flags/docs/--as-h2.ko.md +++ b/packages/support-flags/docs/--as-h2.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h1`](../--as-h1) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h2.md b/packages/support-flags/docs/--as-h2.md index cafb26a0..8eb83320 100644 --- a/packages/support-flags/docs/--as-h2.md +++ b/packages/support-flags/docs/--as-h2.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h2` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h3.ko.md b/packages/support-flags/docs/--as-h3.ko.md index 0517806b..027f6c30 100644 --- a/packages/support-flags/docs/--as-h3.ko.md +++ b/packages/support-flags/docs/--as-h3.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h3.md b/packages/support-flags/docs/--as-h3.md index fe453a87..448a821d 100644 --- a/packages/support-flags/docs/--as-h3.md +++ b/packages/support-flags/docs/--as-h3.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h3` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h4.ko.md b/packages/support-flags/docs/--as-h4.ko.md index 194611f2..760b615b 100644 --- a/packages/support-flags/docs/--as-h4.ko.md +++ b/packages/support-flags/docs/--as-h4.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h4.md b/packages/support-flags/docs/--as-h4.md index 7670d98c..1b965648 100644 --- a/packages/support-flags/docs/--as-h4.md +++ b/packages/support-flags/docs/--as-h4.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h4` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h5.ko.md b/packages/support-flags/docs/--as-h5.ko.md index 702580da..5b4abafa 100644 --- a/packages/support-flags/docs/--as-h5.ko.md +++ b/packages/support-flags/docs/--as-h5.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h5.md b/packages/support-flags/docs/--as-h5.md index 18b3c47d..5cac0f4c 100644 --- a/packages/support-flags/docs/--as-h5.md +++ b/packages/support-flags/docs/--as-h5.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h5` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h6.ko.md b/packages/support-flags/docs/--as-h6.ko.md index 9710f57b..91f92932 100644 --- a/packages/support-flags/docs/--as-h6.ko.md +++ b/packages/support-flags/docs/--as-h6.ko.md @@ -58,10 +58,10 @@ element tag 를 명시하는것은 SEO 에 있어, 필수적입니다. 특히 ## 같이보기 -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-h6.md b/packages/support-flags/docs/--as-h6.md index d8b1a3f3..a381f60d 100644 --- a/packages/support-flags/docs/--as-h6.md +++ b/packages/support-flags/docs/--as-h6.md @@ -61,10 +61,10 @@ We don't yet support text style matching with `--h6` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-nbsp.md b/packages/support-flags/docs/--as-nbsp.md index b0630ed3..7586f63a 100644 --- a/packages/support-flags/docs/--as-nbsp.md +++ b/packages/support-flags/docs/--as-nbsp.md @@ -33,4 +33,4 @@ ## See also -- [`--as-char`](../--as-char) +- [`--as-char`](./--as-char) diff --git a/packages/support-flags/docs/--as-p.md b/packages/support-flags/docs/--as-p.md index c33c2aca..eebdba1f 100644 --- a/packages/support-flags/docs/--as-p.md +++ b/packages/support-flags/docs/--as-p.md @@ -38,11 +38,11 @@ We don't yet support text style matching with `--p` flag. ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) -- [`--as-br`](../--as-br) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) +- [`--as-br`](./--as-br) diff --git a/packages/support-flags/docs/--as-span.md b/packages/support-flags/docs/--as-span.md index 85325de1..9401c2bb 100644 --- a/packages/support-flags/docs/--as-span.md +++ b/packages/support-flags/docs/--as-span.md @@ -50,10 +50,10 @@ export interface AsSpanFlag { ## See Also -- [`--as-h1`](../--as-h1) -- [`--as-h2`](../--as-h2) -- [`--as-h3`](../--as-h3) -- [`--as-h4`](../--as-h4) -- [`--as-h5`](../--as-h5) -- [`--as-h6`](../--as-h6) -- [`--as-p`](../--as-p) +- [`--as-h1`](./--as-h1) +- [`--as-h2`](./--as-h2) +- [`--as-h3`](./--as-h3) +- [`--as-h4`](./--as-h4) +- [`--as-h5`](./--as-h5) +- [`--as-h6`](./--as-h6) +- [`--as-p`](./--as-p) diff --git a/packages/support-flags/docs/--as-wrap.ko.md b/packages/support-flags/docs/--as-wrap.ko.md index 1fb489eb..266e8df3 100644 --- a/packages/support-flags/docs/--as-wrap.ko.md +++ b/packages/support-flags/docs/--as-wrap.ko.md @@ -1,5 +1,6 @@ --- title: As Wrap flag +description: 정적인 디자인에 플래그를 이용한 Wraping 레이아웃 적용하기 id: "--as-wrap" locale: ko stage: diff --git a/packages/support-flags/docs/--as-wrap.md b/packages/support-flags/docs/--as-wrap.md index a4867cba..14edc993 100644 --- a/packages/support-flags/docs/--as-wrap.md +++ b/packages/support-flags/docs/--as-wrap.md @@ -1,7 +1,11 @@ --- title: As Wrap flag +description: Add Wrapping compatibility to your static design. id: "--as-wrap" locale: en +locales: + - en + - ko stage: - production - staging diff --git a/packages/support-flags/docs/--empty-content.md b/packages/support-flags/docs/--empty-content.md index 73635c2e..3b26fd6e 100644 --- a/packages/support-flags/docs/--empty-content.md +++ b/packages/support-flags/docs/--empty-content.md @@ -4,5 +4,5 @@ ## See also -- [`--dynamic-item`](../--dynamic-item/README.md) -- [`--dynamic-content`](../--dynamic-container/README.md) +- [`--dynamic-item`](./--dynamic-item/README.md) +- [`--dynamic-content`](./--dynamic-container/README.md) diff --git a/packages/support-flags/docs/--hash.md b/packages/support-flags/docs/--hash.md index 6a6a5d74..e23a2958 100644 --- a/packages/support-flags/docs/--hash.md +++ b/packages/support-flags/docs/--hash.md @@ -22,4 +22,4 @@ Now vector 1 & 2 will use the same svg data, based on vector 2's svg data (since ## See also -- [`--id`](../--id/README.md) +- [`--id`](./--id/README.md) diff --git a/packages/support-flags/docs/--height.md b/packages/support-flags/docs/--height.md index 275732a6..a48a7b75 100644 --- a/packages/support-flags/docs/--height.md +++ b/packages/support-flags/docs/--height.md @@ -112,6 +112,6 @@ This will generate style like below. ## See Also -- [`--max-height`](../--max-height) -- [`--min-height`](../--min-height) -- [`--width`](../--width) +- [`--max-height`](./--max-height) +- [`--min-height`](./--min-height) +- [`--width`](./--width) diff --git a/packages/support-flags/docs/--id.md b/packages/support-flags/docs/--id.md index 35063f3a..8705a008 100644 --- a/packages/support-flags/docs/--id.md +++ b/packages/support-flags/docs/--id.md @@ -11,4 +11,4 @@ by specifing the id flag, you can take advantage in below scenarios. ## See also -- [`--hash`](../--hash/README.md) +- [`--hash`](./--hash/README.md) diff --git a/packages/support-flags/docs/--max-height.md b/packages/support-flags/docs/--max-height.md index c5a2f735..04c515d1 100644 --- a/packages/support-flags/docs/--max-height.md +++ b/packages/support-flags/docs/--max-height.md @@ -1,3 +1,17 @@ +--- +title: Max Height flag +description: Add max-height property for your responsive design with flags. +id: "--max-height" +locale: en +locales: + - en + - ko +stage: + - production + - staging + - experimental +--- + # Max height **Accepted keys** @@ -31,6 +45,6 @@ When applied, this will force the node to be rendered with a `max-height` style. ## See Also -- [`--max-width`](../--max-width) -- [`--min-height`](../--max-height) -- [`--height`](../--height) +- [`--max-width`](./--max-width) +- [`--min-height`](./--max-height) +- [`--height`](./--height) diff --git a/packages/support-flags/docs/--max-width.md b/packages/support-flags/docs/--max-width.md index 6dd58b83..aa77d36d 100644 --- a/packages/support-flags/docs/--max-width.md +++ b/packages/support-flags/docs/--max-width.md @@ -1,3 +1,17 @@ +--- +title: Max Width flag +description: Add max-width property for your responsive design with flags. +id: "--max-width" +locale: en +locales: + - en + - ko +stage: + - production + - staging + - experimental +--- + # Max width **Accepted keys** @@ -31,6 +45,6 @@ When applied, this will force the node to be rendered with a max-width style. ## See Also -- [`--max-height`](../--max-height) -- [`--min-width`](../--max-width) -- [`--width`](../--max-width) +- [`--max-height`](./--max-height) +- [`--min-width`](./--max-width) +- [`--width`](./--max-width) diff --git a/packages/support-flags/docs/--min-height.md b/packages/support-flags/docs/--min-height.md index 059d7771..9b832ef5 100644 --- a/packages/support-flags/docs/--min-height.md +++ b/packages/support-flags/docs/--min-height.md @@ -1,3 +1,17 @@ +--- +title: Min Height flag +description: Add min-height property for your responsive design with flags. +id: "--min-height" +locale: en +locales: + - en + - ko +stage: + - production + - staging + - experimental +--- + # Min height **Accepted keys** @@ -31,6 +45,6 @@ When applied, this will force the node to be rendered with a `min-height` style. ## See Also -- [`--max-height`](../--max-height) -- [`--min-width`](../--max-width) -- [`--height`](../--height) +- [`--max-height`](./--max-height) +- [`--min-width`](./--max-width) +- [`--height`](./--height) diff --git a/packages/support-flags/docs/--min-width.md b/packages/support-flags/docs/--min-width.md index 28df8815..ac6e7414 100644 --- a/packages/support-flags/docs/--min-width.md +++ b/packages/support-flags/docs/--min-width.md @@ -1,3 +1,17 @@ +--- +title: Min Width flag +description: Add min-width property for your responsive design with flags. +id: "--min-width" +locale: en +locales: + - en + - ko +stage: + - production + - staging + - experimental +--- + # Min width **Accepted keys** @@ -31,6 +45,6 @@ When applied, this will force the node to be rendered with a `min-width` style. ## See Also -- [`--max-width`](../--max-width) -- [`--min-height`](../--min-height) -- [`--width`](../--width) +- [`--max-width`](./--max-width) +- [`--min-height`](./--min-height) +- [`--width`](./--width) diff --git a/packages/support-flags/docs/--overflow.md b/packages/support-flags/docs/--overflow.md index c4d2fed5..f9c48d31 100644 --- a/packages/support-flags/docs/--overflow.md +++ b/packages/support-flags/docs/--overflow.md @@ -1,3 +1,3 @@ ## See also -[`--scroll`](../--scroll/README.md) +[`--scroll`](./--scroll/README.md) diff --git a/packages/support-flags/docs/--scroll.md b/packages/support-flags/docs/--scroll.md index 7240e0fa..5007e2bb 100644 --- a/packages/support-flags/docs/--scroll.md +++ b/packages/support-flags/docs/--scroll.md @@ -1,3 +1,3 @@ ## See also -[`--overflow`](../--overflow/README.md) +[`--overflow`](./--overflow/README.md) diff --git a/packages/support-flags/docs/--width.md b/packages/support-flags/docs/--width.md index 40beb9cb..0e159b0f 100644 --- a/packages/support-flags/docs/--width.md +++ b/packages/support-flags/docs/--width.md @@ -112,6 +112,6 @@ This will generate style like below. ## See Also -- [`--max-width`](../--max-width) -- [`--min-width`](../--min-width) -- [`--height`](../--height) +- [`--max-width`](./--max-width) +- [`--min-width`](./--min-width) +- [`--height`](./--height)