fix: fix the problem that useToaster cannot be imported on demand and…

… update the docs directory (#3689) * fix: fix the problem that useToaster cannot be imported on demand and update the docs directory * docs: update docs for useToaster
rsuite · Mar 21, 2024 · 1e4f4e3 · 1e4f4e3
1 parent 524fc7a
commit 1e4f4e3
Show file tree

Hide file tree

Showing 46 changed files with 1,027 additions and 615 deletions.
diff --git a/docs/pages/components/button/en-US/index.md b/docs/pages/components/button/en-US/index.md
@@ -7,7 +7,6 @@ Commonly used operating buttons, button combinations, button layouts.
 <!--{include:<import-guide>}-->
 
 - `<Button>` is the most basic element in the component, you can quickly create a styled button.
-- `<IconButton>` Button with icon.
 - `<ButtonGroup>` Button group control can put a group of buttons together and control the layout.
 - `<ButtonToolbar>` Button Toolbar Controls.
 
@@ -19,38 +18,26 @@ Commonly used operating buttons, button combinations, button layouts.
 
 ### Appearance
 
-`appearance` property can set appearance of button:
-
-- `default`(default) default button.
-- `primary` Emphasi, guide button.
-- `link` Button like link.
-- `subtle` Weakened button.
-- `ghost` Ghost button, background transparent, place button on background element.
+`appearance` property sets the button style, options includes: `default`, `primary`, `link`, `subtle`, `ghost`.
 
 <!--{include:`appearance.md`}-->
 
-### Size
+### Sizes
 
-The `size` property sets the button size, options includes: 'lg', 'md', 'sm', 'xs'.
+The `size` property sets the button size, options includes: `lg`, `md`, `sm`, `xs`.
 
 <!--{include:`size.md`}-->
 
-### Colorful button
+### Colors
 
-The `color` property sets the button style, Options include: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'.
+The `color` property sets the button style, Options include: `red`, `orange`, `yellow`, `green`, `cyan`, `blue`, `violet`.
 
 <!--{include:`color.md`}-->
 
 ### Custom combination button
 
 <!--{include:`custom.md`}-->
 
-### Icon button
-
-`<IconButton>` is a component designed for icon buttons that sets the icon required for the `Icon` property definition. Only the icon button can be set to a round button.
-
-<!--{include:`icon-button.md`}-->
-
 ### Block
 
 This is generally applicable to flow layouts, or to full rows at the top and bottom of a container.
@@ -71,7 +58,7 @@ This is generally applicable to flow layouts, or to full rows at the top and bot
 
 ### Button group
 
-<!--{include:`group-basic.md`}-->
+<!--{include:`group.md`}-->
 
 ### Vertical group
 
@@ -91,17 +78,15 @@ The buttons are laid out horizontally in the button set and are equally wide.
 
 <!--{include:`justified.md`}-->
 
-## Accessing DOM
+## Accessibility
 
-The underlying `<button>` element is accessible via `ref` attribute of `Button`.
+### ARIA Properties
 
-```tsx
-function App() {
-  const buttonRef = useRef<HTMLButtonElement>(null);
+- Button has role of `button`.
 
-  return <Button ref={buttonRef}>Text</Button>;
-}
-```
+### Keyboard interaction
+
+- When Button has focus, <kbd>Space</kbd> or <kbd>Space</kbd> activates it.
 
 ## Props
 
@@ -113,36 +98,25 @@ function App() {
 | appearance  | [Appearance](#code-ts-appearance-code) `('default')` | A button can have different appearances                        |
 | as          | ElementType `('button')`                             | You can use a custom element for this component                |
 | block       | boolean                                              | Spans the full width of the Button parent                      |
-| children \* | ReactNode                                            | Primary content                                                |
+| children    | ReactNode                                            | Primary content                                                |
 | classPrefix | string `('btn')`                                     | The prefix of the component CSS class                          |
 | color       | [Color](#code-ts-color-code)                         | A button can have different colors                             |
 | disabled    | boolean                                              | A button can show it is currently unable to be interacted with |
 | endIcon     | ReactNode                                            | Display an icon after buttont text                             |
 | href        | string                                               | Providing a `href` will render an `a` element                  |
 | loading     | boolean                                              | A button can show a loading indicator                          |
-| size        | 'lg' &#124; 'md' &#124; 'sm' &#124; 'xs' `('md')`    | A button can have different sizes                              |
+| size        | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')`                | A button can have different sizes                              |
 | startIcon   | ReactNode                                            | Display an icon before buttont text                            |
 
-### `<IconButton>`
-
-`Iconbutton` extends all props of `Button`
-
-| Property    | Type `(Default)`                     | Description                           |
-| ----------- | ------------------------------------ | ------------------------------------- |
-| circle      | boolean                              | Set circle button                     |
-| classPrefix | string `('btn-icon')`                | The prefix of the component CSS class |
-| icon        | Element&lt;typeof Icon&gt;           | Set the icon of button                |
-| placement   | enum: 'left'&#124;'right' `('left')` | The placement of icon                 |
-
 ### `<ButtonGroup>`
 
-| Property    | Type `(Default)`                                  | Description                           |
-| ----------- | ------------------------------------------------- | ------------------------------------- |
-| block       | boolean                                           | Display block buttongroups            |
-| classPrefix | string `('btn-group')`                            | The prefix of the component CSS class |
-| justified   | boolean                                           | Horizontal constant width layout      |
-| size        | 'lg' &#124; 'md' &#124; 'sm' &#124; 'xs' `('md')` | Set button size                       |
-| vertical    | boolean                                           | Vertical layouts of button            |
+| Property    | Type `(Default)`                      | Description                           |
+| ----------- | ------------------------------------- | ------------------------------------- |
+| block       | boolean                               | Display block buttongroups            |
+| classPrefix | string `('btn-group')`                | The prefix of the component CSS class |
+| justified   | boolean                               | Horizontal constant width layout      |
+| size        | 'lg' \| 'md' \| 'sm' \| 'xs' `('md')` | Set button size                       |
+| vertical    | boolean                               | Vertical layouts of button            |
 
 <!--{include:(_common/types/appearance.md)}-->
 <!--{include:(_common/types/color.md)}-->
diff --git a/docs/pages/components/button/fragments/custom.md b/docs/pages/components/button/fragments/custom.md
@@ -2,31 +2,27 @@
 
 ```js
 import { Button, ButtonToolbar } from 'rsuite';
-import FacebookOfficialIcon from '@rsuite/icons/legacy/FacebookOfficial';
-import GooglePlusCircleIcon from '@rsuite/icons/legacy/GooglePlusCircle';
-import TwitterIcon from '@rsuite/icons/legacy/Twitter';
-import LinkedinIcon from '@rsuite/icons/legacy/Linkedin';
-import WechatIcon from '@rsuite/icons/legacy/Wechat';
-import WeiboIcon from '@rsuite/icons/legacy/Weibo';
+import { FaFacebook, FaGooglePlus, FaTwitter, FaLinkedin } from 'react-icons/fa';
+import { SiWechat, SiSinaweibo } from 'react-icons/si';
 
 const App = () => (
   <ButtonToolbar>
-    <Button color="blue" appearance="primary" startIcon={<FacebookOfficialIcon />}>
+    <Button color="blue" appearance="primary" startIcon={<FaFacebook />}>
       Facebook
     </Button>
-    <Button color="red" appearance="primary" startIcon={<GooglePlusCircleIcon />}>
+    <Button color="red" appearance="primary" startIcon={<FaGooglePlus />}>
       Google Plus
     </Button>
-    <Button color="cyan" appearance="primary" startIcon={<TwitterIcon />}>
+    <Button color="cyan" appearance="primary" startIcon={<FaTwitter />}>
       Twitter
     </Button>
-    <Button color="blue" appearance="primary" endIcon={<LinkedinIcon />}>
+    <Button color="blue" appearance="primary" endIcon={<FaLinkedin />}>
       LinkedIn
     </Button>
-    <Button color="green" appearance="primary" endIcon={<WechatIcon />}>
+    <Button color="green" appearance="primary" endIcon={<SiWechat />}>
       WeChat
     </Button>
-    <Button color="yellow" appearance="primary" endIcon={<WeiboIcon />}>
+    <Button color="yellow" appearance="primary" endIcon={<SiSinaweibo />}>
       WeiBo
     </Button>
   </ButtonToolbar>

diff --git a/docs/pages/components/button/fragments/disabled.md b/docs/pages/components/button/fragments/disabled.md
@@ -20,12 +20,6 @@ const App = () => (
     <Button appearance="ghost" disabled>
       Ghost
     </Button>
-    <IconButton icon={<StarIcon />} disabled>
-      Icon Button
-    </IconButton>
-    <IconButton icon={<StarIcon />} disabled appearance="primary">
-      Icon Button
-    </IconButton>
   </ButtonToolbar>
 );
 ReactDOM.render(<App />, document.getElementById('root'));

diff --git a/...omponents/button/fragments/group-basic.md → ...ages/components/button/fragments/group.md b/...omponents/button/fragments/group-basic.md → ...ages/components/button/fragments/group.md
diff --git a/docs/pages/components/button/fragments/icon-button.md b/docs/pages/components/button/fragments/icon-button.md
diff --git a/docs/pages/components/button/fragments/size.md b/docs/pages/components/button/fragments/size.md
@@ -1,8 +1,7 @@
 <!--start-code-->
 
 ```js
-import { Button, ButtonToolbar, ButtonGroup, IconButton } from 'rsuite';
-import StarIcon from '@rsuite/icons/legacy/Star';
+import { Button, ButtonToolbar, ButtonGroup } from 'rsuite';
 
 const App = () => (
   <>
@@ -13,13 +12,6 @@ const App = () => (
       <Button size="xs">Xsmall</Button>
     </ButtonToolbar>
 
-    <ButtonToolbar>
-      <IconButton icon={<StarIcon />} circle size="lg" />
-      <IconButton icon={<StarIcon />} circle size="md" />
-      <IconButton icon={<StarIcon />} circle size="sm" />
-      <IconButton icon={<StarIcon />} circle size="xs" />
-    </ButtonToolbar>
-
     <ButtonToolbar>
       <ButtonGroup size="lg">
         <Button>Left</Button>

diff --git a/docs/pages/components/button/fragments/toolbar.md b/docs/pages/components/button/fragments/toolbar.md
@@ -1,50 +1,20 @@
 <!--start-code-->
 
 ```js
-import { Button, ButtonToolbar, ButtonGroup, IconButton } from 'rsuite';
-import FileTextIcon from '@rsuite/icons/legacy/FileText';
-import SaveIcon from '@rsuite/icons/legacy/Save';
-import BoldIcon from '@rsuite/icons/legacy/Bold';
-import ItalicIcon from '@rsuite/icons/legacy/Italic';
-import UnderlineIcon from '@rsuite/icons/legacy/Underline';
-import StrikethroughIcon from '@rsuite/icons/legacy/Strikethrough';
-import AlignLeftIcon from '@rsuite/icons/legacy/AlignLeft';
-import AlignCenterIcon from '@rsuite/icons/legacy/AlignCenter';
-import AlignRightIcon from '@rsuite/icons/legacy/AlignRight';
-import AlignJustifyIcon from '@rsuite/icons/legacy/AlignJustify';
-import LinkIcon from '@rsuite/icons/legacy/Link';
+import { Button, ButtonToolbar, ButtonGroup } from 'rsuite';
 
 const App = () => (
-  <>
-    <ButtonToolbar>
-      <Button>Prev</Button>
-      <ButtonGroup>
-        <Button>1</Button>
-        <Button>2</Button>
-        <Button>3</Button>
-        <Button>4</Button>
-        <Button>5</Button>
-      </ButtonGroup>
-      <Button>Next</Button>
-    </ButtonToolbar>
-    <ButtonToolbar>
-      <IconButton icon={<FileTextIcon />} />
-      <IconButton icon={<SaveIcon />} />
-      <ButtonGroup>
-        <IconButton icon={<BoldIcon />} />
-        <IconButton icon={<ItalicIcon />} />
-        <IconButton icon={<UnderlineIcon />} />
-        <IconButton icon={<StrikethroughIcon />} />
-      </ButtonGroup>
-      <ButtonGroup>
-        <IconButton icon={<AlignLeftIcon />} />
-        <IconButton icon={<AlignCenterIcon />} />
-        <IconButton icon={<AlignRightIcon />} />
-        <IconButton icon={<AlignJustifyIcon />} />
-      </ButtonGroup>
-      <IconButton icon={<LinkIcon />} />
-    </ButtonToolbar>
-  </>
+  <ButtonToolbar>
+    <Button>Prev</Button>
+    <ButtonGroup>
+      <Button>1</Button>
+      <Button>2</Button>
+      <Button>3</Button>
+      <Button>4</Button>
+      <Button>5</Button>
+    </ButtonGroup>
+    <Button>Next</Button>
+  </ButtonToolbar>
 );
 
 ReactDOM.render(<App />, document.getElementById('root'));