Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: readme corrections from localization #1933

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open
19 changes: 9 additions & 10 deletions src/components/ActionTooltip/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@

<!--/GITHUB_BLOCK-->

A simple text tip that uses its children node as an anchor. For correct functioning, the anchor node
must be able to handle mouse events and focus or blur events.
This is a simple text tip that uses its child node as an anchor. To work correctly, the anchor node must be able to handle mouse events and focus or blur events.

## Usage

Expand All @@ -21,15 +20,15 @@ import {ActionTooltip} from '@gravity-ui/uikit';

| Name | Description | Type | Default |
| :--------------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: |
| children | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. | `React.ReactElement` | |
| children | Anchor element for a `Tooltip`. It must accept a `ref` that will provide a DOM element. | `React.ReactElement` | |
| closeDelay | Number of ms to delay hiding the `Tooltip` after the hover ends | `number` | `0` |
| openDelay | Number of ms to delay showing the `Tooltip` after the hover begins | `number` | `250` |
| openDelay | Number of ms to delay showing the `Tooltip` once the hover starts | `number` | `250` |
| placement | `Tooltip` position relative to its anchor | [`PopupPlacement`](../Popup/README.md#placement) | |
| qa | HTML `data-qa` attribute, used in tests | `string` | |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
| title | Tooltip title text | `string` | |
| description | Tooltip description text | `string` | |
| hotkey | Hot keys that are assigned to an interface action. | `string` | |
| id | This prop is used to help implement the accessibility logic. | `string` | |
| disablePortal | Do not use Portal for children | `boolean` | |
| contentClassName | HTML class attribute for content node | `string` | |
| disabled | Prevent popup from opening | `boolean` | `false` |
| hotkey | Hotkeys assigned to an interface action | `string` | |
| id | Used for implementing the accessibility logic | `string` | |
| disablePortal | Disables using Portal for children | `boolean` | |
| contentClassName | HTML class attribute for the content node | `string` | |
| disabled | Prevents the popup from opening | `boolean` | `false` |
34 changes: 34 additions & 0 deletions src/components/ActionTooltip/loc/README-ru.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!--GITHUB_BLOCK-->

# ActionTooltip

<!--/GITHUB_BLOCK-->

`ActionTooltip` — это простая текстовая подсказка, использующая в качестве якоря дочерний элемент. Для правильной работы элемент-якорь должен поддерживать события мыши и события получения или потери фокуса.

## Использование

```tsx
import {ActionTooltip} from '@gravity-ui/uikit';

<ActionTooltip title="Content">
<div tabIndex={0}>Anchor</div>
</ActionTooltip>;
```

## Свойства

| Имя | Описание | Тип | Значение по умолчанию |
| :--------------- | ------------------------------------------------------------------------------------------ | :----------------------------------------------: | :-------------------: |
| children | Элемент-якорь для `Tooltip`. Должен принимать `ref` для передачи DOM-элемента. | `React.ReactElement` | |
| closeDelay | Время задержки в миллисекундах перед скрытием `Tooltip` после увода курсора с элемента. | `number` | `0` |
| openDelay | Время задержки в миллисекундах перед показом `Tooltip` после наведения курсора на элемент. | `number` | `250` |
| placement | Положение `Tooltip` относительно якоря. | [`PopupPlacement`](../Popup/README.md#placement) | |
| qa | HTML-атрибут `data-qa`, используется для тестирования. | `string` | |
| title | Текст заголовка для тултипа. | `string` | |
| description | Текст описания в тултипе. | `string` | |
| hotkey | Горячие клавиши, назначенные на действие в интерфейсе. | `string` | |
| id | Используется для реализации логики доступности. | `string` | |
| disablePortal | Отключает использование `Portal` для дочерних элементов. | `boolean` | |
| contentClassName | HTML-атрибут `class` для узла с содержимым. | `string` | |
| disabled | Блокирует открытие всплывающего окна. | `boolean` | `false` |
73 changes: 34 additions & 39 deletions src/components/Alert/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@ import {Alert} from '@gravity-ui/uikit';

### Theme

`normal` - main theme (used by default).
`normal`: Main theme (used by default).

`info` - used for any kind of regular information.
`info`: Used for any kind of regular information.

`success` - used for positive information.
`success`: Used for positive information.

`warning` - used for information which needs attention.
`warning`: Used for information that needs attention.

`danger` - used for hazard information.
`danger`: Used for critical errors.

`utility` - used for utility information.
`utility`: Used for useful tips.

<!--LANDING_BLOCK
<ExampleBlock
Expand Down Expand Up @@ -56,9 +56,9 @@ LANDING_BLOCK-->

### View

`filled` - used to adjust the background color of the alert (used by default).
`filled`: Used to adjust the background color of the alert (used by default).

`outlined` - used to adjust the border color of the alert.
`outlined`: Used to adjust the border color of the alert.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -83,12 +83,9 @@ LANDING_BLOCK-->

### Layout

`vertical` - used to direct users to content if there is property `actions` with buttons. For showing buttons below text (
used
by default).
`vertical`: Used to direct users to content if there is an `actions` property with buttons. It enables showing buttons below the text (used by default).

`horizontal` - used to direct users to content if there is property `actions` with buttons. For showing buttons to the right
of text.
`horizontal`: Used to direct users to content if there is an `actions` property with buttons. It enables showing buttons to the right of the text.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -112,9 +109,9 @@ LANDING_BLOCK-->

### Corners

`rounded` - used for round corners of alert window (used by default).
`rounded`: Enables rounded corners of the alert window (used by default).

`square` - used for squared corners of alert window.
`square`: Enables squared corners of the alert window.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -139,7 +136,7 @@ LANDING_BLOCK-->

## Alert title

`title` - the title of the alert. It has a lower priority than Alert.Title.
`title`: Alert title. It has a lower priority than `Alert.Title`.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -161,11 +158,11 @@ LANDING_BLOCK-->

## Alert message

`message` - message of the alert. It should fully explain the content of the alert.
`message`: Alert message. It should be meaningful enough to fully explain what the alert is about.

## Alert onClose
## `onClose`

`onClose` - callback function called when a user clicks the alert's close button. When this property is defined, a close button is visible.
`onClose`: Callback function called when a user clicks the alert's close button. When this property is defined, the close button will visible.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -191,13 +188,11 @@ LANDING_BLOCK-->

### Align

Determines how content inside the Alert component is vertically aligned.
Determines how the content inside the `Alert` component is vertically aligned.

`baseline` - align used by default.
`baseline`: Default alignment.

`center` - content is vertically centered within the Alert component. Useful if actions take up
more space than text,
or if the icon must be in the middle of the card.
`center`: Content is vertically centered within the `Alert` component. It may be useful if actions take up more space than text, or if the icon must be in the middle of the content.

<!--LANDING_BLOCK
<ExampleBlock
Expand All @@ -221,18 +216,18 @@ LANDING_BLOCK-->

## Properties

| Name | Description | Type | Default |
| :-------- | :-------------------------------------------------------------------------- | :----------------------------------------------------------------: | :----------: |
| theme | Alert appearance | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` | `"normal"` |
| view | Enable/disable background color of the alert | `"filled"` `"outlined"` | `"filled"` |
| layout | Used to direct users to content if there is property `actions` with buttons | `"vertical"` `"horizontal"` | `"vertical"` |
| corners | Used for round/square corners of the alert window | `"rounded"` `"square"` | `"rounded"` |
| title | Title of the alert | `string` | |
| message | Message of the alert | `string` | |
| onClose | A callback function called when the user clicks the alert's close button | `Function` | |
| actions | Array of buttons or full custom components | `React.ReactNode` `"AlertAction"` | |
| align | Determines how content inside the Alert component is vertically aligned | `"center"` `"baseline"` | `"baseline"` |
| style | HTML style attribute | `React.CSSProperties` | |
| className | Name of alert class | `string` | |
| icon | Override default icon | `React.ReactNode` | |
| qa | HTML `data-qa` attribute, used in tests. | `string` | |
| Name | Description | Type | Default |
| :-------- | :------------------------------------------------------------------------------ | :----------------------------------------------------------------: | :----------: |
| theme | Alert appearance | `"normal"` `"info"` `"success"` `"warning"` `"danger"` `"utility"` | `"normal"` |
| view | Enables or disables the background color of the alert | `"filled"` `"outlined"` | `"filled"` |
| layout | Used to direct users to content if there is an `actions` property with buttons. | `"vertical"` `"horizontal"` | `"vertical"` |
| corners | Used for rounded or square corners of the alert window | `"rounded"` `"square"` | `"rounded"` |
| title | Alert title | `string` | |
| message | Alert message | `string` | |
| onClose | Callback function called when a user clicks the alert's close button | `Function` | |
| actions | Array of buttons or full custom components | `React.ReactNode` `"AlertAction"` | |
| align | Determines how the content inside the `Alert` component is vertically aligned | `"center"` `"baseline"` | `"baseline"` |
| style | HTML style attribute | `React.CSSProperties` | |
| className | Name of the alert class | `string` | |
| icon | Overrides default icon | `React.ReactNode` | |
| qa | `data-qa` HTML attribute, used for testing | `string` | |
Loading
Loading