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.

Sign up for GitHub

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

fix(Progress): use correct width for value/total #2503

Merged
merged 4 commits into from
Feb 14, 2018
+19 −2
Merged

fix(Progress): use correct width for value/total #2503

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f27c00
fix(Progress): adds condition to display percentage when progress='va…
rachelslurs Feb 7, 2018
259005b
docs(Progress): add example of progress bar with progress='value' and…
rachelslurs Feb 7, 2018
3ea5876
lint error fix
rachelslurs Feb 7, 2018
9742b8c
adding simpler example
rachelslurs Feb 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions docs/app/Examples/modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react'
import { Divider, Icon, Item, Progress } from 'semantic-ui-react'

const ProgressExampleProgressValuePercentageOfTotal = () => (
<Item.Group divided relaxed>
<Item>
<Item.Image size='small' src='/assets/images/avatar/large/rachel.png' />
<Item.Content>
<Item.Header>Rachel</Item.Header>
<Item.Meta><Icon circular name='book' /> last read an article on January 26th</Item.Meta>
<Item.Meta><Icon circular name='newspaper' /> read 20 articles in January</Item.Meta>
<Divider hidden />
<Item.Description>
<Progress progress='value' value={15} total={20} content='Politics' color='blue' />
<Progress progress='value' value={5} total={20} content='Cats' color='yellow' />
</Item.Description>
</Item.Content>
</Item>
<Item>
<Item.Image size='small' src='/assets/images/avatar/large/zoe.jpg' />
<Item.Content>
<Item.Header>Zoe</Item.Header>
<Item.Meta><Icon circular name='book' /> last read an article on January 10th</Item.Meta>
<Item.Meta><Icon circular name='newspaper' /> read 7 articles in January</Item.Meta>
<Divider hidden />
<Item.Description>
<Progress progress='value' value={5} total={7} content='Fashion' color='purple' />
<Progress progress='value' value={2} total={7} content='Cats' color='yellow' />
Copy link
Member

Choose a reason for hiding this comment

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

Let's simplify this example down to the minimum amount code required to show the feature. It makes the docs a little quicker to scan and the doc code editor easier to play with.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sure, good idea. I wasn't sure if an example use case might be useful. Would there be somewhere else more appropriate to add the example I did?

I'll update this with a simpler example tomorrow.

Copy link
Member

Choose a reason for hiding this comment

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

Right now we don't have a formal place for more cohesive examples. It may be something we add in the future.

</Item.Description>
</Item.Content>
</Item>
</Item.Group>
)

export default ProgressExampleProgressValuePercentageOfTotal
4 changes: 4 additions & 0 deletions docs/app/Examples/modules/Progress/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ const ProgressContentExamples = () => (
description='A progress element display progress as a value.'
examplePath='modules/Progress/Content/ProgressExampleProgressValue'
/>
<ComponentExample
description='A progress element display progress as a value, with the width determined as a % of total.'
examplePath='modules/Progress/Content/ProgressExampleProgressValuePercentageOfTotal'
/>
</ExampleSection>
)

Expand Down
4 changes: 2 additions & 2 deletions src/modules/Progress/Progress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ class Progress extends Component {
}

getPercent = () => {
const { precision, progress, value } = this.props
const { precision, progress, total, value } = this.props
const percent = _.clamp(this.calculatePercent(), 0, 100)

if (!_.isUndefined(total) && !_.isUndefined(value) && progress === 'value') return (value / total) * 100
if (progress === 'value') return value
if (_.isUndefined(precision)) return percent
return _.round(percent, precision)
Expand Down
5 changes: 5 additions & 0 deletions test/specs/modules/Progress/Progress-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,11 @@ describe('Progress', () => {
.find('.bar')
.should.have.style('width', '0%')
})
it('has a width equal to the percentage of the value of the total, when progress="value"', () => {
shallow(<Progress progress='value' value={5} total={10} />)
.find('.bar')
.should.have.style('width', '50%')
})
})

describe('data-percent', () => {
Expand Down