demo: update demo (#40318)

* demo: update demo * add form * clear * add Select * add * fix style * fix style * fix * revert
ant-design · Jan 19, 2023 · b9a6b7b · b9a6b7b
1 parent 73a7196
commit b9a6b7b
Show file tree

Hide file tree

Showing 109 changed files with 12,164 additions and 11,915 deletions.
diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx
@@ -2,7 +2,7 @@ import { css, Global } from '@emotion/react';
 import React from 'react';
 import useSiteToken from '../../../hooks/useSiteToken';
 
-export default () => {
+const GlobalDemoStyles: React.FC = () => {
   const { token } = useSiteToken();
 
   const { antCls, iconCls } = token;
@@ -24,9 +24,9 @@ export default () => {
           display: inline-block;
           width: 100%;
           margin: 0 0 16px;
+          background-color: ${token.colorBgContainer};
           border: 1px solid ${token.colorSplit};
           border-radius: ${token.borderRadius}px;
-          background-color: ${token.colorBgContainer};
           transition: all 0.2s;
 
           .code-box-title {
@@ -373,3 +373,5 @@ export default () => {
     />
   );
 };
+
+export default GlobalDemoStyles;
diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md
@@ -11,9 +11,3 @@ The most basic usage.
   color: rgba(64, 64, 64, 0.6);
 }
 ```
-
-<style>
-[data-theme="dark"] .site-back-top-basic {
-  color: rgba(255,255,255,.45);
-}
-</style>
diff --git a/components/breadcrumb/demo/react-router.md b/components/breadcrumb/demo/react-router.md
@@ -24,9 +24,3 @@ Used together with `react-router@6+`.
   margin-top: 16px;
 }
 ```
-
-<style>
-  [data-theme="dark"] .demo-nav {
-    background: #141414;
-  }
-</style>
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -82,8 +82,4 @@ Following the Ant Design specification, we will add one space between if Button
   padding: 16px;
   background: rgb(190, 200, 200);
 }
-
-[data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.2);
-}
 </style>
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -87,10 +87,6 @@ group:
   padding: 16px;
   background: rgb(190, 200, 200);
 }
-
-[data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.2);
-}
 </style>
 
 ## 设计指引

diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
@@ -5,9 +5,3 @@
 ## en-US
 
 By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
-
-<style>
-[data-theme="compact"] p, p {
-  margin: 0;
-}
-</style>
diff --git a/components/collapse/demo/collapsible.md b/components/collapse/demo/collapsible.md
@@ -7,9 +7,6 @@
 Specify the trigger area of collapsible by `collapsible`.
 
 <style>
-[data-theme="compact"] p, p {
-  margin: 0;
-}
 #components-collapse-demo-collapsible .ant-space {
   width: 100%;
 }

diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md
@@ -35,9 +35,3 @@ Components which support rtl direction are listed here, you can toggle the direc
   margin-left: 20px;
 }
 ```
-
-<style>
-[data-theme="dark"] .head-example {
-  background: rgba(255,255,255,.12);
-}
-</style>
diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md
@@ -5,37 +5,3 @@
 ## en-US
 
 Components which need localization support are listed here, you can toggle the language in the demo.
-
-```css
-.site-config-provider-calendar-wrapper {
-  width: 319px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-
-.locale-components {
-  padding-top: 16px;
-  border-top: 1px solid #d9d9d9;
-}
-
-.code-box-demo .example {
-  margin: 16px 0;
-}
-
-.code-box-demo .example > * {
-  margin-right: 8px;
-}
-
-.change-locale {
-  margin-bottom: 16px;
-}
-```
-
-<style>
-[data-theme="dark"] .locale-components {
-  border-top: 1px solid #303030;
-}
-[data-theme="dark"] .site-config-provider-calendar-wrapper {
-  border: 1px solid #303030;
-}
-</style>
diff --git a/components/config-provider/demo/locale.tsx b/components/config-provider/demo/locale.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import {
   Button,
@@ -10,14 +9,16 @@ import {
   Popconfirm,
   Radio,
   Select,
+  Space,
   Table,
   TimePicker,
   Transfer,
 } from 'antd';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import React, { useState } from 'react';
 
 dayjs.locale('en');
 
@@ -28,20 +29,15 @@ const columns = [
   {
     title: 'Name',
     dataIndex: 'name',
-    filters: [
-      {
-        text: 'filter1',
-        value: 'filter1',
-      },
-    ],
+    filters: [{ text: 'filter1', value: 'filter1' }],
   },
   {
     title: 'Age',
     dataIndex: 'age',
   },
 ];
 
-const Page = () => {
+const Page: React.FC = () => {
   const [open, setOpen] = useState(false);
 
   const showModal = () => {
@@ -67,20 +63,22 @@ const Page = () => {
   };
 
   return (
-    <div className="locale-components">
-      <div className="example">
-        <Pagination defaultCurrent={1} total={50} showSizeChanger />
-      </div>
-      <div className="example">
+    <Space
+      direction="vertical"
+      size={[0, 16]}
+      style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
+    >
+      <Pagination defaultCurrent={1} total={50} showSizeChanger />
+      <Space wrap>
         <Select showSearch style={{ width: 200 }}>
           <Option value="jack">jack</Option>
           <Option value="lucy">lucy</Option>
         </Select>
         <DatePicker />
         <TimePicker />
         <RangePicker style={{ width: 200 }} />
-      </div>
-      <div className="example">
+      </Space>
+      <Space wrap>
         <Button type="primary" onClick={showModal}>
           Show Modal
         </Button>
@@ -89,20 +87,16 @@ const Page = () => {
         <Popconfirm title="Question?">
           <a href="#">Click to confirm</a>
         </Popconfirm>
-      </div>
-      <div className="example">
-        <Transfer dataSource={[]} showSearch targetKeys={[]} />
-      </div>
-      <div className="site-config-provider-calendar-wrapper">
+      </Space>
+      <Transfer dataSource={[]} showSearch targetKeys={[]} />
+      <div style={{ width: 320, border: `1px solid #d9d9d9`, borderRadius: 8 }}>
         <Calendar fullscreen={false} value={dayjs()} />
       </div>
-      <div className="example">
-        <Table dataSource={[]} columns={columns} />
-      </div>
+      <Table dataSource={[]} columns={columns} />
       <Modal title="Locale Modal" open={open} onCancel={hideModal}>
         <p>Locale Modal</p>
       </Modal>
-    </div>
+    </Space>
   );
 };
 
@@ -121,7 +115,7 @@ const App: React.FC = () => {
 
   return (
     <div>
-      <div className="change-locale">
+      <div style={{ marginBottom: 16 }}>
         <span style={{ marginRight: 16 }}>Change locale of components: </span>
         <Radio.Group value={locale} onChange={changeLocale}>
           <Radio.Button key="en" value={enUS}>

diff --git a/components/config-provider/demo/prefixCls.tsx b/components/config-provider/demo/prefixCls.tsx
@@ -1,26 +1,24 @@
-import React, { useState } from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Select } from 'antd';
+import React, { useState } from 'react';
 
 // Ant Design site use `es` module for view
 // but do not replace related lib `lib` with `es`
 // which do not show correct in site.
 // We may need do convert in site also.
 const App: React.FC = () => {
   const [prefixCls, setPrefixCls] = useState('light');
-
   return (
-    <div>
+    <>
       <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
         toggle prefixCls
       </Button>
-      <div>
-        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
-          <SmileOutlined />
-          <Select />
-        </ConfigProvider>
-      </div>
-    </div>
+      <br />
+      <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
+        <SmileOutlined />
+        <Select style={{ width: 120 }} />
+      </ConfigProvider>
+    </>
   );
 };
 

diff --git a/components/config-provider/demo/size.tsx b/components/config-provider/demo/size.tsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
   Button,
   Card,
@@ -8,18 +7,20 @@ import {
   Input,
   Radio,
   Select,
+  Space,
   Table,
   Tabs,
 } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import React, { useState } from 'react';
 
 const { TabPane } = Tabs;
 
 const App: React.FC = () => {
   const [componentSize, setComponentSize] = useState<SizeType>('small');
 
   return (
-    <div>
+    <>
       <Radio.Group
         value={componentSize}
         onChange={(e) => {
@@ -32,10 +33,8 @@ const App: React.FC = () => {
       </Radio.Group>
       <Divider />
       <ConfigProvider componentSize={componentSize}>
-        <div className="example">
+        <Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
           <Input />
-        </div>
-        <div className="example">
           <Tabs defaultActiveKey="1">
             <TabPane tab="Tab 1" key="1">
               Content of Tab Pane 1
@@ -47,54 +46,28 @@ const App: React.FC = () => {
               Content of Tab Pane 3
             </TabPane>
           </Tabs>
-        </div>
-        <div className="example">
           <Input.Search allowClear />
-        </div>
-        <div className="example">
           <Input.TextArea allowClear />
-        </div>
-        <div className="example">
           <Select defaultValue="demo" options={[{ value: 'demo' }]} />
-        </div>
-        <div className="example">
           <DatePicker />
-        </div>
-        <div className="example">
           <DatePicker.RangePicker />
-        </div>
-        <div className="example">
           <Button>Button</Button>
-        </div>
-        <div className="example">
           <Card title="Card">
             <Table
               columns={[
                 { title: 'Name', dataIndex: 'name' },
                 { title: 'Age', dataIndex: 'age' },
               ]}
               dataSource={[
-                {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                },
-                {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                },
-                {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                },
+                { key: '1', name: 'John Brown', age: 32 },
+                { key: '2', name: 'Jim Green', age: 42 },
+                { key: '3', name: 'Joe Black', age: 32 },
               ]}
             />
           </Card>
-        </div>
+        </Space>
       </ConfigProvider>
-    </div>
+    </>
   );
 };
 

diff --git a/components/config-provider/demo/theme.tsx b/components/config-provider/demo/theme.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Button, ConfigProvider, Form, InputNumber } from 'antd';
+import React from 'react';
 import { SketchPicker } from 'react-color';
 
 type ThemeData = {