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

FoldableCard: Allow custom action button icon #1670

Merged
merged 2 commits into from
Dec 17, 2015
Merged

FoldableCard: Allow custom action button icon #1670

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d67e631
FoldableCard: Allow custom action button icon
jordwest Dec 16, 2015
f98ac4b
FoldableCard: Rename actionButtonIcon prop to icon
jordwest Dec 16, 2015
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
1 change: 1 addition & 0 deletions client/components/foldable-card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ render: function() {
##### Optional props
* `actionButton`: a component to substitute the regular expand button
* `actionButtonExpanded`: a component to substitute the regular expand button when the card is expanded. If not provided, we use `actionButton`
* `actionButtonIcon`: a string to set the Gridicon slug for the regular expand button. Defaults to `chevron-down`. Only applies when the `actionButton` or `actionButtonExpanded` props are not set.
Copy link
Member

Choose a reason for hiding this comment

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

Could we just use icon here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@mtias: 👍 much nicer. Changed in the latest commit

* `cardKey`: a unique identifier for the card that can be used to help track its state outside the component (for example, to record which cards are open).
* `compact`: a boolean indicating if the foldable card is compact
* `disabled`: boolean indicating if the component it's not interactive
Expand Down
8 changes: 8 additions & 0 deletions client/components/foldable-card/docs/example.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ module.exports = React.createClass( {
You can't see me!
</FoldableCard>
</p>
<p>
<FoldableCard
header="This is a foldable card with a custom action icon"
actionButtonIcon="arrow-down"
>
These are its contents
</FoldableCard>
</p>
<p>
<FoldableCard
header="This is a compact box with summary"
Expand Down
4 changes: 3 additions & 1 deletion client/components/foldable-card/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ var FoldableCard = React.createClass( {
propTypes: {
actionButton: React.PropTypes.element,
actionButtonExpanded: React.PropTypes.element,
actionButtonIcon: React.PropTypes.string,
cardKey: React.PropTypes.string,
compact: React.PropTypes.bool,
disabled: React.PropTypes.bool,
Expand All @@ -36,6 +37,7 @@ var FoldableCard = React.createClass( {

getDefaultProps: function() {
return {
actionButtonIcon: 'chevron-down',
onOpen: noop,
onClose: noop,
cardKey: '',
Expand Down Expand Up @@ -87,7 +89,7 @@ var FoldableCard = React.createClass( {
return (
<button disabled={ this.props.disabled } className="foldable-card__action foldable-card__expand" onClick={ clickAction }>
<span className="screen-reader-text">{ this.translate( 'More' ) }</span>
<Gridicon icon="chevron-down" size={ iconSize } />
<Gridicon icon={ this.props.actionButtonIcon } size={ iconSize } />
</button>
);
}
Expand Down