docs: improved grammar on certain documentation pages (#49374)

* button documentation grammar fixes * english float button documentation changes * english documentation grammar changes for icons * english typography documentation grammar changes * english divider documenation changes * english layout documentation fixes * english cascader documentation improvements * english color-picker documentation changes * english date-picker documentation changes * english form documentation changes * English documentation changes for select * English documentation changes for slider * English documentation changes for time-picker * English documenation changes for transfer
2024-11-27 12:39:49 +08:00 · 2024-06-11 23:27:15 -07:00 · 2024-06-11 23:27:15 -07:00 · b29c314b4c
commit b29c314b4c
parent 9acbdf4c13
59 changed files with 67 additions and 67 deletions
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@ -4,4 +4,4 @@

 ## en-US

-There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd.
+There are five type of buttons in antd, namely they are: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@ -4,4 +4,4 @@

 ## en-US

-`block` property will make the button fit to its parent width.
+The `block` property will make a button fit to its parent width.
--- a/components/button/demo/danger.md
+++ b/components/button/demo/danger.md
@ -4,4 +4,4 @@

 ## en-US

-`danger` is a property of button after antd 4.0.
+The `danger` is a property of buttons after antd 4.0.
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@ -4,4 +4,4 @@

 ## en-US

-`ghost` property will make button's background transparent, it is commonly used in colored background.
+The `ghost` property will make a button's background transparent, this is commonly used in colored background.
--- a/components/button/demo/icon-position.md
+++ b/components/button/demo/icon-position.md
@ -4,4 +4,4 @@

 ## en-US

-Set the position of the button icon by setting `iconPosition` to `start` or `end` respectively.
+You can set the position of a button's icon by setting the `iconPostion` to `start` or `end` respectively.
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@ -4,4 +4,4 @@

 ## en-US

-You can add an icon through the `icon` property and adjust the position of the icon using `iconPosition`.
+You can add an icon using the `icon` property, additionally you can adjust the position of the icon using `iconPosition`.
--- a/components/button/demo/linear-gradient.md
+++ b/components/button/demo/linear-gradient.md
@ -4,4 +4,4 @@

 ## en-US

-Buttons with gradient background.
+Buttons with a gradient background.
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@ -4,4 +4,4 @@

 ## en-US

-If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
+If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -6,6 +6,6 @@

 ## en-US

-Ant Design supports a default button size as well as a large and small size.
+Ant Design supports three sizes of buttons: small, default and large.

 If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -13,12 +13,12 @@ group:

 ## When To Use

-A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
+A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.

 In Ant Design we provide 5 types of button.

- Primary button: indicate the main action, one primary button at most in one section.
- Default button: indicate a series of actions without priority.
+- Primary button: used for the main action, there can be at most one primary button in a section.
+- Default button: used for a series of actions without priority.
 - Dashed button: commonly used for adding more actions.
 - Text button: used for the most secondary action.
 - Link button: used for external links.
@ -27,8 +27,8 @@ And 4 other properties additionally.

 - `danger`: used for actions of risk, like deletion or authorization.
 - `ghost`: used in situations with complex background, home pages usually.
- `disabled`: when actions are not available.
- `loading`: add loading spinner in button, avoiding multiple submits too.
+- `disabled`: used when actions are not available.
+- `loading`: adds a loading spinner in button, avoids multiple submits too.

 ## Examples

--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@ -4,4 +4,4 @@

 ## en-US

-Allow only select parent options.
+Allows the selection of only parent options.
--- a/components/cascader/demo/showCheckedStrategy.md
+++ b/components/cascader/demo/showCheckedStrategy.md
@ -4,4 +4,4 @@

 ## en-US

-The way show selected item in box using `showCheckedStrategy`.
+Shows a selected item in a box using `showCheckedStrategy`.
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -12,7 +12,7 @@ demo:
 ## When To Use

 - When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
+- When selecting from a large data set, with multi-stage classifications separated for easy selection.
 - Chooses cascade items in one float layer for better user experience.

 ## Examples
--- a/components/color-picker/demo/size.md
+++ b/components/color-picker/demo/size.md
@ -6,6 +6,6 @@

 ## en-US

-Ant Design supports a default trigger size as well as a large and small size.
+Ant Design supports three trigger sizes: small, default and large.

 If a large or small trigger is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a trigger with the default size.
--- a/components/color-picker/index.en-US.md
+++ b/components/color-picker/index.en-US.md
@ -13,7 +13,7 @@ group:

 ## When To Use

-Used when the user needs to customize the color selection.
+Used when the user needs to make a customized color selection.

 ## Examples

--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -4,4 +4,4 @@

 ## en-US

-Basic use case. Users can select or input a date in panel.
+Basic use case. Users can select or input a date in a panel.
--- a/components/date-picker/demo/date-range.md
+++ b/components/date-picker/demo/date-range.md
@ -4,4 +4,4 @@

 ## en-US

-Limit the range of dates by `minDate` and `maxDate`.
+Limit the range of available dates by using `minDate` and `maxDate`.
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@ -4,4 +4,4 @@

 ## en-US

-Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
+Disable specific dates and times by using `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
--- a/components/date-picker/demo/multiple.md
+++ b/components/date-picker/demo/multiple.md
@ -4,4 +4,4 @@

 ## en-US

-Multiple selection. Not support `showTime` and `picker="time"`.
+Multiple selections. Does not support `showTime` and `picker="time"`.
--- a/components/date-picker/demo/needConfirm.md
+++ b/components/date-picker/demo/needConfirm.md
@ -4,4 +4,4 @@ DatePicker 默认会根据 `picker` 的交互行为，自动选择是否需要

 ## en-US

-DatePicker will automatically determine whether to show a confirm button according to the `picker` property. You can also set the `needConfirm` property to determine whether to show a confirm button. When `needConfirm` is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or select a date.
+DatePicker will automatically determine whether to show a confirm button according to the `picker` property. You can also set the `needConfirm` property to determine whether to show a confirm button. When `needConfirm` is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or selects a date.
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -4,4 +4,4 @@

 ## en-US

-The input box comes in three sizes. `middle` will be used if `size` is omitted.
+The input box comes in three sizes: small, middle and large. The `middle` size will be used if `size` is omitted.
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -4,4 +4,4 @@

 ## en-US

-This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.
+This property provides an additional time selection. When `showTime` is an Object, its properties will be passed on to the built-in `TimePicker`.
--- a/components/date-picker/demo/variant.md
+++ b/components/date-picker/demo/variant.md
@ -4,4 +4,4 @@

 ## en-US

-There are `outlined` `filled` and `borderless`, totally three variants to choose from.
+There are three variants: `outlined` `filled` and `borderless`.
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@ -4,4 +4,4 @@

 ## en-US

-Divider is `horizontal` by default. You can add text within Divider.
+A Divider is `horizontal` by default. You can add text within Divider.
--- a/components/divider/demo/plain.md
+++ b/components/divider/demo/plain.md
@ -4,4 +4,4 @@

 ## en-US

-You can use non-heading style of divider text by setting `plain`.
+You can use non-heading style of divider text by setting the `plain` property.
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@ -4,4 +4,4 @@

 ## en-US

-Use `type="vertical"` make it vertical.
+Use `type="vertical"` to make the divider vertical.
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -13,7 +13,7 @@ group:

 ## When To Use

- Divide sections of article.
+- Divide sections of an article.
 - Divide inline text and links such as the operation column of table.

 ## Examples
--- a/components/float-button/demo/description.md
+++ b/components/float-button/demo/description.md
@ -6,6 +6,6 @@

 ## en-US

-Setting `description` prop to show FloatButton with description.
+Setting the `description` property allows you to show a FloatButton with a description.

 > supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.
--- a/components/float-button/demo/group.md
+++ b/components/float-button/demo/group.md
@ -4,4 +4,4 @@

 ## en-US

-When multiple buttons are used together, `<FloatButton.Group />` is recommended. By setting `shape` of FloatButton.Group, you can change the shape of group. `shape` of FloatButton.Group will override `shape` of FloatButton inside.
+When multiple buttons are used together, `<FloatButton.Group />` is recommended. By setting the `shape` property of FloatButton.Group, you can change the shape of group. The `shape` of the FloatButton.Group will override the `shape` of FloatButtons inside.
--- a/components/float-button/demo/shape.md
+++ b/components/float-button/demo/shape.md
@ -4,4 +4,4 @@

 ## en-US

-Change the shape of the FloatButton with `shape`.
+Change the shape of the FloatButton with the `shape` property.
--- a/components/float-button/demo/tooltip.md
+++ b/components/float-button/demo/tooltip.md
@ -4,4 +4,4 @@

 ## en-US

-Setting `tooltip` prop to show FloatButton with tooltip.
+Setting the `tooltip` property shows the FloatButton with a tooltip.
--- a/components/float-button/demo/type.md
+++ b/components/float-button/demo/type.md
@ -4,4 +4,4 @@

 ## en-US

-Change the type of the FloatButton with `type`.
+Change the type of the FloatButton with the `type` property.
--- a/components/form/demo/disabled.md
+++ b/components/form/demo/disabled.md
@ -4,4 +4,4 @@

 ## en-US

-Set component disabled, only works for antd components.
+Set component to disabled, only works for antd components.
--- a/components/form/demo/validate-trigger.md
+++ b/components/form/demo/validate-trigger.md
@ -4,4 +4,4 @@

 ## en-US

-For the async validation scenario, too frequent verification will cause backend pressure. You can change the verification timing through `validateTrigger`, or change the verification frequency through `validateDebounce`, or set the verification short circuit through `validateFirst`.
+For the async validation scenario, high frequency of verification will cause backend pressure. You can change the verification timing through `validateTrigger`, or change the verification frequency through `validateDebounce`, or set the verification short circuit through `validateFirst`.
--- a/components/form/demo/variant.md
+++ b/components/form/demo/variant.md
@ -4,4 +4,4 @@

 ## en-US

-Change the variant of all components in the form, optional `outlined` `filled` and `borderless`
+Change the variant of all components in the form, options include: `outlined`, `filled` and `borderless`
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@ -4,4 +4,4 @@

 ## en-US

-Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show spinning animation.
+Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show the spinning animation.
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@ -4,4 +4,4 @@

 ## en-US

-Create a reusable React component by using `<Icon component={...} />`. The property `component` takes a React component that renders to `svg` element.
+Create a reusable React component by using `<Icon component={...} />`. The property `component` takes a React component that renders to a `svg` element.
--- a/components/icon/demo/scriptUrl.md
+++ b/components/icon/demo/scriptUrl.md
@ -4,4 +4,4 @@

 ## en-US

-You can use `scriptUrl` as an array after `@ant-design/icons@4.1.0`, manage icons in one `<Icon />` from multiple [iconfont.cn](http://iconfont.cn/) resources. If icon with a duplicate name in resources, it will overridden in array order.
+You can use `scriptUrl` as an array after `@ant-design/icons@4.1.0`, to manage icons in one `<Icon />` from multiple [iconfont.cn](http://iconfont.cn/) resources. If an icon with a duplicate name is in resources, it will be overridden in array order.
--- a/components/icon/demo/two-tone.md
+++ b/components/icon/demo/two-tone.md
@ -4,4 +4,4 @@

 ## en-US

-You can set `twoToneColor` prop to specific primary color for two-tone icons.
+You can set the `twoToneColor` prop to a specific primary color for two-tone icons.
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -12,7 +12,7 @@ demo:

 ## How to use

-Before use icons, you need to install [@ant-design/icons](https://github.com/ant-design/ant-design-icons) package:
+Before using icons, you need to install the [@ant-design/icons](https://github.com/ant-design/ant-design-icons) package:

 <InstallDependencies npm='npm install @ant-design/icons --save' yarn='yarn add @ant-design/icons' pnpm='pnpm install @ant-design/icons --save' bun='bun add @ant-design/icons'></InstallDependencies>

--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@ -8,6 +8,6 @@

 The most basic "header-content-footer" layout.

-Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.
+Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by the viewing area.

-Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
+Top-bottom structure is conformed with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@ -13,8 +13,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA

 The first level navigation is left aligned near a logo, and the secondary menu is right aligned.

- Top Navigation: the height of the first level navigation `64px`, the second level navigation `48px`.
- Top Navigation (for landing pages): the height of the first level navigation `80px`, the second level navigation `56px`.
+- Top Navigation: the height of the first level navigation is `64px`, and the second level navigation is `48px`.
+- Top Navigation (for landing pages): the height of the first level navigation is `80px`, and the second level navigation is `56px`.
 - Calculation formula of a top navigation: `48+8n`.
 - Calculation formula of an aside navigation: `200+8n`.

@ -31,11 +31,11 @@ Style of a navigation should conform to its level.

 - **Emphasis by colorblock**

-  When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.
+  When the background color is a deep color, you can use this pattern for the parent level navigation item of the current page.

 - **The highlight match stick**

-  When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
+  When the background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.

 - **Highlighted font**

--- a/components/select/demo/big-data.md
+++ b/components/select/demo/big-data.md
@ -4,4 +4,4 @@ Select 默认针对大数据开启了[虚拟滚动](https://github.com/react-com

 ## en-US

-Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance, turn off it by set `virtual={false}`.
+Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance, turn off it by setting `virtual={false}`.
--- a/components/select/demo/variant.md
+++ b/components/select/demo/variant.md
@ -4,4 +4,4 @@

 ## en-US

-There are `outlined` `filled` and `borderless`, totally three variants to choose from.
+There are three variants to choose from, namely: `outlined` `filled` and `borderless`.
--- a/components/slider/demo/draggableTrack.md
+++ b/components/slider/demo/draggableTrack.md
@ -4,4 +4,4 @@

 ## en-US

-Make range track draggable when set `range.draggableTrack`.
+Make range track draggable by setting `range.draggableTrack`.
--- a/components/slider/demo/show-tooltip.md
+++ b/components/slider/demo/show-tooltip.md
@ -4,4 +4,4 @@

 ## en-US

-When `tooltip.open` is `true`, ToolTip will always show, or ToolTip will not show anyway, even if dragging or hovering.
+When `tooltip.open` is `true`, ToolTip will always show, if set to `false` the ToolTip will not show, even if dragging or hovering.
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@ -4,4 +4,4 @@

 ## en-US

-The input box comes in three sizes. large is used in the form, while the medium size is the default.
+The input box comes in three sizes: large, middle and small. Large is used in the form, while the medium size is the default.
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@ -4,4 +4,4 @@

 ## en-US

-Custom each Transfer Item, and in this way you can render a complex datasource.
+Customize each Transfer Item, allowing you to render a complex datasource.
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@ -4,4 +4,4 @@

 ## en-US

-large count of items with pagination.
+Store a large amount of items with pagination.
--- a/components/transfer/demo/oneWay.md
+++ b/components/transfer/demo/oneWay.md
@ -4,4 +4,4 @@

 ## en-US

-Use `oneWay` to makes Transfer to one way style.
+Use `oneWay` to make Transfer the one way style.
--- a/components/transfer/demo/table-transfer.md
+++ b/components/transfer/demo/table-transfer.md
@ -4,4 +4,4 @@

 ## en-US

-Customize render list with Table component.
+Customize the render list with a Table component.
--- a/components/transfer/demo/tree-transfer.md
+++ b/components/transfer/demo/tree-transfer.md
@ -4,7 +4,7 @@

 ## en-US

-Customize render list with Tree component.
+Customize the render list with a Tree component.

 <style>
 .tree-transfer .ant-transfer-list:first-child {
--- a/components/typography/demo/copyable.md
+++ b/components/typography/demo/copyable.md
@ -4,4 +4,4 @@

 ## en-US

-Make Typography copyable.
+Makes Typography copyable with the click of a button.
--- a/components/typography/demo/editable.md
+++ b/components/typography/demo/editable.md
@ -4,4 +4,4 @@

 ## en-US

-Make Typography editable.
+Makes Typography editable.
--- a/components/typography/demo/ellipsis.md
+++ b/components/typography/demo/ellipsis.md
@ -4,4 +4,4 @@

 ## en-US

-Multiple line ellipsis support. You can use `tooltip` to config ellipsis tooltip. Recommend `expandable` when have lots of content.
+Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommened when you have lots of content.
--- a/components/typography/demo/suffix.md
+++ b/components/typography/demo/suffix.md
@ -4,4 +4,4 @@

 ## en-US

-add suffix ellipsis support.
+Add suffix ellipsis support.
--- a/components/typography/demo/text.md
+++ b/components/typography/demo/text.md
@ -4,4 +4,4 @@

 ## en-US

-Provides multiple types of text and link.
+Provides multiple types of text and a link.
--- a/components/typography/demo/title.md
+++ b/components/typography/demo/title.md
@ -4,4 +4,4 @@

 ## en-US

-Display title in different level.
+Display title in different levels.
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@ -9,7 +9,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA

 ## When To Use

- When need to display a title or paragraph contents in Articles/Blogs/Notes.
+- When you need to display a title or paragraph contents in Articles/Blogs/Notes.
 - When you need copyable/editable/ellipsis texts.

 ## Examples