Skip to content

Button & DropdownToggle updates #120

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

Merged
eddywashere merged 3 commits into from
Sep 6, 2016
Merged

Button & DropdownToggle updates #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
677b6df
refactor(DropdownToggle): remove cloning, default to Button as tag
eddywashere Sep 6, 2016
59d6719
refactor(Button): default to secondary style
eddywashere Sep 6, 2016
778f82d
docs(Dropdown): update based on component changes
eddywashere Sep 6, 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
32 changes: 15 additions & 17 deletions docs/lib/Components/ButtonDropdownPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ DropdownToggle.propTypes = {
<h3>Single button dropdowns</h3>
<div className="docs-example">
<div>
<Example color="secondary" text="Default" />
<Example color="primary" text="Primary" />
<Example color="secondary" text="Secondary" />
<Example color="success" text="Success" />
<Example color="info" text="Info" />
<Example color="warning" text="Warning" />
Expand All @@ -95,8 +95,8 @@ DropdownToggle.propTypes = {
<h3>Split button dropdowns</h3>
<div className="docs-example">
<div>
<ExampleSplit color="secondary" text="Default" />
<ExampleSplit color="primary" text="Primary" />
<ExampleSplit color="secondary" text="Secondary" />
<ExampleSplit color="success" text="Success" />
<ExampleSplit color="info" text="Info" />
<ExampleSplit color="warning" text="Warning" />
Expand All @@ -107,9 +107,7 @@ DropdownToggle.propTypes = {
<PrismCode className="language-jsx">
{`<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<Button id="caret" color="primary">{this.props.text}</Button>
<DropdownToggle caret>
<Button color="primary"><span className="sr-only">Toggle Dropdown</span></Button>
</DropdownToggle>
<DropdownToggle caret color="primary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
Expand All @@ -124,8 +122,8 @@ DropdownToggle.propTypes = {
<div className="docs-example">
<div>
<ButtonDropdown isOpen={this.state.btnLg} toggle={() => { this.setState({ btnLg: !this.state.btnLg }); }}>
<DropdownToggle caret>
<Button size="lg">Large Button</Button>
<DropdownToggle caret size="lg">
Large Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand All @@ -135,8 +133,8 @@ DropdownToggle.propTypes = {
</div>
<div className="m-t-1">
<ButtonDropdown isOpen={this.state.btnSm} toggle={() => { this.setState({ btnSm: !this.state.btnSm }); }}>
<DropdownToggle caret>
<Button size="sm">Small Button</Button>
<DropdownToggle caret size="sm">
Small Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand All @@ -148,8 +146,8 @@ DropdownToggle.propTypes = {
<pre>
<PrismCode className="language-jsx">
{`<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret>
<Button size="lg">Large Button</Button>
<DropdownToggle caret size="lg">
Large Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand All @@ -158,8 +156,8 @@ DropdownToggle.propTypes = {
</ButtonDropdown>

<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret>
<Button size="sm">Small Button</Button>
<DropdownToggle caret size="sm">
Small Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand All @@ -172,8 +170,8 @@ DropdownToggle.propTypes = {
<div className="docs-example">
<div>
<ButtonDropdown dropup isOpen={this.state.btnDropup} toggle={() => { this.setState({ btnDropup: !this.state.btnDropup }); }}>
<DropdownToggle caret>
<Button size="lg">Dropup</Button>
<DropdownToggle caret size="lg">
Dropup
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand All @@ -185,8 +183,8 @@ DropdownToggle.propTypes = {
<pre>
<PrismCode className="language-jsx">
{`<ButtonDropdown isOpen={isOpen} toggle={toggle} dropup>
<DropdownToggle caret>
<Button>Dropup</Button>
<DropdownToggle caret caret size="lg">
Dropup
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
Expand Down
8 changes: 4 additions & 4 deletions docs/lib/Components/ButtonGroupPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export default class ButtonGroupPage extends React.Component {
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
<Button>Dropdown</Button>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
Expand All @@ -139,7 +139,7 @@ export default class ButtonGroupPage extends React.Component {
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
<Button>Dropdown</Button>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
Expand All @@ -156,7 +156,7 @@ export default class ButtonGroupPage extends React.Component {
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
<Button>Dropdown</Button>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
Expand All @@ -172,7 +172,7 @@ export default class ButtonGroupPage extends React.Component {
<Button>2</Button>
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
<Button>Dropdown</Button>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dropdown Link</DropdownItem>
Expand Down
23 changes: 12 additions & 11 deletions docs/lib/Components/ButtonsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,12 @@ export default class ButtonsPage extends React.Component {
{`Button.propTypes = {
active: PropTypes.bool,
block: PropTypes.bool,
color: PropTypes.string,
color: PropTypes.string, // default: 'secondary'
disabled: PropTypes.bool,

// Pass in a Component to override default button element
// example: react-router Link
// default: 'button'
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

onClick: PropTypes.func,
Expand All @@ -52,54 +53,54 @@ export default class ButtonsPage extends React.Component {
</pre>
<h3>Sizes</h3>
<div className="docs-example">
<Button size="lg">Large Button</Button>
<Button color="primary" size="lg">Large Button</Button>
<Button color="secondary" size="lg">Large Button</Button>
</div>
<pre>
<PrismCode className="language-jsx">
{`<Button size="lg">Large Button</Button>
{`<Button color="primary" size="lg">Large Button</Button>
<Button color="secondary" size="lg">Large Button</Button>`}
</PrismCode>
</pre>
<div className="docs-example">
<Button size="sm">Small Button</Button>
<Button color="primary" size="sm">Small Button</Button>
<Button color="secondary" size="sm">Small Button</Button>
</div>
<pre>
<PrismCode className="language-jsx">
{`<Button size="sm">Small Button</Button>
{`<Button color="primary" size="sm">Small Button</Button>
<Button color="secondary" size="sm">Small Button</Button>`}
</PrismCode>
</pre>
<div className="docs-example">
<Button size="lg" block>Block level button</Button>
<Button color="primary" size="lg" block>Block level button</Button>
<Button color="secondary" size="lg" block>Block level button</Button>
</div>
<pre>
<PrismCode className="language-jsx">
{`<Button size="lg" block>Block level button</Button>
{`<Button color="primary" size="lg" block>Block level button</Button>
<Button color="secondary" size="lg" block>Block level button</Button>`}
</PrismCode>
</pre>
<h3>Active State</h3>
<div className="docs-example">
<Button size="lg" active>Primary link</Button>
<Button color="primary" size="lg" active>Primary link</Button>
<Button color="secondary" size="lg" active>Link</Button>
</div>
<pre>
<PrismCode className="language-jsx">
{`<Button size="lg" active>Primary link</Button>
{`<Button color="primary" size="lg" active>Primary link</Button>
<Button color="secondary" size="lg" active>Link</Button>`}
</PrismCode>
</pre>
<h3>Disabled State</h3>
<div className="docs-example">
<Button size="lg" disabled>Primary button</Button>
<Button color="primary" size="lg" disabled>Primary button</Button>
<Button color="secondary" size="lg" disabled>Button</Button>
</div>
<pre>
<PrismCode className="language-jsx">
{`<Button size="lg" disabled>Primary button</Button>
{`<Button color="primary" size="lg" disabled>Primary button</Button>
<Button color="secondary" size="lg" disabled>Button</Button>`}
</PrismCode>
</pre>
Expand Down
16 changes: 14 additions & 2 deletions docs/lib/Components/DropdownsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
import React from 'react';
import { Link } from 'react-router';
import { PrismCode } from 'react-prism';
import Helmet from 'react-helmet';
import {
Expand Down Expand Up @@ -32,6 +33,13 @@ export default class DropdownPage extends React.Component {
<div>
<Helmet title="Dropdowns" />
<h3>Dropdowns</h3>
<p>
The <code>Dropdown</code> component is used to pass the <code>isOpen</code> & <code>toggle</code> props via context to the following components: <code>DropdownToggle</code>, <code>DropdownMenu</code>. The <code>DropdownToggle</code> uses the <code>Button</code> component internally, meaning it also accepts all the props the <Link to="/components/buttons/">Button component</Link> accepts.
Copy link
Copy Markdown
Member Author

@eddywashere eddywashere Sep 6, 2016

Choose a reason for hiding this comment

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

Also added Dropdown description and info around advanced positioning.

</p>
<h4>Advanced Positioning</h4>
<p>
The <code>DropdownMenu</code> can automatically be flipped (dropup vs dropdown) according to space available in the viewport by passing the <code>tether</code> prop to Dropdown <code>{`<Dropdown tether />`}</code>. For full customization, an object with <a href="http://tether.io/#options">Tether options</a> can be used instead.
</p>
<div className="docs-example">
<DropdownExample />
</div>
Expand All @@ -48,18 +56,22 @@ export default class DropdownPage extends React.Component {
dropup: PropTypes.bool,
group: PropTypes.bool,
isOpen: PropTypes.bool,
tag: PropTypes.string,
tag: PropTypes.string, // default: 'div'
tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
toggle: PropTypes.func
};

DropdownToggle.propTypes = {
caret: PropTypes.bool,
color: PropTypes.string,
className: PropTypes.any,
disabled: PropTypes.bool,
onClick: PropTypes.func,
'data-toggle': PropTypes.string,
'aria-haspopup': PropTypes.bool
'aria-haspopup': PropTypes.bool,

// Defaults to Button component
tag: PropTypes.any
};`}
</PrismCode>
</pre>
Expand Down
4 changes: 1 addition & 3 deletions docs/lib/examples/ButtonDropdownMultiSplit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ export default class Example extends React.Component {
return (
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<Button id="caret" color={this.props.color}>{this.props.text}</Button>
<DropdownToggle caret split>
<Button color={this.props.color}><span className="sr-only">Toggle Dropdown</span></Button>
</DropdownToggle>
<DropdownToggle split color={this.props.color} />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
Expand Down
2 changes: 1 addition & 1 deletion src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const propTypes = {
};

const defaultProps = {
color: 'primary',
color: 'secondary',
tag: 'button'
};

Expand Down
31 changes: 9 additions & 22 deletions src/DropdownToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import Button from './Button';

const propTypes = {
caret: PropTypes.bool,
children: PropTypes.node.isRequired,
children: PropTypes.node,
className: PropTypes.any,
color: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
'data-toggle': PropTypes.string,
Expand All @@ -18,7 +18,7 @@ const defaultProps = {
'data-toggle': 'dropdown',
'aria-haspopup': true,
color: 'secondary',
tag: 'button'
tag: Button
};

const contextTypes = {
Expand Down Expand Up @@ -47,39 +47,26 @@ class DropdownToggle extends React.Component {
}

render() {
const { className, children, caret, color, split, tag: Tag, ...props } = this.props;
const { className, caret, split, tag: Tag, ...props } = this.props;
const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
const classes = classNames(
className,
{
'dropdown-toggle': caret,
'dropdown-toggle': caret || split,
'dropdown-toggle-split': split,
active: this.context.isOpen,
}
);
const buttonClasses = classNames(
classes,
'btn',
'btn-' + color
);

if (React.isValidElement(children)) {
return React.cloneElement(React.Children.only(children), {
...props,
className: classes,
onClick: this.onClick,
'aria-haspopup': true,
'aria-expanded': this.context.isOpen
});
}
const children = props.children || <span className="sr-only">{ariaLabel}</span>;

return (
<Tag
{...props}
children={children}
className={buttonClasses}
className={classes}
onClick={this.onClick}
aria-haspopup="true"
aria-expanded={this.context.isOpen}
children={children}
/>
);
}
Expand Down
4 changes: 2 additions & 2 deletions test/Button.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('Button', () => {
it('should render buttons with default color', () => {
const wrapper = shallow(<Button>Default Button</Button>);

expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.hasClass('btn-secondary')).toBe(true);
});

it('should render buttons with other colors', () => {
Expand All @@ -40,7 +40,7 @@ describe('Button', () => {
it('should render buttons with outline variant', () => {
const wrapper = shallow(<Button outline>Default Button</Button>);

expect(wrapper.hasClass('btn-outline-primary')).toBe(true);
expect(wrapper.hasClass('btn-outline-secondary')).toBe(true);
});

it('should render buttons with outline variant with different colors', () => {
Expand Down
Loading