Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 🌈 Add Components overview page #24491

Merged
merged 23 commits into from May 31, 2020
Merged

docs: 🌈 Add Components overview page #24491

merged 23 commits into from May 31, 2020

Conversation

afc163
Copy link
Member

@afc163 afc163 commented May 27, 2020

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Perfermance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

本地访问 http://127.0.0.1:8001/components/overview/ 和 http://127.0.0.1:8001/components/overview-cn/ 进行调试。

  • 提供全局视角,帮助更快地找组件
  • 信息架构和左侧菜单保持一致。
  • 注意响应式的表现。

可参考:

分类

组件 组件 组件 组件

分类

组件 组件 组件 组件

分类

组件 组件 组件 组件

📝 Changelog

Language Changelog
🇺🇸 English Add components overview page.
🇨🇳 Chinese 新增组件总览页面。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

View rendered README-pt_BR.md
View rendered README-zh_CN.md
View rendered README.md
View rendered components/button/index.en-US.md
View rendered components/button/index.zh-CN.md
View rendered components/overview/index.md
View rendered docs/react/introduce.en-US.md
View rendered docs/react/introduce.zh-CN.md

@pr-triage pr-triage bot added the PR: draft label May 27, 2020
Copy link

@tests-checker tests-checker bot left a comment

Could you please add tests to make sure this change works as expected?

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented May 27, 2020

@ant-design-bot
Copy link
Contributor

@ant-design-bot ant-design-bot commented May 27, 2020

@@ -3,6 +3,7 @@ category: Components
type: 通用
title: Button
subtitle: 按钮
cover: https://gw.alipayobjects.com/zos/antfincdn/qZWIjVIkQ7/Button.svg
Copy link
Member Author

@afc163 afc163 May 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

卡片封面图片在这里设置。

@@ -0,0 +1,3 @@
.components-overview {
padding: 0;
}
Copy link
Member Author

@afc163 afc163 May 27, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

样式可以写在这里。

@codecov
Copy link

@codecov codecov bot commented May 27, 2020

Codecov Report

Merging #24491 into master will decrease coverage by 0.07%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #24491      +/-   ##
==========================================
- Coverage   99.17%   99.10%   -0.08%     
==========================================
  Files         362      363       +1     
  Lines        7291     7230      -61     
  Branches     2034     2013      -21     
==========================================
- Hits         7231     7165      -66     
- Misses         60       65       +5     
Impacted Files Coverage Δ
components/tabs/index.tsx 96.77% <0.00%> (-3.23%) ⬇️
components/list/index.tsx 97.95% <0.00%> (-2.05%) ⬇️
components/breadcrumb/Breadcrumb.tsx 98.21% <0.00%> (-1.79%) ⬇️
components/menu/SubMenu.tsx 94.11% <0.00%> (-0.62%) ⬇️
components/menu/MenuItem.tsx 96.66% <0.00%> (-0.21%) ⬇️
components/input/Password.tsx 97.50% <0.00%> (-0.12%) ⬇️
components/notification/index.tsx 96.77% <0.00%> (-0.11%) ⬇️
components/table/hooks/useSelection.tsx 98.36% <0.00%> (-0.01%) ⬇️
components/form/FormItem.tsx 99.15% <0.00%> (-0.01%) ⬇️
components/upload/UploadList.tsx 99.24% <0.00%> (-0.01%) ⬇️
... and 34 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e573ac4...f0d06c7. Read the comment docs.

@lgtm-com
Copy link

@lgtm-com lgtm-com bot commented May 27, 2020

This pull request introduces 1 alert when merging a63985a into 89d7101 - view on LGTM.com

new alerts:

  • 1 for Unused variable, import, function or class

@lgtm-com
Copy link

@lgtm-com lgtm-com bot commented May 29, 2020

This pull request introduces 3 alerts when merging be392ea into 11bbd72 - view on LGTM.com

new alerts:

  • 2 for Unused variable, import, function or class
  • 1 for Potentially unsafe external link

@afc163
Copy link
Member Author

@afc163 afc163 commented May 29, 2020

  • lint 有问题,检查一下。本地 npm run lint。
  • 一行在 <=1680px 时 4 个卡片吧,6 个卡片显得有点窄。
    image
  • hover 时加 transtion。
  • 加个 skeleton 把,刷新页面的时候有点硬。
  • 顶部文字居中会不会比较好?
    image
  • 文字超长出 ...。
    image
  • 组件顺序和菜单不一致。

@afc163
Copy link
Member Author

@afc163 afc163 commented May 29, 2020

  • 有些图片特别糊。

image

  • 当前页面打开,不要另开新页面。

@arvinxx
Copy link
Contributor

@arvinxx arvinxx commented May 29, 2020

  • lint 有问题,检查一下。本地 npm run lint。

👌

  • 一行在 <=1680px 时 4 个卡片吧,6 个卡片显得有点窄。

👌

  • hover 时加 transtion。

加了的,可能速度有点快(0.1s),我改慢点吧(0.3s)

  • 顶部文字居中会不会比较好?

居左比较符合习惯吧,而且这样给右边预留了一些操作可能性,例如「预览」按钮,点击后出一个 Modal 或 Popover 预览组件。(怎么实现比较省事还没想好)

  • 文字超长出 ...。

👌

  • 组件顺序和菜单不一致。

👌

*[ ] 有些图片特别糊。

芮晗给的源文件里有些是位图,没法出svg,这个需要重新做下,要再花点时间弄

*[x] 当前页面打开,不要另开新页面。

👌

@arvinxx
Copy link
Contributor

@arvinxx arvinxx commented May 29, 2020

  • 加个 skeleton 把,刷新页面的时候有点硬。

是给图片加 skeleton 吗?

@afc163
Copy link
Member Author

@afc163 afc163 commented May 29, 2020

https://preview-24491-ant-design.surge.sh/components/overview-cn/ 这个页面刷新一下,看看数据没加载之前的样子。

@@ -1,6 +1,6 @@
import flattenDeep from 'lodash/flattenDeep';
import flatten from 'lodash/flatten';
import themeConfig from '../../../site/themeConfig';
import themeConfig from "../../themeConfig";
Copy link
Member Author

@afc163 afc163 May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import themeConfig from "../../themeConfig";
import themeConfig from '../../themeConfig';

<Link to={getLocalizedPathname(url, locale === 'zh-CN')}>
<Card
size="small"
className="card"
Copy link
Member Author

@afc163 afc163 May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这些类名容易冲突,加 components-overview 前缀吧。

// '0.10.x': 'http://010x.ant.design',
// '0.9.x': 'http://09x.ant.design',
// },
// },
Copy link
Member Author

@afc163 afc163 May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

别注释,直接删掉。

import { Divider, Row, Col, Card, Typography, Skeleton } from 'antd';
import { getChildren } from 'jsonml.js/lib/utils';
import { getMetaDescription, getLocalizedPathname, getThemeConfig } from '../utils';
import * as utils from '../utils';
Copy link
Member Author

@afc163 afc163 May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这两行 import 可以合并。

transition: all @animation-duration-base @ease-in-out;
&:hover {
box-shadow: @shadow-1-down;
.components-overview- {
Copy link
Member Author

@afc163 afc163 May 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.components-overview {
  &-title {}
}

这样写么。

@afc163 afc163 marked this pull request as ready for review May 30, 2020
@afc163 afc163 requested a review from zombieJ as a code owner May 30, 2020
@hengkx
Copy link
Member

@hengkx hengkx commented May 30, 2020

image

site/theme/static/index.less Outdated Show resolved Hide resolved
@afc163
Copy link
Member Author

@afc163 afc163 commented May 31, 2020

/rebase

@afc163 afc163 mentioned this pull request May 31, 2020
13 tasks
@afc163 afc163 merged commit 882cec6 into master May 31, 2020
20 of 23 checks passed
@afc163 afc163 deleted the components-overview branch May 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants