diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 46a19a704b..04c8c3e057 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ First of all, thank you for your interest in the library. We'd love to accept your fixes and improvements ✨ -### Prerequisites +## Prerequisites 1. Install the latest LTS version of [Node.js](https://nodejs.org/en). 2. Install [pnpm](https://pnpm.js.org) globally by running: `npm i -g pnpm@8`. @@ -11,7 +11,7 @@ First of all, thank you for your interest in the library. We'd love to accept yo Please note that our maintainers primarily develop on macOS. While developing on Linux or Windows is possible, there might be unintended issues. Don't hesitate to [reach out for help](https://github.com/semrush/intergalactic/issues/new/choose) if you encounter any problems. -### Getting Started +## Getting Started 1. Clone the repository by running: `git clone git@github.com:semrush/intergalactic.git && cd intergalactic`. 2. Install project dependencies using: `pnpm install`. @@ -20,7 +20,7 @@ Please note that our maintainers primarily develop on macOS. While developing on 3. Build components with: `pnpm build`. -### Submitting Changes +## Submitting Changes Follow these steps to submit your changes: diff --git a/README.md b/README.md index 0580ae9644..52406f7f01 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -

+

Intergalactic Design System -

+

[![codecov](https://codecov.io/gh/semrush/intergalactic/branch/master/graph/badge.svg?token=OILALW3YQE)](https://codecov.io/gh/semrush/intergalactic) [![version](https://img.shields.io/npm/v/@semcore/ui.svg)](https://www.npmjs.com/package/@semcore/ui) @@ -10,7 +10,7 @@ Intergalactic is a constantly developing design system of [React](https://reactj --- -## Features ✨ +### Features ✨ - 56+ components for your design (you can also find them in the [Figma Community](https://www.figma.com/@semrush)) - High-quality React components out of the box @@ -19,7 +19,8 @@ Intergalactic is a constantly developing design system of [React](https://reactj - Powerful collection of charts - Theme customization in every detail (find details in the [Design tokens guide](https://developer.semrush.com/intergalactic/style/design-tokens/)) -## Browser Support + +### Browser Support - Google Chrome - Mozilla Firefox @@ -27,7 +28,9 @@ Intergalactic is a constantly developing design system of [React](https://reactj - Microsoft Edge - Safari (two last versions) -## Installation 🛠 +--- + +### Installation 🛠 ```sh pnpm add intergalactic @@ -39,11 +42,11 @@ npm install intergalactic After the installation, all components will be available at `intergalactic/{{component_name}}`. -## How to contribute to the project +### How to contribute to the project [Learn more about contributing ›](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md) -### Contributors +#### Contributors Thanks to all contributors, you are so awesome! ❤️ @@ -58,12 +61,12 @@ Thanks to all contributors, you are so awesome! ❤️ - [Tatana Iliukhina](https://github.com/tatana-I) - and many others from Semrush team -### I found a bug! 🕵️‍ +#### I found a bug! 🕵️‍ Great job! You always can open an [issue in the repository](https://github.com/semrush/intergalactic/issues/new/choose). We'll be glad to help! -### I have a question or feature request! 🙋 +#### I have a question or feature request! 🙋 You can also open an [issue](https://github.com/semrush/intergalactic/issues/new/choose). We will review it soon! diff --git a/SECURITY.md b/SECURITY.md index 1d3e41cec6..88c6f32b85 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -1,4 +1,4 @@ -# Semrush Security Policies and Procedures +## Semrush Security Policies and Procedures This document outlines security procedures and general policies for the Intergalactic project as found on https://github.com/semrush/intergalactic. @@ -6,7 +6,7 @@ Intergalactic project as found on https://github.com/semrush/intergalactic. * [Reporting a Vulnerability](#reporting-a-vulnerability) * [Following steps](#following-steps) -## Reporting a Vulnerability +### Reporting a Vulnerability Thank you for improving the security of our open source products. Semrush Security team takes all vulnerabilities seriously. @@ -14,7 +14,7 @@ Report security vulnerabilities by following the security section on the Semrush https://www.semrush.com/company/security/ -## Following steps +### Following steps Please note that all submitted vulnerabilities will be processed in accordance with the policy that can be found at the link above. diff --git a/website/docs/.vitepress/sidebarConfig.ts b/website/docs/.vitepress/sidebarConfig.ts index 5bb5027f63..2dfb49bfac 100644 --- a/website/docs/.vitepress/sidebarConfig.ts +++ b/website/docs/.vitepress/sidebarConfig.ts @@ -365,16 +365,16 @@ export const sideBarConfig: SidebarConfig = [ activeMatch: '/components/radio/', text: 'Radio', }, - { - link: '/components/select/select', - activeMatch: '/components/select/', - text: 'Select / Multiselect', - }, { link: '/components/scroll-area/scroll-area', activeMatch: '/components/scroll-area/', text: 'ScrollArea', }, + { + link: '/components/select/select', + activeMatch: '/components/select/', + text: 'Select / Multiselect', + }, { link: '/components/side-panel/side-panel', activeMatch: '/components/side-panel/', diff --git a/website/docs/components/accordion/accordion.md b/website/docs/components/accordion/accordion.md index 8993882f65..28970e82ad 100644 --- a/website/docs/components/accordion/accordion.md +++ b/website/docs/components/accordion/accordion.md @@ -32,19 +32,19 @@ Component consists of the following: - Collapsed areas with content (`Accordion.Item.Collapse`) - `Accordion.Item.Chevron` -## Accordion types +## Appearance + +### Types Intergalactic Design System has two accordion types (`use` property in API): Table: Accordion types -| Type | Appearance example | Description | -| ------------------ | ------------------- | ----- | -| `primary` | ![](static/default-bg.png) | Main accent accordion. | +| `use` | Appearance example | Description | +| ----------- | -------------------------- | ----------------------------- | +| `primary` | ![](static/default-bg.png) | Main accent accordion. | | `secondary` | ![](static/default.png) | Default non-accent accordion. | -## Appearance - The `ChevronRight` icon always has `margin-right: 8px` with all font sizes. ![](static/margins.png) @@ -59,10 +59,10 @@ You are free to set link or button of any size you need as the accordion trigger Table: Accordion trigger styles -| Type | Appearance example | Default styles | -| ------------------ | ------------------- | ------------------- | -| `secondary` | ![](static/default.png) | Icon uses the `--icon-primary-neutral` token for color; text uses the `--text-primary` token for color. | -| `primary` | ![](static/default-bg.png) | The default background color uses `--bg-secondary-neutral` token. | +| Type | Appearance example | Default styles | +| ----------- | -------------------------- | ------------------------------------------------------------------------------------------------------- | +| `secondary` | ![](static/default.png) | Icon uses the `--icon-primary-neutral` token for color; text uses the `--text-primary` token for color. | +| `primary` | ![](static/default-bg.png) | The default background color uses `--bg-secondary-neutral` token. | ### Collapsed content styles @@ -94,13 +94,13 @@ On mobile devices and in the menu, it is recommended to close previously opened Table: Accordion states -| State | Appearance examples | Description and styles | -| -------- | ---------------------- | ----------------------- | -| Default | ![](static/default-state.png) ![](static/default-state-2.png) | | -| Hover | ![](static/hover-state.png) ![](static/hover-state-2.png) | Cursor changes to `pointer`. If the accordion trigger has a background, it should change color to the next one in the palette. | -| Active | ![](static/active-state.png) ![](static/active-state-2.png) | The `ChevronRight` icon rotates to 90 degrees: `transform: rotate(90deg)`. All other trigger styles remain the same as in the `hover` state. | -| Disabled | ![](static/disabled-state.png) ![](static/disabled-state-2.png) | Use [`--disabled-opacity`](/style/design-tokens/design-tokens) token. | -| Loading | ![](static/loading-state.png) ![](static/loading-state-2.png) | If the system needs time to load the content hidden in the accordion, then show [Spin](/components/spin/spin) with a respective size. By default, the spinner size is XS. | +| State | Appearance examples | Description and styles | +| -------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Default | ![](static/default-state.png) ![](static/default-state-2.png) | | +| Hover | ![](static/hover-state.png) ![](static/hover-state-2.png) | Cursor changes to `pointer`. If the accordion trigger has a background, it should change color to the next one in the palette. | +| Active | ![](static/active-state.png) ![](static/active-state-2.png) | The `ChevronRight` icon rotates to 90 degrees: `transform: rotate(90deg)`. All other trigger styles remain the same as in the `hover` state. | +| Disabled | ![](static/disabled-state.png) ![](static/disabled-state-2.png) | Use [`--disabled-opacity`](/style/design-tokens/design-tokens) token. | +| Loading | ![](static/loading-state.png) ![](static/loading-state-2.png) | If the system needs time to load the content hidden in the accordion, then show [Spin](/components/spin/spin) with a respective size. By default, the spinner size is XS. | ## Animation diff --git a/website/docs/components/auto-suggest/auto-suggest-code.md b/website/docs/components/auto-suggest/auto-suggest-code.md index 4aaa5d7b1d..0e76bc14a6 100644 --- a/website/docs/components/auto-suggest/auto-suggest-code.md +++ b/website/docs/components/auto-suggest/auto-suggest-code.md @@ -8,7 +8,7 @@ To create one of the search patterns (Combobox, AutoSuggest) you will need the f - [Select](/components/select/select) (1 piece) - [Input](/components/input/input) (1 piece) -## Combobox example +## Combobox ::: sandbox @@ -18,7 +18,7 @@ To create one of the search patterns (Combobox, AutoSuggest) you will need the f ::: -## AutoSuggest example +## AutoSuggest ::: sandbox diff --git a/website/docs/components/badge/badge.md b/website/docs/components/badge/badge.md index 95c6d5a407..5b70daab14 100644 --- a/website/docs/components/badge/badge.md +++ b/website/docs/components/badge/badge.md @@ -62,7 +62,7 @@ _For example, you added a new tab to the report. In this case, you can highlight Component has one size. -### Badge types +### Types Use the following badges in the products depending on the status of the feature or product: @@ -94,11 +94,11 @@ The feature status can be shown inside most of the components and controls. ![](static/button_secondary.png) -### Pill +### Pills ![](static/pills.png) -### Feature status in the notification +### Notification ![](static/notice.png) @@ -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/base-trigger/base-trigger.md b/website/docs/components/base-trigger/base-trigger.md index d6e6d841f7..3ad2aa2a18 100644 --- a/website/docs/components/base-trigger/base-trigger.md +++ b/website/docs/components/base-trigger/base-trigger.md @@ -14,7 +14,7 @@ tabs: Design('base-trigger'), A11y('base-trigger-a11y'), API('base-trigger-api') - `FilterTrigger` - `LinkTrigger` -## Sizes, margins and paddings +## Appearance Table: BaseTrigger sizes, margins and paddings diff --git a/website/docs/components/button/button.md b/website/docs/components/button/button.md index 5eb075c069..9e290615d9 100644 --- a/website/docs/components/button/button.md +++ b/website/docs/components/button/button.md @@ -219,7 +219,9 @@ You can add addons before and after the text. As addons you can use: - [Badge](/components/badge/badge) - [Flag](/components/flags/flags) -## Sizes and margins +## Appearance + +### Sizes Table: Button sizes and margins @@ -228,8 +230,6 @@ Table: Button sizes and margins | **M (28px)** | M | ![](static/size-m.png) | This is the default size of the button. Use it freely in filters, dropdowns, tables, etc. | | **L (40px)** | M | ![](static/size-l.png) | Use this size in modal windows for main actions, empty pages and page states that need to focus user on the main action. | -## Button types and themes - ### Types Intergalactic Design System has three button types (`use` property in API): @@ -242,7 +242,7 @@ All button types can be used on a white and gray background, as well as on a tra Table: Button types -| Button type | Appearance example | +| `use` | Appearance example | | ----------- | -------------------------------- | | `primary` | ![](static/button-primary.png) | | `secondary` | ![](static/button-secondary.png) | @@ -250,19 +250,20 @@ Table: Button types ### Themes -You can use themes for the buttons according to the visual hierarchy on the page. See the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide. +You can use themes (`theme` property in API) for the buttons according to the visual hierarchy on the page. See the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide. Invert theme button is used on dark or colored background. For example in [Tooltip](/components/tooltip/tooltip), [NoticeBubble](/components/notice-bubble/notice-bubble), etc. Table: Button themes -| Button type | `muted` | `info` | `success` | `danger` | `invert` | +| | `muted` | `info` | `success` | `danger` | `invert` | | ----------- | ------------------------------- | ----------------------------- | ---------------------------- | --------------------------- | -------------------------------------- | | `primary` | _no theme_ | ![](static/info-butt.png) | ![](static/success-butt.png) | ![](static/danger-butt.png) | ![](static/invert-normal.png) | | `secondary` | ![](static/secondary-muted.png) | _deprecated_ | _no theme_ | _no theme_ | ![](static/invert-second-normal.png) | | `tertiary` | ![](static/tertiary-muted.png) | ![](static/tertiary-info.png) | _no theme_ | _no theme_ | ![](static/invert-tertiary-normal.png) | -## Button states + ## Button with Link styles @@ -322,23 +323,30 @@ If you need to use a single button we recommend you to set it's width to at leas ![](static/button-width3.png) -## Margins between buttons +## Button label + +Button label always starts with a capital letter. + +![](static/capitalize.png) + +**Button label shall not exceed three words.** Too wordy controls are difficult to read. Try to fit the desired meaning into the short label. + +![](static/max-length.png) + +The label of the button should clearly indicate what happens after user clicks it. + +![](static/define-action.png) + +## Grouped buttons -**The margin between buttons shall be [multiple of 4](/layout/box-system/box-system#spacing_system)**. If there are several buttons next to each other, use the recommended margins shown in table below. +**The margin between buttons should be [multiple of 4](/layout/box-system/box-system#spacing_system)**. If there are several buttons next to each other, use the recommended margins shown in table below. -Table: Margins between buttons +Table: Grouped buttons | L (40px) | M (28px) | | ------------------------ | ------------------------ | | ![](static/margin-1.png) | ![](static/margin-2.png) | -## Usage in UX/UI - -- Try to have one call-to-action button on the page in the modal window. _For example, one green button._ -- We recommend you don’t disable CTA, even if something went wrong (especially in filters and modal windows with a single CTA). User needs to understand that the product/service is working. When user clicks on the button, add a message about the error or what user needs to do in this case. -- If you can't do without a button in the disabled state, be sure to include a tooltip for it explaining why the primary action is disabled. -- If there are a lot of actions in your interface, first of all set your priorities. Place controls in your interface according to the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide. Use inactive "quiet" buttons in the interface. Don't "shout" at the user with your interface, let them work with your product in visual "silence" and comfort. - ## Button variations ### Text button @@ -365,21 +373,7 @@ We recommend using the icon-only button if: **Add a tooltip with information about button's function to the icon-only buttons**. It helps user to understand functionality of the button if the icon isn’t the obvious one. ::: -## Button label - -Button label always starts with a capital letter. - -![](static/capitalize.png) - -**Button label shall not exceed three words.** Too wordy controls are difficult to read. Try to fit the desired meaning into the short label. - -![](static/max-length.png) - -The label of the button should clearly indicate what happens after user clicks it. - -![](static/define-action.png) - -## Branded buttons +### Branded buttons In case when you need to show that button connects or links to some other service, use a branded color for the background or the corresponding color icon of the service. @@ -398,6 +392,9 @@ It may also be helpful checking the following branding guidelines: - Youtube – [Branding Guidelines](https://developers.google.com/youtube/terms/branding-guidelines) and [Brand resources](https://www.youtube.com/howyoutubeworks/resources/brand-resources/#overview) - Pinterest – [How to use the Pinterest brand in your marketing](https://business.pinterest.com/en-us/brand-guidelines/) -## Grouped buttons +## Usage in UX/UI -To combine the components such as Button, [Input](/components/input/input), and [Select](/components/select/select), use the [`neighborLocation`](/components/button/button-api) property. +- Try to have one call-to-action button on the page in the modal window. _For example, one green button._ +- We recommend you don’t disable CTA, even if something went wrong (especially in filters and modal windows with a single CTA). User needs to understand that the product/service is working. When user clicks on the button, add a message about the error or what user needs to do in this case. +- If you can't do without a button in the disabled state, be sure to include a tooltip for it explaining why the primary action is disabled. +- If there are a lot of actions in your interface, first of all set your priorities. Place controls in your interface according to the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide. Use inactive "quiet" buttons in the interface. Don't "shout" at the user with your interface, let them work with your product in visual "silence" and comfort. diff --git a/website/docs/components/card/card-code.md b/website/docs/components/card/card-code.md index 6051866679..ee2b4732d6 100644 --- a/website/docs/components/card/card-code.md +++ b/website/docs/components/card/card-code.md @@ -2,7 +2,7 @@ title: Card tabs: Design('card'), A11y('card-a11y'), API('card-api'), Example('card-code'), Changelog('card-changelog') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/components/card/card.md b/website/docs/components/card/card.md index 4f72903256..feccaf7d22 100644 --- a/website/docs/components/card/card.md +++ b/website/docs/components/card/card.md @@ -77,7 +77,7 @@ Table: Card paddings ![](static/card-margins2.png) -### Layout +### Layout with sections You can divide content into sections if needed. diff --git a/website/docs/components/checkbox/checkbox.md b/website/docs/components/checkbox/checkbox.md index 708e902632..202e4c34b0 100644 --- a/website/docs/components/checkbox/checkbox.md +++ b/website/docs/components/checkbox/checkbox.md @@ -96,7 +96,7 @@ Component consists of the following: 2. `Checkbox.Value` 3. `Checkbox.Text` -## Sizes and margins +## Appearance ### Sizes @@ -120,7 +120,7 @@ Table: Checkbox margins | M (16px * 16px) | ![](static/margins-m.png) ![](static/vert-m.png) | | L (20px * 20px) | ![](static/margins-l.png) ![](static/vert-l.png) | -## Checkbox with a paragraph +## Checkbox with paragraph All checkbox sizes can be used with the corresponding text paragraphs. @@ -143,7 +143,7 @@ Info icon should have `margin-left: 4px`. ![](static/info-icon-margin.png) -## Checkbox with a link inside +## Checkbox with link inside Text label may contain a [Link component](/components/link/link). @@ -155,27 +155,6 @@ Note, that the checkbox text active zone shouldn't include a link. ![](static/link-hover-zone.png) -## Interaction - -- Hovering over the "Checkbox and text" area changes the cursor to a pointer. -- Clicking anywhere on the "Checkbox and text" area changes the state of the checkbox. -- If the text label contains a link or pseudo-link, clicking on the link area doesn't change the checkbox state. -- When the checkbox is disabled, the text and related words should also be "disabled." It's recommended to include a tooltip explaining why the checkbox is disabled. - -### States - -Table: Checkbox states - -| State | Appearance example | -| --------------------- | --------------------------------------------- | -| Normal | ![](static/state-unchecked.png) | -| Checked | ![](static/state-checked.png) | -| Indeterminate | ![](static/state-indetermenate.png) | -| Invalid | ![](static/state-invalid.png) | -| Checked invalid | ![](static/state-checked-invalid.png) | -| Indeterminate invalid | ![](static/state-indetermenate-invalid.png) | -| Disabled | ![](static/state-disabled.png) | - ## Checkbox group To save the user's time, use the "Select all" and "Deselect all" options for checkbox groups with more than 6-7 options. These buttons will select or deselect all checkboxes in the group: @@ -184,7 +163,7 @@ To save the user's time, use the "Select all" and "Deselect all" options for che - "Deselect all" deselects all checkboxes at all levels. - If at least one checkbox is checked at any level, "Deselect all" changes to "Select all". -![](static/group-1.png) ![](static/group-2.png) ![](static/group-3.png) +![](static/checkbox-group.png) If you have a checkbox tree, the top-level checkbox has three states: @@ -209,6 +188,28 @@ When user clicks on a checkbox with the `indeterminate` state, all sub-level che ![](static/select-all.png) ![](static/deselect-all.png) +## Interaction + +- Hovering over the "Checkbox and text" area changes the cursor to a pointer. +- Clicking anywhere on the "Checkbox and text" area changes the state of the checkbox. +- If the text label contains a link or pseudo-link, clicking on the link area doesn't change the checkbox state. +- When the checkbox is disabled, the text and related words should also be "disabled." It's recommended to include a tooltip explaining why the checkbox is disabled. + + + ## Usage in UX/UI - **Make lists of options vertically and left aligned**, one option per line. If using a horizontal layout, ensure that there is enough space between options to differentiate them. diff --git a/website/docs/components/checkbox/static/checkbox-group.png b/website/docs/components/checkbox/static/checkbox-group.png new file mode 100644 index 0000000000..814645c688 Binary files /dev/null and b/website/docs/components/checkbox/static/checkbox-group.png differ diff --git a/website/docs/components/checkbox/static/group-1.png b/website/docs/components/checkbox/static/group-1.png deleted file mode 100644 index c01f1986cf..0000000000 Binary files a/website/docs/components/checkbox/static/group-1.png and /dev/null differ diff --git a/website/docs/components/checkbox/static/group-2.png b/website/docs/components/checkbox/static/group-2.png deleted file mode 100644 index a0f8a38996..0000000000 Binary files a/website/docs/components/checkbox/static/group-2.png and /dev/null differ diff --git a/website/docs/components/checkbox/static/group-3.png b/website/docs/components/checkbox/static/group-3.png deleted file mode 100644 index 346f4ba387..0000000000 Binary files a/website/docs/components/checkbox/static/group-3.png and /dev/null differ diff --git a/website/docs/components/color-picker/color-picker.md b/website/docs/components/color-picker/color-picker.md index 74e6bfe791..923bd22a31 100644 --- a/website/docs/components/color-picker/color-picker.md +++ b/website/docs/components/color-picker/color-picker.md @@ -42,17 +42,21 @@ const App = PlaygroundGeneration(Preview); - List of ColorPicker.Items - Input (optional) -## Trigger +## Appearance -The trigger for a ColorPicker is a Select with a circle as the leading addon. +### Trigger -![](static/trigger.png) - -### Sizes +The trigger for a ColorPicker is a Select with a circle as the leading addon, and has 16px * 16px size. ![](static/trigger-size.png) -## List of colors +### Item + +ColorPicker item has 28px * 28px size. + +![](static/colorpicker-item-size.png) + +### List of colors A list of colors can include either a single ColorPicker.Item or multiple ones, which are preview swatches that display all available color values. @@ -62,15 +66,7 @@ Table: List of colors and its items | -------------------- | ----------------------------------------------------- | | ![](static/colorpicker-item-bg-default.png) | ![](static/colorpicker-inline.png) | -## Size - -ColorPicker.Item has 28px * 28px size. - -![](static/colorpicker-item-size.png) - -## Margins - -All margins must be [multiples of 4](/layout/box-system/box-system#spacing_system). The default recommended margins are 4px: +Margin between the items must be [multiples of 4](/layout/box-system/box-system#spacing_system). The default recommended margins are 4px: ![](static/colorpicker-margins.png) @@ -85,6 +81,24 @@ Table: Color items | Item for background color | ![](static/colorpicker-item-bg-default.png) | Use for changing the background color. For example, a user can pick colors to visually separate their competitors. | | Item for text color | ![](static/colorpicker-item-text-default.png) | Use for changing the Tag color, for example | +## Dropdown + +### Width and height + +**The recommended width of a dropdown is 188px.** The height of a dropdown list depends on its content. + +Showing all available colors in the DropdownMenu is crucial, however, if a user has added more than 20 custom colors, a scrollbar should be displayed. + +Table: DropdownMenu appearance + +| DropdownMenu | DropdownMenu with more than 20 colors | +| ----------------------------- | ------------------------------------- | +| ![](static/dropdown-menu.png) | ![](static/scroll.png) | + +### Margins and paddings + +![](static/colorpicker-margins-paddings.png) + ## Interaction - In the hover state, trigger has a `border: 1px solid var(--border-secondary)`. @@ -118,24 +132,6 @@ Table: States of item for adding colors | ------------------- | ------------------------------- | -------------------------- | ----------------------- | -------------------- | | Add color button | ![](static/btn-add-default.png) | ![](static/btn-add-hover.png) | ![](static/btn-add-active.png)| Use Button with icon and change border-radius to 50%.| -## Dropdown - -### Width and height - -**The recommended width of a dropdown is 188px.** The height of a dropdown list depends on its content. - -Showing all available colors in the DropdownMenu is crucial, however, if a user has added more than 20 custom colors, a scrollbar should be displayed. - -Table: DropdownMenu appearance - -| DropdownMenu | DropdownMenu with more than 20 colors | -| ----------------------------- | ------------------------------------- | -| ![](static/dropdown-menu.png) | ![](static/scroll.png) | - -### Margins and paddings - -![](static/colorpicker-margins-paddings.png) - ## Custom colors (optional) Users have the ability to add or remove custom colors, but they cannot modify default or existing custom colors. diff --git a/website/docs/components/color-picker/static/trigger.png b/website/docs/components/color-picker/static/trigger.png deleted file mode 100644 index 4a80568d8d..0000000000 Binary files a/website/docs/components/color-picker/static/trigger.png and /dev/null differ diff --git a/website/docs/components/counter/counter.md b/website/docs/components/counter/counter.md index db5b87ea88..57f7f082af 100644 --- a/website/docs/components/counter/counter.md +++ b/website/docs/components/counter/counter.md @@ -74,7 +74,9 @@ It is used in various components such as: Counter is a static component and shouldn't be clickable. ::: -## Themes +## Appearance + +### Themes The appropriate theme for a counter varies based on its context and the component it is located in or near. diff --git a/website/docs/components/divider/divider.md b/website/docs/components/divider/divider.md index df821fcb75..52455d4159 100644 --- a/website/docs/components/divider/divider.md +++ b/website/docs/components/divider/divider.md @@ -73,36 +73,38 @@ const App = PlaygroundGeneration( **Divider** is a component that visually and semantically separates content or components. -## Types +## Appearance + +### Types Divider has two types: `primary` and `secondary`. Secondary type helps to separate and show the connection between two parts of the content. Table: Divider types -| Type | Appearance | Styles | -| ---------- | ----------------------- | ------------------------------------------- | -| `primary` | ![](static/solid.png) | `border: 1px solid var(--border-primary)` | -| `secondary`| ![](static/dashed.png) | `border: 1px dashed var(--border-primary)` | - -## Orientation - -Table: Divider orientation - -| Orientation | Example | -| ------------ | ------------------------------- | -| Horizontal | ![](static/default-theme.png) | -| Vertical | ![](static/solid.png) | +| `use` | Appearance | Styles | +| ----------- | ---------------------- | ------------------------------------------ | +| `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. Table: Divider themes -| Theme | Appearance | Styles | -| ------- | ---------------------------- | ------------------------------------------------- | +| `theme` | Appearance | Styles | +| ------- | ----------------------------- | ------------------------------------------------ | | Default | ![](static/default-theme.png) | `border: 1px solid var(--border-primary)` | -| Invert | ![](static/invert-theme.png) | `border: 1px solid var(--border-primary-invert)`| +| Invert | ![](static/invert-theme.png) | `border: 1px solid var(--border-primary-invert)` | + +## Orientation + +Table: Divider orientation + +| Orientation | Example | +| ----------- | ----------------------------- | +| Horizontal | ![](static/default-theme.png) | +| Vertical | ![](static/solid.png) | ## Usage in UX/UI @@ -110,8 +112,7 @@ The divider separates content visually and semantically, whether it is different Table: Divider usage -| Case | Example | -| ------- | -------------------------------- | -| Contact information needs to be visually separated from the form. | ![](static/use-1.png) | +| Case | Example | +| ----------------------------------------------------------------------------------------------------------- | --------------------- | +| Contact information needs to be visually separated from the form. | ![](static/use-1.png) | | Separate information about a report's data visually from the form, but maintain its connection to the form. | ![](static/use-2.png) | - 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 8f7e4f34ad..d6ff44cef1 100644 --- a/website/docs/components/dropdown-menu/dropdown-menu.md +++ b/website/docs/components/dropdown-menu/dropdown-menu.md @@ -12,7 +12,9 @@ tabs: Design('dropdown-menu'), A11y('dropdown-menu-a11y'), API('dropdown-menu-ap Note that the DropdownMenu component doesn't handle the value change in the trigger. This mechanism is implemented in the [Select](/components/select/select#a24650). ::: -## Sizes and indents +## Appearance + +### Sizes The DropdownMenu has two sizes. @@ -212,7 +214,7 @@ If you want to add a tooltip to an item, apply it to the entire item. We don't r ![](static/info-icon-tooltip.png) -## Nested menu +## Nested menus The item can have a nested menu. In this case, it should have the `ChevronRight` icon to indicate the nesting. diff --git a/website/docs/components/dropdown/dropdown.md b/website/docs/components/dropdown/dropdown.md index 2cc83e0cc1..5525fdd01e 100644 --- a/website/docs/components/dropdown/dropdown.md +++ b/website/docs/components/dropdown/dropdown.md @@ -96,6 +96,16 @@ Margin between trigger and dropdown is always 4px. ![](static/trigger-dropdown-scheme.png) +## Position + +By default, the Dropdown component drops down from the trigger. However, if there isn't enough space below, it will drop in the opposite direction using [Popper.js](https://popper.js.org/). + +![All possible positions for Dropdown component based on Popper.js properties clockwise: top-start, top, top-end, right-start, right, right-end, bottom-end, bottom, bottom-start, left-end, left, left-start.](static/dropdown-directions.png) + +::: tip +**The Dropdown component should maintain its position relative to the trigger and not move when the page is scrolled.** For instance, if the dropdown opens upward, it should remain in that position even if the user scrolls down, causing the dropdown to become partially or completely hidden. +::: + ## Interaction **Dropdown opens:** @@ -111,16 +121,6 @@ Margin between trigger and dropdown is always 4px. - by pressing `Esc` - when the input trigger loses `focus` -## Position - -By default, the Dropdown component drops down from the trigger. However, if there isn't enough space below, it will drop in the opposite direction using [Popper.js](https://popper.js.org/). - -![All possible positions for Dropdown component based on Popper.js properties clockwise: top-start, top, top-end, right-start, right, right-end, bottom-end, bottom, bottom-start, left-end, left, left-start.](static/dropdown-directions.png) - -::: tip -**The Dropdown component should maintain its position relative to the trigger and not move when the page is scrolled.** For instance, if the dropdown opens upward, it should remain in that position even if the user scrolls down, causing the dropdown to become partially or completely hidden. -::: - ## Usage in UX/UI - Don’t open dropdowns from other dropdowns diff --git a/website/docs/components/ellipsis/ellipsis.md b/website/docs/components/ellipsis/ellipsis.md index 551991c888..8a7cb2e83d 100644 --- a/website/docs/components/ellipsis/ellipsis.md +++ b/website/docs/components/ellipsis/ellipsis.md @@ -81,14 +81,14 @@ To include an ellipsis, use `…` (HTML symbol `…`). ## Types -Ellipsis has two types of text truncation: +Ellipsis has two types of text truncation (`trim` property in API): Table: Ellipsis types -| Type | Appearance example | Description | -| -------- | ------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `End` | ![](static/ellipsis-end.png) ![ellipsis at the end with tooltip](static/ellipsis-end-tooltp.png) | Truncates the end of the text string. It's the most common case. Use an ellipsis at the end of a text string or paragraph to indicate that there is more content, or to shorten a long text string. | -| `Middle` | ![](static/ellipsis-middle.png) ![ellipsis at the middle with tooltip](static/ellipsis-middle-tooltp.png) | Truncates the middle of the text string. Use when several text strings have different beginnings and/or endings but the exact same middle characters. Can also be used to shorten a phrase or text string when the end of a string can't be truncated by an ellipsis. | +| Trimming type | Appearance example | Description | +| ------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `end` | ![](static/ellipsis-end.png) ![ellipsis at the end with tooltip](static/ellipsis-end-tooltp.png) | Truncates the end of the text string. It's the most common case. Use an ellipsis at the end of a text string or paragraph to indicate that there is more content, or to shorten a long text string. | +| `middle` | ![](static/ellipsis-middle.png) ![ellipsis at the middle with tooltip](static/ellipsis-middle-tooltp.png) | Truncates the middle of the text string. Use when several text strings have different beginnings and/or endings but the exact same middle characters. Can also be used to shorten a phrase or text string when the end of a string can't be truncated by an ellipsis. | ## Tooltip @@ -106,7 +106,7 @@ Usually, long URL links are most common for tables and other widgets. Read the d ![](static/ellipsis-end-tooltp.png) -### Table Head +### Table head To show more data in the limited space you can truncate the text in the table head. In this case always show a tooltip on hover to show the entire text string, or phrase. @@ -131,4 +131,3 @@ To show more data in a limited space you can truncate the [Card](/components/car To show more data in a limited space you can truncate paragraphs at the end. In this case, a tooltip with the full paragraph on hover is unnecessary. ![](static/ellipsis-pharagraph.png) - diff --git a/website/docs/components/feature-popover/feature-popover-code.md b/website/docs/components/feature-popover/feature-popover-code.md index 994b8c3c15..482fc32ace 100644 --- a/website/docs/components/feature-popover/feature-popover-code.md +++ b/website/docs/components/feature-popover/feature-popover-code.md @@ -4,7 +4,7 @@ fileSource: feature-popover tabs: Design('feature-popover'), A11y('feature-popover-a11y'), API('feature-popover-api'), Example('feature-popover-code'), Changelog('feature-popover-changelog') --- -## Basic example +## Basic usage To open the `FeaturePopover` again, reload the page. diff --git a/website/docs/components/feature-popover/feature-popover.md b/website/docs/components/feature-popover/feature-popover.md index 379f28f481..38042d66b1 100644 --- a/website/docs/components/feature-popover/feature-popover.md +++ b/website/docs/components/feature-popover/feature-popover.md @@ -164,12 +164,16 @@ You can use `wMax` property to set the maximum width of the FeaturePopover's pop - The invert `primary` & `tertiary` muted buttons have M size. Top margin for the group of controls is 16px (`--spacing-4x` token). - Illustration's margin-right is 16px (`--spacing-4x` token). -## Appearing and hiding +## Displaying and hiding Component appears according to the timings you set through the `timeout` property. `FeaturePopover` hides after using one of its buttons, pressing `Esc`, or using the highlighted interface element. +## FeaturePopover as part of onboarding + +Show onboarding only to new users who have never seen it. If the user has already seen onboarding once, don’t show it again to them. + ## Usage in UX/UI ### General recommendations @@ -201,8 +205,3 @@ Component appears according to the timings you set through the `timeout` propert - Describe a feature or a tip with one or two sentences. - Tell not only about the feature itself, but also about how to use it and how it can help the user. - -## FeaturePopover as part of onboarding - -Show onboarding only to new users who have never seen it. If the user has already seen onboarding once, don’t show it again to them. - diff --git a/website/docs/components/feedback/feedback-form-code.md b/website/docs/components/feedback/feedback-form-code.md index 388085ceda..74efe044dc 100644 --- a/website/docs/components/feedback/feedback-form-code.md +++ b/website/docs/components/feedback/feedback-form-code.md @@ -3,7 +3,7 @@ title: Feedback tabs: Design('feedback'), A11y('feedback-form-a11y'), API('feedback-form-api'), Example('feedback-form-code'), Changelog('feedback-form-changelog') --- -## Default feedback form +## Basic usage The information on the GDPR should be obligatorily shown to the users from Europe. See the [component's guide](/components/feedback/feedback) for the styles and its content. diff --git a/website/docs/components/filter-trigger/filter-trigger.md b/website/docs/components/filter-trigger/filter-trigger.md index 86bb485df1..e6d73766fe 100644 --- a/website/docs/components/filter-trigger/filter-trigger.md +++ b/website/docs/components/filter-trigger/filter-trigger.md @@ -15,6 +15,8 @@ This component helps users to: ## Appearance +### Sizes + FilterTrigger has two sizes. Note that all sizes use `Close` and `ChevronDown` icons with M size. Table: FilterTrigger sizes @@ -24,22 +26,24 @@ Table: FilterTrigger sizes | M (28px) | ![](static/filter-default-m.png) | ![](static/filter-active-m.png) | ![](static/filter-active-counter-m.png) | | L (40px) | ![](static/filter-default-l.png) | ![](static/filter-active-l.png) | ![](static/filter-active-counter-l.png) | -Show [counter](/components/counter/counter) only for **Advanced filters** and filters that have several additional filters inside. The counter in the FilterTrigger respectively indicates the number of additional filters applied. - -![](static/counter-or-not.png) - -## Margins between FilterTriggers +## Grouped filters Use the same margins as other inputs and [buttons](/components/button/button#margins_between_buttons) have. -Table: Margins between FilterTriggers +Table: Grouped filters | Size (height in px) | Margins between controls | | -------------------- | -------------------------- | | M (28px) | ![](static/sizes-m.png) | | L (40px) | ![](static/sizes-l.png) | -## States and interaction +## Counter + +Show [counter](/components/counter/counter) only for **Advanced filters** and filters that have several additional filters inside. The counter in the FilterTrigger respectively indicates the number of additional filters applied. + +![](static/counter-or-not.png) + +## Interaction diff --git a/website/docs/components/fullscreen-modal/fullscreen-modal-code.md b/website/docs/components/fullscreen-modal/fullscreen-modal-code.md index d5b40aec12..31fd3c20c5 100644 --- a/website/docs/components/fullscreen-modal/fullscreen-modal-code.md +++ b/website/docs/components/fullscreen-modal/fullscreen-modal-code.md @@ -4,7 +4,7 @@ fileSource: fullscreen-modal tabs: Design('fullscreen-modal'), A11y('fullscreen-modal-a11y'), API('fullscreen-modal-api'), Example('fullscreen-modal-code'), Changelog('fullscreen-modal-changelog') --- -## Basic Fullscreen.Header's use +## Basic usage ::: sandbox @@ -14,7 +14,7 @@ tabs: Design('fullscreen-modal'), A11y('fullscreen-modal-a11y'), API('fullscreen ::: -## Example of a dual-zone modal window +## Dual-zone modal ::: sandbox diff --git a/website/docs/components/fullscreen-modal/fullscreen-modal.md b/website/docs/components/fullscreen-modal/fullscreen-modal.md index a238b44d65..f5a2003cf0 100644 --- a/website/docs/components/fullscreen-modal/fullscreen-modal.md +++ b/website/docs/components/fullscreen-modal/fullscreen-modal.md @@ -25,7 +25,7 @@ The fullscreen modal dialog includes: ![](static/fullscreen-modal.png) -## Content styles +### Content styles - Use 20px (`--fs-500`) or smaller text sizes for headings in the content area to ensure correct hierarchy with the modal header. - You can divide content area into several areas. To visually separate them, use `--bg-secondary-neutral` token as a background color for one of them. @@ -36,7 +36,7 @@ Table: Content styles for single-zone and dual-zone modal windows | ---------------------------------- | ---------------------------------- | | ![](static/fullscreen-modal-3.png) | ![](static/fullscreen-modal-2.png) | -### Paddings +### Content paddings Table: Paddings for single-zone and dual-zone modal windows @@ -55,7 +55,7 @@ Table: Content alignment for single-zone and dual-zone modal windows | ------------------------- | ------------------------- | | ![](static/content-1.png) | ![](static/content-2.png) | -## CTA buttons +### CTA buttons You can use either size M or size L buttons, depending on your case. @@ -78,21 +78,21 @@ Fullscreen modal window can be closed: When the fullscreen modal window is closed, focus always returns to its trigger. ::: -## Edge cases +### States -### Loading +#### Loading When loading and reloading the content of the window, use [SpinContainer](../spin-container/spin-container) with XXL size. ![](static/loading.png) -### Error +#### Error If an error occurred during data loading, show an error message with the **Reload** button. For error messages use [Widget empty state](/components/widget-empty/widget-empty) component. -### Limit +#### Limit ![](static/limit.png) diff --git a/website/docs/components/inline-input/inline-input.md b/website/docs/components/inline-input/inline-input.md index 42f31c1533..0808396e5b 100644 --- a/website/docs/components/inline-input/inline-input.md +++ b/website/docs/components/inline-input/inline-input.md @@ -136,12 +136,25 @@ For save and cancel button icons on hover, it's important to show a tooltip that ![](static/tooltip1.png) -## Save and Cancel buttons +## Save and Cancel actions In some cases, where space allows and there is a need to show regular buttons, you can hide control icons. ![](static/buttons.png) +## Icon-only buttons + +For the default state of the icons use the following tokens: + +- `--icon-secondary-success` +- `--icon-secondary-neutral` + +On hover, the icons change their color to to the darker one using CSS filter. + +![](static/tooltip2.png) + +![](static/tooltip1.png) + ## Interaction InlineInput can take on the same states as a [normal input](/components/input/input), except for the normal, read-only, and disabled states. @@ -163,19 +176,6 @@ Table: InlineInput states | Valid focus | ![](static/valid-focus.png) | `border-bottom: 1px solid var(--border-success-active)`, `box-shadow: var(--keyboard-focus-valid)` | | Loading | ![](static/loading.png) | Spin with XS size. The cancel button gets the disabled state while the input is loading (use [`--disabled-opacity`](/style/design-tokens/design-tokens) token). | -## Save and Cancel icon buttons - -For the default state of the icons use the following tokens: - -- `--icon-secondary-success` -- `--icon-secondary-neutral` - -On hover, the icons change their color to to the darker one using CSS filter. - -![](static/tooltip2.png) - -![](static/tooltip1.png) - ## Usage in UX/UI ### Font size diff --git a/website/docs/components/input-mask/input-mask-code.md b/website/docs/components/input-mask/input-mask-code.md index 813b505aeb..d2e41867a5 100644 --- a/website/docs/components/input-mask/input-mask-code.md +++ b/website/docs/components/input-mask/input-mask-code.md @@ -4,12 +4,10 @@ fileSource: input-mask tabs: Design('input-mask'), A11y('input-mask-a11y'), API('input-mask-api'), Example('input-mask-code'), Changelog('input-mask-changelog') --- -## InputMask +## Mask This component is a wrapper that allows you to set the format for the input value. -## Mask - This is an example of a basic input with a `mask` feature. The mask is defined using the mask property, which specifies the input format and validates the entered value. ::: tip diff --git a/website/docs/components/input-mask/input-mask.md b/website/docs/components/input-mask/input-mask.md index df82ecc4a3..2140928037 100644 --- a/website/docs/components/input-mask/input-mask.md +++ b/website/docs/components/input-mask/input-mask.md @@ -108,7 +108,7 @@ Table: InputMask's placeholder and mask appearance | Placeholder ![](static/placeholder-default-2.png) | Placeholder use `--text-placeholder` as color. | | Mask ![](static/mask-default-2.png) | Mask use `--text-primary` as color. | -## Hint instructions +## Text instructions We suggest including clear text instructions for inputs that have specific data format requirements. diff --git a/website/docs/components/input-number/input-number.md b/website/docs/components/input-number/input-number.md index 38c3182df8..7004e02699 100644 --- a/website/docs/components/input-number/input-number.md +++ b/website/docs/components/input-number/input-number.md @@ -76,6 +76,8 @@ const App = PlaygroundGeneration(Preview, { **InputNumber** is a numeric input field that accepts numeric values only. +### Usage recommendations + **Use this type of input in the following cases:** - When it's beneficial for the user to increment/decrement the value using stepper buttons. diff --git a/website/docs/components/input-phone/input-phone-code.md b/website/docs/components/input-phone/input-phone-code.md index 61ad937649..c44a5253e6 100644 --- a/website/docs/components/input-phone/input-phone-code.md +++ b/website/docs/components/input-phone/input-phone-code.md @@ -21,7 +21,7 @@ The input is pre-filled with the value: `+`. ::: -## Known country, but the number format is unknown +## Known country and unknown number format The input has a preset value: "+ {country code}". However, if it is possible to enter phone numbers from multiple countries, a country select option should be provided instead of a static flag. diff --git a/website/docs/components/input-phone/input-phone.md b/website/docs/components/input-phone/input-phone.md index e57f035413..2484546ddc 100644 --- a/website/docs/components/input-phone/input-phone.md +++ b/website/docs/components/input-phone/input-phone.md @@ -7,7 +7,7 @@ tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code **InputPhone** is a pattern designed to facilitate the entry of phone numbers using a [mask](/components/input-mask/input-mask). This input ensures that users can enter their phone numbers correctly without any uncertainty about the format. -### Recommendations for using this input +### Usage recommendations - Provide preset values for the phone code, such as the country code or a flag along with the country code for clarity. - Utilize a mask to display the number in the desired format, eliminating the need for users to type brackets, hyphens, and other formatting characters. @@ -25,11 +25,11 @@ The appearance of the InputPhone can vary based on: Table: InputPhone variants -| Case | Appearance example | -| ---- | ------------------- | -| Unknown country and/or phone number format | ![](static/input-phone-1.png) | +| Case | Appearance example | +| --------------------------------------------- | ----------------------------- | +| Unknown country and/or phone number format | ![](static/input-phone-1.png) | | Known country but unknown phone number format | ![](static/input-phone-2.png) | -| Known country and phone number format | ![](static/input-phone-3.png) | +| Known country and phone number format | ![](static/input-phone-3.png) | When the user's country is known, it's important to display the flag of the country in the input. This helps users navigate through the entered data more easily, as seen in the [Form guide](/patterns/form/form). @@ -39,14 +39,14 @@ Be sure to add the label "Phone number" to the input. Especially if there are no For actual examples of phone number inputs, refer to the [Example tab](/components/input-phone/input-phone-code). -## Hint instructions +## Text instructions It is recommended to provide visible text instructions for inputs with specific data formats. Table: Sizes of InputPhone's hint text -| Size (height in px) | Hint text size | Appearance example | Margins | -| ------------------- | ------------------- | ----------------------------------- | ----------------------------------------- | +| Size (height in px) | Hint text size | Appearance example | Margins | +| ------------------- | ---------------------------------------- | -------------------------------------- | --------------------------------------------- | | M (28px) | 12px (use `--fs-100`, `--lh-100` tokens) | ![](static/inputphone-help-text-m.png) | ![](static/inputphone-help-text-margin-m.png) | | L (40px) | 14px (use `--fs-200`, `--lh-200` tokens) | ![](static/inputphone-help-text-l.png) | ![](static/inputphone-help-text-margin-l.png) | @@ -69,16 +69,16 @@ According to [Baymard Research](https://baymard.com/blog/input-masking-form-fiel Table: States for the case when country and/or phone number format are unknown -| Normal | Focus | Filled | -| --------------- | -------------- | -------------------- | +| Normal | Focus | Filled | +| ----------------------------- | ----------------------------------- | ------------------------------------ | | ![](static/input-phone-1.png) | ![](static/input-phone-1-focus.png) | ![](static/input-phone-1-filled.png) | ### Known country but unknown phone number format Table: States for the case when only country is known, while phone number format is unknown -| Countries number | Normal | Focus | Filled | -| ------------------ | -------------- | ------------- | ------------------ | +| Countries number | Normal | Focus | Filled | +| --------------------- | ------------------------------- | ------------------------------------- | -------------------------------------- | | One country | ![](static/input-phone-2.png) | ![](static/input-phone-2-focus.png) | ![](static/input-phone-2-filled.png) | | More than one country | ![](static/input-phone-2-2.png) | ![](static/input-phone-2-2-focus.png) | ![](static/input-phone-2-2-filled.png) | @@ -88,8 +88,8 @@ This option is most suitable when collecting phone numbers from users in one or Table: States for the case when both country and phone number format are known -| Countries number | Normal | Focus | Filled | -| ------------------ | ---------------------- | ------------------- | -------------------- | +| Countries number | Normal | Focus | Filled | +| --------------------- | ------------------------------- | ------------------------------------- | -------------------------------------- | | One country | ![](static/input-phone-3.png) | ![](static/input-phone-3-focus.png) | ![](static/input-phone-3-filled.png) | | More than one country | ![](static/input-phone-3-2.png) | ![](static/input-phone-3-2-focus.png) | ![](static/input-phone-3-2-filled.png) | @@ -98,4 +98,3 @@ Table: States for the case when both country and phone number format are known To ensure user clarity about how much information they need to enter, it is recommended to keep the width of the InputPhone as clear as possible. Typically, the width doesn't exceed 160px-250px for the input sizes. ![](static/size-yes-no.png) - diff --git a/website/docs/components/input-tags/input-tags.md b/website/docs/components/input-tags/input-tags.md index 23f9a0fa50..1951fa7692 100644 --- a/website/docs/components/input-tags/input-tags.md +++ b/website/docs/components/input-tags/input-tags.md @@ -147,7 +147,7 @@ Table: Interaction with InputTags When you focus on the input field, if there are preset options available (such as a database of minion addresses or previously entered keywords), a [combobox menu](/components/auto-suggest/auto-suggest) will open. Pressing `Enter` or clicking on a list item will insert its value into the input field and wrap it in a tag. -## Turning text into tags +### Turning text into tags Text entered by the user is automatically converted into a tag inside InputTags in the following cases: @@ -160,11 +160,11 @@ Text entered by the user is automatically converted into a tag inside InputTags Leading and trailing spaces are trimmed when creating tags. ::: -## Pasting text +### Pasting text After pasting copied data, the text is split into tags based on punctuation separators like commas, semicolons and vertical bars ("|"). -## Editing and deleting tags +### Editing and deleting tags There are several ways to edit a tag: diff --git a/website/docs/components/input/input-code.md b/website/docs/components/input/input-code.md index 6622cb89f5..1b64e944e1 100644 --- a/website/docs/components/input/input-code.md +++ b/website/docs/components/input/input-code.md @@ -30,7 +30,7 @@ If the input is in a loading state while searching, sending, or entering data dy ::: -## Input with clearing ability +## Input with clear button The input field may have a **Clear** button inside it to clear the entered value. This button is only visible when there is some typed text or values in the input field, regardless of its status. @@ -42,7 +42,7 @@ The input field may have a **Clear** button inside it to clear the entered value ::: -## Input with submit button inside +## Input with submit button You can place a submit button inside the input as the right addon. It's only visible when the input has a nonempty value. @@ -78,7 +78,7 @@ When stacking two addons, the indents of the adjacent addons should be divided i ::: -## Input with other component inside +## Input with other components You can also place a [Badge](/components/badge/badge) or a [Tag](/components/tag/tag) inside the input. diff --git a/website/docs/components/input/input.md b/website/docs/components/input/input.md index e052441f37..2648be08c9 100644 --- a/website/docs/components/input/input.md +++ b/website/docs/components/input/input.md @@ -88,6 +88,7 @@ const App = PlaygroundGeneration(Preview); **Input** is a single-line text field. It's one of the basic components for all kinds of forms, search fields, etc. + -## Sizes +## Appearance + +### Sizes The input has two sizes. @@ -111,7 +114,7 @@ Table: Input sizes | M (28px) | ![](static/input-m.png) | | L (40px) | ![](static/input-l.png) | -## Label +### Label We recommend adding a visible text label to the input wherever possible. If the input isn’t required, be sure to mark it with the "optional" text label. diff --git a/website/docs/components/link/link.md b/website/docs/components/link/link.md index 7b338e16c1..a61ae45684 100644 --- a/website/docs/components/link/link.md +++ b/website/docs/components/link/link.md @@ -117,7 +117,7 @@ const App = PlaygroundGeneration(Preview); ![](static/custom-link.png) -## Sizes and margins +### Sizes and margins You can add addons before and after the link text. Addons always have a 4px margin from the link text. @@ -131,17 +131,32 @@ Table: Link text and addon sizes and margins | 12-16px (`--fs-100`-`--fs-300` tokens) | ![](static/link-m.png) | M | | 20px and bigger (from `--fs-400` token) | ![](static/link-l.png) | L | +### Links on dark and colored background + +Default links can be used on a colored background within a [Notice](/components/notice/notice) component. + +![](static/default-yes.png) + +## Grouped links + +For links placed in one line, maintain a margin between them that's a multiple of 4px: + +- 20px for sufficient space +- 12px for limited space + +![](static/link-margin.png) + ## Interaction Table: Default link states -| State | Appearance | Description | Cursor | -| ------------- | ------------- | --------------- | --------- | -| Normal | ![](static/default.png) | The link uses the `--text-link` token for color without underline. | `pointer` | -| Active/hover | ![](static/hover-active.png) | The link changes its color to `--text-link-hover-active` and displays a solid underline on hover. If the link includes an icon, the icon's color changes alongside the text as they share the same active zone. | `pointer` | -| Disabled | ![](static/disabled.png) | The component's transparency decreases from 100% to 30% to indicate the disabled state. Use this state sparingly and provide a tooltip with a message for the disabled link. | `default` | -| Visited | ![](static/default-visited.png) | The link uses the `--text-link-visited` token for color. This state is optional. | `pointer` | -| Visited (hover) | ![](static/hover-active-visited.png) | The link uses the `--text-link-visited` token for color and displays a solid underline on hover. This state is optional. | `pointer` | +| State | Appearance | Description | Cursor | +| --------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| Normal | ![](static/default.png) | The link uses the `--text-link` token for color without underline. | `pointer` | +| Active/hover | ![](static/hover-active.png) | The link changes its color to `--text-link-hover-active` and displays a solid underline on hover. If the link includes an icon, the icon's color changes alongside the text as they share the same active zone. | `pointer` | +| Disabled | ![](static/disabled.png) | The component's transparency decreases from 100% to 30% to indicate the disabled state. Use this state sparingly and provide a tooltip with a message for the disabled link. | `default` | +| Visited | ![](static/default-visited.png) | The link uses the `--text-link-visited` token for color. This state is optional. | `pointer` | +| Visited (hover) | ![](static/hover-active-visited.png) | The link uses the `--text-link-visited` token for color and displays a solid underline on hover. This state is optional. | `pointer` | -## Links on dark and colored background - -Default links can be used on a colored background within a [Notice](/components/notice/notice) component. - -![](static/default-yes.png) - -## Link text and target zone +### Link text and target zone ::: tip _Link sizes should be generous. Large link sizes make it easier for users with low coordination or on mobile devices to activate links. Link size consideration is most important for links that aren't contained within blocks or paragraphs of text, such as call to action links. Links should be at least 44px wide and 22px tall._ @@ -200,15 +209,6 @@ If a link spans two lines, ensure that the cursor remains consistent throughout ![](static/name-example-7.png) -## Margin between links - -For links placed in one line, maintain a margin between them that's a multiple of 4px: - -- 20px for sufficient space -- 12px for limited space - -![](static/link-margin.png) - ## Default link or ButtonLink? ::: tip @@ -220,19 +220,19 @@ For more information refer to [ButtonLink](../button/button.md#button-with-link- Table: How to choose what type of link you should use -| Action on the page | Default link | ButtonLink | -| -------------------------------------- | ------------------ | ---------- | -| Internal transition | ✅ | ❌ | -| External transition | ✅ | ❌ | -| Clickable email | ✅ | ❌ | -| Reloading the page | ❌ | ✅ | -| Updating data in a small block/widget | ❌ | ✅ | -| Updating data in a table row | ❌ | ✅ | -| Opening a modal window | ❌ | ✅ | -| Opening a dropdown | ❌ | ✅ | -| Opening an accordion | ❌ | ✅ | -| Opening the full text on the same page | ❌ | ✅ | -| `DescriptionTooltip` on click | ❌ | ✅ | +| Action on the page | Default link | ButtonLink | +| -------------------------------------- | ------------ | ---------- | +| Internal transition | ✅ | ❌ | +| External transition | ✅ | ❌ | +| Clickable email | ✅ | ❌ | +| Reloading the page | ❌ | ✅ | +| Updating data in a small block/widget | ❌ | ✅ | +| Updating data in a table row | ❌ | ✅ | +| Opening a modal window | ❌ | ✅ | +| Opening a dropdown | ❌ | ✅ | +| Opening an accordion | ❌ | ✅ | +| Opening the full text on the same page | ❌ | ✅ | +| `DescriptionTooltip` on click | ❌ | ✅ | ## Links in tables @@ -249,11 +249,11 @@ External links always open in a new tab. Table: Cases for appearance of external links -| Case description | Transition inside product | Transition to external resource | Appearance example | -| ---- | ------------------------------------------------ | ---------------------- | --------------------------------------------- | -| Link leads to a page within the product. In this case, you don't need to add the `LinkExternal` icon to the link. Add URL only to the link text. | ✅ | ❌ | ![](static/link-example-1.png) | -| If the link leads to an external website or product, then only the `LinkExternal` icon next to the link should have a URL. The icon is always gray. | ❌ | ✅ | ![](static/link-example-2.png) | -| If the link leads to both a page within the product and an external resource, the text and `LinkExternal` icon must have a different URL and color. The text always leads to a page within the product, and `LinkExternal` icon always leads to an external resource. | ✅ | ✅ | ![](static/link-example-3.png) | +| Case description | Transition inside product | Transition to external resource | Appearance example | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------------------------------- | ------------------------------ | +| Link leads to a page within the product. In this case, you don't need to add the `LinkExternal` icon to the link. Add URL only to the link text. | ✅ | ❌ | ![](static/link-example-1.png) | +| If the link leads to an external website or product, then only the `LinkExternal` icon next to the link should have a URL. The icon is always gray. | ❌ | ✅ | ![](static/link-example-2.png) | +| If the link leads to both a page within the product and an external resource, the text and `LinkExternal` icon must have a different URL and color. The text always leads to a page within the product, and `LinkExternal` icon always leads to an external resource. | ✅ | ✅ | ![](static/link-example-3.png) | ### Styles @@ -267,4 +267,3 @@ Table: Cases for appearance of external links Avoid using the link component for text that doesn't lead to another page or perform an action to prevent misleading users. ![](static/yes-no-link.png) - diff --git a/website/docs/components/modal/modal-code.md b/website/docs/components/modal/modal-code.md index fd88f4885b..f1c2ddd732 100644 --- a/website/docs/components/modal/modal-code.md +++ b/website/docs/components/modal/modal-code.md @@ -4,7 +4,7 @@ fileSource: modal tabs: Design('modal'), A11y('modal-a11y'), API('modal-api'), Example('modal-code'), Changelog('modal-changelog') --- -## Basic modal window usage +## Basic usage ::: sandbox @@ -14,7 +14,7 @@ tabs: Design('modal'), A11y('modal-a11y'), API('modal-api'), Example('modal-code ::: -## Modal window height is bigger than the browser page +## Modal bigger than viewport Sometimes the amount of content overfills the window's visibility, but you don't need to worry about it, because the component will be adjusted and the scroll will appear. @@ -26,7 +26,7 @@ Sometimes the amount of content overfills the window's visibility, but you don't ::: -## Changing the alignment +## Changing alignment By default, the modal window is centered. However, in some cases, when the content height inside the window changes dynamically and causes the modal window to "jump," it may be necessary to adjust the window alignment. This can be achieved by applying the desired margin on the respective side. @@ -38,7 +38,7 @@ By default, the modal window is centered. However, in some cases, when the conte ::: -## Modal window inside a modal window +## Modal over another modal While it is generally not recommended, there are instances where it may be necessary to open a modal window within another modal window. In such cases, it is important to nest the modal windows properly to ensure correct background visibility and keyboard control. @@ -50,7 +50,7 @@ While it is generally not recommended, there are instances where it may be neces ::: -## Access to internal HTML nodes +## Advanced usage To access the background or the close `Close` icon, you will need to expand the modal window and recreate the same component sequence. @@ -67,7 +67,7 @@ In most cases, it is expected that you will not require this functionality. **Th ::: -## Modal window inside the iframe +## Modal in iframe Whenever possible, opt for using pages instead of modal windows. Modal windows within an iframe will not overlay the entire viewport; instead, they will only cover a portion of the iframe area. Additionally, they will not appear at the center of the viewport but rather at the center of the iframe, resulting in an awkward visual experience. diff --git a/website/docs/components/modal/modal.md b/website/docs/components/modal/modal.md index a2c597693a..48c1f1f203 100644 --- a/website/docs/components/modal/modal.md +++ b/website/docs/components/modal/modal.md @@ -14,12 +14,14 @@ For general recommendations on modal content styles, refer to [Content in modal It always disables user interaction with the main page content but keeps it visible. The modal dialog remains on the screen until the user performs the required action or closes the dialog. -::: tip +::: info _🐈 A modal dialog is like my cat, Emma – who meows at 7am every morning to prompt me to feed her. I might be trying to sleep or get ready for the day, but my cat will place herself in front of me, then meow louder and incessantly until I look at her. I have to stop what I am doing to address the cat immediately if I ever hope to finish my task._ Article at [NNGroup](https://www.nngroup.com/articles/modal-nonmodal-dialog/) ::: +### Usage recommendations + **Use modal:** - To show secondary data. _For example, settings, small forms to fill out, step-by-step actions, detailed information about any data._ diff --git a/website/docs/components/notice-bubble/notice-bubble-code.md b/website/docs/components/notice-bubble/notice-bubble-code.md index 6fec38839c..5d3703dbc9 100644 --- a/website/docs/components/notice-bubble/notice-bubble-code.md +++ b/website/docs/components/notice-bubble/notice-bubble-code.md @@ -81,7 +81,7 @@ Parent should have `position: relative` and `overflow` with scroll. ::: -## Notice with loading state +## Loading state Activate the **Try again** button in the notice to see the loading state. @@ -93,7 +93,7 @@ Activate the **Try again** button in the notice to see the loading state. ::: -## Special events notice +## Special event notice ::: sandbox @@ -103,7 +103,7 @@ Activate the **Try again** button in the notice to see the loading state. ::: -## No connection notice +## No connection Use `type="warning"` for this case. @@ -115,7 +115,7 @@ Use `type="warning"` for this case. ::: -## No connection notice with action +## No connection with action Use `type="warning"` for this case. diff --git a/website/docs/components/notice-bubble/notice-bubble.md b/website/docs/components/notice-bubble/notice-bubble.md index c3c41e2f22..473df9c608 100644 --- a/website/docs/components/notice-bubble/notice-bubble.md +++ b/website/docs/components/notice-bubble/notice-bubble.md @@ -12,12 +12,12 @@ Let's compare NoticeBubble with [Notice](/components/notice/notice) and [NoticeG Table: Comparison table of criteria for Notice, NoticeBubble and NoticeGlobal -| Criteria | Notice | NoticeBubble | NoticeGlobal | -| ---------------- | ------ | ------------ | ------------ | -| Refers to the entire website | ❌ | ✅ ❌ | ✅ | -| **Global**: Refers to pages, blocks, or large components rather than specific elements | ✅ | ✅ ❌ | ✅ | -| **Important**: Missing the notice may result in missed opportunities or loss of data | ✅ | ❌ | ✅ | -| **Temporary**: Appears and disappears under certain conditions, not a default block element | ✅ | ✅ | ✅ | +| Criteria | Notice | NoticeBubble | NoticeGlobal | +| ------------------------------------------------------------------------------------------- | ------ | ------------ | ------------ | +| Refers to the entire website | ❌ | ✅ ❌ | ✅ | +| **Global**: Refers to pages, blocks, or large components rather than specific elements | ✅ | ✅ ❌ | ✅ | +| **Important**: Missing the notice may result in missed opportunities or loss of data | ✅ | ❌ | ✅ | +| **Temporary**: Appears and disappears under certain conditions, not a default block element | ✅ | ✅ | ✅ | **This component includes:** @@ -30,6 +30,8 @@ Table: Comparison table of criteria for Notice, NoticeBubble and NoticeGlobal - Images (holiday alerts are an exception). - More than two buttons. +## Usage recommendations + ### When to use NoticeBubble - To notify about the beginning or completion of a process that remains hidden from the user. @@ -46,29 +48,29 @@ Table: Comparison table of criteria for Notice, NoticeBubble and NoticeGlobal Table: NoticeBubble types -| Type | Description | Appearance example | -| -------- | ----------- | ------------------ | -| **Info** | This type is used to inform the user about the beginning or completion of a process that remains hidden from the user in the interface. | ![](static/text1.png) | -| **Warning** | This type is used to alert users when a connection is lost. | ![](static/notice.png) | +| `type` | Description | Appearance example | +| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | +| `info` | This type is used to inform the user about the beginning or completion of a process that remains hidden from the user in the interface. | ![](static/text1.png) | +| `warning` | This type is used to alert users when a connection is lost. | ![](static/notice.png) | ### Use cases for NoticeBubble types Table: Use cases for NoticeBubble types -| Use case | Description | Appearance example | -| -------- | ----------- | ------------------ | -| **Basic** | This type of notification is used to inform the user about the beginning or completion of a process that remains hidden from the user in the interface. It can also be used to notify about changes to content in other parts of the report that are not currently being viewed. | ![](static/text1.png) | -| **Undo action** | This notification is used for completed actions with an option to cancel them. It is ideal for scenarios involving moving or deleting items. Use the button with `use="secondary"`, `theme="invert"`, and with M size for this purpose. | ![](static/default.png) | -| **Reload action** | The button name may change based on the context. |![](static/reload-btn.png) | -| **Loading state** | If the undo process takes time, display an intermediate loading state where the user cannot take any action. Use [Spin](/components/spin/spin) with size XS. However, refrain from using this state to display any other processes in the interface; instead, opt for the [ProgressBar](/components/progress-bar/progress-bar) in such cases. | ![](static/default-loading.png) | -| **Completion state** | Upon successful completion, show a notification that confirms the undo action (use an icon with M size). The height of the notification should be the same as the previous state. Refer to the animation description below for recommendations on animation and timing. | ![](static/default-success.png) | -| **Success** | This type of notification is suitable for conveying the success of user actions within the interface. It includes an additional colored icon to quickly convey the response of the interface to the user's actions without relying on reading the text. | ![](static/success-notice.png) | -| **Failure** | This type of notification is suitable for conveying the failure of user actions within the interface. | ![](static/warning-notice.png) | -| **No connection** | For systems capable of monitoring the network connection on their own, use a notice without a button. | ![](static/notice.png) | -| **No connection with action** | For interfaces unable to monitor the network connection and requiring a page refresh, utilize a notice with the "Reload the page" button. | ![](static/reload.png) | -| **Special event notification** | This notification is specifically designed for various events, holidays, and similar occasions. You can animate elements inside this notification to add visual appeal and engagement. | ![](static/event-alert.png) | - -## Styles +| Use case | Description | Appearance example | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | +| **Basic** | This type of notification is used to inform the user about the beginning or completion of a process that remains hidden from the user in the interface. It can also be used to notify about changes to content in other parts of the report that are not currently being viewed. | ![](static/text1.png) | +| **Undo action** | This notification is used for completed actions with an option to cancel them. It is ideal for scenarios involving moving or deleting items. Use the button with `use="secondary"`, `theme="invert"`, and with M size for this purpose. | ![](static/default.png) | +| **Reload action** | The button name may change based on the context. | ![](static/reload-btn.png) | +| **Loading state** | If the undo process takes time, display an intermediate loading state where the user cannot take any action. Use [Spin](/components/spin/spin) with size XS. However, refrain from using this state to display any other processes in the interface; instead, opt for the [ProgressBar](/components/progress-bar/progress-bar) in such cases. | ![](static/default-loading.png) | +| **Completion state** | Upon successful completion, show a notification that confirms the undo action (use an icon with M size). The height of the notification should be the same as the previous state. Refer to the animation description below for recommendations on animation and timing. | ![](static/default-success.png) | +| **Success** | This type of notification is suitable for conveying the success of user actions within the interface. It includes an additional colored icon to quickly convey the response of the interface to the user's actions without relying on reading the text. | ![](static/success-notice.png) | +| **Failure** | This type of notification is suitable for conveying the failure of user actions within the interface. | ![](static/warning-notice.png) | +| **No connection** | For systems capable of monitoring the network connection on their own, use a notice without a button. | ![](static/notice.png) | +| **No connection with action** | For interfaces unable to monitor the network connection and requiring a page refresh, utilize a notice with the "Reload the page" button. | ![](static/reload.png) | +| **Special event notification** | This notification is specifically designed for various events, holidays, and similar occasions. You can animate elements inside this notification to add visual appeal and engagement. | ![](static/event-alert.png) | + +## Appearance - The notice appears in the upper-right corner of the report, below the main website menu, with 12px margins at the top and right. - When scrolling, it remains fixed in the upper-right corner with the same 12px margins. @@ -100,10 +102,10 @@ The notification slides in from the right edge of the viewport and closes with a Minimize the number of notifications to prevent banner blindness and irritation among users. ::: -### Appearance duration and closing +### Displaying duration and hiding - Users can close the notice by clicking on the **Close** button in the upper-right corner. -- If there are *no* interactive elements in the notice beside the **Close** button, hide the notice automatically after 4–10 seconds, depending on the amount of text inside. +- If there are _no_ interactive elements in the notice beside the **Close** button, hide the notice automatically after 4–10 seconds, depending on the amount of text inside. - If there are interactive elements in the notice beside the **Close** button, don't hide the notice until it becomes irrelevant, or the user closes it or interacts with one of its interactive elements. - If the notice is closed automatically by a timer, hovering the mouse over it (`onMouseEnter`) will reset the timer, and the countdown will start again after moving the mouse away from the notice. @@ -127,6 +129,5 @@ You can show several notices at a time if necessary, but use this option thought - This notification acts as a separate alert and has the highest priority. Therefore, when it appears, all other user and system notifications appear below it. Each subsequent notification will overlap the previous one. - The notice automatically closes when the connection is restored. - There are two options for this notice type: - 1. For interfaces that can monitor the network connection themselves, use a notification without a button. - 2. For interfaces that cannot monitor the network connection themselves and require a page refresh, use an alert notification with the "Reload the page" button. - + 1. For interfaces that can monitor the network connection themselves, use a notification without a button. + 2. For interfaces that cannot monitor the network connection themselves and require a page refresh, use an alert notification with the "Reload the page" button. diff --git a/website/docs/components/notice-global/notice-global.md b/website/docs/components/notice-global/notice-global.md index ace41fe287..b54f3346c8 100644 --- a/website/docs/components/notice-global/notice-global.md +++ b/website/docs/components/notice-global/notice-global.md @@ -106,12 +106,6 @@ Component consists of the following: 1. `NoticeGlobal.Content`; 2. `NoticeGlobal.CloseIcon` (optional). -## Margins - -There's an `8px` (`--spacing-2x`) margin between the text and any buttons that follow it. The margin between additional actions on the right-hand side is `16px` (`--spacing-4x`). - -![](static/gnotice-margins.png) - ## Themes ### Neutral @@ -144,7 +138,13 @@ Use this theme to convey serious error or problem messages concerning the entire ![](static/gnotice-danger.png) -## Placement in the interface +## Appearance + +There's an `8px` (`--spacing-2x`) margin between the text and any buttons that follow it. The margin between additional actions on the right-hand side is `16px` (`--spacing-4x`). + +![](static/gnotice-margins.png) + +## Placement - Always position this notice above the main website header. - Stretch the notice to cover the full width of the screen. @@ -153,7 +153,7 @@ Use this theme to convey serious error or problem messages concerning the entire ## Interaction -### Appearance +### Displaying When the global notice appears, it shifts the entire page down. diff --git a/website/docs/components/notice/notice.md b/website/docs/components/notice/notice.md index 95c8df6d64..2d9639816c 100644 --- a/website/docs/components/notice/notice.md +++ b/website/docs/components/notice/notice.md @@ -140,16 +140,21 @@ Component consists of the following: 3. `Notice.Actions` (optional). 4. `Notice.Close` (optional). -## Notice content examples +## Themes -Table: Notice content examples +Table: Notice themes -| Case | Appearance example | -| ------------------------- | ------------------------------ | -| Minimum possible elements | ![](static/notice-minimal.png) | -| Maximum possible elements | ![](static/notice-monster.png) | +| Theme | Usage and appearance example | +| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Muted** | Used for regular messages and hints. ![](static/muted.png) | +| **Info** | Used for neutral and important information, and collecting feedback. For announcing new features or other products, consider using this notice with a large image (often referred to as [advertising notices](/components/notice/notice#advertising)). ![](static/info.png) | +| **Success** | Used for triggers related to purchasing or taking a trial, as well as displaying successful completion of forms, for example. ![](static/success.png) | +| **Warning** | Suitable for important but non-critical errors or warnings, such as service reports, unavailable functionality, or temporary failures. ![](static/warning.png) | +| **Danger** | Intended for serious errors, problems, or actions that prevent users from continuing their work or result in data loss. ![](static/danger.png) | + +## Appearance -## Sizes, paddings and margins +### Margins and paddings If your `Notice` has an icon and/or the **Close** button, add `2px` top and bottom margins to the title, and `4px` margins to the main text to align the elements visually. @@ -172,19 +177,16 @@ We recommend to set the maximum width of the notice message to 650-800px. ![](static/notice-text-yes-no.png) -## Themes +## Notice content examples -Table: Notice themes +Table: Notice content examples -| Theme | Usage and appearance example | -| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **Muted** | Used for regular messages and hints. ![](static/muted.png) | -| **Info** | Used for neutral and important information, and collecting feedback. For announcing new features or other products, consider using this notice with a large image (often referred to as [advertising notices](/components/notice/notice#advertising)). ![](static/info.png) | -| **Success** | Used for triggers related to purchasing or taking a trial, as well as displaying successful completion of forms, for example. ![](static/success.png) | -| **Warning** | Suitable for important but non-critical errors or warnings, such as service reports, unavailable functionality, or temporary failures. ![](static/warning.png) | -| **Danger** | Intended for serious errors, problems, or actions that prevent users from continuing their work or result in data loss. ![](static/danger.png) | +| Case | Appearance example | +| ------------------------- | ------------------------------ | +| Minimum possible elements | ![](static/notice-minimal.png) | +| Maximum possible elements | ![](static/notice-monster.png) | -## Placement in interface +## Placement ### On page @@ -212,7 +214,7 @@ If the notice only relates to the component, position it at the top or bottom of ## Interaction -### Opening +### Displaying The notice should appear instantaneously without any delays or visual effects. It should be displayed immediately upon the loading of the page or component. @@ -268,7 +270,7 @@ Avoid using an advertising notice for an "empty" state on a page or inside a com - Typically, notices are replaced by others based on priority: danger > warning > success > info. - Be concise and avoid overshadowing other widgets or report functionalities. Strive to convey the message to users within two lines for notices, and within four lines for notices within blocks or other components. -### Incorrect use +### Incorrect usage A notice shouldn't be mistaken for other components: @@ -276,7 +278,7 @@ A notice shouldn't be mistaken for other components: - **[Tooltip](/components/tooltip/tooltip)**: Tooltips are used to provide hints or descriptions of functionality and are permanently displayed upon hover. On the other hand, notices are temporary components that typically appear immediately after user actions. - **[Notes, hints](/style/typography/typography#hints_hint_links)**: Notes and hints provide additional information about functionality and are permanent in nature. In contrast, notices are temporary and don’t explain the functionality itself. At most, they may provide guidance on resolving reported problems or performing required actions. -### Examples of incorrect usage +#### Examples of incorrect usage Avoid using notice to show permanent informational message within a form. diff --git a/website/docs/components/pagination/pagination.md b/website/docs/components/pagination/pagination.md index a27ecc3522..17582c7574 100644 --- a/website/docs/components/pagination/pagination.md +++ b/website/docs/components/pagination/pagination.md @@ -63,17 +63,32 @@ Component consists of the following: 5. `Pagination.PrevPage` 6. `Pagination.TotalPages` -## Margins +## Appearance -- The margins between buttons in the component are always 8px. -- The margins between different controls are 16px, such as between the buttons and the input for the - current page, and between the input for the current page and the select. +## Sizes -![](static/margins.png) +This component has only two sizes: `M` and `L`. The M size uses components with `M` size, while the `L` size uses L-sized components accordingly. -The margin from the table to the pagination is 16px. +Table: Pagination sizes + +| `size` | Appearance example | +| ------ | ---------------------- | +| `M` | ![](static/m-size.png) | +| `L` | ![](static/l-size.png) | + +### Margin between table and pagination + +Recommended margin between table and pagination is `--spacing-4x`. ![](static/margin-top.png) +### Layout behavior + +In case there is no space in the interface to place pagination in a row, the component layout changes from `row` to `column`. + +![](static/pagination-layout-m.png) +![](static/pagination-layout-l.png) + ## Number of rows We provide some recommendations for the table size: @@ -81,16 +96,24 @@ We provide some recommendations for the table size: - Use a minimum of two user screens (± 2000 px) for the table. - Display a maximum of 100 lines (if the lines occupy two lines, then 50 lines, etc.). +### Selecting number of rows + +After the user changes the value in the select, the page should be refreshed, and the value of the table rows from the select should be applied. + +We recommend using these values for the select: 10, 20, 50, 100. + +![](static/page-select.png) + ## Interaction - The table should scroll to the beginning when the user moves between pages. - After sorting and filtering, the pagination always returns the user to the first page. -| Appearance example | Action | -| --------------------------------- | --------------- | -| ![](static/secondary-button.png) | Opens the first page | -| ![](static/secondary-button-2.png) | Opens the previous page | -| ![](static/primary-button.png) | Opens the next page | +| Appearance example | Action | +| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------- | +| ![](static/secondary-button.png) | Opens the first page | +| ![](static/secondary-button-2.png) | Opens the previous page | +| ![](static/primary-button.png) | Opens the next page | | ![](static/steps.png) | Page input allows the user to enter a specific page, and after the user presses `Enter`, the entered page opens. | The current page should always be displayed in the input: @@ -101,7 +124,7 @@ The current page should always be displayed in the input: The link at the end of the pagination shows the total number of pages. The user moves to the last page by clicking it. -## States and cases +## Edge cases ### First page @@ -135,16 +158,6 @@ If there is no data or the filter is applied, pagination shouldn't be displayed. Avoid displaying pagination while loading the table or other related data. -## Additional states - -### Select for choosing rows number - -After the user changes the value in the select, the page should be refreshed, and the value of the table rows from the select should be applied. - -We recommend using these values for the select: 10, 20, 50, 100. - -![](static/page-select.png) - ### Impossible to calculate exact number of pages In this case, add the `tilde (≈)` to the number of pages and change the link displaying the number of all pages to plain text. diff --git a/website/docs/components/pagination/static/l-size.png b/website/docs/components/pagination/static/l-size.png new file mode 100644 index 0000000000..34133e985e Binary files /dev/null and b/website/docs/components/pagination/static/l-size.png differ diff --git a/website/docs/components/pagination/static/m-size.png b/website/docs/components/pagination/static/m-size.png new file mode 100644 index 0000000000..b126bf7abd Binary files /dev/null and b/website/docs/components/pagination/static/m-size.png differ diff --git a/website/docs/components/pagination/static/margins.png b/website/docs/components/pagination/static/margins.png deleted file mode 100644 index f942a9d522..0000000000 Binary files a/website/docs/components/pagination/static/margins.png and /dev/null differ diff --git a/website/docs/components/pagination/static/pagination-layout-l.png b/website/docs/components/pagination/static/pagination-layout-l.png new file mode 100644 index 0000000000..c603b3d687 Binary files /dev/null and b/website/docs/components/pagination/static/pagination-layout-l.png differ diff --git a/website/docs/components/pagination/static/pagination-layout-m.png b/website/docs/components/pagination/static/pagination-layout-m.png new file mode 100644 index 0000000000..12bc052907 Binary files /dev/null and b/website/docs/components/pagination/static/pagination-layout-m.png differ diff --git a/website/docs/components/pills/pills-code.md b/website/docs/components/pills/pills-code.md index 9d0100d2a0..72cc10f6ea 100644 --- a/website/docs/components/pills/pills-code.md +++ b/website/docs/components/pills/pills-code.md @@ -4,7 +4,7 @@ fileSource: pills tabs: Design('pills'), A11y('pills-a11y'), API('pills-api'), Example('pills-code'), Changelog('pills-changelog') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/components/pills/pills.md b/website/docs/components/pills/pills.md index c59e4abc27..a0541f1ee9 100644 --- a/website/docs/components/pills/pills.md +++ b/website/docs/components/pills/pills.md @@ -93,7 +93,9 @@ Component consists of the following: 2. `Pill.Item.Addon` 3. `Pill.Item.Text` -## Sizes and margins +## Appearance + +### Sizes Table: Pills sizes and margins @@ -102,12 +104,14 @@ Table: Pills sizes and margins | M (28px) | ![](static/pills-paddings-M.png) | | L (40px) | ![](static/pills-paddings-L.png) | +### Addons + Addons (icons, flags, badges, counters) have the same margin as the addons inside the [Button](/components/button/button). ![](static/badge-paddings.png) ![](static/counter-paddings.png) -## Cases +## Usage cases ### Default diff --git a/website/docs/components/product-head/product-head.md b/website/docs/components/product-head/product-head.md index 722be07914..549a6b4c49 100644 --- a/website/docs/components/product-head/product-head.md +++ b/website/docs/components/product-head/product-head.md @@ -23,7 +23,9 @@ It's always positioned below the main Semrush header and searchbar. 5. `Info`: It's a row with global filters and/or additional information. 6. `Info.Item`: An item with the information on the project or global filter. -## Margins and paddings +## Appearance + +### Marings and paddings ![product-head paddings](static/padding-left-right.png) @@ -37,9 +39,9 @@ If there is a [Notice](/components/notice/notice) in the header, it has an 8px m ![product-head element sizes](static/elements-margins.png) -## Styles +### Styles -### Breadcrumbs and additional links +#### Breadcrumbs and additional links ::: tip Use the [ButtonLink](../../components/button/button#button-with-link-styles) component if the element acts as a button, that's opens a dialog or changes the page. @@ -49,7 +51,7 @@ Use the [ButtonLink](../../components/button/button#button-with-link-styles) com - [Links](/components/link/link) have a size of 14px. - The margin between the links is 20px. -### Heading and main controls +#### Heading and main controls - The heading, buttons, and labels are center-aligned with respect to each other. - For the title, use text with a size of 20px (use `--fs-400`, `--lh-400` tokens). @@ -58,13 +60,13 @@ Use the [ButtonLink](../../components/button/button#button-with-link-styles) com - The icons are aligned with the title's baseline. - [Button](/components/button/button) has a size of M. -### Filters and/or additional information +#### Filters and/or additional information - All elements are center-aligned. - For text, use a size of 14px (use `--fs-200`, `--lh-200` tokens) and `--text-primary` token for the color. - Icons have a size of M. -## ProductHead variants +## Component variants ### Maximum set of elements inside diff --git a/website/docs/components/progress-bar/progress-bar-code.md b/website/docs/components/progress-bar/progress-bar-code.md index 633481022a..0528993b7a 100644 --- a/website/docs/components/progress-bar/progress-bar-code.md +++ b/website/docs/components/progress-bar/progress-bar-code.md @@ -4,7 +4,7 @@ fileSource: progress-bar tabs: Design('progress-bar'), A11y('progress-bar-a11y'), API('progress-bar-api'), Example('progress-bar-code'), Changelog('progress-bar-changelog') --- -## Complex usage example +## Basic usage ::: sandbox diff --git a/website/docs/components/progress-bar/progress-bar.md b/website/docs/components/progress-bar/progress-bar.md index 287bb80463..6222fa93c4 100644 --- a/website/docs/components/progress-bar/progress-bar.md +++ b/website/docs/components/progress-bar/progress-bar.md @@ -75,7 +75,9 @@ ProgressBar consists of two main elements: `ProgressBar` and `ProgressBar.Value` ![](static/progressbar-composition.png) -## Sizes and styles +## Appearance + +### Sizes Our ProgressBar has three sizes. @@ -87,7 +89,7 @@ Table: ProgressBar sizes and styles | M (8px) | ![](static/size-m.png) | `--rounded-medium` | Use inside the product. | | L (12px) | ![](static/size-l.png) | `--rounded-medium` | Use in modal windows or the start screen. | -## Themes +### Themes ProgressBar offers two themes: `dark` and `invert`, which are suitable for light and dark/colored backgrounds respectively. Both themes use the `--progress-bar-value` token for color with a gradient pattern to indicate progress. @@ -98,7 +100,7 @@ Table: ProgressBar themes | Invert | ![](static/size-l.png) | `--progress-bar-bg` | | Dark | ![](static/dark-theme.png) | `--progress-bar-bg-invert`| -## ProgressBar with counter +## Usage with counter A counter can be added next to the ProgressBar to indicate the number of loaded data. If the exact number of the data is unknown, the counter shouldn't be displayed. **Place the counter above or near the ProgressBar, ensuring that the margins between the counter and the ProgressBar are multiples of 4.** diff --git a/website/docs/components/radio/radio-code.md b/website/docs/components/radio/radio-code.md index f8a1e2cb1b..c5161a17a8 100644 --- a/website/docs/components/radio/radio-code.md +++ b/website/docs/components/radio/radio-code.md @@ -4,7 +4,7 @@ fileSource: radio tabs: Design('radio'), A11y('radio-a11y'), API('radio-api'), Example('radio-code'), Changelog('radio-changelog') --- -## RadioGroup example +## RadioGroup `RadioGroup` works as a controlling component and doesn't have an actual HTML element beneath it. @@ -16,7 +16,7 @@ tabs: Design('radio'), A11y('radio-a11y'), API('radio-api'), Example('radio-code ::: -## Additional props for input +## Additional input props `Radio.Value` hides a styled div and a hidden input. When you pass props to `Radio.Value`, a specific set of them is passed to the input props, while all others go to the `Radio.Value.RadioMark` div. diff --git a/website/docs/components/radio/radio.md b/website/docs/components/radio/radio.md index f00d92c1ee..b67df1022c 100644 --- a/website/docs/components/radio/radio.md +++ b/website/docs/components/radio/radio.md @@ -76,7 +76,9 @@ Component consists of the following: 3. `Radio.Value` 4. `Radio.Text` -## Sizes and margins +## Appearance + +### Sizes The radio button has two sizes: M and L. The text label is always positioned to the right of the radio button. @@ -98,7 +100,7 @@ Table: Radio button margins | M (16px x 16px) | ![](static/vert-m.png) ![](static/margins-m.png) | | L (20px x 20px) | ![](static/vert-l.png) ![](static/margins-l.png) | -## Radio button with a paragraph +## Radio button with paragraph All radio button sizes can be used with the corresponding text paragraphs. @@ -121,7 +123,7 @@ Info icon should have `margin-left: 4px`. ![](static/info-icon-margin.png) -## Radio button with a link inside +## Radio button with link inside Text label may contain a [Link component](/components/link/link). diff --git a/website/docs/components/scroll-area/scroll-area-code.md b/website/docs/components/scroll-area/scroll-area-code.md index a879db7935..a515bac48f 100644 --- a/website/docs/components/scroll-area/scroll-area-code.md +++ b/website/docs/components/scroll-area/scroll-area-code.md @@ -16,7 +16,7 @@ To use the ScrollArea component, wrap your content with `ScrollArea`. It will cr ::: -## Synchronized scroll on two different screens +## Synchronized scroll ::: sandbox @@ -26,7 +26,7 @@ To use the ScrollArea component, wrap your content with `ScrollArea`. It will cr ::: -## Synchronized reverse scroll on two different screens +## Synchronized reverse scroll ::: sandbox diff --git a/website/docs/components/scroll-area/scroll-area.md b/website/docs/components/scroll-area/scroll-area.md index 74977a31ef..10f8f7e602 100644 --- a/website/docs/components/scroll-area/scroll-area.md +++ b/website/docs/components/scroll-area/scroll-area.md @@ -18,7 +18,7 @@ The ScrollArea consists of the following elements: - Scroll indicator (`ScrollArea.Bar`). - Slider (`ScrollArea.Bar.Slider`). -## Styles +## Appearance Table: ScrollArea styles diff --git a/website/docs/components/select/select-code.md b/website/docs/components/select/select-code.md index 094dc45512..e1d97de679 100644 --- a/website/docs/components/select/select-code.md +++ b/website/docs/components/select/select-code.md @@ -112,7 +112,7 @@ The component offers several variants of options layout: ::: -## Options filtering +## Option filtering The `InputSearch` is added to Select for filtering elements in the list. This is a stylized wrapper over the [Input](/components/input/input) component with a `Search` icon and a **Clear** button. diff --git a/website/docs/components/select/select.md b/website/docs/components/select/select.md index 26961c20f0..2f7f0e4877 100644 --- a/website/docs/components/select/select.md +++ b/website/docs/components/select/select.md @@ -161,7 +161,7 @@ If the list has more than three values, add the **Select all** option at the ver ![](static/multiselect-all.png) -## Specific cases for multiselect +## Specific multiselect cases In long lists (for example, countries or time zones), selected values should be placed at the top of the list when the list is opened. diff --git a/website/docs/components/side-panel/side-panel-code.md b/website/docs/components/side-panel/side-panel-code.md index b1152f8b1c..103d42ada2 100644 --- a/website/docs/components/side-panel/side-panel-code.md +++ b/website/docs/components/side-panel/side-panel-code.md @@ -4,7 +4,7 @@ fileSource: side-panel tabs: Design('side-panel'), A11y('side-panel-a11y'), API('side-panel-api'), Example('side-panel-code'), Changelog('side-panel-changelog') --- -## Basic example +## Basic usage ::: sandbox @@ -14,7 +14,7 @@ tabs: Design('side-panel'), A11y('side-panel-a11y'), API('side-panel-api'), Exam ::: -## Advanced example +## Header and footer ::: sandbox @@ -24,7 +24,7 @@ tabs: Design('side-panel'), A11y('side-panel-a11y'), API('side-panel-api'), Exam ::: -## Access to internal components +## Advanced usage You can access the internal components by expanding `SidePanel` for `SidePanel.Overlay`, `SidePanel.Panel` or `SidePanel.Close`. diff --git a/website/docs/components/side-panel/side-panel.md b/website/docs/components/side-panel/side-panel.md index 20aca62bb9..8e1d303bc8 100644 --- a/website/docs/components/side-panel/side-panel.md +++ b/website/docs/components/side-panel/side-panel.md @@ -104,14 +104,12 @@ align-items: center; ![](static/footer-paddings.png) -## Interaction - -### Placement in the interface +## Placement - You can customize whether the panel should open in the product area or over the entire website (as modal windows do). If the SidePanel refers to a specific product, it should be rendered in the product under the main header. - The focus remains inside the panel and doesn't move to the page content. You can navigate through the controls inside the SidePanel using `Tab`. -### Page scroll +## Page scroll Page scroll is disabled by default. We recommend you to enable it only when SidePanel has some tips and additional information for the page, and no overlay is enabled. @@ -119,18 +117,18 @@ Page scroll is disabled by default. We recommend you to enable it only when Side Always disable page scroll for SidePanel with an overlay. ::: -### SidePanel opening and closing +## Displaying and hiding + +The SidePanel can be opened either by the user clicking on the corresponding trigger or by the system in special cases to draw attention to the information in the panel. -You can close the panel with: +The panel can be closed with: - CTA control; - **Close** button; - Clicking outside the area of the panel (at overlay), optional; - `Esc` key. -SidePanel can be opened either by the user clicking on the corresponding trigger or by the system in special cases to draw attention to the information in the panel. - -### Animation of appearance and hiding +### Animation SidePanel opens and closes with the animation: `transition: all 350ms ease-in-out`. @@ -141,7 +139,7 @@ SidePanel opens and closes with the animation: `transition: all 350ms ease-in-ou ![](static/320-width.png) -## Edge cases +## Interaction `SidePanel.Header` should be visible even in loading, empty and error states. diff --git a/website/docs/components/skeleton/skeleton-code.md b/website/docs/components/skeleton/skeleton-code.md index c46a0c93f3..f44b46359f 100644 --- a/website/docs/components/skeleton/skeleton-code.md +++ b/website/docs/components/skeleton/skeleton-code.md @@ -4,7 +4,7 @@ fileSource: skeleton tabs: Design('skeleton'), A11y('skeleton-a11y'), API('skeleton-api'), Example('skeleton-code'), Changelog('skeleton-changelog') --- -## Text initial loading +## Loading text ::: sandbox @@ -14,7 +14,7 @@ tabs: Design('skeleton'), A11y('skeleton-a11y'), API('skeleton-api'), Example('s ::: -## Usage with other elements +## Custom shapes ::: sandbox @@ -24,7 +24,7 @@ tabs: Design('skeleton'), A11y('skeleton-a11y'), API('skeleton-api'), Example('s ::: -## Skeleton examples for charts +## Chart Skeleton Use `h={100}` and `w={100}` to adjust the height and width of the skeleton. diff --git a/website/docs/components/slider/slider-code.md b/website/docs/components/slider/slider-code.md index 805a8786af..a901fa4645 100644 --- a/website/docs/components/slider/slider-code.md +++ b/website/docs/components/slider/slider-code.md @@ -14,7 +14,7 @@ tabs: Design('slider'), A11y('slider-a11y'), API('slider-api'), Example('slider- ::: -## Customized options view +## Customized options ::: sandbox diff --git a/website/docs/components/slider/slider.md b/website/docs/components/slider/slider.md index dac2ac9097..1736347c94 100644 --- a/website/docs/components/slider/slider.md +++ b/website/docs/components/slider/slider.md @@ -35,14 +35,16 @@ which describes how the time taken to perform an action depends on the thickness Larger slider knobs and bars make using sliders easier and faster. ::: -## Sizes +## Appearance + +### Sizes Default component sizes: - Bar height: 4px - Knob size: 20px * 20px -## Styles +### Styles Default component styles: @@ -101,7 +103,7 @@ show a warning tooltip with an appropriate message. ## Usage in UX/UI -### When to use the slider +### When to use slider This input works best when the user doesn't need to enter a specific value but wants to choose an approximate value. @@ -116,7 +118,7 @@ Clicking and dragging a control to an exact location on mobile devices can be ch Many users accidentally move the slider knob off the value they were trying to select when lifting their finger off the screen, [as mentioned by Nielsen Norman Group](https://www.nngroup.com/articles/sliders-knobs/). -### Input values placement +### Input values location Consider how users will interact with the control. Avoid placing value labels under the input on mobile devices, diff --git a/website/docs/components/spin/spin-code.md b/website/docs/components/spin/spin-code.md index d0c982e21a..837d5462bf 100644 --- a/website/docs/components/spin/spin-code.md +++ b/website/docs/components/spin/spin-code.md @@ -4,7 +4,7 @@ fileSource: spin tabs: Design('spin'), A11y('spin-a11y'), API('spin-api'), Example('spin-code'), Changelog('spin-changelog') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/components/spin/spin.md b/website/docs/components/spin/spin.md index c684ecad04..1ae9b8f102 100644 --- a/website/docs/components/spin/spin.md +++ b/website/docs/components/spin/spin.md @@ -119,7 +119,9 @@ For loading whole tables, forms, widgets and other complex components, use [Spin This component demonstrates the loading and response to user actions in the interface. For general recommendations regarding such components, refer to the [Loading patterns](/patterns/loading-states/loading-states). ::: -## Sizes and margins +## Appearance + +### Sizes The Spin component comes in six different sizes. The text size should be at least 14px. @@ -134,17 +136,7 @@ Table: Spin sizes and margins | **XL** | ![](static/text-vertical-xl.png) | ![](static/text-horizontal-xl.png) | | **XXL** | ![](static/text-vertical-xxl.png) | ![](static/text-horizontal-xxl.png) | -## Styles - -::: tip -For recommendations on Spin positioning and indents in blocks and on the page, refer to [SpinContainer](/components/spin-container/spin-container). -::: - -You can place text next to the spinner to inform the user that data is being loaded. The text should use the `--text-secondary` token for color, as it is considered a secondary message according to the overall visual hierarchy of the page. - -**Text can be placed on the right or below the spinner.** In small components, blocks, and widgets, place the text to the right of the spinner. For large components, blocks of components, or inside large blocks and widgets, we recommend placing the text below the spinner and using one of the four largest Spin sizes. - -## Themes +### Themes Spin has two themes: `dark` and `invert` – for use on light and dark/colored backgrounds, respectively. Additionally, you can customize the Spin color as needed. @@ -155,6 +147,16 @@ Table: Spin themes | `dark` | ![](static/dark-m.png) | Use this theme of Spin on a light background. | | `invert` | ![](static/invert-m.png) | Use this theme of Spin on a dark/colored background. | +## Text placement + +::: tip +For recommendations on Spin positioning and indents in blocks and on the page, refer to [SpinContainer](/components/spin-container/spin-container). +::: + +You can place text next to the spinner to inform the user that data is being loaded. The text should use the `--text-secondary` token for color, as it is considered a secondary message according to the overall visual hierarchy of the page. + +**Text can be placed on the right or below the spinner.** In small components, blocks, and widgets, place the text to the right of the spinner. For large components, blocks of components, or inside large blocks and widgets, we recommend placing the text below the spinner and using one of the four largest Spin sizes. + ## Animation For Spin appearance and disappearance, use an animation with a 300ms delay and `ease-out` easing. diff --git a/website/docs/components/switch/switch-code.md b/website/docs/components/switch/switch-code.md index 0fa62d3817..b03f2796f4 100644 --- a/website/docs/components/switch/switch-code.md +++ b/website/docs/components/switch/switch-code.md @@ -3,7 +3,7 @@ title: Switch tabs: Design('switch'), A11y('switch-a11y'), API('switch-api'), Example('switch-code'), Changelog('switch-changelog') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/components/switch/switch.md b/website/docs/components/switch/switch.md index 59dc63bfcb..6c6683f3fb 100644 --- a/website/docs/components/switch/switch.md +++ b/website/docs/components/switch/switch.md @@ -93,7 +93,9 @@ Component consists of the following: - `Switch.Value` - `Switch.Addon` -## Sizes and margins +## Appearance + +### Sizes The switch comes in three sizes: `m`, `l` and `xl`. @@ -107,7 +109,7 @@ Table: Switch sizes and styles | L (20px) | ![](static/switch-on-text-l.png) | `font-size: var(--fs-200)`, margin between the control and the text is 8px | | XL (24px) | ![](static/switch-on-text-xl.png) | `font-size: var(--fs-300)`, margin between the control and the text is 8px | -## Themes +### Themes The Switch component offers two themes: `info` and `success`. @@ -118,16 +120,16 @@ Table: Switch themes | `info` | ![](static/on-info.png) | Default theme. | | `success` | ![](static/on-success.png) | Theme for highlighting a positive enabled state of the switch. | -## Icon inside Switch.Value +## Switch with icon For larger sizes of the component (`l` and `xl`), you have the option to include an icon within the `Switch.Value`. It is recommended to use different icons for the off and on states. Table: Icon inside the Switch.Value -| Switch size | Normal state | Checked state | -| ----------- | ---------------------------------- | --------------------------------- | -| l | ![](static/switch-off-icon-l.png) | ![](static/switch-on-icon-l.png) | -| xl | ![](static/switch-off-icon-xl.png) | ![](static/switch-on-icon-xl.png) | +| `size` | Normal state | Checked state | +| ------ | ---------------------------------- | --------------------------------- | +| L | ![](static/switch-off-icon-l.png) | ![](static/switch-on-icon-l.png) | +| XL | ![](static/switch-off-icon-xl.png) | ![](static/switch-on-icon-xl.png) | ## Interaction diff --git a/website/docs/components/tab-line/tab-line.md b/website/docs/components/tab-line/tab-line.md index a20e3893e7..c46c1f8576 100644 --- a/website/docs/components/tab-line/tab-line.md +++ b/website/docs/components/tab-line/tab-line.md @@ -98,7 +98,9 @@ Component consists of the following: - `TabLine.Item.Addon` - `TabLine.Item.Text` -## Sizes and margins +## Appearance + +### Sizes - The `TabLine.Item` has a `margin-right: var(--spacing-4x)` (except for the `last-child`). - Addons before and after the text have a margin of 8px. @@ -110,17 +112,17 @@ Table: TabLine sizes and margins | M (28px) | ![](static/tab-m.png) | | L (40px) | ![](static/tab-l.png) | -## Types +### Types Depending on the context, you can use TabLine with or without a border-bottom. The border uses the `--border-primary` token for its color. -### Tabs with border (underlined) +#### Tabs with border (underlined) Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page. ![](static/tab-with-border.png) -### Tabs without border +#### Tabs without border Use TabLine with border-bottom to visually separate navigation from the content it switches. This is particularly helpful for secondary navigation on a page. @@ -164,7 +166,7 @@ Table: TabLine states When switching between active tabs, the border-bottom moves with an `ease` transition and a duration of `500ms`. -## Placement in the interface +## 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/components/tab-panel/tab-panel.md b/website/docs/components/tab-panel/tab-panel.md index a5bdfa0382..cf6c47bcc5 100644 --- a/website/docs/components/tab-panel/tab-panel.md +++ b/website/docs/components/tab-panel/tab-panel.md @@ -85,14 +85,16 @@ Component consists of the following: - `TabPanel.Item.Addon` - `TabPanel.Item.Text` -## Sizes and margins +## Appearance -- The TabPanel.Item has a `margin-right: var(--spacing-4x)` (except for the `last-child`). +### Sizes + +The TabPanel.Item has a `margin-right: var(--spacing-4x)` (except for the `last-child`). Addons before and after the text have a margin of 8px. ![](static/tab-m.png) -## Addons +### Addons Addons inside TabPanel.Item have the same margins as addons inside the [Button](/components/button/button) component. diff --git a/website/docs/components/tag/tag.md b/website/docs/components/tag/tag.md index 380e8c7582..e5183f8c26 100644 --- a/website/docs/components/tag/tag.md +++ b/website/docs/components/tag/tag.md @@ -137,7 +137,9 @@ Component consists of the following: - `Tag.Close` — a button that removes the tag - `Tag.Circle` — a round addon, usually an image. -## Sizes +## Appearance + +### Sizes Table: Tag sizes @@ -147,7 +149,7 @@ Table: Tag sizes | L (28px) | ![](static/tag-L.png) ![](static/tag2-L.png) | | XL (40px) | ![](static/tag-XL.png) ![](static/tag2-XL.png) | -## Themes +### Themes The component offers several themes for tags. @@ -162,7 +164,7 @@ Table: Tag themes | `additional` | ![](static/additional.png) | Ideal for special tags that are added to other tags. | | `additional` with `color:"white"` | ![](static/additional-invert.png) | An inversion of the `additional` theme used for special tags that are added to other tags. | -### Tag colors +#### Tag colors To change tag color, use colors with 500 tone from [our palette tokens](/style/design-tokens/design-tokens#base-tokens-palette), since they are selected with the 60Lc contrast (according to APCA) between the text and background. Refer to [Custom color example](/components/tag/tag-code#custom-color). @@ -188,6 +190,16 @@ Upon clicking the `Check` icon or pressing `Enter`, the input value is saved and If space for tag placement is limited, the text should be truncated with an `ellipsis`. Hovering over a tag with an `ellipsis` should display a tooltip with the full tag label. +## Grouped tags + +Table: Grouped tags + +| Size (height in px) | Margins | +| ------------------- | ------------------------------ | +| M (20px) | ![](static/tag-margins-M.png) | +| L (28px) | ![](static/tag-margins-L.png) | +| XL (40px) | ![](static/tag-margins-XL.png) | + ## Editing tag For editable tags, use the [InlineInput](/components/inline-input/inline-input) component. Refer to the [live example](/components/tag/tag-code#editing_tag). @@ -208,16 +220,6 @@ Unfortunately, this solution can be found in several places so far. ![more tags example](static/more-tags.png) --> -## Margins between tags - -Table: Margins between tags - -| Size (height in px) | Margins | -| ------------------- | ------------------------------ | -| M (20px) | ![](static/tag-margins-M.png) | -| L (28px) | ![](static/tag-margins-L.png) | -| XL (40px) | ![](static/tag-margins-XL.png) | - ## Usage in UX/UI Use tags for visual marking and grouping of information and objects. diff --git a/website/docs/components/textarea/textarea-code.md b/website/docs/components/textarea/textarea-code.md index 814a758b8b..98ec34f6bf 100644 --- a/website/docs/components/textarea/textarea-code.md +++ b/website/docs/components/textarea/textarea-code.md @@ -4,7 +4,7 @@ fileSource: textarea tabs: Design('textarea'), A11y('textarea-a11y'), API('textarea-api'), Example('textarea-code'), Changelog('textarea-changelog') --- -## Textarea with auto height +## Auto height The component can automatically adjust its height as the user types text. diff --git a/website/docs/components/textarea/textarea.md b/website/docs/components/textarea/textarea.md index 4551e959ad..951c12c159 100644 --- a/website/docs/components/textarea/textarea.md +++ b/website/docs/components/textarea/textarea.md @@ -103,7 +103,9 @@ const App = PlaygroundGeneration((createGroupWidgets) => { **Textarea** is a multiline text field designed for capturing a large amount of data, such as comments, descriptions, or lists of links. -## Sizes +## Appearance + +### Sizes Table: Textarea sizes diff --git a/website/docs/components/time-picker/time-picker-code.md b/website/docs/components/time-picker/time-picker-code.md index eb6ff1a2f4..22b06ffcf5 100644 --- a/website/docs/components/time-picker/time-picker-code.md +++ b/website/docs/components/time-picker/time-picker-code.md @@ -4,7 +4,7 @@ fileSource: time-picker tabs: Design('time-picker'), A11y('time-picker-a11y'), API('time-picker-api'), Example('time-picker-code'), Changelog('time-picker-changelog') --- -## Expanded access to all the components +## Advanced usage For deeper customization, you can expand the component. diff --git a/website/docs/components/time-picker/time-picker.md b/website/docs/components/time-picker/time-picker.md index e863474efd..ed69a33f1a 100644 --- a/website/docs/components/time-picker/time-picker.md +++ b/website/docs/components/time-picker/time-picker.md @@ -88,7 +88,7 @@ Component consists of the following: - `TimePicker.Format` - `TimePicker.Separator` -## Appearance +## Formats The component includes [comboboxes](/components/auto-suggest/auto-suggest#Combobox) inside the input field. @@ -101,9 +101,11 @@ Table: TimePicker 24-hour and 12-hour formats | 24-hour format | ![](static/input-default-l.png) | | 12-hour format | ![](static/input-l.png) | -## Sizes and paddings +## Appearance + +### Sizes -Table: TimePicker sizes and paddings +Table: TimePicker sizes | Input size (height in px) | Appearance example | Paddings | | ------------------------- | ---------------------------------- | ---------------------------------- | @@ -152,7 +154,7 @@ Validation in this component is required in several cases: - When there is a selection of multiple time slots, and they cannot be set to equal values. - When users cannot select times in the past or future. In this case, the time selection also depends on the date selection, and the validation applies to the entire group of controls. -### How the validation is performed +### How validation is performed - All the fields related to the selection of the date and time receive the status `invalid`. - A tooltip with the description of the error is shown in the first field without placing the focus on the field. diff --git a/website/docs/components/tooltip/tooltip-code.md b/website/docs/components/tooltip/tooltip-code.md index 33d653186d..155943a0d7 100644 --- a/website/docs/components/tooltip/tooltip-code.md +++ b/website/docs/components/tooltip/tooltip-code.md @@ -61,7 +61,7 @@ By default, when a tooltip is rendered on the edge of a relatively positioned bl ::: -## Custom colors for background and arrow +## Custom background color For some specific cases, you can color the Tooltip's arrow using the `arrowBgColor` property for its background and the `arrowShadowColor` property for its border. For example, if you have a colored illustration placed at the bottom of the Tooltip content, you might want to color the arrow to match the illustration's color. diff --git a/website/docs/components/tooltip/tooltip.md b/website/docs/components/tooltip/tooltip.md index eeb9172115..000c417cbd 100644 --- a/website/docs/components/tooltip/tooltip.md +++ b/website/docs/components/tooltip/tooltip.md @@ -165,11 +165,13 @@ Table: Tooltip themes | `invert` | ![](static/invert-theme.png) | `background-color: var(--tooltip-invert)`, `border: 1px solid var(--border-tooltip-invert)`, `box-shadow: var(--box-shadow-popper)` | | `warning` | ![](static/alert-theme.png) | `background-color: var(--tooltip-warning)`, `border: 1px solid var(--border-danger-active)`, `box-shadow: var(--box-shadow-popper)` | -## Maximum width and offset +## Appearance + +### Maximum width and offset By default, the Tooltip has a maximum width of 228px, but you can set a different width if needed. -### Offset and arrow placement +#### Offset and arrow placement The distance between the trigger and the tooltip is 4px. @@ -179,13 +181,13 @@ The placement of the arrow depends on the `placement` property, refer to the liv ![](static/tooltip-arrow-paddings.png) -## Paddings and margins +### Paddings and margins The content area of the tooltip has a default padding of 12px. ![](static/tooltip-content-paddings.png) -### Content margins and paddings +#### Content margins and paddings ![](static/tooltip-button.png) @@ -197,7 +199,7 @@ The image inside the tooltip has a size of 130px * 130px. ![](static/tooltip-pic-paddings.png) -### Data margins +#### Data margins To improve readability, it's recommended to use specific margins between labels and values inside the tooltip. Detailed recommendations for tooltip margins can be found in [Data visualization](/data-display/d3-chart/d3-chart#tooltip) and [Summary](/patterns/summary/summary#difference_value). diff --git a/website/docs/components/widget-empty/widget-empty-code.md b/website/docs/components/widget-empty/widget-empty-code.md index 881d4fe3ba..d188f40ce8 100644 --- a/website/docs/components/widget-empty/widget-empty-code.md +++ b/website/docs/components/widget-empty/widget-empty-code.md @@ -4,7 +4,7 @@ fileSource: widget-empty tabs: Design('widget-empty'), A11y('widget-empty-a11y'), API('widget-empty-api'), Example('widget-empty-code'), Changelog('widget-empty-changelog') --- -## NoData example +## NoData state The template already includes a `title` and default `description`, you only need to specify the [illustration](/style/illustration/illustration) `type`. You can provide a custom `description` and additional elements, if you need. @@ -20,7 +20,7 @@ The locale can be passed directly to the component or wrap your application in ` ::: -## Error example +## Error state The template already includes default `title`, `icon` and `description`. You can provide a custom `description` and additional elements if you need. @@ -32,7 +32,7 @@ The template already includes default `title`, `icon` and `description`. You can ::: -## Custom examples +## Custom states You can create custom messages, such as the "[Set up your tool](/components/widget-empty/widget-empty#set_up_your_product)" message. diff --git a/website/docs/components/widget-empty/widget-empty.md b/website/docs/components/widget-empty/widget-empty.md index 70ddeb3283..ec02c8e5b1 100644 --- a/website/docs/components/widget-empty/widget-empty.md +++ b/website/docs/components/widget-empty/widget-empty.md @@ -21,7 +21,9 @@ Component consists of the following: - [Illustration](/style/illustration/illustration) - Controls -## Styles +## Appearance + +### Styles We recommend restricting maximum width of the message text to 400px to ensure readability. diff --git a/website/docs/components/wizard/wizard-code.md b/website/docs/components/wizard/wizard-code.md index fec7e6ec87..90881a6c43 100644 --- a/website/docs/components/wizard/wizard-code.md +++ b/website/docs/components/wizard/wizard-code.md @@ -5,7 +5,7 @@ tabs: Design('wizard'), A11y('wizard-a11y'), API('wizard-api'), Example('wizard- The Wizard component inherits from the [Modal](/components/modal/modal-api) component, so you can use all of its properties. -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/components/wizard/wizard.md b/website/docs/components/wizard/wizard.md index ecc9a2a980..4333fba88c 100644 --- a/website/docs/components/wizard/wizard.md +++ b/website/docs/components/wizard/wizard.md @@ -8,13 +8,15 @@ tabs: Design('wizard'), A11y('wizard-a11y'), API('wizard-api'), Example('wizard- **Wizard** is a component that guides users through a series of predefined steps to complete a larger task. It simplifies complex tasks by breaking them down into manageable steps, reducing the perceived complexity. -### When to use wizard +### Usage recommendations + +#### When to use wizard - Use a wizard when dealing with large tasks that can't be simplified. Breaking them down into steps helps users focus on each part of the task. - If a task requires a specific sequence of steps to be followed, a wizard ensures users don't miss important parts and make fewer mistakes. - Wizards are suitable when a task involves three-five steps. For smaller tasks with just two steps or very large tasks with more than ten steps, consider alternative approaches and components. -### When not to use wizard +#### When not to use wizard - Avoid using wizards for educational purposes, as they focus on task completion rather than providing additional information for learning. Instead, use components like [FeaturePopover](/components/feature-popover/feature-popover), [Informer](../../patterns/informer/informer.md), [DesctiptionTooltip](../tooltip/tooltip.md), or videos for education. - Advanced users may find predefined steps in a wizard restrictive. Consider using wizards for audiences that would benefit from step-by-step guidance. @@ -32,7 +34,9 @@ Component consists of the following: 5. `Wizard.StepBack` 6. `Wizard.StepNext` -## Stepper styles +## Appearance + +### Stepper styles If a `Stepper` has optional text, it should have the following styles: @@ -54,25 +58,25 @@ padding-bottom: var(--intergalactic-spacing-1x); ![](static/substep-paddings-margins.png) -## Stepper states +### Stepper states Table: Stepper states -| State | Appearance example | Styles | -| -------- | ---------------------- | ----------- | -| Normal | ![](static/normal.png) | `background-color: var(--control-primary-advertising)`, `border-radius: var(--rounded-medium)` | -| Hover | ![](static/hover.png) | `background-color: var(--control-primary-advertising-hover)`, `cursor: pointer` | -| Active | ![](static/active.png) | `background-color: var(--control-primary-advertising-active)` | +| State | Appearance example | Styles | +| -------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| Normal | ![](static/normal.png) | `background-color: var(--control-primary-advertising)`, `border-radius: var(--rounded-medium)` | +| Hover | ![](static/hover.png) | `background-color: var(--control-primary-advertising-hover)`, `cursor: pointer` | +| Active | ![](static/active.png) | `background-color: var(--control-primary-advertising-active)` | | Disabled | ![](static/disabled.png) ![](static/disabled-tooltip.png) | Use `--disabled-opacity` token. When hovering on a button in this state, display a tooltip with a description of why the step is disabled. | -| checked | ![](static/checked.png) | The number changes to a `Check` icon in size M. | +| checked | ![](static/checked.png) | The number changes to a `Check` icon in size M. | -## Content area styles +### Content area styles -### Header styles +#### Header styles ![margin-bottom: 20px; color: var(--gray-800); font-size: var(--fs-500); line-height: var(--lh-500); font-weight: 700;](static/header.png) -### Footer styles +#### Footer styles For basic controls use L size. @@ -150,4 +154,3 @@ In the form, use the same sizes for inputs and controls. ### Saving entered value If data entered into the form by the user wasn't sent and the window is closed, save the entered data so that the user doesn't lose it. - diff --git a/website/docs/core-principles/a11y/a11y-keyboard.md b/website/docs/core-principles/a11y/a11y-keyboard.md index c71e118094..c17a8e6690 100644 --- a/website/docs/core-principles/a11y/a11y-keyboard.md +++ b/website/docs/core-principles/a11y/a11y-keyboard.md @@ -39,7 +39,7 @@ Keyboard control should be performed sequentially across all interactive element - The focus inside groups of controls is consistent. After the last control in the group, the focus should move to the next control in the interface. - If the control has a tooltip in the `hover` state, it should appear on focus with `Tab`. -## Keyboard support for button, link, input, etc. +## Keyboard support for controls ### Link diff --git a/website/docs/core-principles/visual-loudness-scale/visual-loudness-scale.md b/website/docs/core-principles/visual-loudness-scale/visual-loudness-scale.md index d9b0643f79..74fb30fd7e 100644 --- a/website/docs/core-principles/visual-loudness-scale/visual-loudness-scale.md +++ b/website/docs/core-principles/visual-loudness-scale/visual-loudness-scale.md @@ -6,21 +6,21 @@ title: Visual loudness scale We want interfaces to help users solve their problems. Building your interface with the principles of visual hierarchy can help with that. You can check it with [visual loudness guide by Tom Osborne](https://www.viget.com/articles/visual-loudness/). -## Controls on the visual loudness scale +## Control loudness scale The table lists the main styles of our controls, arranged according to the scale of visual loudness. -Table: Controls on the visual loudness scale +Table: Controls loudness scale -| Appearance | Type (`use`) and `theme` | Loudness | Frequency of use | When to use | -| ------------------------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| ![](static/button-1.png) | `use="primary"`, `theme="danger"` | **Screech, loud roar.** The dovahkin button, every time it appears on the page, it yells at you: `"Fus Ro Dah!"` – and it takes you to the forefathers for a while, all life flashes before your eyes, etc. | Rare | The action is dangerous for the user: destructive, irreversible. We need to stir them up so that they don't accidentally hurt themself. | -| ![](static/button-2.png) | `use="primary"`, `theme="success"` | **Shout of approval.** The button winks at the user: `"Everything is great, don’t be afraid, press and you will come to success!"`. | Often | Good, important accent action to take, CTA. _Subscribe or upgrade your Semrush subscription, for example._ | -| ![](static/button-3.png) | `use="primary"`, `theme="info"` | **One-time cry.** The button doesn't reach you, but as if slightly reminds that it is ready to do a useful action for you. `"Hey, hello, I'm here, look what you can do!"`. | Often | A common accent action in this world of dullness. | -| ![](static/button-4.png) | `use="primary"`, `theme="invert"` | | Rare | It is an invert version of primary buttons for using on a dark background. | -| ![](static/button-5.png) | `use="secondary"`, `theme="muted"` | **Conversation nearby.** This is a bro button. It will always support you, always with you, but their presence doesn't bother you. `"If you need anything, I'm here."` | Often | A common action button. | -| ![](static/button-6.png) | `use="secondary"`, `theme="invert"` | | Rare | It is an invert version of secondary button for using on a dark background. | -| ![](static/button-7.png) | `use="tertiary"`, `theme="info"` | **Quiet request.** `"You know what to do with it, bro. I'm just reminding you."` | Often | Accent, but not stressful visual control. Use `tertiary` button when there is enough space and you want to make the target zone larger and wider. | -| ![](static/buttonlink-primary.png) | ButtonLink, `use="primary"` | | Often | Accent, but not stressful visual control. Use it in the opposite to `tertiary` button case – when there isn’t enough space. | -| ![](static/button-8.png) | `use="tertiary"`, `theme="muted"` | **Whisper.** `"Psst, wanna a little more information?"` | Neither often nor rarely | Non-accent control. | -| ![](static/buttonlink-secondary.png) | ButtonLink, `use="secondary"` | | Often | Non-accent control for additional information. | +| Appearance | Type (`use`) and `theme` | Loudness | Frequency of use | When to use | +| ------------------------------------ | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| ![](static/button-1.png) | `use="primary"`, `theme="danger"` | **Screech, loud roar.** The dovahkin button, every time it appears on the page, it yells at you: `"Fus Ro Dah!"` – and it takes you to the forefathers for a while, all life flashes before your eyes, etc. | Rare | The action is dangerous for the user: destructive, irreversible. We need to stir them up so that they don't accidentally hurt themself. | +| ![](static/button-2.png) | `use="primary"`, `theme="success"` | **Shout of approval.** The button winks at the user: `"Everything is great, don’t be afraid, press and you will come to success!"`. | Often | Good, important accent action to take, CTA. _Subscribe or upgrade your Semrush subscription, for example._ | +| ![](static/button-3.png) | `use="primary"`, `theme="info"` | **One-time cry.** The button doesn't reach you, but as if slightly reminds that it's ready to do a useful action for you. `"Hey, hello, I'm here, look what you can do!"`. | Often | A common accent action in this world of dullness. | +| ![](static/button-4.png) | `use="primary"`, `theme="invert"` | | Rare | It's an invert version of primary buttons for using on a dark background. | +| ![](static/button-5.png) | `use="secondary"`, `theme="muted"` | **Conversation nearby.** This is a bro button. It will always support you, always with you, but their presence doesn't bother you. `"If you need anything, I'm here."` | Often | A common action button. | +| ![](static/button-6.png) | `use="secondary"`, `theme="invert"` | | Rare | It's an invert version of secondary button for using on a dark background. | +| ![](static/button-7.png) | `use="tertiary"`, `theme="info"` | **Quiet request.** `"You know what to do with it, bro. I'm just reminding you."` | Often | Accent, but not stressful visual control. Use `tertiary` button when there is enough space and you want to make the target zone larger and wider. | +| ![](static/buttonlink-primary.png) | ButtonLink, `use="primary"` | | Often | Accent, but not stressful visual control. Use it in the opposite to `tertiary` button case – when there isn’t enough space. | +| ![](static/button-8.png) | `use="tertiary"`, `theme="muted"` | **Whisper.** `"Psst, wanna a little more information?"` | Neither often nor rarely | Non-accent control. | +| ![](static/buttonlink-secondary.png) | ButtonLink, `use="secondary"` | | Often | Non-accent control for additional information. | diff --git a/website/docs/core-principles/writing-code/wrapping-components.md b/website/docs/core-principles/writing-code/wrapping-components.md index 4d83dbcb5c..5b1a6729ee 100644 --- a/website/docs/core-principles/writing-code/wrapping-components.md +++ b/website/docs/core-principles/writing-code/wrapping-components.md @@ -60,7 +60,7 @@ Use the special utility `wrapIntergalacticComponent` to wrap components. It does ::: -## Complex components wrappers +## Complex wrappers Some components props are generic, for example `Select` component has generic `value` and `DataTable` has generic `data`. For such components, special wrapping utilities are provided. diff --git a/website/docs/data-display/chart-controls/chart-controls.md b/website/docs/data-display/chart-controls/chart-controls.md index 69c3c3d260..7741977e63 100644 --- a/website/docs/data-display/chart-controls/chart-controls.md +++ b/website/docs/data-display/chart-controls/chart-controls.md @@ -15,7 +15,7 @@ The widget's controls can be categorized into the following types: - General controls and filters - Chart controls -## General controls and filters +## General controls General controls and filters are always positioned at the same level as the title and include options such as: @@ -29,7 +29,7 @@ For widget settings, use a button with `use="tertiary"` and `theme="muted"`. Rem ![](static/settings-on.png) -## Chart controls and filters +## Chart data controls These controls filter the data, axes, and additional controls as described below: @@ -92,9 +92,9 @@ For custom periods, use the [DateRangePicker](/components/date-picker/date-picke ![](static/zoom.png) -## Collapsing rows with controls +## Merging controls -You can collapse rows as needed. Different controls or control groups should be separated by a [Divider](/components/divider/divider) using the `--border-secondary` token for color and a margin of 0px 16px. +You can merge rows with controls as needed. Different controls or control groups should be separated by a [Divider](/components/divider/divider) using the `--border-secondary` token for color and a margin of 0px 16px. ![](static/widget-yes-no.png) diff --git a/website/docs/data-display/chart-legend/chart-legend-code.md b/website/docs/data-display/chart-legend/chart-legend-code.md index 274ecf10d8..0ffe3fa86a 100644 --- a/website/docs/data-display/chart-legend/chart-legend-code.md +++ b/website/docs/data-display/chart-legend/chart-legend-code.md @@ -4,13 +4,13 @@ fileSource: d3-chart tabs: Design('chart-legend'), API('chart-legend-api'), Example('chart-legend-code'), Changelog('d3-chart-changelog') --- -## Usage with different chart types +## Usage with charts - For usage with Line chart, refer to the example in the [Line chart](/data-display/line-chart/line-chart-d3-code#legend). - For usage with Bar chart, refer to the example in the [Stacked bar chart](/data-display/stacked-bar-chart/stacked-bar-chart-d3-code#legend). - For usage with Donut chart, refer to the example in the [Donut chart](/data-display/donut-chart/donut-chart-d3-code#legend). -## Custom shape as LegendItem +## Custom shape You can set your custom SVG shape for a LegendItem. diff --git a/website/docs/data-display/color-palette/color-palette.md b/website/docs/data-display/color-palette/color-palette.md index 94a86eb690..37b3c8cfd2 100644 --- a/website/docs/data-display/color-palette/color-palette.md +++ b/website/docs/data-display/color-palette/color-palette.md @@ -19,7 +19,7 @@ We recommend using red carefully, as it is typically reserved for destructive ac For chart-related elements, refer to the [tokens list](/style/design-tokens/design-tokens#semantic_tokens) containing tokens with `chart` in their names. -## Tokens for text and additional information +## Text and grid tokens Table: Tokens for text and additional information @@ -30,7 +30,7 @@ Table: Tokens for text and additional information | `--chart-grid-line` | Grid lines for the X-axis and accent lines, if necessary | | `--chart-grid-x-axis` | Additional guide lines for X-axis | -## Colors usage +## Color usage There are two approaches for applying colors from our palette: diff --git a/website/docs/data-display/donut-chart/donut-chart-d3-code.md b/website/docs/data-display/donut-chart/donut-chart-d3-code.md index ba28c9713c..4df52eedd9 100644 --- a/website/docs/data-display/donut-chart/donut-chart-d3-code.md +++ b/website/docs/data-display/donut-chart/donut-chart-d3-code.md @@ -18,7 +18,7 @@ For core principles, concept description, API and changelog, refer to the [D3 ch ::: -## Donut +## Advanced usage - You can draw donut and pie charts with the `Donut` component. - `Pie` is a separate sector. @@ -32,7 +32,7 @@ For core principles, concept description, API and changelog, refer to the [D3 ch ::: -## Donut controlled highlight +## Controlled highlight Use `active` property to control segments highlight. diff --git a/website/docs/data-display/mini-chart/mini-chart.md b/website/docs/data-display/mini-chart/mini-chart.md index 33d4d05a37..483ff0bc47 100644 --- a/website/docs/data-display/mini-chart/mini-chart.md +++ b/website/docs/data-display/mini-chart/mini-chart.md @@ -101,18 +101,20 @@ if (type === 'trendLine') { **Mini chart** is a component for visualizing a small data set or a single value that needs to be highlighted in the interface to assist the user in quickly reviewing data and understanding how the data has changed on the page. -## Types +## Appearance + +### Types Mini chart has two types: Table: Mini chart types -| type | Appearance example | Description | +| `type` | Appearance example | Description | | ------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | `trend` | ![](static/trend.png) | Use to show trend from a list of values. | | `score` | ![](static/score.png) | Use to visualize some value or to indicate if something (in per cents or absolute numbers) is good/bad, high/low, above average, etc. | -### Trend type +#### Trend type Table: Versions of charts with trend type @@ -129,7 +131,7 @@ You can show the highest/lowest point if necessary. ![](static/trend-bar-point.png) -### Score type +#### Score type The choice of one of the charts below depends on how visually prominent the value should be in your interface and how much space is actually available. @@ -141,7 +143,7 @@ Table: Versions of charts with score type | Semi donut chart (Gauge) | ![](static/score-semi-donut.png) | | Line gauge chart | ![](static/score-line-gauge.png) | -## Sizes +### Sizes The component charts have default sizes, but you can set them to those you need, chart will scale to them. For example: diff --git a/website/docs/data-display/radar-chart/radar-chart.md b/website/docs/data-display/radar-chart/radar-chart.md index 84b7b22ea8..ffafda5d2d 100644 --- a/website/docs/data-display/radar-chart/radar-chart.md +++ b/website/docs/data-display/radar-chart/radar-chart.md @@ -90,6 +90,8 @@ It is designed to show similarities, differences, and outliers, or any other ite The radar chart is also known as web chart, spider chart, spider graph, spider web chart, star chart, star plot, cobweb chart, irregular polygon, polar chart, or Kiviat diagram. It is equivalent to a parallel coordinates plot, with the axes arranged radially. ::: +### Usage recommendations + **Use radar chart when:** - There are multivariate data. diff --git a/website/docs/data-display/scatterplot-chart/scatterplot-chart-d3-code.md b/website/docs/data-display/scatterplot-chart/scatterplot-chart-d3-code.md index fceb057d69..c74533ad7b 100644 --- a/website/docs/data-display/scatterplot-chart/scatterplot-chart-d3-code.md +++ b/website/docs/data-display/scatterplot-chart/scatterplot-chart-d3-code.md @@ -23,7 +23,7 @@ For all the following examples, scale is calculated taking into account syntheti You can see the mathematics, used in `Change.Scatterplot` to calculate common scale, in [our GitHub repository](https://github.com/semrush/intergalactic/blob/master/semcore/d3-chart/src/component/Chart/ScatterPlotChart.tsx#L31). ::: -## Scatter plot +## Advanced usage ::: sandbox @@ -45,7 +45,7 @@ If required, you can assign your own color to Scatter plot. ::: -## Scatter plot with values inside +## Displaying values in dots ::: sandbox @@ -67,7 +67,7 @@ Note that for ChartLegend `patterns` property works only with default `shape={'C ::: -## Color customization and values inside +## Dot values and custom colors If required, you can assign your own color to Scatter plot. diff --git a/website/docs/data-display/scatterplot-chart/scatterplot-chart.md b/website/docs/data-display/scatterplot-chart/scatterplot-chart.md index 1571943a4c..2ceee9ecdc 100644 --- a/website/docs/data-display/scatterplot-chart/scatterplot-chart.md +++ b/website/docs/data-display/scatterplot-chart/scatterplot-chart.md @@ -78,13 +78,13 @@ The scatterplot is highly valued for its versatility and utility in statistical - Identify patterns and relationships between data variables. - Explore correlations, using bubble size and color for additional dimensions. -### How to read a scatterplot chart +### How to read scatterplot chart -| Case | Appearance example | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | +| Case | Appearance example | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | | If the points form a line that runs from bottom left to top right, there is likely a positive correlation between the two variables. | ![](static/positive-correlation.png) | | If the line runs from top left to bottom right, there is likely a negative correlation between the two variables. | ![](static/negative-correlation.png) | -| If the overall trend doesn't form a clear straight line, there is probably no correlation. | ![](static/no-correlation.png) | +| If the overall trend doesn't form a clear straight line, there is probably no correlation. | ![](static/no-correlation.png) | ::: tip Correlation does not imply causation. Unseen variables might influence the charted data. @@ -102,10 +102,10 @@ Dot size is 11px by 11px. Table: Scatterplot chart styles -| Case | Appearance example | Styles | -| ---------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| One data set | ![](static/no-correlation.png) | The default color for the category is `--chart-palette-order-blue` (or `--blue-300`) with 50% transparency. However, if necessary, you can select any other color from the [chart palette](/data-display/color-palette/color-palette). | -| Several data sets | ![](static/positive-correlation-2.png) | Use colors from the [chart palette](/data-display/color-palette/color-palette). | +| Case | Appearance example | Styles | +| ----------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| One data set | ![](static/no-correlation.png) | The default color for the category is `--chart-palette-order-blue` (or `--blue-300`) with 50% transparency. However, if necessary, you can select any other color from the [chart palette](/data-display/color-palette/color-palette). | +| Several data sets | ![](static/positive-correlation-2.png) | Use colors from the [chart palette](/data-display/color-palette/color-palette). | ## Value label @@ -141,8 +141,8 @@ Tooltips should highlight: Table: Scatterplot chart tooltip examples -| Case | Appearance example | -| ---------------- | ------------------------ | +| Case | Appearance example | +| ----------------- | ----------------------- | | One data set | ![](static/hover-2.png) | | Several data sets | ![](static/hover-1.png) | @@ -174,7 +174,7 @@ The chart will scale automatically if the bubble is near the axes. Show [Skeleton](/components/skeleton/skeleton) during initial loading. If the chart has a title, display it to inform users about what's loading. Refer to [Skeleton](/components/skeleton/skeleton) for more details. -Use the `--skeleton-bg` color token for the skeleton's background. +Use the `--skeleton-bg` color token for the skeleton's background. ![](static/scatterplot-chart-skeleton.png) diff --git a/website/docs/filter-group/advanced-filters/advanced-filters-code.md b/website/docs/filter-group/advanced-filters/advanced-filters-code.md index 6e06260791..aae5f0cf8d 100644 --- a/website/docs/filter-group/advanced-filters/advanced-filters-code.md +++ b/website/docs/filter-group/advanced-filters/advanced-filters-code.md @@ -3,7 +3,7 @@ title: Advanced filters tabs: Design('advanced-filters'), Example('advanced-filters-code') --- -## Basic example +## Basic usage This pattern is built using the [FilterTrigger component](../../components/filter-trigger/filter-trigger-code.md). diff --git a/website/docs/filter-group/filter-cp-cd-cpc/filter-cp-cd-cpc-code.md b/website/docs/filter-group/filter-cp-cd-cpc/filter-cp-cd-cpc-code.md index 780088fa56..8637b8223a 100644 --- a/website/docs/filter-group/filter-cp-cd-cpc/filter-cp-cd-cpc-code.md +++ b/website/docs/filter-group/filter-cp-cd-cpc/filter-cp-cd-cpc-code.md @@ -3,7 +3,7 @@ title: Click Potential, Competitive Density, CPC tabs: Design('filter-cp-cd-cpc'), Example('filter-cp-cd-cpc-code') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/filter-group/filter-include-exclude/filter-include-exclude-code.md b/website/docs/filter-group/filter-include-exclude/filter-include-exclude-code.md index 9552ecd345..beb7356513 100644 --- a/website/docs/filter-group/filter-include-exclude/filter-include-exclude-code.md +++ b/website/docs/filter-group/filter-include-exclude/filter-include-exclude-code.md @@ -3,7 +3,7 @@ title: Include/Exclude keywords tabs: Design('filter-include-exclude'), Example('filter-include-exclude-code') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/filter-group/filter-kd-positions-volume/filter-kd-position-volume-code.md b/website/docs/filter-group/filter-kd-positions-volume/filter-kd-position-volume-code.md index b087261882..c0732518c2 100644 --- a/website/docs/filter-group/filter-kd-positions-volume/filter-kd-position-volume-code.md +++ b/website/docs/filter-group/filter-kd-positions-volume/filter-kd-position-volume-code.md @@ -3,7 +3,7 @@ title: Keyword Difficulty, Positions, Volume tabs: Design('filter-kd-positions-volume'), Example('filter-kd-position-volume-code') --- -## Basic example +## Basic usage ::: sandbox diff --git a/website/docs/filter-group/filter-rules/filter-rules.md b/website/docs/filter-group/filter-rules/filter-rules.md index 3964f6b0c5..b3d2642df8 100644 --- a/website/docs/filter-group/filter-rules/filter-rules.md +++ b/website/docs/filter-group/filter-rules/filter-rules.md @@ -51,7 +51,7 @@ Use the [InputNumber](/components/input-number/input-number), if the filter has - The filter can be closed by clicking outside the dropdown. If the user didn't select anything, no values are applied. - Also, if the user hasn't selected anything or there is no data in the custom range inputs, clicking "Apply" button closes the dropdown and nothing is applied. -### Opening the filter for the first time +### Opening filter for the first time **Preset values** @@ -74,7 +74,7 @@ User-selected values are duplicated in the trigger. - Don't duplicate selected preset values in the custom range. - Clicking on the filter clear cross clears the filter from the selected values. It's not depend on whether the filter is open or closed. -### Choosing a custom range +### Choosing custom range **Custom range** @@ -92,6 +92,8 @@ The user can copy/paste values into the input, increase/decrease them by the ste ## Trigger states +Table: Trigger states + | State | Appearance example | | -------------- | -------------------------------------------- | | placeholder | ![placeholder](static/placeholder.png) | diff --git a/website/docs/filter-group/filter-tags/filter-tags-code.md b/website/docs/filter-group/filter-tags/filter-tags-code.md index 1f4735891e..9135209fbd 100644 --- a/website/docs/filter-group/filter-tags/filter-tags-code.md +++ b/website/docs/filter-group/filter-tags/filter-tags-code.md @@ -4,6 +4,6 @@ tabName: Example tabs: Design('filter-tags'), Example('filter-tags-code') --- -## Basic example +## Basic usage You can use [similar example for SERP features filter](/filter-group/filter-serp-features/filter-serp-features-code#ac96ad) to build Tags filter. diff --git a/website/docs/layout/box-system/box-system.md b/website/docs/layout/box-system/box-system.md index ed0e5ae66c..adc51b0d9b 100644 --- a/website/docs/layout/box-system/box-system.md +++ b/website/docs/layout/box-system/box-system.md @@ -4,6 +4,8 @@ fileSource: flex-box tabs: Design('box-system'), API('box-api'), Changelog('box-changelog') --- +## Description + **Flex-box** is a component for managing arrangement and alignment of other components and elements in the interface. ## Box diff --git a/website/docs/layout/grid-system/grid-code.md b/website/docs/layout/grid-system/grid-code.md index b59df1f93f..2cad678379 100644 --- a/website/docs/layout/grid-system/grid-code.md +++ b/website/docs/layout/grid-system/grid-code.md @@ -12,7 +12,7 @@ It's a component for building a 12-column grid. In the product interface we use a 12-column grid with a fixed 24px gutter between columns. The columns stretch. ::: -## Example use +## Basic usage The `Row` component accepts all the properties of the `Flex` component, and the `Col` component accepts all the properties of the `Box` component. @@ -24,7 +24,7 @@ The `Row` component accepts all the properties of the `Flex` component, and the ::: -## Change in general offset +## Column offset Arranging offsets for each column to the left. @@ -36,7 +36,7 @@ Arranging offsets for each column to the left. ::: -## Change in the general gutter between the columns +## Row gutter You can change gutters between the columns, which gives flexibility in use. @@ -48,7 +48,7 @@ You can change gutters between the columns, which gives flexibility in use. ::: -## Automatic column size detection +## Automatic column size ::: sandbox @@ -58,7 +58,7 @@ You can change gutters between the columns, which gives flexibility in use. ::: -## Responsive +## Responsive layout The grid has functionality for responsive layouts. You can change width and offsets of the columns depending on the screen size. @@ -74,7 +74,7 @@ The grid works as desktop first, as our core products are designed to work prima ::: -## Responsive alternative API +## Shorthand responsive props We have added an alternative API for responsive grids. It's more laconic. diff --git a/website/docs/patterns/empty-page/empty-page.md b/website/docs/patterns/empty-page/empty-page.md index 7668ee09d0..624cf43998 100644 --- a/website/docs/patterns/empty-page/empty-page.md +++ b/website/docs/patterns/empty-page/empty-page.md @@ -14,7 +14,9 @@ Typically, users encounter this state when certain actions are necessary to init - Absence of displayed data because the user has not yet created or configured anything within the product. - A placeholder for an upcoming feature, such as "An exciting report will be available here soon," which functions as a preview for future features. -## Default styles +## Appearance + +### Default styles 1. The illustration consistently resides to the left of the message, sized at 300px by 230px. 2. For the title, use text with a font size of 20px (`--fs-400`, `--lh-400` tokens). @@ -25,7 +27,7 @@ Typically, users encounter this state when certain actions are necessary to init As an option, consider adding a tertiary button that opens a dropdown with supplementary information. -### Margins and sizes +#### Margins and sizes ![](static/empty-page-1.png) diff --git a/website/docs/patterns/feedback-rating/feedback-rating-a11y.md b/website/docs/patterns/feedback-rating/feedback-rating-a11y.md index 114dd6dc9a..f8ca61c0c6 100644 --- a/website/docs/patterns/feedback-rating/feedback-rating-a11y.md +++ b/website/docs/patterns/feedback-rating/feedback-rating-a11y.md @@ -11,21 +11,21 @@ The following list describes roles and attributes that component already has. Table: Roles and attributes -| Element | Attribute | Usage | -| ------------------------ | ------------------------------------ | ------------------------------------------------------------------- | -| `Notice` | `aria-label="Leave feedback"` | Defines an accessible name for the notice. | -| | `role="region"` | Defines an ARIA landmark, allowing quick navigation to the element. Inherited from [Notice](/components/notice/notice-a11y). | -| `SliderRating` | `aria-labelledby="IDREF"` | Defines an accessible name for the slider by referring to the `notificationText` content. | -| | `aria-valuetext="Not set"` | **When `value = 0`.** Converts the current slider value to human readable format. | -| | `aria-valuetext="{value} out of 5. Press Enter to select the rating."` | **When `value > 0`.** Converts the current slider value to human readable format and adds an instruction for the user. | -| | | Other attributes in [Slider A11y](/components/slider/slider-a11y). | -| `Modal` | `aria-labelledby="IDREF"` | Defines an accessible name for the modal by referring to its title. | -| | | Other attributes in [Modal A11y](/components/notice/modal-a11y). | -| `Modal` > `SliderRating` | `role="img"` | Presents the noninteractive slider as an image. | -| | `aria-label="Your rating: {value} out of 5"` | Defines an accessible name for the noninteractive slider. | -| `Modal` > `div` | `role="group"` | Groups the checkboxes together. | -| | `aria-labelledby="IDREF"` | Defines an accessible name for the checkbox group by referring to the dialog title. | -| `Modal` > `input#email` | `aria-describedby="IDREF"` | Provides an accessible description for the email input.
In valid state, refers to the privacy text.
In invalid state, refers to the error message. | +| Element | Attribute | Usage | +| ------------------------ | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `Notice` | `aria-label="Leave feedback"` | Defines an accessible name for the notice. | +| | `role="region"` | Defines an ARIA landmark, allowing quick navigation to the element. Inherited from [Notice](/components/notice/notice-a11y). | +| `SliderRating` | `aria-labelledby="IDREF"` | Defines an accessible name for the slider by referring to the `notificationText` content. | +| | `aria-valuetext="Not set"` | **When `value = 0`.** Converts the current slider value to human readable format. | +| | `aria-valuetext="{value} out of 5. Press Enter to select the rating."` | **When `value > 0`.** Converts the current slider value to human readable format and adds an instruction for the user. | +| | | Other attributes in [Slider A11y](/components/slider/slider-a11y). | +| `Modal` | `aria-labelledby="IDREF"` | Defines an accessible name for the modal by referring to its title. | +| | | Other attributes in [Modal A11y](/components/modal/modal-a11y). | +| `Modal` > `SliderRating` | `role="img"` | Presents the noninteractive slider as an image. | +| | `aria-label="Your rating: {value} out of 5"` | Defines an accessible name for the noninteractive slider. | +| `Modal` > `div` | `role="group"` | Groups the checkboxes together. | +| | `aria-labelledby="IDREF"` | Defines an accessible name for the checkbox group by referring to the dialog title. | +| `Modal` > `input#email` | `aria-describedby="IDREF"` | Provides an accessible description for the email input.
In valid state, refers to the privacy text.
In invalid state, refers to the error message. | FeedbackRating form pattern consists of several components that have their own accessibility requirements. You can find more about each of them in their guides: diff --git a/website/docs/patterns/feedback-rating/feedback-rating.md b/website/docs/patterns/feedback-rating/feedback-rating.md index 46663f5893..4aae34b945 100644 --- a/website/docs/patterns/feedback-rating/feedback-rating.md +++ b/website/docs/patterns/feedback-rating/feedback-rating.md @@ -40,7 +40,7 @@ Notice includes the following mandatory elements: - Also, avoid showing the next Notice immediately after the user has closed the previous one. - Avoid displaying a Notice and a FeaturePopover simultaneously on the page to prevent cognitive overload. -## Modal window with feedback form +## Modal feedback form ![](static/feedback-rating-modal.png) 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 a726d2c2af..970935631b 100644 --- a/website/docs/patterns/feedback-yes-no/feedback-yes-no.md +++ b/website/docs/patterns/feedback-yes-no/feedback-yes-no.md @@ -10,7 +10,7 @@ tabs: Design('feedback-yes-no'), A11y('feedback-yes-no-a11y'), Example('feedback This pattern consists of [Notice](/components/notice/notice) and [Feedback form](/components/feedback/feedback). Its purpose is to introduce a new feature to the user and pose a straightforward question about the product's performance. _For instance, "Discover our new Dashboard! Is it functioning effectively for you?"_ -## Styles +## Appearance Show [Feedback illustration](/style/illustration/illustration) on the left to the text. @@ -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. diff --git a/website/docs/patterns/form/form-code.md b/website/docs/patterns/form/form-code.md index cee6ab71e1..f828a02464 100644 --- a/website/docs/patterns/form/form-code.md +++ b/website/docs/patterns/form/form-code.md @@ -25,7 +25,7 @@ These examples use [`react-hook-form@6`](https://github.com/react-hook-form/reac ::: -## DatePicker and Timepicker +## DatePicker and TimePicker ::: sandbox diff --git a/website/docs/patterns/form/form.md b/website/docs/patterns/form/form.md index 8e95505853..748f5d1560 100644 --- a/website/docs/patterns/form/form.md +++ b/website/docs/patterns/form/form.md @@ -52,7 +52,7 @@ Placeholders can be omitted when the input purpose is self-evident. For formatting entered values, use [InputMask](/components/input-mask/input-mask). -## Margins between inputs +## Input margins The key unit in the design system is 4. All spacings between components and widgets should be multiples of this unit. Refer to the [Spacing system](/layout/box-system/box-system#spacing_system) for further information. diff --git a/website/docs/patterns/loading-states/loading-states.md b/website/docs/patterns/loading-states/loading-states.md index 8897d49bad..673b54995f 100644 --- a/website/docs/patterns/loading-states/loading-states.md +++ b/website/docs/patterns/loading-states/loading-states.md @@ -16,7 +16,7 @@ These components are employed to manage user expectations: Ensure that the container housing the loading message has margins. This prevents the container from becoming tightly attached to other elements on the page during cases like viewport size adjustments. The margin values are usually multiples of 4 (for example, for the spinner, we recommend using `margin: 40px`). ::: -## Response from the system +## Response from system ### Lazy loading diff --git a/website/docs/patterns/modal-content/modal-content.md b/website/docs/patterns/modal-content/modal-content.md index c1a1208b55..cc7e028237 100644 --- a/website/docs/patterns/modal-content/modal-content.md +++ b/website/docs/patterns/modal-content/modal-content.md @@ -41,7 +41,7 @@ Notices should be positioned next to the element that triggers the alert. For in ![](static/m-notice.png) -## Dual-zone modal window +## Dual-zone modal For dual-zone modal window use: diff --git a/website/docs/patterns/success-state/success-state.md b/website/docs/patterns/success-state/success-state.md index 09af1cd592..c4c86f1ddc 100644 --- a/website/docs/patterns/success-state/success-state.md +++ b/website/docs/patterns/success-state/success-state.md @@ -8,7 +8,7 @@ tabs: Design('success-state'), A11y('success-state-a11y') A success state is a message from the system confirming that an action has been completed. When a user interacts with a product, they want to achieve a specific goal, and success states help them understand that they have achieved it. -## Styles +## Appearance When designing a success message, keep the following principles in mind: diff --git a/website/docs/patterns/summary/summary-code.md b/website/docs/patterns/summary/summary-code.md index f16108c327..af7a6cf879 100644 --- a/website/docs/patterns/summary/summary-code.md +++ b/website/docs/patterns/summary/summary-code.md @@ -3,7 +3,7 @@ title: Summary tabs: Design('summary'), Example('summary-code') --- -## Basic example +## Basic usage Display [Skeleton](/components/skeleton/skeleton) during initial data loading. diff --git a/website/docs/patterns/summary/summary.md b/website/docs/patterns/summary/summary.md index f22d6ceed8..a5b08a514b 100644 --- a/website/docs/patterns/summary/summary.md +++ b/website/docs/patterns/summary/summary.md @@ -28,7 +28,7 @@ The pattern includes the following components: ![](static/summary-metric.png) -## Styles, margins and paddings +## Appearance ### Margins and paddings @@ -66,7 +66,7 @@ When metrics need to be grouped, avoid using dividers to separate metrics belong ![](static/dividers.png) -## Horizontal & vertical layout +## Horizontal and vertical layout Main report/widget metrics can be arranged either horizontally or vertically, depending on the layout requirement. The vertical layout is more space-efficient and compact. diff --git a/website/docs/product-emails/divider-email/divider-email.md b/website/docs/product-emails/divider-email/divider-email.md index c766346158..a1bcfd9434 100644 --- a/website/docs/product-emails/divider-email/divider-email.md +++ b/website/docs/product-emails/divider-email/divider-email.md @@ -8,6 +8,6 @@ deprecated: true :rotating_light: Current `@semcore/email` package is deprecated and not recommend for use. New major version is planned and will be released one day. ::: -## Basic example +## Basic usage ::: legacy_emails_view compiled-examples/divider-index.html src/divider/examples/index.html ::: diff --git a/website/docs/product-emails/table-email/table-email.md b/website/docs/product-emails/table-email/table-email.md index 4c6beeba6d..13d7c4bbfd 100644 --- a/website/docs/product-emails/table-email/table-email.md +++ b/website/docs/product-emails/table-email/table-email.md @@ -8,6 +8,6 @@ deprecated: true :rotating_light: Current `@semcore/email` package is deprecated and not recommend for use. New major version is planned and will be released one day. ::: -## Basic example +## Basic usage ::: legacy_emails_view compiled-examples/table-index.html src/table/examples/index.html ::: diff --git a/website/docs/style/design-tokens/design-tokens-code.md b/website/docs/style/design-tokens/design-tokens-code.md index 69c8524c46..1cb90d7888 100644 --- a/website/docs/style/design-tokens/design-tokens-code.md +++ b/website/docs/style/design-tokens/design-tokens-code.md @@ -3,7 +3,7 @@ title: Design tokens tabs: Tokens('design-tokens'), Usage in design('design-tokens-usage'), Usage in development('design-tokens-usage-development'), Example('design-tokens-code'), Changelog('design-tokens-changelog') --- -## Tokens with custom component +## Custom components Design tokens are recommended when creating a custom component to ensure a consistent look and reducing the time and effort spent on manual updates. @@ -15,7 +15,7 @@ Design tokens are recommended when creating a custom component to ensure a consi ::: -## Transforming JSON files to ready to use files in your code +## Transforming JSON files Design token JSON-files [produced by Figma plugin](/style/design-tokens/design-tokens-usage#how_to_make_a_new_theme) can't be used as is in Frontend application. Use the widgets below to transform output of Figma plugin to [ready to import CSS file](/style/design-tokens/design-tokens-usage-development#global_theme) or [ready to use JSON files](/style/design-tokens/design-tokens-usage-development#global_theme). diff --git a/website/docs/style/typography/typography-code.md b/website/docs/style/typography/typography-code.md index 389175dfa5..34298a87a5 100644 --- a/website/docs/style/typography/typography-code.md +++ b/website/docs/style/typography/typography-code.md @@ -15,7 +15,7 @@ Our typography primitives have no margins as they may differ in the end products ::: -## List with custom bullets +## Custom list bullets Using the example below, you can easily create lists with custom bullets. @@ -27,7 +27,7 @@ Using the example below, you can easily create lists with custom bullets. ::: -## List with custom content render +## Custom list content render ::: sandbox diff --git a/website/docs/style/typography/typography.md b/website/docs/style/typography/typography.md index a8a60c2eb5..6ca3deced0 100644 --- a/website/docs/style/typography/typography.md +++ b/website/docs/style/typography/typography.md @@ -65,13 +65,13 @@ Table: Heading from 20px to 16px styles | ![](static/h5.png) | `font-size: 20px`, `line-height: 1.2`, `font-weight: semibold` | `--fs-400`, `--lh-400` | | ![](static/h6.png) | `font-size: 16px`, `line-height: 1.5`, `font-weight: bold` | `--fs-300`, `--lh-300` | -## Heading with counter +### Heading with counter In certain cases, headings can include additional information, such as a counter of results found. These are often used in table headings. In such cases, the additional information is presented using the secondary text (`--text-secondary` token) and `regular` font-weight (`--regular` token). ![](static/secondary-info.png) -## Headings for mobile devices +### Headings for mobile devices To improve readability on different screens, adjust the size of headings based on the [breakpoints](/layout/grid-system/grid-system). @@ -114,7 +114,7 @@ There are three text sizes commonly used in our products: ::: -## Paragraph margins +### Paragraph margins Paragraphs have a `margin-bottom`, and each paragraph size has its own specific `margin`. For instance, a paragraph with a 16px font size has a `margin-bottom: 14px`, a paragraph with a 14px font size has a `margin-bottom: 12px`, and a paragraph with a 12px font size has a `margin-bottom: 8px`. @@ -122,6 +122,24 @@ These margins can also be applied when a paragraph is followed by a paragraph wi ![](static/paragraph_margins.png) +### Headings and paragraph sizes + +**Use a 16px paragraph with the following headings:** + +![](static/h1-p.png) + +![](static/h2-p.png) + +![](static/h3-p.png) + +**Use a 14px paragraph with the following headings:** + +![](static/h4-p.png) + +![](static/h5-p.png) + +![](static/h6-p.png) + ## Metric For highlighting metrics in your interface, use the following styles: @@ -166,7 +184,7 @@ Table: Font styles for lists | 14px | `--fs-200`, `--lh-200` | `margin-bottom: 8px`, `padding-right: 8px` | ![](static/ol-14.png) | ![](static/ul-14.png) | ![](static/checklist-14.png) | | 12px | `--fs-100`, `--lh-100` | `margin-bottom: 8px`, `padding-right: 8px` | ![](static/ol-12.png) | ![](static/ul-12.png) | ![](static/checklist-12.png) | -## Nested list +### Nested list Each subsequent level of the nested list is indented to the left. The `margin` between list levels for all font sizes are 8px. @@ -189,22 +207,3 @@ We have specific styles for highlighting quotes in paragraphs. ::: warning The [ButtonLink](../../components/button/button.md#button-with-link-styles) component has been implemented to replace the `Hint` component. Using `Hint` as a button or pseudo-link is no longer recommended. ::: - -## Which heading with which paragraph size shall be used - -**Use a 16px paragraph with the following headings:** - -![](static/h1-p.png) - -![](static/h2-p.png) - -![](static/h3-p.png) - -**Use a 14px paragraph with the following headings:** - -![](static/h4-p.png) - -![](static/h5-p.png) - -![](static/h6-p.png) - diff --git a/website/docs/table-group/data-table/data-table.md b/website/docs/table-group/data-table/data-table.md index e51cb8df23..7676824a0c 100644 --- a/website/docs/table-group/data-table/data-table.md +++ b/website/docs/table-group/data-table/data-table.md @@ -90,7 +90,7 @@ If a cell is colored, it remains colored when you hover over it. Users shouldn't ![](static/td-style-hover.png) -## Content alignment inside cell +## Cell content alignment Text inside cells in rows and headers is aligned according to these rules. diff --git a/website/docs/utils/neighbor-location/neighbor-location.md b/website/docs/utils/neighbor-location/neighbor-location.md index 0242769e6f..9ecd2e1420 100644 --- a/website/docs/utils/neighbor-location/neighbor-location.md +++ b/website/docs/utils/neighbor-location/neighbor-location.md @@ -87,7 +87,7 @@ You can group input, select, and button. ::: -## Adding a wrapper +## Adding wrapper By default, `` doesn't create an HTML wrapper, but you can pass the component tag you want. @@ -104,7 +104,7 @@ For the correct type mapping in the TC, you must also pass the interface. ::: -## Using a custom component +## Using custom component You can apply `` to your components. You will need to use the component `` and