diff --git a/website/docs/components/badge/badge.md b/website/docs/components/badge/badge.md index ef5950bf4d..f91c44a44c 100644 --- a/website/docs/components/badge/badge.md +++ b/website/docs/components/badge/badge.md @@ -108,7 +108,7 @@ Don’t confuse [Tag](/components/tag/tag) and Badge components. Tag is used for ![](static/table-yes-no.png) -## Location +## Placement Badge is usually placed to the right of the element. As an exception, in the [Notice](/components/notice/notice) component, badge is positioned to the left relative to the text. Badge's margins are always multiples of 4. diff --git a/website/docs/components/divider/divider.md b/website/docs/components/divider/divider.md index 2869a030a9..16c0888738 100644 --- a/website/docs/components/divider/divider.md +++ b/website/docs/components/divider/divider.md @@ -73,7 +73,9 @@ const App = PlaygroundGeneration( **Divider** is a component that visually and semantically separates content or components. -## Types +### Types and themes + +### Types Divider has two types: `primary` and `secondary`. Secondary type helps to separate and show the connection between two parts of the content. @@ -84,7 +86,7 @@ Table: Divider types | `primary` | ![](static/solid.png) | `border: 1px solid var(--border-primary)` | | `secondary`| ![](static/dashed.png) | `border: 1px dashed var(--border-primary)` | -## Themes +### Themes The divider can be used either on a light or dark/colored background. diff --git a/website/docs/components/dot/dot.md b/website/docs/components/dot/dot.md index 11992a14b1..6267f47422 100644 --- a/website/docs/components/dot/dot.md +++ b/website/docs/components/dot/dot.md @@ -101,7 +101,7 @@ Table: Dot sizes | L with a counter inside | ![](static/dot-on.png) | Use it to mark controls from the outside and show the number of updates. | | | ![](static/xl-margins.png) | | -## Location +## Placement Dot component can be set to the up right corner of the control or inside the list. In cases where a dot is above the component, it is always has `transform: translate (30%, -30%)`. diff --git a/website/docs/components/dropdown-menu/dropdown-menu.md b/website/docs/components/dropdown-menu/dropdown-menu.md index 6bf97e53d8..944a65fa6b 100644 --- a/website/docs/components/dropdown-menu/dropdown-menu.md +++ b/website/docs/components/dropdown-menu/dropdown-menu.md @@ -36,7 +36,7 @@ The dropdown width can be defined in two ways. We recommended to avoid limiting the dropdown's height for the menus. It's important for the user to observe all available options, especially if there are links or different controls. We don’t recommend using a scroll for such menus. -## Location +## Placement The menu always drops down, regardless of space availability under the trigger. This behavior is necessary to enable accessible keyboard control of the menu. diff --git a/website/docs/components/notice-global/notice-global.md b/website/docs/components/notice-global/notice-global.md index 9c05aff220..b54f3346c8 100644 --- a/website/docs/components/notice-global/notice-global.md +++ b/website/docs/components/notice-global/notice-global.md @@ -144,7 +144,7 @@ There's an `8px` (`--spacing-2x`) margin between the text and any buttons that f ![](static/gnotice-margins.png) -## Location +## Placement - Always position this notice above the main website header. - Stretch the notice to cover the full width of the screen. diff --git a/website/docs/components/notice/notice.md b/website/docs/components/notice/notice.md index a085715d7a..2d9639816c 100644 --- a/website/docs/components/notice/notice.md +++ b/website/docs/components/notice/notice.md @@ -186,7 +186,7 @@ Table: Notice content examples | Minimum possible elements | ![](static/notice-minimal.png) | | Maximum possible elements | ![](static/notice-monster.png) | -## Location +## Placement ### On page diff --git a/website/docs/components/tab-line/tab-line.md b/website/docs/components/tab-line/tab-line.md index c1dcb91113..9a17b0d412 100644 --- a/website/docs/components/tab-line/tab-line.md +++ b/website/docs/components/tab-line/tab-line.md @@ -164,7 +164,7 @@ Table: TabLine states When switching between active tabs, the border-bottom moves with an `ease` transition and a duration of `500ms`. -## Location +## Placement TabLine is always placed under the [ProductHead](/components/product-head/product-head) of the report, following the title, additional controls, and filters that affect the entire report. diff --git a/website/docs/patterns/feedback-yes-no/feedback-yes-no.md b/website/docs/patterns/feedback-yes-no/feedback-yes-no.md index 1a94b83bac..970935631b 100644 --- a/website/docs/patterns/feedback-yes-no/feedback-yes-no.md +++ b/website/docs/patterns/feedback-yes-no/feedback-yes-no.md @@ -29,7 +29,7 @@ There are two potential variants for the notice to appear: Session length can be defined as a time interval, the next page load, or an update of company data. -### Location +### Placement Typically, this component is positioned at the top of a report or product.