chore(tabs): update demo (#39731)

* 做重复了

* Revert "做重复了"

This reverts commit 79c59e79ea66c6592df9dca0e41e10399044ec7a.

* site(theme): demo block supports no inner margin configuration

ref: https://d.umijs.org/guide/write-demo#%E4%B8%8D%E9%9C%80%E8%A6%81%E5%86%85%E8%BE%B9%E8%B7%9D

* docs(tabs): update demo styles

* chore: update style

* test: update snapshot

* Revert "site(theme): demo block supports no inner margin configuration"

This reverts commit ee2ff25796.

* chore: update

* Revert "chore: update"

This reverts commit bbe449cb3f.

* Revert "Revert "site(theme): demo block supports no inner margin configuration""

This reverts commit 5eac19e7f2.

* chore: convert to debug demo

* chore: use emotion

* test: update snapshot

.dumi/theme/builtins/Previewer/index.tsx

@@ -355,7 +355,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
 
     let codeBox = (
       <section className={codeBoxClass} id={meta.id}>
-        <section className="code-box-demo">
+        <section className="code-box-demo" data-compact={meta.compact}>
           <ErrorBoundary>
             <React.StrictMode>{this.liveDemo}</React.StrictMode>
           </ErrorBoundary>

.dumi/theme/common/styles/Demo.tsx

@@ -40,6 +40,10 @@ export default () => {
           &,
           .code-box-demo {
             background-color: ${token.colorBgContainer};
+
+            &[data-compact] {
+              padding: 0;
+            }
           }
 
           .markdown {

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

@@ -465,7 +465,7 @@ exports[`renders ./components/tabs/demo/card.tsx extend context correctly 1`] =
 
 exports[`renders ./components/tabs/demo/card-top.tsx extend context correctly 1`] = `
 <div
-  class="card-container"
+  class="css-evmtdo"
 >
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card"
@@ -941,8 +941,9 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correc
     <div>
       <div />
       <div
-        class="ant-tabs-nav site-custom-tab-bar"
+        class="ant-tabs-nav"
         role="tablist"
+        style="z-index:1"
       >
         <div
           class="ant-tabs-nav-wrap"
@@ -997,6 +998,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx extend context correc
         </div>
         <div
           class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+          style="z-index:1"
         >
           <button
             aria-controls="null-more-popup"
@@ -1088,7 +1090,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
         style="transform:translate(0px, 0px)"
       >
         <div
-          class=""
           style="margin-right:24px"
         >
           <div
@@ -1106,7 +1107,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
           </div>
         </div>
         <div
-          class=""
           style="margin-right:24px"
         >
           <div
@@ -1124,7 +1124,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx extend context c
           </div>
         </div>
         <div
-          class=""
           style="margin-right:24px"
         >
           <div

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

@@ -408,7 +408,7 @@ exports[`renders ./components/tabs/demo/card.tsx correctly 1`] = `
 
 exports[`renders ./components/tabs/demo/card-top.tsx correctly 1`] = `
 <div
-  class="card-container"
+  class="css-evmtdo"
 >
   <div
     class="ant-tabs ant-tabs-top ant-tabs-card"
@@ -827,8 +827,9 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
     <div>
       <div />
       <div
-        class="ant-tabs-nav site-custom-tab-bar"
+        class="ant-tabs-nav"
         role="tablist"
+        style="z-index:1"
       >
         <div
           class="ant-tabs-nav-wrap"
@@ -883,6 +884,7 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
         </div>
         <div
           class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+          style="z-index:1"
         >
           <button
             aria-controls="null-more-popup"
@@ -955,7 +957,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
         style="transform:translate(0px, 0px)"
       >
         <div
-          class=""
           style="margin-right:24px"
         >
           <div
@@ -973,7 +974,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
           </div>
         </div>
         <div
-          class=""
           style="margin-right:24px"
         >
           <div
@@ -991,7 +991,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.tsx correctly 1`] =
           </div>
         </div>
         <div
-          class=""
           style="margin-right:24px"
         >
           <div

components/tabs/demo/card-top.md

@@ -5,53 +5,3 @@
 ## en-US
 
 Should be used at the top of container, needs to override styles.
-
-```css
-.card-container p {
-  margin: 0;
-}
-.card-container > .ant-tabs-card .ant-tabs-content {
-  height: 120px;
-  margin-top: -16px;
-}
-.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-  padding: 16px;
-  background: #fff;
-}
-.card-container > .ant-tabs-card > .ant-tabs-nav::before {
-  display: none;
-}
-.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab,
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab {
-  background: transparent;
-  border-color: transparent;
-}
-.card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active,
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-nav-list > .ant-tabs-tab-active {
-  background: #fff;
-  border-color: #fff;
-}
-#components-tabs-demo-card-top .code-box-demo {
-  padding: 24px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
-  height: 120px;
-  margin-top: -8px;
-}
-[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
-  background: transparent;
-  border-color: transparent;
-}
-[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
-  background: #000;
-}
-[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
-  background: #141414;
-}
-[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
-  background: #141414;
-  border-color: #141414;
-}
-```

components/tabs/demo/card-top.tsx

@@ -1,5 +1,41 @@
 import React from 'react';
-import { Tabs } from 'antd';
+import { Tabs, theme } from 'antd';
+import { css } from '@emotion/css';
+
+const useStyle = () => {
+  const { token } = theme.useToken();
+  const antdTabsCls = '.ant-tabs';
+
+  return css`
+    background: ${token.colorBgLayout};
+    padding: ${token.paddingLG}px;
+
+    ${antdTabsCls}${antdTabsCls}-card {
+      ${antdTabsCls}-content {
+        padding: ${token.padding}px;
+        background: ${token.colorBgContainer};
+      }
+
+      ${antdTabsCls}-nav {
+        margin: 0;
+
+        ${antdTabsCls}-nav-wrap > ${antdTabsCls}-nav-list > ${antdTabsCls}-tab {
+          background: transparent;
+          border-color: transparent;
+
+          &-active {
+            border-color: ${token.colorBorderBg};
+            background: ${token.colorBgContainer};
+          }
+        }
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  `;
+};
 
 const items = new Array(3).fill(null).map((_, i) => {
   const id = String(i + 1);
@@ -16,10 +52,14 @@ const items = new Array(3).fill(null).map((_, i) => {
   };
 });
 
-const App: React.FC = () => (
+const App = () => {
-  <div className="card-container">
+  const style = useStyle();
-    <Tabs type="card" items={items} />
+
-  </div>
+  return (
-);
+    <div className={style}>
+      <Tabs type="card" items={items} />
+    </div>
+  );
+};
 
 export default App;

components/tabs/demo/custom-tab-bar-node.md

@@ -8,7 +8,6 @@ Use `react-dnd@15+` to make tabs draggable.
 
 ```css
 .dropping {
-  background: #fefefe;
   transition: all 0.3s;
 }
 ```

components/tabs/demo/custom-tab-bar-node.tsx

@@ -12,7 +12,8 @@ interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [{ isOver, dropClassName }, drop] = useDrop({
+
+  const [{ isOver }, drop] = useDrop({
     accept: type,
     collect: (monitor) => {
       const { index: dragIndex } = monitor.getItem() || {};
@@ -21,7 +22,6 @@ const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps)
       }
       return {
         isOver: monitor.isOver(),
-        dropClassName: 'dropping',
       };
     },
     drop: (item: { index: React.Key }) => {
@@ -37,8 +37,14 @@ const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps)
   });
   drop(drag(ref));
 
+  // Style
+  const style: React.CSSProperties = { marginRight: 24 };
+  if (isOver) {
+    style.transition = 'all 0.3s';
+  }
+
   return (
-    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
+    <div ref={ref} style={style}>
       {children}
     </div>
   );

components/tabs/demo/custom-tab-bar.md

@@ -5,16 +5,3 @@
 ## en-US
 
 Use react-sticky.
-
-```css
-.site-custom-tab-bar {
-  z-index: 1;
-  background: #fff;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-custom-tab-bar {
-    background: #141414;
-  }
-</style>

components/tabs/demo/custom-tab-bar.tsx

@@ -5,9 +5,7 @@ import { Sticky, StickyContainer } from 'react-sticky';
 
 const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
-    {({ style }) => (
+    {({ style }) => <DefaultTabBar {...props} style={{ zIndex: 1, ...style }} />}
-      <DefaultTabBar {...props} className="site-custom-tab-bar" style={{ ...style }} />
-    )}
   </Sticky>
 );
 

components/tabs/index.en-US.md

@@ -28,7 +28,7 @@ Ant Design has 3 types of Tabs for different situations.
 <code src="./demo/position.tsx">Position</code>
 <code src="./demo/card.tsx">Card type tab</code>
 <code src="./demo/editable-card.tsx">Add & close tab</code>
-<code src="./demo/card-top.tsx">Container of card type Tab</code>
+<code src="./demo/card-top.tsx" compact debug>Container of card type Tab</code>
 <code src="./demo/custom-add-trigger.tsx">Customized trigger of new tab</code>
 <code src="./demo/custom-tab-bar.tsx">Customized bar of tab</code>
 <code src="./demo/custom-tab-bar-node.tsx">Draggable Tabs</code>

components/tabs/index.zh-CN.md

@@ -31,7 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 <code src="./demo/position.tsx">位置</code>
 <code src="./demo/card.tsx">卡片式页签</code>
 <code src="./demo/editable-card.tsx">新增和关闭页签</code>
-<code src="./demo/card-top.tsx">卡片式页签容器</code>
+<code src="./demo/card-top.tsx" compact debug>卡片式页签容器</code>
 <code src="./demo/custom-add-trigger.tsx">自定义新增页签触发器</code>
 <code src="./demo/custom-tab-bar.tsx">自定义页签头</code>
 <code src="./demo/custom-tab-bar-node.tsx">可拖拽标签</code>