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.

Sign up for GitHub

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: various corrections to components docs #1030

Merged
merged 30 commits into from
Oct 19, 2023
Merged

docs: various corrections to components docs #1030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
dac1cc4
Brang corrections of Alert component documentation
vvtimofeev Sep 18, 2023
bf5994f
fix: lint
Sep 18, 2023
fb92b68
feat: changed ArrowToggle docs with the redactors
vvtimofeev Sep 20, 2023
39e68ad
feat: add red corrections to bradcrumbs doc
vvtimofeev Sep 20, 2023
8008d73
feat: corrected button doc
vvtimofeev Sep 20, 2023
f095ecb
feat: correct card docs
vvtimofeev Sep 20, 2023
e8cb0c4
feat: change to checkbox
vvtimofeev Sep 20, 2023
5032115
feat: dropdown corrections
vvtimofeev Sep 26, 2023
d5e7173
feat: icon corrections
vvtimofeev Sep 27, 2023
d804151
feat: label coretctions
vvtimofeev Sep 27, 2023
e2c56d7
feat: link corrections
vvtimofeev Sep 27, 2023
b661f57
feat: tooltip doc corrections
vvtimofeev Sep 27, 2023
c69921f
feat: toaster doc corrections
vvtimofeev Sep 27, 2023
ed7466c
feat: textInput corrections
vvtimofeev Sep 27, 2023
a5bcc6b
feat: list corrections
vvtimofeev Sep 27, 2023
acef227
feat: loader corrections
vvtimofeev Sep 27, 2023
98a914b
feat: menu doc corrections
vvtimofeev Sep 27, 2023
7e85cb4
feat: modal doc corrections
vvtimofeev Sep 27, 2023
6ceba7f
feat: textArea doc corrections
vvtimofeev Sep 27, 2023
61c2a21
feat: text doc corrections
vvtimofeev Sep 27, 2023
8c36f66
feat: pagination, persona, popup corrections
vvtimofeev Sep 27, 2023
7b7da4e
feat: add docs corrections
vvtimofeev Sep 27, 2023
a88b896
feat: portal, progress, radio doc corrections
vvtimofeev Sep 28, 2023
145bb47
Update README.md
vvtimofeev Sep 28, 2023
d8d42c6
Merge branch 'main' into vvtimofeev/CLOUDLOC-927
vvtimofeev Sep 28, 2023
08b0a0a
fix: lint fixes
korvin89 Sep 28, 2023
bcdf8c5
feat: corrections after amje review
vvtimofeev Oct 6, 2023
de76915
docs: fixed ArrowToggle doc afte Marginy605 review
vvtimofeev Oct 6, 2023
244c12b
Merge branch 'main' into vvtimofeev/CLOUDLOC-927
vvtimofeev Oct 19, 2023
26f7e04
docs: fix lint
vvtimofeev Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions src/components/ArrowToggle/README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading