site: improve demo card style (#40028)

* site: improve demo card style * test: update snapshot * test: update snapshot * fix: demo card border * docs: fix dark mode * style: fix color
2025-06-07 09:26:06 +08:00 · 2023-01-05 15:30:59 +08:00 · 2023-01-05 15:30:59 +08:00 · 7d77f3173d
commit 7d77f3173d
parent 755682c317
20 changed files with 263 additions and 307 deletions
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@ -55,6 +55,8 @@ interface DemoState {
 class Demo extends React.Component<DemoProps, DemoState> {
  static contextType = SiteContext;

+  declare context: SiteContextProps;
+
  liveDemo: any;

  iframeRef = React.createRef<HTMLIFrameElement>();
@ -93,7 +95,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
    );
  }

-  getSourceCode = (): [string, string] => {
+  getSourceCode = () => {
    const { sourceCodes } = this.props;
    return [sourceCodes.jsx, sourceCodes.tsx];
  };
@ -130,7 +132,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
  render() {
    const { state } = this;
    const { props } = this;
-    const site: SiteContextProps = this.context;
+    const site = this.context;
    const {
      meta,
      src,
@ -198,7 +200,7 @@ class Demo extends React.Component<DemoProps, DemoState> {
    const suffix = codeType === 'tsx' ? 'tsx' : 'js';

    const dependencies: Record<PropertyKey, string> = sourceCode.split('\n').reduce(
-      (acc, line) => {
+      (acc: Record<string, string>, line) => {
        const matches = line.match(/import .+? from '(.+)';$/);
        if (matches && matches[1] && !line.includes('antd')) {
          const paths = matches[1].split('/');
@ -353,9 +355,16 @@ createRoot(document.getElementById('container')).render(<Demo />);
      stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
    }

-    let codeBox = (
+    const backgroundGrey = site.theme.includes('dark') ? '#303030' : '#f0f2f5';
+    const codeBoxDemoStyle: React.CSSProperties = {
+      padding: meta.iframe || meta.compact ? 0 : undefined,
+      overflow: meta.iframe || meta.compact ? 'hidden' : undefined,
+      background: meta.background === 'grey' ? backgroundGrey : undefined,
+    };
+
+    const codeBox = (
      <section className={codeBoxClass} id={meta.id}>
-        <section className="code-box-demo" data-compact={meta.compact}>
+        <section className="code-box-demo" style={codeBoxDemoStyle}>
          <ErrorBoundary>
            <React.StrictMode>{this.liveDemo}</React.StrictMode>
          </ErrorBoundary>
@ -384,7 +393,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
                ref={this.riddleIconRef}
                onClick={() => {
                  this.track({ type: 'riddle', demo: meta.id });
-                  this.riddleIconRef.current.submit();
+                  this.riddleIconRef.current?.submit();
                }}
              >
                <input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
@ -401,7 +410,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
              ref={this.codeSandboxIconRef}
              onClick={() => {
                this.track({ type: 'codesandbox', demo: meta.id });
-                this.codeSandboxIconRef.current.submit();
+                this.codeSandboxIconRef.current?.submit();
              }}
            >
              <input
@ -505,8 +514,8 @@ createRoot(document.getElementById('container')).render(<Demo />);
    );

    if (meta.version) {
-      codeBox = (
-        <Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : null}>
+      return (
+        <Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : undefined}>
          {codeBox}
        </Badge.Ribbon>
      );
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -26,6 +26,7 @@ export default () => {
          margin: 0 0 16px;
          border: 1px solid ${token.colorSplit};
          border-radius: ${token.borderRadius}px;
+          background-color: ${token.colorBgContainer};
          transition: all 0.2s;

          .code-box-title {
@ -36,14 +37,9 @@ export default () => {
            }
          }

-          &,
          .code-box-demo {
            background-color: ${token.colorBgContainer};
-            border-radius: ${token.borderRadius}px;
-
-            &[data-compact] {
-              padding: 0;
-            }
+            border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
          }

          .markdown {
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@ -5,16 +5,3 @@
 ## en-US

 A borderless card on a gray background.
-
-```css
-.site-card-border-less-wrapper {
-  padding: 30px;
-  background: #ececec;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-card-border-less-wrapper {
-    background: #303030;
-  }
-</style>
--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@ -5,14 +5,3 @@
 ## en-US

 Cards usually cooperate with grid column layout in overview page.
-
-<style>
-.site-card-wrapper {
-  padding: 30px;
-  background: #ececec;
-}
-
-[data-theme="dark"] .site-card-wrapper {
-  background: #303030;
-}
-</style>
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -15,10 +15,10 @@ A card can be used to display content related to a single subject. The content c

 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic card</code>
-<code src="./demo/border-less.tsx">No border</code>
+<code src="./demo/border-less.tsx" background="grey">No border</code>
 <code src="./demo/simple.tsx">Simple card</code>
 <code src="./demo/flexible-content.tsx">Customized content</code>
-<code src="./demo/in-column.tsx">Card in column</code>
+<code src="./demo/in-column.tsx" background="grey">Card in column</code>
 <code src="./demo/loading.tsx">Loading card</code>
 <code src="./demo/grid-card.tsx">Grid card</code>
 <code src="./demo/inner.tsx">Inner card</code>
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -16,10 +16,10 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAA

 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">典型卡片</code>
-<code src="./demo/border-less.tsx">无边框</code>
+<code src="./demo/border-less.tsx" background="grey">无边框</code>
 <code src="./demo/simple.tsx">简洁卡片</code>
 <code src="./demo/flexible-content.tsx">更灵活的内容展示</code>
-<code src="./demo/in-column.tsx">栅格卡片</code>
+<code src="./demo/in-column.tsx" background="grey">栅格卡片</code>
 <code src="./demo/loading.tsx">预加载的卡片</code>
 <code src="./demo/grid-card.tsx">网格型内嵌卡片</code>
 <code src="./demo/inner.tsx">内部卡片</code>
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@ -59,15 +59,15 @@ Style of a navigation should conform to its level.

 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">Basic Structure</code>
-<code src="./demo/top.tsx">Header-Content-Footer</code>
-<code src="./demo/top-side-2.tsx">Header Sider 2</code>
-<code src="./demo/top-side.tsx">Header-Sider</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/side.tsx" iframe="360">Sider</code>
-<code src="./demo/custom-trigger.tsx">Custom trigger</code>
-<code src="./demo/responsive.tsx">Responsive</code>
+<code src="./demo/custom-trigger.tsx" compact background="grey">Custom trigger</code>
+<code src="./demo/responsive.tsx" compact background="grey">Responsive</code>
 <code src="./demo/fixed.tsx" iframe="360">Fixed Header</code>
 <code src="./demo/fixed-sider.tsx" iframe="360">Fixed Sider</code>
-<code src="./demo/custom-trigger-debug.tsx" debug>Custom trigger debug</code>
+<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>Custom trigger debug</code>

 ## API

--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@ -60,15 +60,15 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAA

 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本结构</code>
-<code src="./demo/top.tsx">上中下布局</code>
-<code src="./demo/top-side-2.tsx">顶部-侧边布局-通栏</code>
-<code src="./demo/top-side.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/side.tsx" iframe="360">侧边布局</code>
-<code src="./demo/custom-trigger.tsx">自定义触发器</code>
-<code src="./demo/responsive.tsx">响应式布局</code>
+<code src="./demo/custom-trigger.tsx" compact background="grey">自定义触发器</code>
+<code src="./demo/responsive.tsx" compact background="grey">响应式布局</code>
 <code src="./demo/fixed.tsx" iframe="360">固定头部</code>
 <code src="./demo/fixed-sider.tsx" iframe="360">固定侧边栏</code>
-<code src="./demo/custom-trigger-debug.tsx" debug>自定义触发器 Debug</code>
+<code src="./demo/custom-trigger-debug.tsx" compact background="grey" debug>自定义触发器 Debug</code>

 ## API

--- a/components/statistic/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/statistic/tests/snapshots/demo-extend.test.ts.snap
@ -156,9 +156,6 @@ exports[`renders ./components/statistic/demo/basic.tsx extend context correctly
 `;

 exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1`] = `
-<div
-  class="site-statistic-demo-card"
->
 <div
  class="ant-row"
  style="margin-left:-8px;margin-right:-8px"
@ -168,7 +165,7 @@ exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1
    style="padding-left:8px;padding-right:8px"
  >
    <div
-        class="ant-card ant-card-bordered"
+      class="ant-card"
    >
      <div
        class="ant-card-body"
@ -237,7 +234,7 @@ exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1
    style="padding-left:8px;padding-right:8px"
  >
    <div
-        class="ant-card ant-card-bordered"
+      class="ant-card"
    >
      <div
        class="ant-card-body"
@ -302,7 +299,6 @@ exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1
    </div>
  </div>
 </div>
-</div>
 `;

 exports[`renders ./components/statistic/demo/countdown.tsx extend context correctly 1`] = `
--- a/components/statistic/tests/snapshots/demo.test.ts.snap
+++ b/components/statistic/tests/snapshots/demo.test.ts.snap
@ -156,9 +156,6 @@ exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = `
 `;

 exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
-<div
-  class="site-statistic-demo-card"
->
 <div
  class="ant-row"
  style="margin-left:-8px;margin-right:-8px"
@ -168,7 +165,7 @@ exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
    style="padding-left:8px;padding-right:8px"
  >
    <div
-        class="ant-card ant-card-bordered"
+      class="ant-card"
    >
      <div
        class="ant-card-body"
@ -237,7 +234,7 @@ exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
    style="padding-left:8px;padding-right:8px"
  >
    <div
-        class="ant-card ant-card-bordered"
+      class="ant-card"
    >
      <div
        class="ant-card-body"
@ -302,7 +299,6 @@ exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
    </div>
  </div>
 </div>
-</div>
 `;

 exports[`renders ./components/statistic/demo/countdown.tsx correctly 1`] = `
--- a/components/statistic/demo/card.md
+++ b/components/statistic/demo/card.md
@ -5,16 +5,3 @@
 ## en-US

 Display statistic data in Card.
-
-```css
-.site-statistic-demo-card {
-  padding: 24px;
-  background: #ececec;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-statistic-demo-card {
-    background: #303030;
-  }
-</style>
--- a/components/statistic/demo/card.tsx
+++ b/components/statistic/demo/card.tsx
@ -3,10 +3,9 @@ import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
 import { Card, Col, Row, Statistic } from 'antd';

 const App: React.FC = () => (
-  <div className="site-statistic-demo-card">
  <Row gutter={16}>
    <Col span={12}>
-        <Card>
+      <Card bordered={false}>
        <Statistic
          title="Active"
          value={11.28}
@ -18,7 +17,7 @@ const App: React.FC = () => (
      </Card>
    </Col>
    <Col span={12}>
-        <Card>
+      <Card bordered={false}>
        <Statistic
          title="Idle"
          value={9.3}
@ -30,7 +29,6 @@ const App: React.FC = () => (
      </Card>
    </Col>
  </Row>
-  </div>
 );

 export default App;
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@ -20,7 +20,7 @@ Display statistic number.
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/unit.tsx">Unit</code>
 <code src="./demo/animated.tsx">Animated number</code>
-<code src="./demo/card.tsx" compact>In Card</code>
+<code src="./demo/card.tsx" background="grey">In Card</code>
 <code src="./demo/countdown.tsx">Countdown</code>

 ## API
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@ -21,7 +21,7 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/unit.tsx">单位</code>
 <code src="./demo/animated.tsx">动画效果</code>
-<code src="./demo/card.tsx" compact>在卡片中使用</code>
+<code src="./demo/card.tsx" background="grey">在卡片中使用</code>
 <code src="./demo/countdown.tsx">倒计时</code>

 ## API
--- a/components/tabs/tests/snapshots/demo-extend.test.ts.snap
+++ b/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="css-evmtdo"
+  class="css-1g7foe3"
 >
  <div
    class="ant-tabs ant-tabs-top ant-tabs-card"
--- a/components/tabs/tests/snapshots/demo.test.ts.snap
+++ b/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="css-evmtdo"
+  class="css-1g7foe3"
 >
  <div
    class="ant-tabs ant-tabs-top ant-tabs-card"
--- a/components/tabs/demo/card-top.tsx
+++ b/components/tabs/demo/card-top.tsx
@ -7,9 +7,6 @@ const useStyle = () => {
  const antdTabsCls = '.ant-tabs';

  return css`
-    background: ${token.colorBgLayout};
-    padding: ${token.paddingLG}px;
-
    ${antdTabsCls}${antdTabsCls}-card {
      ${antdTabsCls}-content {
        padding: ${token.padding}px;
--- a/components/tabs/index.en-US.md
+++ b/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" compact debug>Container of card type Tab</code>
+<code src="./demo/card-top.tsx" compact background="grey" 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>
--- a/components/tabs/index.zh-CN.md
+++ b/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" compact debug>卡片式页签容器</code>
+<code src="./demo/card-top.tsx" compact background="grey" 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>
--- a/package.json
+++ b/package.json
@ -175,6 +175,7 @@
    "@types/jest-image-snapshot": "^6.1.0",
    "@types/jquery": "^3.5.14",
    "@types/lodash": "^4.14.139",
+    "@types/lz-string": "^1.3.34",
    "@types/prismjs": "^1.26.0",
    "@types/puppeteer": "^7.0.4",
    "@types/qs": "^6.9.7",