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

Progress bar with steps #19613

Merged
merged 27 commits into from Nov 22, 2019
Merged

Progress bar with steps #19613

merged 27 commits into from Nov 22, 2019

Conversation

QingLance
Copy link
Contributor

@QingLance QingLance commented Nov 7, 2019

🤔 This is a ...

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

🔗 Related issue link

💡 Background and solution

In many scenarios we need to use the following style to indicate the current step.
image
In order to implement it, the subcomponent named "Steps" is added to the Progress component.

📝 Changelog

Language Changelog
🇺🇸 English Progress bar with steps
🇨🇳 Chinese Progress组件新增步骤子组件

☑️ Self Check before Merge

  • 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 components/progress/demo/steps.md
View rendered components/progress/index.en-US.md
View rendered components/progress/index.zh-CN.md

@netlify
Copy link

@netlify netlify bot commented Nov 7, 2019

Deploy preview for ant-design ready!

Built with commit 8e50c99

https://deploy-preview-19613--ant-design.netlify.com

@QingLance QingLance changed the title 4.0 prepare Progress bar with steps Nov 7, 2019
@zombieJ
Copy link
Member

@zombieJ zombieJ commented Nov 7, 2019

lint failed. Please check.

| Property | Description | Type | Default | Version |
| ---------- | ------------------------ | ------ | ------- | ------- |
| stepsCount | the total step count | number | 3 | 4.0 |
| stepWidth | to set with of each step | number | 14 | 4.0 |
Copy link
Member

@zombieJ zombieJ Nov 7, 2019

Choose a reason for hiding this comment

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

How about width directly and let us calculate each step cell width for this since circle already provide this prop.

Copy link
Contributor Author

@QingLance QingLance Nov 7, 2019

Choose a reason for hiding this comment

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

How about width directly and let us calculate each step cell width for this since circle already provide this prop.

I agree with you.


| Property | Description | Type | Default | Version |
| ---------- | ------------------------ | ------ | ------- | ------- |
| stepsCount | the total step count | number | 3 | 4.0 |
Copy link
Member

@zombieJ zombieJ Nov 7, 2019

Choose a reason for hiding this comment

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

maybe count directly.

Copy link
Contributor Author

@QingLance QingLance Nov 7, 2019

Choose a reason for hiding this comment

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

maybe count directly.

ok, i fix it right now

@codecov
Copy link

@codecov codecov bot commented Nov 7, 2019

Codecov Report

Merging #19613 into 4.0-prepare will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@               Coverage Diff               @@
##           4.0-prepare   #19613      +/-   ##
===============================================
+ Coverage        97.46%   97.47%   +<.01%     
===============================================
  Files              288      289       +1     
  Lines             7219     7235      +16     
  Branches          1957     2002      +45     
===============================================
+ Hits              7036     7052      +16     
  Misses             183      183
Impacted Files Coverage Δ
components/progress/progress.tsx 100% <100%> (ø) ⬆️
components/progress/Steps.tsx 100% <100%> (ø)

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 209e293...8e50c99. Read the comment docs.

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Nov 12, 2019

Steps 看起来是内联的场景比较多,display: inline-block 是不是更适合。其他觉得 OK 了。

cc @afc163

@buildsize
Copy link

@buildsize buildsize bot commented Nov 15, 2019

File name Previous Size New Size Change
package-lock.json 971.03 KB 923.71 KB -47.31 KB (5%)

@zombieJ zombieJ self-requested a review Nov 18, 2019
@afc163
Copy link
Member

@afc163 afc163 commented Nov 18, 2019

可能要看一下容器太窄的时候,避免换行。

components/progress/progress.tsx Outdated Show resolved Hide resolved
components/progress/progress.tsx Outdated Show resolved Hide resolved
components/progress/Steps.tsx Outdated Show resolved Hide resolved
components/progress/demo/steps.md Outdated Show resolved Hide resolved
components/progress/progress.tsx Outdated Show resolved Hide resolved
@zombieJ zombieJ merged commit 2f1c2e1 into ant-design:4.0-prepare Nov 22, 2019
21 checks passed
@@ -35,6 +35,7 @@ title: Progress
| --- | --- | --- | --- |
| strokeWidth | 进度条线的宽度,单位 px | number | 10 |
| strokeColor | 进度条的色彩,传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
| steps | 进度条总共步数 | number | - |
Copy link
Member

@afc163 afc163 Nov 22, 2019

Choose a reason for hiding this comment

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

将进度条展示为分步效果,并可以设置步数

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

3 participants