demo: form advanced-search beautification style (#40180)

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3,8 +3,9 @@
 exports[`renders ./components/form/demo/advanced-search.tsx extend context correctly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-horizontal ant-advanced-search-form"
+    class="ant-form ant-form-horizontal"
     id="advanced_search"
+    style="max-width:none;background:rgba(0, 0, 0, 0.02);border-radius:8px;padding:24px"
   >
     <div
       class="ant-row"
@@ -599,7 +600,7 @@ exports[`renders ./components/form/demo/advanced-search.tsx extend context corre
     </div>
   </form>
   <div
-    class="search-result-list"
+    style="line-height:200px;text-align:center;background:rgba(0, 0, 0, 0.02);border-radius:8px;margin-top:16px"
   >
     Search Result List
   </div>

components/form/__tests__/__snapshots__/demo.test.ts.snap

@@ -3,8 +3,9 @@
 exports[`renders ./components/form/demo/advanced-search.tsx correctly 1`] = `
 <div>
   <form
-    class="ant-form ant-form-horizontal ant-advanced-search-form"
+    class="ant-form ant-form-horizontal"
     id="advanced_search"
+    style="max-width:none;background:rgba(0, 0, 0, 0.02);border-radius:8px;padding:24px"
   >
     <div
       class="ant-row"
@@ -435,7 +436,7 @@ exports[`renders ./components/form/demo/advanced-search.tsx correctly 1`] = `
     </div>
   </form>
   <div
-    class="search-result-list"
+    style="line-height:200px;text-align:center;background:rgba(0, 0, 0, 0.02);border-radius:8px;margin-top:16px"
   >
     Search Result List
   </div>

components/form/demo/advanced-search.md

@@ -11,48 +11,3 @@
 Three columns layout is often used for advanced searching of data table.
 
 Because the width of label is not fixed, you may need to adjust it by customizing its style.
-
-```css
-[data-theme='compact'] .ant-advanced-search-form,
-.ant-advanced-search-form {
-  padding: 24px !important;
-  background: #fbfbfb;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-
-[data-theme='compact'] .ant-advanced-search-form .ant-form-item,
-.ant-advanced-search-form .ant-form-item {
-  display: flex;
-}
-
-[data-theme='compact'] .ant-advanced-search-form .ant-form-item-control-wrapper,
-.ant-advanced-search-form .ant-form-item-control-wrapper {
-  flex: 1;
-}
-```
-
-<style>
-#components-form-demo-advanced-search .ant-form {
-  max-width: none;
-}
-#components-form-demo-advanced-search .search-result-list {
-  margin-top: 16px;
-  border: 1px dashed #e9e9e9;
-  border-radius: 2px;
-  background-color: #fafafa;
-  min-height: 200px;
-  text-align: center;
-  padding-top: 80px;
-}
-[data-theme="dark"] .ant-advanced-search-form  {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid #434343;
-  padding: 24px;
-  border-radius: 2px;
-}
-[data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
-  border: 1px dashed #434343;
-  background: rgba(255,255,255,0.04);
-}
-</style>

components/form/demo/advanced-search.tsx

@@ -1,12 +1,20 @@
 import React, { useState } from 'react';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
-import { Button, Col, Form, Input, Row, Select } from 'antd';
+import { Button, Col, Form, Input, Row, Select, theme } from 'antd';
 
 const { Option } = Select;
 
 const AdvancedSearchForm = () => {
-  const [expand, setExpand] = useState(false);
+  const { token } = theme.useToken();
   const [form] = Form.useForm();
+  const [expand, setExpand] = useState(false);
+
+  const formStyle = {
+    maxWidth: 'none',
+    background: token.colorFillAlter,
+    borderRadius: token.borderRadiusLG,
+    padding: 24,
+  };
 
   const getFields = () => {
     const count = expand ? 10 : 6;
@@ -46,12 +54,7 @@ const AdvancedSearchForm = () => {
   };
 
   return (
-    <Form
+    <Form form={form} name="advanced_search" style={formStyle} onFinish={onFinish}>
-      form={form}
-      name="advanced_search"
-      className="ant-advanced-search-form"
-      onFinish={onFinish}
-    >
       <Row gutter={24}>{getFields()}</Row>
       <Row>
         <Col span={24} style={{ textAlign: 'right' }}>
@@ -80,11 +83,23 @@ const AdvancedSearchForm = () => {
   );
 };
 
-const App: React.FC = () => (
+const App: React.FC = () => {
-  <div>
+  const { token } = theme.useToken();
-    <AdvancedSearchForm />
+
-    <div className="search-result-list">Search Result List</div>
+  const listStyle: React.CSSProperties = {
-  </div>
+    lineHeight: '200px',
-);
+    textAlign: 'center',
+    background: token.colorFillAlter,
+    borderRadius: token.borderRadiusLG,
+    marginTop: 16,
+  };
+
+  return (
+    <div>
+      <AdvancedSearchForm />
+      <div style={listStyle}>Search Result List</div>
+    </div>
+  );
+};
 
 export default App;