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

Jump to bottom

Statistic: enhance shorthand props and propTypes #390

Merged
merged 4 commits into from
Aug 14, 2016
Merged

Statistic: enhance shorthand props and propTypes #390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
31aeac2
fix(README) Update entry about Step
layershifter Aug 13, 2016
3cc2ee4
fix(Docs) Update message usage
layershifter Aug 13, 2016
746f025
fix(Statistic) Update docs
layershifter Aug 13, 2016
b43d353
fix(Statistic) Lint fix
layershifter Aug 13, 2016
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ Be sure to check out the above migrations before embarking on a new component.
| x Rail | | | _ Shape | |
| _ Reveal | | | _ Sidebar | |
| x Segment | | | _ Sticky | |
| _ Step | | | _ Tab | |
| x Step | | | _ Tab | |
| | | | _ Transition | |

## Releasing
Expand Down
3 changes: 1 addition & 2 deletions docs/app/Examples/elements/Loader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
import { Message } from 'stardust'

// TODO: Update dimmers after implement <Dimmer>
// TODO: Update messages after convert <Message> to v1 API

const LoaderExamples = () => (
<div>
Expand All @@ -14,7 +13,7 @@ const LoaderExamples = () => (
description='A loader'
examplePath='elements/Loader/Types/LoaderExample'
>
<Message>
<Message info>
Loaders are hidden unless has prop "active" or inside an "dimmer" with active prop.
</Message>
</ComponentExample>
Expand Down
2 changes: 0 additions & 2 deletions docs/app/Examples/elements/Step/Groups/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { Icon, Message } from 'stardust'
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

// TODO: Update <Message> usage after v1 API

const Groups = () => (
<ExampleSection title='Groups'>
<ComponentExample
Expand Down
9 changes: 7 additions & 2 deletions ...tatistic/Content/StatisticLabelExample.js → ...xamples/views/Statistic/Content/Labels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,20 @@ import { Statistic } from 'stardust'

const { Label, Value } = Statistic

const StatisticLabelExample = () => (
const Labels = () => (
<div>
<Statistic>
<Value>2,204</Value>
<Label>Views</Label>
</Statistic>

<Statistic>
<Value value='2,204' />
<Label label='Views' />
</Statistic>

<Statistic value='2,204' label='Views' />
</div>
)

export default StatisticLabelExample
export default Labels
24 changes: 24 additions & 0 deletions docs/app/Examples/views/Statistic/Content/Props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react'
import { Statistic } from 'stardust'

const items = [
{ label: 'Saves', value: '22' },
{ label: 'Signups', text: true, value: 'Three Thousand' },
{ label: 'Flights', value: '5' },
{ label: 'Team Members', value: '42' },
]

const Props = () => (
<div>
<Statistic.Group>
<Statistic label='Saves' value='22' />
<Statistic label='Signups' value='Three Thousand' text />
<Statistic label='Flights' value='5' />
<Statistic label='Team Members' value='42' />
</Statistic.Group>

<Statistic.Group items={items} />
</div>
)

export default Props
39 changes: 0 additions & 39 deletions docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js
View file
Open in desktop

This file was deleted.

8 changes: 5 additions & 3 deletions ...tatistic/Content/StatisticValueExample.js → ...xamples/views/Statistic/Content/Values.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { Icon, Image, Statistic } from 'stardust'

const { Group, Label, Value } = Statistic

const StatisticValueExample = () => (
// TODO: Update <Image> usage after <Image> will be updated to v1 API

const Values = () => (
<Group>
<Statistic>
<Value>22</Value>
Expand All @@ -28,12 +30,12 @@ const StatisticValueExample = () => (

<Statistic>
<Value>
<Image inline shape='circular' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
<Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
42
</Value>
<Label>Team Members</Label>
</Statistic>
</Group>
)

export default StatisticValueExample
export default Values
23 changes: 23 additions & 0 deletions docs/app/Examples/views/Statistic/Content/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'

import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const Content = () => (
<ExampleSection title='Content'>
<ComponentExample
title='Value'
description='A statistic can contain a numeric, icon, image, or text value'
examplePath='views/Statistic/Content/Values'
/>
<ComponentExample examplePath='views/Statistic/Content/Props' />

<ComponentExample
title='Label'
description='A statistic can contain a label to help provide context for the presented value'
examplePath='views/Statistic/Content/Labels'
/>
</ExampleSection>
)

export default Content
4 changes: 2 additions & 2 deletions ...stic/Types/StatisticBottomLabelExample.js → ...ples/views/Statistic/Types/BottomLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Statistic } from 'stardust'

const StatisticBottomLabelExample = () => (
const BottomLabel = () => (
<div>
<Statistic>
<Statistic.Value>5,550</Statistic.Value>
Expand All @@ -12,4 +12,4 @@ const StatisticBottomLabelExample = () => (
</div>
)

export default StatisticBottomLabelExample
export default BottomLabel
9 changes: 5 additions & 4 deletions .../Statistic/Types/StatisticGroupExample.js → .../Examples/views/Statistic/Types/Groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@ import React from 'react'
import { Statistic } from 'stardust'

const { Group, Label, Value } = Statistic

const items = [
{ label: 'Faves', value: 22 },
{ label: 'Faves', value: '22' },
{ label: 'Views', value: '31,200' },
{ label: 'Members', value: 22 },
{ label: 'Members', value: '22' },
Copy link
Member

@levithomason levithomason Aug 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

FYI I think these would work as numbers as well.

Copy link
Member Author

Choose a reason for hiding this comment

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

Nope 😄 22 is number, while '22' is string.

Ideas?

Copy link
Member

Choose a reason for hiding this comment

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

I think we should just change the propType validation to string/number. Since technically it could support node as it ends up here:

<div {...rest} className={classes}>{children || value}</div>

Copy link
Member Author

Choose a reason for hiding this comment

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

It cannot be node, as it's used for key on StepGroup.

Proptypes.oneOf([Proptypes.number, Proptypes.string])

I think that it's not good solution. This raises the question of the behavior of other properties.

Copy link
Member

Choose a reason for hiding this comment

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

Good call. OK, perhaps we only stick with string/number then.

Copy link
Member Author

Choose a reason for hiding this comment

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

If we use string/number, we need allow it to all shorthand props.

Copy link
Member

Choose a reason for hiding this comment

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

Hm, I suppose you are right about this. Feel free to update here or we can merge this and make that update next.

Copy link
Member

Choose a reason for hiding this comment

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

I'll make a separate PR for this actually. The PR will resolve #391.

]

const StatisticGroupExample = () => (
const Groups = () => (
<div>
<Group>
<Statistic>
Expand All @@ -26,4 +27,4 @@ const StatisticGroupExample = () => (
</div>
)

export default StatisticGroupExample
export default Groups
4 changes: 2 additions & 2 deletions ...atistic/Types/StatisticTopLabelExample.js → ...xamples/views/Statistic/Types/TopLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Statistic } from 'stardust'

const StatisticTopLabelExample = () => (
const TopLabel = () => (
<div>
<Statistic>
<Statistic.Label>Views</Statistic.Label>
Expand All @@ -10,4 +10,4 @@ const StatisticTopLabelExample = () => (
</div>
)

export default StatisticTopLabelExample
export default TopLabel
23 changes: 23 additions & 0 deletions docs/app/Examples/views/Statistic/Types/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from 'react'

import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'

const Types = () => (
<ExampleSection title='Types'>
<ComponentExample
title='Statistic'
description='A statistic can display a value with a label above or below it'
examplePath='views/Statistic/Types/BottomLabel'
/>
<ComponentExample examplePath='views/Statistic/Types/TopLabel' />

<ComponentExample
title='Statistic Group'
description='A group of statistics'
examplePath='views/Statistic/Types/Groups'
/>
</ExampleSection>
)

export default Types
4 changes: 2 additions & 2 deletions ...tic/Variations/StatisticColoredExample.js → ...les/views/Statistic/Variations/Colored.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Statistic } from 'stardust'

const StatisticColoredExample = () => (
const Colored = () => (
<Statistic.Group>
<Statistic color='red' value='27' label='red' />
<Statistic color='orange' value='8' label='orange' />
Expand All @@ -18,4 +18,4 @@ const StatisticColoredExample = () => (
</Statistic.Group>
)

export default StatisticColoredExample
export default Colored
39 changes: 39 additions & 0 deletions docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import React from 'react'
import { Icon, Image, Statistic } from 'stardust'

const { Group, Label, Value } = Statistic

const EvenlyDivided = () => (
<Group widths='four'>
<Statistic>
<Value>22</Value>
<Label>Saves</Label>
</Statistic>

<Statistic>
<Value text>
Three
<br />Thousand
</Value>
<Label>Signups</Label>
</Statistic>

<Statistic>
<Value>
<Icon name='plane' />
5
</Value>
<Label>Flights</Label>
</Statistic>

<Statistic>
<Value>
<Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
42
</Value>
<Label>Team Members</Label>
</Statistic>
</Group>
)

export default EvenlyDivided
4 changes: 2 additions & 2 deletions ...tic/Variations/StatisticFloatedExample.js → ...les/views/Statistic/Variations/Floated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Segment, Statistic } from 'stardust'

const StatisticFloatedExample = () => (
const Floated = () => (
<Segment>
<Statistic floated='right' label='Views' value='2,204' />

Expand Down Expand Up @@ -32,4 +32,4 @@ const StatisticFloatedExample = () => (
</Segment>
)

export default StatisticFloatedExample
export default Floated
6 changes: 6 additions & 0 deletions docs/app/Examples/views/Statistic/Variations/Horizontal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react'
import { Statistic } from 'stardust'

const Horizontal = () => <Statistic horizontal value='2,204' label='Views' />

export default Horizontal
12 changes: 12 additions & 0 deletions docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react'
import { Statistic } from 'stardust'

const items = [
{ label: 'Views', value: '2,204' },
{ label: 'Downloads', value: '3,322' },
{ label: 'Tasks', value: '22' },
]

const HorizontalGroup = () => <Statistic.Group horizontal items={items} />

export default HorizontalGroup
4 changes: 2 additions & 2 deletions ...ic/Variations/StatisticInvertedExample.js → ...es/views/Statistic/Variations/Inverted.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Segment, Statistic } from 'stardust'

// TODO: Update <Segment> usage after <Segment> will be updated to v1 API

const StatisticInvertedExample = () => (
const Inverted = () => (
<Segment className='inverted'>
<Statistic inverted value='54' label='inverted' />
<Statistic inverted color='red' value='27' label='red' />
Expand All @@ -21,4 +21,4 @@ const StatisticInvertedExample = () => (
</Segment>
)

export default StatisticInvertedExample
export default Inverted
4 changes: 2 additions & 2 deletions ...istic/Variations/StatisticSizeExamples.js → ...amples/views/Statistic/Variations/Size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Statistic } from 'stardust'

const StatisticSizeExamples = () => (
const Size = () => (
<div>
<Statistic size='mini' label='Views' value='2,204' />
<Statistic size='tiny' label='Views' value='2,204' />
Expand All @@ -12,4 +12,4 @@ const StatisticSizeExamples = () => (
</div>
)

export default StatisticSizeExamples
export default Size
4 changes: 2 additions & 2 deletions ...ariations/StatisticSizeDividedExamples.js → ...views/Statistic/Variations/SizeDivided.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react'
import { Divider, Statistic } from 'stardust'

const StatisticSizeDividedExamples = () => (
const SizeDivided = () => (
<div>
<Statistic size='mini' label='Views' value='2,204' />
<Divider />
Expand All @@ -22,4 +22,4 @@ const StatisticSizeDividedExamples = () => (
</div>
)

export default StatisticSizeDividedExamples
export default SizeDivided
Loading