Skip to content

Commit 346dc7b

Browse files
davidtheclarkdavidtheclark
committed
Initial commit
1 parent 2792b74 commit 346dc7b

29 files changed

+1772
-1
lines changed

‎.editorconfig

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
charset = utf-8

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
**/*-bundle.js

‎.eslintrc

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"env": {
3+
"node": true,
4+
"browser": true,
5+
"es6": true
6+
},
7+
"ecmaFeatures": {
8+
"modules": true,
9+
"jsx": true
10+
},
11+
"plugins": [
12+
"react"
13+
],
14+
"rules": {
15+
"radix": 2,
16+
"wrap-iife": 2,
17+
"brace-style": 0,
18+
"comma-style": 2,
19+
"no-lonely-if": 2,
20+
"no-nested-ternary": 2,
21+
"no-use-before-define": [2, "nofunc"],
22+
"quotes": [2, "single"],
23+
"space-after-function-name": [2, "never"],
24+
"space-after-keywords": [2, "always"],
25+
"space-before-blocks": [2, "always"],
26+
"space-in-parens": [2, "never"],
27+
"space-unary-ops": 2,
28+
29+
"react/jsx-no-undef": 2,
30+
"react/jsx-uses-react": 2,
31+
"react/jsx-uses-vars": 2,
32+
"react/react-in-jsx-scope": 2
33+
}
34+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
spec
3+
**/*-bundle.js

‎.travis.yml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
language: node_js
2+
node_js:
3+
- "0.10"
4+
- "0.12"
5+
- "iojs"
6+
# cf. http://karma-runner.github.io/0.12/plus/travis.html
7+
before_script:
8+
- export DISPLAY=:99.0
9+
- sh -e /etc/init.d/xvfb start

‎LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 David Clark
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

‎README.md

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
11
# react-aria-menubutton
2-
A React MenuButton widget aligned with the WAI-ARIA Design Pattern
2+
3+
A dropdown menubutton that
4+
5+
- is a React component;
6+
- follows [the WAI-ARIA Menu Button Design Pattern](http://www.w3.org/TR/wai-aria-practices/#menubutton) for maximal accessibility;
7+
- uses [SUIT CSS conventions](https://github.com/suitcss/suit/blob/master/doc/README.md) for maximal themeability;
8+
- is very thoroughly tested.
9+
10+
Have a look around.
11+
12+
Yet to come:
13+
14+
- Documentation
15+
- gh-pages demo

‎css/base.css

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.AriaMenuButton {
2+
position: relative;
3+
}
4+
5+
.AriaMenuButton-trigger {
6+
cursor: pointer;
7+
display: inline-block;
8+
}
9+
10+
.AriaMenuButton-menu {
11+
background: #fff;
12+
border: 1px solid;
13+
list-style-type: none;
14+
padding-left: 0;
15+
position: absolute;
16+
top: 100%;
17+
left: 0;
18+
z-index: 99;
19+
}
20+
21+
.AriaMenuButton-menu--flushRight {
22+
right: 0;
23+
}
24+
25+
.AriaMenuButton-menuItem {
26+
cursor: pointer;
27+
padding: 5px 10px;
28+
min-width: 125px;
29+
max-width: 200px;
30+
}
31+
32+
.AriaMenuButton-menuItem.is-selected {
33+
cursor: default;
34+
font-weight: bold;
35+
}

‎css/bootstrap.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.AriaMenuButton {
2+
position: relative;
3+
}
4+
5+
.AriaMenuButton-trigger {
6+
cursor: pointer;
7+
display: inline-block;
8+
background: #fff;
9+
border: 1px solid #ccc;
10+
border-radius: 4px;
11+
padding: 6px 12px;
12+
transition: background-color 0.2s linear;
13+
}
14+
15+
.AriaMenuButton-trigger::after {
16+
content: "";
17+
display: inline-block;
18+
margin-left: 5px;
19+
position: relative;
20+
top: 3px;
21+
border-color: currentColor transparent transparent;
22+
border-width: 5px 4px;
23+
border-style: solid;
24+
}
25+
26+
.AriaMenuButton-trigger:hover,
27+
.AriaMenuButton-trigger:focus,
28+
.AriaMenuButton-trigger.is-open {
29+
background: #e6e6e6;
30+
border-color: #adadad;
31+
}
32+
33+
.AriaMenuButton-trigger.is-open {
34+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
35+
}
36+
37+
.AriaMenuButton-menu {
38+
background: #fff;
39+
border: 1px solid rgba(0, 0, 0, 0.15);
40+
list-style-type: none;
41+
position: absolute;
42+
top: 100%;
43+
left: 0;
44+
z-index: 99;
45+
padding-left: 0;
46+
border-radius: 4px;
47+
margin: 2px 0 0 0;
48+
padding: 5px 0;
49+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
50+
}
51+
52+
.AriaMenuButton-menu--flushRight {
53+
right: 0;
54+
}
55+
56+
.AriaMenuButton-menuItem {
57+
cursor: pointer;
58+
padding: 5px 10px;
59+
min-width: 125px;
60+
max-width: 200px;
61+
}
62+
63+
.AriaMenuButton-menuItem:hover,
64+
.AriaMenuButton-menuItem:focus {
65+
background-color: #f5f5f5;
66+
color: #262626;
67+
}
68+
69+
.AriaMenuButton-menuItem.is-selected {
70+
cursor: default;
71+
font-weight: bold;
72+
}

‎css/foundation.css

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.AriaMenuButton {
2+
position: relative;
3+
}
4+
5+
.AriaMenuButton-trigger {
6+
cursor: pointer;
7+
display: inline-block;
8+
background: #008CBA;
9+
color: #fff;
10+
padding: 0.88889rem 1.77778rem 0.94444rem 1.77778rem;
11+
transition: background-color 300ms ease-out;
12+
}
13+
14+
.AriaMenuButton-trigger:hover,
15+
.AriaMenuButton-trigger:focus {
16+
background: #007095;
17+
}
18+
19+
.AriaMenuButton-trigger::after {
20+
content: "";
21+
display: inline-block;
22+
margin-left: 20px;
23+
position: relative;
24+
top: 3px;
25+
border-color: currentColor transparent transparent;
26+
border-width: 5px 5px;
27+
border-style: solid;
28+
}
29+
30+
.AriaMenuButton-menu {
31+
background: #fff;
32+
border: 1px solid #ccc;
33+
list-style-type: none;
34+
padding-left: 0;
35+
position: absolute;
36+
top: 100%;
37+
left: 0;
38+
z-index: 99;
39+
margin: 2px 0 0 0;
40+
width: 100%;
41+
max-width: 200px;
42+
}
43+
44+
.AriaMenuButton-menu--flushRight {
45+
right: 0;
46+
}
47+
48+
.AriaMenuButton-menu::before {
49+
border: inset 6px;
50+
content: "";
51+
display: block;
52+
height: 0;
53+
width: 0;
54+
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF rgba(0, 0, 0, 0);
55+
border-bottom-style: solid;
56+
position: absolute;
57+
top: -12px;
58+
left: 10px;
59+
z-index: 89;
60+
}
61+
62+
.AriaMenuButton-menu::after {
63+
border: inset 7px;
64+
content: "";
65+
display: block;
66+
height: 0;
67+
width: 0;
68+
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ccc rgba(0, 0, 0, 0);
69+
border-bottom-style: solid;
70+
position: absolute;
71+
top: -14px;
72+
left: 9px;
73+
z-index: 88;
74+
}
75+
76+
.AriaMenuButton-menuItem {
77+
cursor: pointer;
78+
color: #555;
79+
padding: 0.5rem;
80+
}
81+
82+
.AriaMenuButton-menuItem:hover,
83+
.AriaMenuButton-menuItem:focus {
84+
background: #EEE;
85+
}
86+
87+
.AriaMenuButton-menuItem.is-selected {
88+
cursor: default;
89+
font-weight: bold;
90+
}

‎css/github.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.AriaMenuButton {
2+
position: relative;
3+
}
4+
5+
.AriaMenuButton-trigger {
6+
cursor: pointer;
7+
display: inline-block;
8+
background-color: #EEE;
9+
background-image: linear-gradient(#FCFCFC, #EEE);
10+
border: 1px solid #D5D5D5;
11+
border-radius: 3px;
12+
font-weight: bold;
13+
padding: 6px 10px;
14+
}
15+
16+
.AriaMenuButton-trigger::after {
17+
content: "";
18+
display: inline-block;
19+
margin-left: 3px;
20+
position: relative;
21+
top: 3px;
22+
border-color: currentColor transparent transparent;
23+
border-width: 5px 4px;
24+
border-style: solid;
25+
}
26+
27+
.AriaMenuButton-trigger:hover,
28+
.AriaMenuButton-trigger:focus,
29+
.AriaMenuButton-trigger.is-open {
30+
background-color: #DDD;
31+
background-image: linear-gradient(#EEE, #DDD);
32+
border-color: #CCC;
33+
}
34+
35+
.AriaMenuButton-trigger.is-open {
36+
background-color: #DCDCDC;
37+
background-image: none;
38+
border-color: #B5B5B5;
39+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
40+
}
41+
42+
.AriaMenuButton-menu {
43+
background: #fff;
44+
border: 1px solid rgba(200, 200, 200, 0.4);
45+
list-style-type: none;
46+
position: absolute;
47+
top: 100%;
48+
left: 0;
49+
z-index: 99;
50+
padding-left: 0;
51+
border-radius: 3px;
52+
margin: 4px 0 0 0;
53+
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
54+
width: 215px;
55+
}
56+
57+
.AriaMenuButton-menu--flushRight {
58+
right: 0;
59+
}
60+
61+
.AriaMenuButton-menuItem {
62+
cursor: pointer;
63+
font-size: 12px;
64+
padding: 8px;
65+
border-bottom: 1px solid #EEE;
66+
}
67+
68+
.AriaMenuButton-li:first-of-type .AriaMenuButton-menuItem {
69+
border-top-right-radius: 3px;
70+
border-top-left-radius: 3px;
71+
}
72+
73+
.AriaMenuButton-li:last-of-type .AriaMenuButton-menuItem {
74+
border-bottom-right-radius: 3px;
75+
border-bottom-left-radius: 3px;
76+
}
77+
78+
.AriaMenuButton-menuItem:hover,
79+
.AriaMenuButton-menuItem:focus {
80+
background-color: #4183C4;
81+
color: #fff;
82+
}
83+
84+
.AriaMenuButton-menuItem.is-selected {
85+
cursor: default;
86+
font-weight: bold;
87+
}

0 commit comments

Comments
 (0)