From 7d77f3173def86f3c634d248a6c1de202f7e4a1e Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 5 Jan 2023 15:30:59 +0800 Subject: [PATCH] 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 --- .dumi/theme/builtins/Previewer/index.tsx | 27 ++- .dumi/theme/common/styles/Demo.tsx | 8 +- components/card/demo/border-less.md | 13 -- components/card/demo/in-column.md | 11 - components/card/index.en-US.md | 4 +- components/card/index.zh-CN.md | 4 +- components/layout/index.en-US.md | 12 +- components/layout/index.zh-CN.md | 12 +- .../__snapshots__/demo-extend.test.ts.snap | 198 +++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 198 +++++++++--------- components/statistic/demo/card.md | 13 -- components/statistic/demo/card.tsx | 54 +++-- components/statistic/index.en-US.md | 2 +- components/statistic/index.zh-CN.md | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- components/tabs/demo/card-top.tsx | 3 - components/tabs/index.en-US.md | 2 +- components/tabs/index.zh-CN.md | 2 +- package.json | 1 + 20 files changed, 263 insertions(+), 307 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index 5901bf25de..6d09440601 100644 --- 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 { static contextType = SiteContext; + declare context: SiteContextProps; + liveDemo: any; iframeRef = React.createRef(); @@ -93,7 +95,7 @@ class Demo extends React.Component { ); } - getSourceCode = (): [string, string] => { + getSourceCode = () => { const { sourceCodes } = this.props; return [sourceCodes.jsx, sourceCodes.tsx]; }; @@ -130,7 +132,7 @@ class Demo extends React.Component { 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 { const suffix = codeType === 'tsx' ? 'tsx' : 'js'; const dependencies: Record = sourceCode.split('\n').reduce( - (acc, line) => { + (acc: Record, 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(); 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 = (
-
+
{this.liveDemo} @@ -384,7 +393,7 @@ createRoot(document.getElementById('container')).render(); ref={this.riddleIconRef} onClick={() => { this.track({ type: 'riddle', demo: meta.id }); - this.riddleIconRef.current.submit(); + this.riddleIconRef.current?.submit(); }} > @@ -401,7 +410,7 @@ createRoot(document.getElementById('container')).render(); ref={this.codeSandboxIconRef} onClick={() => { this.track({ type: 'codesandbox', demo: meta.id }); - this.codeSandboxIconRef.current.submit(); + this.codeSandboxIconRef.current?.submit(); }} > ); ); if (meta.version) { - codeBox = ( - + return ( + {codeBox} ); diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index e091eb3cc4..b94083301f 100644 --- 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 { diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md index d6bd49f106..afd1ec58dc 100644 --- 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; -} -``` - - diff --git a/components/card/demo/in-column.md b/components/card/demo/in-column.md index 9c5649364a..5a7b5ed769 100644 --- 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. - - diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 63476dc2f2..6d45bc4115 100644 --- 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 Basic card -No border +No border Simple card Customized content -Card in column +Card in column Loading card Grid card Inner card diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 648d50a320..9faccce09b 100644 --- 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 典型卡片 -无边框 +无边框 简洁卡片 更灵活的内容展示 -栅格卡片 +栅格卡片 预加载的卡片 网格型内嵌卡片 内部卡片 diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index 8d765a341f..8289f28d5c 100644 --- 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. Basic Structure -Header-Content-Footer -Header Sider 2 -Header-Sider +Header-Content-Footer +Header Sider 2 +Header-Sider Sider -Custom trigger -Responsive +Custom trigger +Responsive Fixed Header Fixed Sider -Custom trigger debug +Custom trigger debug ## API diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index 804e5e8e16..bbf1ee0afd 100644 --- 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 基本结构 -上中下布局 -顶部-侧边布局-通栏 -顶部-侧边布局 +上中下布局 +顶部-侧边布局-通栏 +顶部-侧边布局 侧边布局 -自定义触发器 -响应式布局 +自定义触发器 +响应式布局 固定头部 固定侧边栏 -自定义触发器 Debug +自定义触发器 Debug ## API diff --git a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap index feb225fc5e..ce30d2063f 100644 --- a/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -157,146 +157,142 @@ exports[`renders ./components/statistic/demo/basic.tsx extend context correctly exports[`renders ./components/statistic/demo/card.tsx extend context correctly 1`] = `
-
- Active -
-
+
+ - + + + + + + + 11 - - 11 - - - .28 - + .28 - - % - -
+ + + % +
+
+
-
- Idle -
-
+
+ - + + + + + + + 9 - - 9 - - - .30 - + .30 - - % - -
+ + + % +
diff --git a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap index be3f7167f3..78f6832d41 100644 --- a/components/statistic/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/statistic/__tests__/__snapshots__/demo.test.ts.snap @@ -157,146 +157,142 @@ exports[`renders ./components/statistic/demo/basic.tsx correctly 1`] = ` exports[`renders ./components/statistic/demo/card.tsx correctly 1`] = `
-
- Active -
-
+
+ - + + + + + + + 11 - - 11 - - - .28 - + .28 - - % - -
+ + + % +
+
+
-
- Idle -
-
+
+ - + + + + + + + 9 - - 9 - - - .30 - + .30 - - % - -
+ + + % +
diff --git a/components/statistic/demo/card.md b/components/statistic/demo/card.md index 9ef80c7502..b7a155dab9 100644 --- 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; -} -``` - - diff --git a/components/statistic/demo/card.tsx b/components/statistic/demo/card.tsx index 8edb5e8b76..52e6b11041 100644 --- a/components/statistic/demo/card.tsx +++ b/components/statistic/demo/card.tsx @@ -3,34 +3,32 @@ import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; import { Card, Col, Row, Statistic } from 'antd'; const App: React.FC = () => ( -
- - - - } - suffix="%" - /> - - - - - } - suffix="%" - /> - - - -
+ + + + } + suffix="%" + /> + + + + + } + suffix="%" + /> + + + ); export default App; diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md index 5bda65f0f9..4406c1b47b 100644 --- a/components/statistic/index.en-US.md +++ b/components/statistic/index.en-US.md @@ -20,7 +20,7 @@ Display statistic number. Basic Unit Animated number -In Card +In Card Countdown ## API diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index cb238dfc99..7392b8610e 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -21,7 +21,7 @@ demo: 基本 单位 动画效果 -在卡片中使用 +在卡片中使用 倒计时 ## API diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index ad4dfe4c63..bb371a0449 100644 --- 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`] = `
{ const antdTabsCls = '.ant-tabs'; return css` - background: ${token.colorBgLayout}; - padding: ${token.paddingLG}px; - ${antdTabsCls}${antdTabsCls}-card { ${antdTabsCls}-content { padding: ${token.padding}px; diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index eaa91867c6..7559fe12ee 100644 --- 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. Position Card type tab Add & close tab -Container of card type Tab +Container of card type Tab Customized trigger of new tab Customized bar of tab Draggable Tabs diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 0cbddb2d80..95494f0606 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -31,7 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 位置 卡片式页签 新增和关闭页签 -卡片式页签容器 +卡片式页签容器 自定义新增页签触发器 自定义页签头 可拖拽标签 diff --git a/package.json b/package.json index e8da24e0a6..35c24dba3d 100644 --- 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",