Skip to content

Commit 778f82d

Browse files
eddywashereeddywashere
committed
docs(Dropdown): update based on component changes
1 parent 59d6719 commit 778f82d

5 files changed

Lines changed: 46 additions & 37 deletions

File tree

‎docs/lib/Components/ButtonDropdownPage.js‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ DropdownToggle.propTypes = {
6868
<h3>Single button dropdowns</h3>
6969
<div className="docs-example">
7070
<div>
71-
<Example color="secondary" text="Default" />
7271
<Example color="primary" text="Primary" />
72+
<Example color="secondary" text="Secondary" />
7373
<Example color="success" text="Success" />
7474
<Example color="info" text="Info" />
7575
<Example color="warning" text="Warning" />
@@ -95,8 +95,8 @@ DropdownToggle.propTypes = {
9595
<h3>Split button dropdowns</h3>
9696
<div className="docs-example">
9797
<div>
98-
<ExampleSplit color="secondary" text="Default" />
9998
<ExampleSplit color="primary" text="Primary" />
99+
<ExampleSplit color="secondary" text="Secondary" />
100100
<ExampleSplit color="success" text="Success" />
101101
<ExampleSplit color="info" text="Info" />
102102
<ExampleSplit color="warning" text="Warning" />
@@ -107,9 +107,7 @@ DropdownToggle.propTypes = {
107107
<PrismCode className="language-jsx">
108108
{`<ButtonDropdown isOpen={isOpen} toggle={toggle}>
109109
<Button id="caret" color="primary">{this.props.text}</Button>
110-
<DropdownToggle caret>
111-
<Button color="primary"><span className="sr-only">Toggle Dropdown</span></Button>
112-
</DropdownToggle>
110+
<DropdownToggle caret color="primary" />
113111
<DropdownMenu>
114112
<DropdownItem header>Header</DropdownItem>
115113
<DropdownItem disabled>Action</DropdownItem>
@@ -124,8 +122,8 @@ DropdownToggle.propTypes = {
124122
<div className="docs-example">
125123
<div>
126124
<ButtonDropdown isOpen={this.state.btnLg} toggle={() => { this.setState({ btnLg: !this.state.btnLg }); }}>
127-
<DropdownToggle caret>
128-
<Button size="lg">Large Button</Button>
125+
<DropdownToggle caret size="lg">
126+
Large Button
129127
</DropdownToggle>
130128
<DropdownMenu>
131129
<DropdownItem>Another Action</DropdownItem>
@@ -135,8 +133,8 @@ DropdownToggle.propTypes = {
135133
</div>
136134
<div className="m-t-1">
137135
<ButtonDropdown isOpen={this.state.btnSm} toggle={() => { this.setState({ btnSm: !this.state.btnSm }); }}>
138-
<DropdownToggle caret>
139-
<Button size="sm">Small Button</Button>
136+
<DropdownToggle caret size="sm">
137+
Small Button
140138
</DropdownToggle>
141139
<DropdownMenu>
142140
<DropdownItem>Another Action</DropdownItem>
@@ -148,8 +146,8 @@ DropdownToggle.propTypes = {
148146
<pre>
149147
<PrismCode className="language-jsx">
150148
{`<ButtonDropdown isOpen={isOpen} toggle={toggle}>
151-
<DropdownToggle caret>
152-
<Button size="lg">Large Button</Button>
149+
<DropdownToggle caret size="lg">
150+
Large Button
153151
</DropdownToggle>
154152
<DropdownMenu>
155153
<DropdownItem>Another Action</DropdownItem>
@@ -158,8 +156,8 @@ DropdownToggle.propTypes = {
158156
</ButtonDropdown>
159157
160158
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
161-
<DropdownToggle caret>
162-
<Button size="sm">Small Button</Button>
159+
<DropdownToggle caret size="sm">
160+
Small Button
163161
</DropdownToggle>
164162
<DropdownMenu>
165163
<DropdownItem>Another Action</DropdownItem>
@@ -172,8 +170,8 @@ DropdownToggle.propTypes = {
172170
<div className="docs-example">
173171
<div>
174172
<ButtonDropdown dropup isOpen={this.state.btnDropup} toggle={() => { this.setState({ btnDropup: !this.state.btnDropup }); }}>
175-
<DropdownToggle caret>
176-
<Button size="lg">Dropup</Button>
173+
<DropdownToggle caret size="lg">
174+
Dropup
177175
</DropdownToggle>
178176
<DropdownMenu>
179177
<DropdownItem>Another Action</DropdownItem>
@@ -185,8 +183,8 @@ DropdownToggle.propTypes = {
185183
<pre>
186184
<PrismCode className="language-jsx">
187185
{`<ButtonDropdown isOpen={isOpen} toggle={toggle} dropup>
188-
<DropdownToggle caret>
189-
<Button>Dropup</Button>
186+
<DropdownToggle caret caret size="lg">
187+
Dropup
190188
</DropdownToggle>
191189
<DropdownMenu>
192190
<DropdownItem>Another Action</DropdownItem>

‎docs/lib/Components/ButtonGroupPage.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export default class ButtonGroupPage extends React.Component {
122122
<Button>2</Button>
123123
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
124124
<DropdownToggle caret>
125-
<Button>Dropdown</Button>
125+
Dropdown
126126
</DropdownToggle>
127127
<DropdownMenu>
128128
<DropdownItem>Dropdown Link</DropdownItem>
@@ -139,7 +139,7 @@ export default class ButtonGroupPage extends React.Component {
139139
<Button>2</Button>
140140
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
141141
<DropdownToggle caret>
142-
<Button>Dropdown</Button>
142+
Dropdown
143143
</DropdownToggle>
144144
<DropdownMenu>
145145
<DropdownItem>Dropdown Link</DropdownItem>
@@ -156,7 +156,7 @@ export default class ButtonGroupPage extends React.Component {
156156
<Button>2</Button>
157157
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
158158
<DropdownToggle caret>
159-
<Button>Dropdown</Button>
159+
Dropdown
160160
</DropdownToggle>
161161
<DropdownMenu>
162162
<DropdownItem>Dropdown Link</DropdownItem>
@@ -172,7 +172,7 @@ export default class ButtonGroupPage extends React.Component {
172172
<Button>2</Button>
173173
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
174174
<DropdownToggle caret>
175-
<Button>Dropdown</Button>
175+
Dropdown
176176
</DropdownToggle>
177177
<DropdownMenu>
178178
<DropdownItem>Dropdown Link</DropdownItem>

‎docs/lib/Components/ButtonsPage.js‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,12 @@ export default class ButtonsPage extends React.Component {
2929
{`Button.propTypes = {
3030
active: PropTypes.bool,
3131
block: PropTypes.bool,
32-
color: PropTypes.string,
32+
color: PropTypes.string, // default: 'secondary'
3333
disabled: PropTypes.bool,
3434
3535
// Pass in a Component to override default button element
3636
// example: react-router Link
37+
// default: 'button'
3738
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
3839
3940
onClick: PropTypes.func,
@@ -52,54 +53,54 @@ export default class ButtonsPage extends React.Component {
5253
</pre>
5354
<h3>Sizes</h3>
5455
<div className="docs-example">
55-
<Button size="lg">Large Button</Button>
56+
<Button color="primary" size="lg">Large Button</Button>
5657
<Button color="secondary" size="lg">Large Button</Button>
5758
</div>
5859
<pre>
5960
<PrismCode className="language-jsx">
60-
{`<Button size="lg">Large Button</Button>
61+
{`<Button color="primary" size="lg">Large Button</Button>
6162
<Button color="secondary" size="lg">Large Button</Button>`}
6263
</PrismCode>
6364
</pre>
6465
<div className="docs-example">
65-
<Button size="sm">Small Button</Button>
66+
<Button color="primary" size="sm">Small Button</Button>
6667
<Button color="secondary" size="sm">Small Button</Button>
6768
</div>
6869
<pre>
6970
<PrismCode className="language-jsx">
70-
{`<Button size="sm">Small Button</Button>
71+
{`<Button color="primary" size="sm">Small Button</Button>
7172
<Button color="secondary" size="sm">Small Button</Button>`}
7273
</PrismCode>
7374
</pre>
7475
<div className="docs-example">
75-
<Button size="lg" block>Block level button</Button>
76+
<Button color="primary" size="lg" block>Block level button</Button>
7677
<Button color="secondary" size="lg" block>Block level button</Button>
7778
</div>
7879
<pre>
7980
<PrismCode className="language-jsx">
80-
{`<Button size="lg" block>Block level button</Button>
81+
{`<Button color="primary" size="lg" block>Block level button</Button>
8182
<Button color="secondary" size="lg" block>Block level button</Button>`}
8283
</PrismCode>
8384
</pre>
8485
<h3>Active State</h3>
8586
<div className="docs-example">
86-
<Button size="lg" active>Primary link</Button>
87+
<Button color="primary" size="lg" active>Primary link</Button>
8788
<Button color="secondary" size="lg" active>Link</Button>
8889
</div>
8990
<pre>
9091
<PrismCode className="language-jsx">
91-
{`<Button size="lg" active>Primary link</Button>
92+
{`<Button color="primary" size="lg" active>Primary link</Button>
9293
<Button color="secondary" size="lg" active>Link</Button>`}
9394
</PrismCode>
9495
</pre>
9596
<h3>Disabled State</h3>
9697
<div className="docs-example">
97-
<Button size="lg" disabled>Primary button</Button>
98+
<Button color="primary" size="lg" disabled>Primary button</Button>
9899
<Button color="secondary" size="lg" disabled>Button</Button>
99100
</div>
100101
<pre>
101102
<PrismCode className="language-jsx">
102-
{`<Button size="lg" disabled>Primary button</Button>
103+
{`<Button color="primary" size="lg" disabled>Primary button</Button>
103104
<Button color="secondary" size="lg" disabled>Button</Button>`}
104105
</PrismCode>
105106
</pre>

‎docs/lib/Components/DropdownsPage.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
22
import React from 'react';
3+
import { Link } from 'react-router';
34
import { PrismCode } from 'react-prism';
45
import Helmet from 'react-helmet';
56
import {
@@ -32,6 +33,13 @@ export default class DropdownPage extends React.Component {
3233
<div>
3334
<Helmet title="Dropdowns" />
3435
<h3>Dropdowns</h3>
36+
<p>
37+
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.
38+
</p>
39+
<h4>Advanced Positioning</h4>
40+
<p>
41+
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.
42+
</p>
3543
<div className="docs-example">
3644
<DropdownExample />
3745
</div>
@@ -48,18 +56,22 @@ export default class DropdownPage extends React.Component {
4856
dropup: PropTypes.bool,
4957
group: PropTypes.bool,
5058
isOpen: PropTypes.bool,
51-
tag: PropTypes.string,
59+
tag: PropTypes.string, // default: 'div'
5260
tether: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
5361
toggle: PropTypes.func
5462
};
5563
5664
DropdownToggle.propTypes = {
5765
caret: PropTypes.bool,
5866
color: PropTypes.string,
67+
className: PropTypes.any,
5968
disabled: PropTypes.bool,
6069
onClick: PropTypes.func,
6170
'data-toggle': PropTypes.string,
62-
'aria-haspopup': PropTypes.bool
71+
'aria-haspopup': PropTypes.bool,
72+
73+
// Defaults to Button component
74+
tag: PropTypes.any
6375
};`}
6476
</PrismCode>
6577
</pre>

‎docs/lib/examples/ButtonDropdownMultiSplit.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ export default class Example extends React.Component {
2121
return (
2222
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
2323
<Button id="caret" color={this.props.color}>{this.props.text}</Button>
24-
<DropdownToggle caret split>
25-
<Button color={this.props.color}><span className="sr-only">Toggle Dropdown</span></Button>
26-
</DropdownToggle>
24+
<DropdownToggle split color={this.props.color} />
2725
<DropdownMenu>
2826
<DropdownItem header>Header</DropdownItem>
2927
<DropdownItem disabled>Action</DropdownItem>

0 commit comments

Comments
 (0)