Skip to content

Commit 346501e

Browse files
mtscout6mtscout6
committed
[changed] DropdownButton, SplitButton, DropdownMenu, MenuItem completely rewritten
Adds: - Keyboard Navigation - Aria properties for Assistive Technology - Option to use custom menu with any of the dropdown variations - `NavDropdown` component (Similar to `DropdownButton` but specifically for use within `Nav` components. - `DropdownToggle` Component which can be used as an alternative to the `DropdownButton` `title` prop. Can either be directly imported or used as a static property of the `DropdownButton` with `DropdownButton.Toggle`. _(Useful should you want to use glyphicons or custom html within the toggle that's not a simple string.)_ - `SplitToggle` Similar to the `DropdownToggle` but targeted at the `SplitButton`'s toggle. - Generic `Dropdown` component for easy dropdown customization. Changed: - Event handling of all these components to be in line with react-bootstrap#419 - Written with ES6 class syntax Removed: - DropdownStateMixin - Everything is using ES6 class syntax so no more mixin usage
1 parent 6f13e04 commit 346501e

55 files changed

Lines changed: 2150 additions & 938 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.ackrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
--ignore-dir=.coverage
12
--ignore-dir=lib
23
--ignore-dir=dist
34
--ignore-dir=amd
@@ -7,3 +8,4 @@
78
--ignore-dir=tmp-bower-repo
89
--ignore-file=match:test_bundle.js
910
--ignore-file=match:components.html
11+
--ignore-file=match:.orig

‎.eslintrc‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"parser": "babel-eslint",
1111
"plugins": [
1212
"react",
13-
"babel"
13+
"babel",
14+
"lodash"
1415
],
1516
"rules": {
1617
"constructor-super": 2,
@@ -32,11 +33,12 @@
3233
"react/no-did-mount-set-state": 2,
3334
"react/no-did-update-set-state": 2,
3435
"react/no-multi-comp": 2,
35-
"react/prop-types": [2, { "ignore": [ "children", "className" ] }],
36+
"react/prop-types": [1, { "ignore": [ "children", "className" ] }],
3637
"react/react-in-jsx-scope": 2,
3738
"react/self-closing-comp": 2,
3839
"react/wrap-multilines": 2,
3940
"react/jsx-uses-vars": 2,
41+
"lodash/import": 2,
4042
"space-infix-ops": 2,
4143
"strict": [2, "never"]
4244
}

‎.projections.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"src/*.js": { "alternate": "test/{}Spec.js" },
3+
"test/*Spec.js": { "alternate": "src/{}.js" }
4+
}

‎docs/assets/style.css‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ body {
3636
}
3737
}
3838

39-
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
39+
.bs-docs-nav .navbar-brand {
4040
color: #00d8ff;
4141
}
4242

@@ -173,6 +173,29 @@ body {
173173

174174
}
175175

176+
.bs-example .super-colors {
177+
background: -moz-linear-gradient( top ,
178+
rgba(255, 0, 0, 1) 0%,
179+
rgba(255, 255, 0, 1) 15%,
180+
rgba(0, 255, 0, 1) 30%,
181+
rgba(0, 255, 255, 1) 50%,
182+
rgba(0, 0, 255, 1) 65%,
183+
rgba(255, 0, 255, 1) 80%,
184+
rgba(255, 0, 0, 1) 100%);
185+
background: -webkit-gradient(linear, left top, left bottom,
186+
color-stop(0%, rgba(255, 0, 0, 1)),
187+
color-stop(15%, rgba(255, 255, 0, 1)),
188+
color-stop(30%, rgba(0, 255, 0, 1)),
189+
color-stop(50%, rgba(0, 255, 255, 1)),
190+
color-stop(65%, rgba(0, 0, 255, 1)),
191+
color-stop(80%, rgba(255, 0, 255, 1)),
192+
color-stop(100%, rgba(255, 0, 0, 1)));
193+
}
194+
195+
/*.bs-example .custom-menu > ul > li {
196+
padding: 0 20px;
197+
}*/
198+
176199
.anchor,
177200
.anchor:hover,
178201
.anchor:active,
@@ -199,3 +222,13 @@ h4:hover .anchor-icon,
199222
h4 a:focus .anchor-icon {
200223
opacity: 0.5;
201224
}
225+
226+
.prop-desc pre {
227+
border-radius: 0;
228+
border-width: 0;
229+
border-left-width: 3px;
230+
}
231+
232+
.prop-desc-heading {
233+
margin-bottom: 10px;
234+
}

‎docs/examples/.eslintrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
"Carousel",
2020
"CarouselItem",
2121
"Col",
22+
"Dropdown",
2223
"DropdownButton",
24+
"DropdownMenu",
2325
"FormControls",
2426
"Glyphicon",
2527
"Grid",
@@ -30,6 +32,7 @@
3032
"ListGroupItem",
3133
"Nav",
3234
"Navbar",
35+
"NavDropdown",
3336
"NavItem",
3437
"MenuItem",
3538
"Modal",

‎docs/examples/ButtonGroupJustified.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const buttonGroupInstance = (
22
<ButtonGroup justified>
33
<Button href='#'>Left</Button>
44
<Button href='#'>Middle</Button>
5-
<DropdownButton title='Dropdown'>
5+
<DropdownButton title='Dropdown' id='bg-justified-dropdown'>
66
<MenuItem eventKey='1'>Dropdown link</MenuItem>
77
<MenuItem eventKey='2'>Dropdown link</MenuItem>
88
</DropdownButton>

‎docs/examples/ButtonGroupNested.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const buttonGroupInstance = (
22
<ButtonGroup>
33
<Button>1</Button>
44
<Button>2</Button>
5-
<DropdownButton title='Dropdown'>
5+
<DropdownButton title='Dropdown' id='bg-nested-dropdown'>
66
<MenuItem eventKey='1'>Dropdown link</MenuItem>
77
<MenuItem eventKey='2'>Dropdown link</MenuItem>
88
</DropdownButton>

‎docs/examples/ButtonGroupVertical.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ const buttonGroupInstance = (
22
<ButtonGroup vertical>
33
<Button>Button</Button>
44
<Button>Button</Button>
5-
<DropdownButton title='Dropdown'>
5+
<DropdownButton title='Dropdown' id='bg-vertical-dropdown-1'>
66
<MenuItem eventKey='1'>Dropdown link</MenuItem>
77
<MenuItem eventKey='2'>Dropdown link</MenuItem>
88
</DropdownButton>
99
<Button>Button</Button>
1010
<Button>Button</Button>
11-
<DropdownButton title='Dropdown'>
11+
<DropdownButton title='Dropdown' id='bg-vertical-dropdown-2'>
1212
<MenuItem eventKey='1'>Dropdown link</MenuItem>
1313
<MenuItem eventKey='2'>Dropdown link</MenuItem>
1414
</DropdownButton>
15-
<DropdownButton title='Dropdown'>
15+
<DropdownButton title='Dropdown' id='bg-vertical-dropdown-3'>
1616
<MenuItem eventKey='1'>Dropdown link</MenuItem>
1717
<MenuItem eventKey='2'>Dropdown link</MenuItem>
1818
</DropdownButton>

‎docs/examples/CollapsibleNav.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ const navbarInstance = (
44
<Nav navbar>
55
<NavItem eventKey={1} href='#'>Link</NavItem>
66
<NavItem eventKey={2} href='#'>Link</NavItem>
7-
<DropdownButton eventKey={3} title='Dropdown'>
7+
<NavDropdown eventKey={3} title='Dropdown' id='collapsible-nav-dropdown'>
88
<MenuItem eventKey='1'>Action</MenuItem>
99
<MenuItem eventKey='2'>Another action</MenuItem>
1010
<MenuItem eventKey='3'>Something else here</MenuItem>
1111
<MenuItem divider />
1212
<MenuItem eventKey='4'>Separated link</MenuItem>
13-
</DropdownButton>
13+
</NavDropdown>
1414
</Nav>
1515
<Nav navbar right>
1616
<NavItem eventKey={1} href='#'>Link Right</NavItem>

‎docs/examples/DropdownButtonBasic.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', '
22

33
function renderDropdownButton (title, i) {
44
return (
5-
<DropdownButton bsStyle={title.toLowerCase()} title={title} key={i}>
5+
<DropdownButton bsStyle={title.toLowerCase()} title={title} key={i} id={`dropdown-basic-${i}`}>
66
<MenuItem eventKey='1'>Action</MenuItem>
77
<MenuItem eventKey='2'>Another action</MenuItem>
88
<MenuItem eventKey='3' active>Active Item</MenuItem>

0 commit comments

Comments
 (0)