Skip to content

Commit

Permalink
docs: various corrections to components docs (#1030)
Browse files Browse the repository at this point in the history 
Co-authored-by: Maksim Sitnikov <[email protected]>
Co-authored-by: Evgeny Alaev <[email protected]>
  • Loading branch information
@vvtimofeev @korvin89
3 people authored Oct 19, 2023
1 parent 0534cf8 commit 0783344
Show file tree
Hide file tree
Showing 30 changed files with 579 additions and 582 deletions.
16 changes: 8 additions & 8 deletions src/components/ArrowToggle/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@

<!--/GITHUB_BLOCK-->

`ArrowToggle` is a component that displaying chevron icon. It can rotate in 4 directions. It could be used for displaying dropdown lists or cut components, etc.
`ArrowToggle` is a component for displaying the chevron icon. It can rotate in four directions, and can be used to display dropdown lists, cut components, etc.

## Appearance

There is 4 directions of component: `top`, `right`, `bottom`, `left`.
The component has four possible directions: `top`, `right`, `bottom` and `left`.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -76,7 +76,7 @@ LANDING_BLOCK-->

## Interactive

There is an example of usage ArrowToggle component with toggling icon.
Here is an example of usage ArrowToggle component with a toggling icon.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -115,8 +115,8 @@ return (

## Properties

| Name | Description | Type | Default |
| :-------- | :-------------------------- | :------: | :--------: |
| className | HTML `class` attribute | `string` | |
| direction | Sets arrowToggle directions | `string` | `"bottom"` |
| size | Size arrowToggle in px | `number` | `16` |
| Name | Description | Type | Default |
| :-------- | :--------------------------------------- | :------: | :--------: |
| className | HTML `class` attribute | `string` | |
| direction | Used to set the direction of arrowToggle | `string` | `"bottom"` |
| size | Size of arrowToggle in px | `number` | `16` |
24 changes: 12 additions & 12 deletions src/components/Breadcrumbs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import {Breadcrumbs} from '@gravity-ui/uikit';
```

`Breadcrumbs` is a navigation element that shows the current location of a page within a website’s hierarchy. It provides links to users to go back to higher levels in the hierarchy, making it easier to navigate a site with multiple layers. Breadcrumbs are especially useful for large websites and applications with a hierarchical organization of pages.
`Breadcrumbs` is a navigation element that shows the current location of a page within a website’s hierarchy. It provides links that allow users to return to higher levels in the hierarchy, making it easier to navigate a site with multiple layers. Breadcrumbs are especially useful for large websites and applications with a hierarchical organization of pages.

## Appearance

Expand Down Expand Up @@ -333,16 +333,16 @@ return (

## Properties

| Name | Description | Type | Default |
| :----------------------- | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ | :------ |
| items | Breadcrumb items array | `BreadcrumbsItem[]` | |
| className | CSS class name of root element | `string` | |
| renderRootContent | Custom render function of first item | `((item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode) \| undefined` | |
| renderItemContent | Custom render function of N+1 item | `((item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode) \| undefined` | |
| renderItemDivider | Custom render function of items separator | `(() => React.ReactNode) \| undefined` | |
| firstDisplayedItemsCount | Number of items to display before items collapse control | `FirstDisplayedItemsCount.Zero \| FirstDisplayedItemsCount.One` | |
| lastDisplayedItemsCount | Number of items to display after items collapse control | `LastDisplayedItemsCount.One \| LastDisplayedItemsCount.Two` | |
| popupStyle | Style of collapsed items popup | `"staircase" \| undefined` | |
| Name | Description | Type | Default |
| :----------------------- | :------------------------------------------------------ | :------------------------------------------------------------------------------------------------------ | :------ |
| items | Breadcrumb item array | `BreadcrumbsItem[]` | |
| className | CSS class name of root element | `string` | |
| renderRootContent | Custom render function of first item | `((item: BreadcrumbsItem, isCurrent: boolean) => React.ReactNode) \| undefined` | |
| renderItemContent | Custom render function of N+1 item | `((item: BreadcrumbsItem, isCurrent: boolean, isPrevCurrent: boolean) => React.ReactNode) \| undefined` | |
| renderItemDivider | Custom render function of items separator | `(() => React.ReactNode) \| undefined` | |
| firstDisplayedItemsCount | Number of items to display before item collapse control | `FirstDisplayedItemsCount.Zero \| FirstDisplayedItemsCount.One` | |
| lastDisplayedItemsCount | Number of items to display after item collapse control | `LastDisplayedItemsCount.One \| LastDisplayedItemsCount.Two` | |
| popupStyle | Style of collapsed item popup | `"staircase" \| undefined` | |

### BreadcrumbsItem

Expand All @@ -351,5 +351,5 @@ return (
| text | Breadcrumb content | `string` | |
| action | `click` event handler | `React.MouseEventHandler<HTMLElement> \| React.KeyboardEventHandler<HTMLElement>` | |
| href | HTML `href` attribute | `string \| undefined` | |
| items | Breadcrumb items array | `BreadcrumbsItem[] \| undefined` | |
| items | Breadcrumb item array | `BreadcrumbsItem[] \| undefined` | |
| title | HTML `title` attribute | `string \| undefined` | |
41 changes: 20 additions & 21 deletions src/components/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ they can be used as links to navigate to another pages.

## Appearance

There are 4 view groups of the `Button`: basic, outlined, flat and contrast.
The `Button` appearance is controlled by the `view` property.
There are four `Button` view types: basic, outlined, flat and contrast.
The `Button`'s appearance is determined by the `view` property.

### Basic

`action` - the most prominent button, used for the primary action on a screen, which requires the most attention.
We recommend only using one such button per page.
`action` - the most prominent button, used for the primary action on a screen which requires the most attention.
We recommend using only one such button per page.

`normal` - default type of the `Button`. It is designed for secondary actions or when you have to maintain
the importance of an action without drawing too much attention to it.
`normal` - default type of the `Button`, designed for secondary actions or to maintain the importance of an
action without drawing too much attention to it.

`raised` - placed above the content, as "floating" element, usually with a fixed location.
`raised` - placed above the content as a "floating" element, usually with a fixed location.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -53,11 +53,11 @@ LANDING_BLOCK-->

### Outlined

`outlined` - used for secondary actions that require less attention on a page. It can be used both with the main button and without it (only with an accented one).
`outlined` - used for secondary actions that require less attention on a page. Can be used with or without a main button (only with an accented one).

`outlined-action` - usually used as link to another page or external resource.
`outlined-action` - usually used as a link to another page or external resource.

There are also semantic variants of this view, which can be used in places where additional semantic needed: `outlined-info`, `outlined-success`, `outlined-warning`, `outlined-danger`.
There are also semantic variants of this type, which can be used when additional semantics are needed: `outlined-info`, `outlined-success`, `outlined-warning`, `outlined-danger`.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -142,8 +142,7 @@ LANDING_BLOCK-->

### Contrast

`normal-contrast`, `outline-contrast` and `flat-contrast` buttons highlight actions against complex background (for example, in a banner or against inverse background).
The type depends on the required degree of display.
`normal-contrast`, `outline-contrast` and `flat-contrast` buttons highlight actions against complex background, e.g., in a banner or against an inverse background.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -174,7 +173,7 @@ LANDING_BLOCK-->

## Icons

In order to add icon to the `Button` you should use the [`Icon`](../Icon) component, a special wrapper for SVGs.
To add an icon to the `Button`, you should use the [`Icon`](../Icon) component, a special wrapper for SVGs.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -260,7 +259,7 @@ LANDING_BLOCK-->

The `Button` can be in different states.

`disabled` - when button is unavailable for some reason.
`disabled` - when the button is unavailable for some reason.

`loading` - when some asynchronous processes are happening in the background, `selected` - when the user can switch between "Enable" and "Disable".

Expand Down Expand Up @@ -328,11 +327,11 @@ LANDING_BLOCK-->

## Width

The `width` property controls how the `Button` behave inside the container.
The `width` property controls how the `Button` behaves inside the container.

`auto` - limits the maximum width of the component, hides overflowing content with ellipsis.
`auto` - limits the maximum width of the component, hides overflowing content with an ellipsis.

`max` - fix the width by the width of the parent container, also hides overflowing content with ellipsis.
`max` - matches the width to the width of the parent container, also hides overflowing content with an ellipsis.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -376,9 +375,9 @@ LANDING_BLOCK-->

## Pin

The `pin` property allows you to control shape of the right and left edges. It is usually used for combining multiple buttons in a single unit.
Value of the `pin` property consist of left and edge style names divided by dash, for example `"round-brick"`.
Edge styles are: `round` (default), `circle`, `brick` and `clear`.
The `pin` property allows you to control the shape of the right and left edges and is usually used for combining multiple buttons in a single unit.
The value of the `pin` property consists of left and edge style names divided by a dash, e.g. `"round-brick"`.
The edge styles are: `round` (default), `circle`, `brick` and `clear`.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -448,7 +447,7 @@ LANDING_BLOCK-->
| :----------- | :-------------------------------------------------------- | :-----------------------------: | :-------------: |
| children | Button content. You can mix text with `<Icon/>` component | `ReactNode` | |
| className | HTML `class` attribute | `string` | |
| component | Override the root component | `ElementType<any>` | `"button"` |
| component | Overrides the root component | `ElementType<any>` | `"button"` |
| disabled | Toggles `disabled` state | `false` | `false` |
| extraProps | Any additional props | `Record` | |
| href | HTML `href` attribute | `string` | |
Expand Down
6 changes: 3 additions & 3 deletions src/components/Card/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ This parameter is used to specify the view or layout style of the `Card`. It all

- `clear`: no style will be applied.
- `outlined`: applies thin border to highlight card content.
- `filed`: fill in the card content.
- `filed`: fills in the card content.
- `raised`: applies a shadow to slightly lift the container.

<!--LANDING_BLOCK
Expand Down Expand Up @@ -133,10 +133,10 @@ LANDING_BLOCK-->
| Name | Description | Type | Default |
| :-------- | :------------------------------------------------------------------ | :---------: | :-----------: |
| children | Card's content | `ReactNode` | |
| type | Card's type affects on available properties | `string` | `"container"` |
| type | The Card type affects which properties are available | `string` | `"container"` |
| view | Available for `type`: `"container"` and `"selection"` | `string` | `"outlined"` |
| theme | Card's base color. Available for `type`: `"container"` | `string` | `"normal"` |
| size | Card's size affects on available properties | `string` | `"m"` |
| size | The Card size affects which properties are available | `string` | `"m"` |
| className | CSS class | `string` | |
| onClick | Card click handler. Available for `type`: `"selection"`, `"action"` | `Function` | |
| selected | Selected card. Available for type: `"selection"` | `Boolean` | |
Expand Down
Loading

0 comments on commit 0783344

Please sign in to comment.