8000 Button: Inital commit of button refactor · ashishkummar/jquery-ui@c33af61 · GitHub
[go: up one dir, main page]
Skip to content

Commit c33af61

Browse files
arschmitzarschmitz
committed
Button: Inital commit of button refactor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
1 parent e383e5e commit c33af61

File tree

13 files changed

+356
-766
lines changed

13 files changed

+356
-766
lines changed

‎demos/button/default.html

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( "input[type=submit], a, button" )
14+
$( ".widget input[type=submit], .widget a, .widget button" )
1515
.button()
1616
.click(function( event ) {
1717
event.preventDefault();
@@ -20,12 +20,20 @@
2020
</script>
2121
</head>
2222
<body>
23+
<div class="widget">
24+
<h1>Widget Buttons</h1>
25+
<button>A button element</button>
2326

24-
<button>A button element</button>
27+
<input type="submit" value="A submit button">
2528

26-
<input type="submit" value="A submit button">
29+
<a href="#">An anchor</a>
30+
</div>
31+
<h1>CSS Buttons</h1>
32+
<button class="ui-button ui-widget ui-corner-all">A button element</button>
33+
34+
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
2735

28-
<a href="#">An anchor</a>
36+
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
2937

3038
<div class="demo-description">
3139
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>

‎demos/button/icons.html

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,39 +11,58 @@
1111
<link rel="stylesheet" href="../demos.css">
1212
<script>
1313
$(function() {
14-
$( "button:first" ).button({
15-
icons: {
16-
primary: "ui-icon-locked"
17-
},
18-
text: false
14+
$( ".widget button, .widget a" ).first().button({
15+
icon: "ui-icon-gear",
16+
showLabel: false
1917
}).next().button({
20-
icons: {
21-
primary: "ui-icon-locked"
22-
}
18+
icon: "ui-icon-triangle-1-w"
2319
}).next().button({
24-
icons: {
25-
primary: "ui-icon-gear",
26-
secondary: "ui-icon-triangle-1-s"
27-
}
20+
icon: "ui-icon-triangle-1-e",
21+
iconPosition: "end"
2822
}).next().button({
29-
icons: {
30-
primary: "ui-icon-gear",
31-
secondary: "ui-icon-triangle-1-s"
32-
},
33-
text: false
23+
icon: "ui-icon-triangle-1-s",
24+
iconPosition: "bottom"
25+
}).next().button({
26+
icon: "ui-icon-triangle-1-n",
27+
iconPosition: "top"
3428
});
3529
});
3630
</script>
3731
</head>
3832
<body>
39-
40-
<button>Button with icon only</button>
41-
<button>Button with icon on the left</button>
42-
<button>Button with two icons</button>
43-
<button>Button with two icons and no text</button>
44-
4533
<div class="demo-description">
4634
<p>Some buttons with various combinations of text and icons.</p>
35+
</div>
36+
<div class="widget">
37+
<h1>Widget</h1>
38+
<a>Button with icon only</a>
39+
<button>Button with icon on the left</button>
40+
<button>Button with icon on the right</button>
41+
<button>Button with icon on the bottom</button>
42+
</div>
43+
<div class="css">
44+
<h1>CSS</h1>
45+
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
46+
<span class="ui-icon ui-icon-gear"></span>
47+
Button with icon only
48+
</button>
49+
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
50+
<span class="ui-icon ui-icon-triangle-1-w"></span>
51+
Button with icon on the left
52+
</button>
53+
<button class="ui-button ui-widget ui-corner-all ui-icon-end">
54+
<span class="ui-icon ui-icon-triangle-1-e"></span>
55+
Button with icon on the right
56+
</button>
57+
<button class="ui-button ui-widget ui-corner-all ui-icon-bottom">
58+
<span class="ui-icon ui-icon-triangle-1-s"></span>
59+
Button with icon on bottom
60+
</button>
61+
<button class="ui-button ui-widget ui-corner-all ui-icon-top">
62+
<span class="ui-icon ui-icon-triangle-1-n"></span>
63+
Button with icon on top
64+
</button>
65+
4766
</div>
4867
</body>
4968
</html>

‎tests/unit/button/button.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
<div id="qunit"></div>
3434
<div id="qunit-fixture">
3535

36-
<div><button id="button" class="foo">Label</button></div>
36+
<div><button id="button">Label</button></div>
3737

3838
<div id="radio0" style="margin-top: 2em;">
3939
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>

‎tests/unit/button/button_common.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
TestHelpers.commonWidgetTests( "button", {
22
defaults: {
33
disabled: null,
4-
icons: {
5-
primary: null,
6-
secondary: null
7-
},
4+
showLabel: true,
85
label: null,
9-
text: true,
6+
icon: null,
7+
iconPosition: "beginning",
108

11-
// callbacks
9+
// Callbacks
1210
create: null
1311
}
1412
});

‎tests/unit/button/button_core.js

Lines changed: 7 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -5,220 +5,25 @@
55

66
(function($) {
77

8-
module("button: core");
8+
module( "Button: core" );
99

10-
test("checkbox", function() {
11-
expect( 4 );
12-
var input = $("#check"),
13-
label = $("label[for=check]");
14-
ok( input.is(":visible") );
15-
ok( label.is(":not(.ui-button)") );
16-
input.button();
17-
ok( input.is(".ui-helper-hidden-accessible") );
18-
ok( label.is(".ui-button") );
19-
});
20-
21-
test("radios", function() {
22-
expect( 4 );
23-
var inputs = $("#radio0 input"),
24-
labels = $("#radio0 label");
25-
ok( inputs.is(":visible") );
26-
ok( labels.is(":not(.ui-button)") );
27-
inputs.button();
28-
ok( inputs.is(".ui-helper-hidden-accessible") );
29-
ok( labels.is(".ui-button") );
30-
});
31-
32-
function assert(noForm, form1, form2) {
33-
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
34-
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
35-
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
36-
}
37-
38-
test("radio groups", function() {
39-
expect( 12 );
40-
$("input[type=radio]").button();
41-
assert(":eq(0)", ":eq(1)", ":eq(2)");
42-
43-
// click outside of forms
44-
$("#radio0 .ui-button:eq(1)").click();
45-
assert(":eq(1)", ":eq(1)", ":eq(2)");
46-
47-
// click in first form
48-
$("#radio1 .ui-button:eq(0)").click();
49-
assert(":eq(1)", ":eq(0)", ":eq(2)");
50-
51-
// click in second form
52-
$("#radio2 .ui-button:eq(0)").click();
53-
assert(":eq(1)", ":eq(0)", ":eq(0)");
54-
});
55-
56-
test( "radio groups - ignore elements with same name", function() {
57-
expect( 1 );
58-
var form = $( "form:first" ),
59-
radios = form.find( "[type=radio]" ).button(),
60-
checkbox = $( "<input>", {
61-
type: "checkbox",
62-
name: radios.attr( "name" )
63-
});
64-
65-
form.append( checkbox );
66-
radios.button( "refresh" );
67-
ok( true, "no exception from accessing button instance of checkbox" );
68-
});
69-
70-
test("input type submit, don't create child elements", function() {
10+
test( "Input type submit, don't create child elements", function() {
7111
expect( 2 );
7212
var input = $("#submit");
7313
deepEqual( input.children().length, 0 );
7414
input.button();
7515
deepEqual( input.children().length, 0 );
7616
});
7717

78-
test("buttonset", function() {
79-
expect( 6 );
80-
var set = $("#radio1").buttonset();
81-
ok( set.is(".ui-buttonset") );
82-
deepEqual( set.children(".ui-button").length, 3 );
83-
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
84-
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
85-
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
86-
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
87-
});
88-
89-
test("buttonset (rtl)", function() {
90-
expect( 6 );
91-
var set,
92-
parent = $("#radio1").parent();
93-
// Set to rtl
94-
parent.attr("dir", "rtl");
95-
96-
set = $("#radio1").buttonset();
97-
ok( set.is(".ui-buttonset") );
98-
deepEqual( set.children(".ui-button").length, 3 );
99-
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
100-
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
101-
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
102-
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
103-
});
104-
105-
// TODO: simulated click events don't behave like real click events in IE
106-
// remove this when simulate properly simulates this
107-
// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
108-
if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
109-
asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
110-
expect( 3 );
111-
112-
$("#check2").button().change( function() {
113-
var lbl = $( this ).button("widget");
114-
ok( this.checked, "checked ok" );
115-
ok( lbl.attr("aria-pressed") === "true", "aria ok" );
116-
ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
117-
});
118-
119-
// support: Opera
120-
// Opera doesn't trigger a change event when this is done synchronously.
< 10000 code>121-
// This seems to be a side effect of another test, but until that can be
122-
// tracked down, this delay will have to do.
123-
setTimeout(function() {
124-
$("#check2").button("widget").simulate("click");
125-
start();
126-
}, 1 );
127-
});
128-
}
129-
130-
test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
131-
expect( 5 );
132-
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
133-
group.find( "input[type=checkbox]" ).button();
134-
ok( group.find( "label" ).is( ".ui-button" ) );
135-
136-
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
137-
group.filter( "input[type=checkbox]" ).button();
138-
ok( group.filter( "label" ).is( ".ui-button" ) );
139-
140-
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
141-
group.find( "input[type=checkbox]" ).button();
142-
ok( group.filter( "label" ).is( ".ui-button" ) );
143-
144-
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
145-
group.find( "input[type=checkbox]" ).button();
146-
ok( group.find( "label" ).is( ".ui-button" ) );
147-
148-
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
149-
group.filter( "input[type=checkbox]" ).button();
150-
ok( group.find( "label" ).is( ".ui-button" ) );
151-
});
152-
153-
test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
154-
expect( 2 );
155-
$( "#radio01" ).next().addBack().hide();
156-
var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" });
157-
ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
158-
ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
159-
});
160-
161-
test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
162-
expect( 3 );
163-
$( "#radio0" ).hide();
164-
var set = $( "#radio0" ).buttonset();
165-
ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
166-
ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
167-
ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
168-
});
169-
170-
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {
171-
expect( 2 );
172-
var form = $( "<form>" +
173-
"<button></button>" +
174-
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
175-
"</form>" ),
176-
button = form.find( "button" ).button(),
177-
checkbox = form.find( "input[type=checkbox]" ).button();
178-
179-
checkbox.prop( "checked", false ).button( "refresh" );
180-
ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) );
181-
182-
form.get( 0 ).reset();
183-
184-
// #9213: If a button has been removed, refresh should not be called on it when
185-
// its corresponding form is reset.
186-
button.remove();
187-
188-
setTimeout(function() {
189-
ok( checkbox.button( "widget" ).hasClass( "ui-state-active" ));
190-
start();
191-
}, 1 );
192-
});
193-
194-
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
195-
expect( 2 );
196-
var check = $( "#check" ).button(),
197-
label = $( "label[for='check']" );
198-
ok( !label.is( ".ui-state-focus" ) );
199-
check.focus();
200-
setTimeout(function() {
201-
ok( label.is( ".ui-state-focus" ) );
202-
start();
203-
});
204-
});
205-
206-
test( "#7534 - Button label selector works for ids with \":\"", function() {
207-
expect( 1 );
208-
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
209-
group.find( "input" ).button();
210-
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
211-
});
212-
213-
asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() {
18+
asyncTest( "Disabled button maintains ui-state-focus", function() {
21419
expect( 2 );
21520
var element = $( "#button1" ).button();
216-
element[ 0 ].focus();
21+
element.simulate( "focus" );
21722
setTimeout(function() {
218-
ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" );
23+
ok( element.is( ":focus" ), "Button is focused" );
21924
element.button( "disable" );
220-
ok( !element.hasClass( "ui-state-focus" ),
221-
"button does not have ui-state-focus when disabled" );
25+
ok( !element.is( ":focus" ),
26+
"Button has had focus removed" );
22227
start();
22328
});
22429
});

‎tests/unit/button/button_events.js

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,16 @@
33
*/
44
(function($) {
55

6-
module("button: events");
6+
module( "Button: events" );
77

8-
test("buttonset works with single-quote named elements (#7505)", function() {
9-
expect( 1 );
10-
$("#radio3").buttonset();
11-
$("#radio33").click( function(){
12-
ok( true, "button clicks work with single-quote named elements" );
13-
}).click();
14-
});
15-
16-
asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() {
8+
asyncTest( "When button loses focus, ensure active state is removed", function() {
179
expect( 1 );
1810

1911
var element = $( "#button" ).button();
2012

2113
element.one( "keypress", function() {
2214
element.one( "blur", function() {
23-
ok( !element.is(".ui-state-active"), "button loses active state appropriately" );
15+
ok( !element.is( ".ui-state-active" ), "button loses active state appropriately" );
2416
start();
2517
}).blur();
2618
});

0 commit comments

Comments
 (0)
0