docs: improve Layout demo code (#42283)

* docs: improve Layout demo code

* chore: fix css rule order

.dumi/global.css

@@ -0,0 +1,13 @@
+.demo-logo {
+  width: 120px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+}
+
+.demo-logo-vertical {
+  height: 32px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+}

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

@@ -169,7 +169,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx extend context correc
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -432,10 +432,10 @@ exports[`renders components/layout/demo/fixed.tsx extend context correctly 1`] =
 >
   <header
     class="ant-layout-header"
-    style="position: sticky; top: 0px; z-index: 1; width: 100%;"
+    style="position: sticky; top: 0px; z-index: 1; width: 100%; display: flex; align-items: center;"
   >
     <div
-      style="float: left; width: 120px; height: 31px; margin: 16px 24px 16px 0px; background: rgba(255, 255, 255, 0.2);"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -712,7 +712,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
       class="ant-layout-sider-children"
     >
       <div
-        style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2);"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1498,7 +1498,7 @@ exports[`renders components/layout/demo/responsive.tsx extend context correctly
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
@@ -1857,7 +1857,7 @@ exports[`renders components/layout/demo/side.tsx extend context correctly 1`] =
       class="ant-layout-sider-children"
     >
       <div
-        style="height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2);"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -2445,7 +2445,7 @@ exports[`renders components/layout/demo/side.tsx extend context correctly 1`] =
     </div>
   </aside>
   <section
-    class="ant-layout site-layout"
+    class="ant-layout"
   >
     <header
       class="ant-layout-header"
@@ -2504,9 +2504,10 @@ exports[`renders components/layout/demo/top.tsx extend context correctly 1`] = `
 >
   <header
     class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -3329,10 +3330,11 @@ exports[`renders components/layout/demo/top-side.tsx extend context correctly 1`
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -4492,10 +4494,11 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display: flex; align-items: center;"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"

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

@@ -169,7 +169,7 @@ exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -326,10 +326,10 @@ exports[`renders components/layout/demo/fixed.tsx correctly 1`] = `
 >
   <header
     class="ant-layout-header"
-    style="position:sticky;top:0;z-index:1;width:100%"
+    style="position:sticky;top:0;z-index:1;width:100%;display:flex;align-items:center"
   >
     <div
-      style="float:left;width:120px;height:31px;margin:16px 24px 16px 0;background:rgba(255, 255, 255, 0.2)"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -487,7 +487,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -992,7 +992,7 @@ exports[`renders components/layout/demo/responsive.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        class="logo"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1171,7 +1171,7 @@ exports[`renders components/layout/demo/side.tsx correctly 1`] = `
       class="ant-layout-sider-children"
     >
       <div
-        style="height:32px;margin:16px;background:rgba(255, 255, 255, 0.2)"
+        class="demo-logo-vertical"
       />
       <ul
         class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark"
@@ -1386,7 +1386,7 @@ exports[`renders components/layout/demo/side.tsx correctly 1`] = `
     </div>
   </aside>
   <section
-    class="ant-layout site-layout"
+    class="ant-layout"
   >
     <header
       class="ant-layout-header"
@@ -1445,9 +1445,10 @@ exports[`renders components/layout/demo/top.tsx correctly 1`] = `
 >
   <header
     class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -1743,10 +1744,11 @@ exports[`renders components/layout/demo/top-side.tsx correctly 1`] = `
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"
@@ -2101,10 +2103,11 @@ exports[`renders components/layout/demo/top-side-2.tsx correctly 1`] = `
   class="ant-layout"
 >
   <header
-    class="ant-layout-header header"
+    class="ant-layout-header"
+    style="display:flex;align-items:center"
   >
     <div
-      class="logo"
+      class="demo-logo"
     />
     <ul
       class="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-dark"

components/layout/demo/custom-trigger-debug.tsx

@@ -73,7 +73,7 @@ const App: React.FC = () => {
   return (
     <Layout>
       <Sider trigger={null} collapsible collapsed={collapsed}>
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"

components/layout/demo/custom-trigger.tsx

@@ -19,7 +19,7 @@ const App: React.FC = () => {
   return (
     <Layout>
       <Sider trigger={null} collapsible collapsed={collapsed}>
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"

components/layout/demo/fixed-sider.tsx

@@ -46,7 +46,7 @@ const App: React.FC = () => {
           bottom: 0,
         }}
       >
-        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <div className="demo-logo-vertical" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
       </Sider>
       <Layout className="site-layout" style={{ marginLeft: 200 }}>

components/layout/demo/fixed.tsx

@@ -10,16 +10,17 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
+      <Header
-        <div
+        style={{
-          style={{
+          position: 'sticky',
-            float: 'left',
+          top: 0,
-            width: 120,
+          zIndex: 1,
-            height: 31,
+          width: '100%',
-            margin: '16px 24px 16px 0',
+          display: 'flex',
-            background: 'rgba(255, 255, 255, 0.2)',
+          alignItems: 'center',
-          }}
+        }}
-        />
+      >
+        <div className="demo-logo" />
         <Menu
           theme="dark"
           mode="horizontal"

components/layout/demo/responsive.md

@@ -9,11 +9,3 @@ Layout.Sider 支持响应式布局。
 Layout.Sider supports responsive layout.
 
 > Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to 0.
-
-```css
-#components-layout-demo-responsive .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.2);
-}
-```

components/layout/demo/responsive.tsx

@@ -21,7 +21,7 @@ const App: React.FC = () => {
           console.log(collapsed, type);
         }}
       >
-        <div className="logo" />
+        <div className="demo-logo-vertical" />
         <Menu
           theme="dark"
           mode="inline"

components/layout/demo/side.tsx

@@ -48,10 +48,10 @@ const App: React.FC = () => {
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
-        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
+        <div className="demo-logo-vertical" />
         <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
       </Sider>
-      <Layout className="site-layout">
+      <Layout>
         <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '0 16px' }}>
           <Breadcrumb style={{ margin: '16px 0' }}>

components/layout/demo/top-side-2.md

@@ -5,18 +5,3 @@
 ## en-US
 
 Both the top navigation and the sidebar, commonly used in application site.
-
-```css
-#components-layout-demo-top-side-2 .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #components-layout-demo-top-side-2 .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```

components/layout/demo/top-side-2.tsx

@@ -37,8 +37,8 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header className="header">
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
-        <div className="logo" />
+        <div className="demo-logo" />
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
       </Header>
       <Layout>

components/layout/demo/top-side.md

@@ -5,18 +5,3 @@
 ## en-US
 
 Both the top navigation and the sidebar, commonly used in documentation site.
-
-```css
-#components-layout-demo-top-side .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.ant-row-rtl #components-layout-demo-top-side .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```

components/layout/demo/top-side.tsx

@@ -37,8 +37,8 @@ const App: React.FC = () => {
 
   return (
     <Layout>
-      <Header className="header">
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
-        <div className="logo" />
+        <div className="demo-logo" />
         <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
       </Header>
       <Content style={{ padding: '0 50px' }}>

components/layout/demo/top.md

@@ -11,21 +11,3 @@ 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.
 
 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.
-
-```css
-.site-layout-content {
-  min-height: 280px;
-  padding: 24px;
-}
-#components-layout-demo-top .logo {
-  float: left;
-  width: 120px;
-  height: 31px;
-  margin: 16px 24px 16px 0;
-  background: rgba(255, 255, 255, 0.3);
-}
-.ant-row-rtl #components-layout-demo-top .logo {
-  float: right;
-  margin: 16px 0 16px 24px;
-}
-```

components/layout/demo/top.tsx

@@ -10,8 +10,8 @@ const App: React.FC = () => {
 
   return (
     <Layout className="layout">
-      <Header>
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
-        <div className="logo" />
+        <div className="demo-logo" />
         <Menu
           theme="dark"
           mode="horizontal"

components/layout/index.en-US.md

@@ -61,8 +61,8 @@ Style of a navigation should conform to its level.
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic Structure</code>
 <code src="./demo/top.tsx" compact background="grey">Header-Content-Footer</code>
-<code src="./demo/top-side-2.tsx" compact background="grey">Header Sider 2</code>
 <code src="./demo/top-side.tsx" compact background="grey">Header-Sider</code>
+<code src="./demo/top-side-2.tsx" compact background="grey">Header Sider 2</code>
 <code src="./demo/side.tsx" iframe="360">Sider</code>
 <code src="./demo/custom-trigger.tsx" compact background="grey">Custom trigger</code>
 <code src="./demo/responsive.tsx" compact background="grey">Responsive</code>

components/layout/index.zh-CN.md

@@ -62,8 +62,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本结构</code>
 <code src="./demo/top.tsx" compact background="grey">上中下布局</code>
-<code src="./demo/top-side-2.tsx" compact background="grey">顶部-侧边布局-通栏</code>
 <code src="./demo/top-side.tsx" compact background="grey">顶部-侧边布局</code>
+<code src="./demo/top-side-2.tsx" compact background="grey">顶部-侧边布局-通栏</code>
 <code src="./demo/side.tsx" iframe="360">侧边布局</code>
 <code src="./demo/custom-trigger.tsx" compact background="grey">自定义触发器</code>
 <code src="./demo/responsive.tsx" compact background="grey">响应式布局</code>

components/menu/__tests__/index.test.tsx

@@ -703,7 +703,7 @@ describe('Menu', () => {
             collapsed={collapsed}
             onCollapse={() => setCollapsed(!collapsed)}
           >
-            <div className="logo" />
+            <div className="demo-logo" />
             <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
               <SubMenu key="sub1" icon={<UserOutlined />} title="User">
                 <Menu.Item key="3">Tom</Menu.Item>