Skip to content

Button icon span #1216

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

Closed
arschmitz wants to merge 37 commits into from
Closed

Button icon span #1216

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
d0d24a1
Button: Inital commit of button refactor
arschmitz Jan 22, 2014
cf6e119
Checkboxradio: inital commit of new widget
arschmitz Feb 5, 2014
747635a
Checkboxradio: add test suit
arschmitz Feb 10, 2014
b408636
squash: updating tests
arschmitz Mar 7, 2014
d344b50
Button: changing option text to showLabel to avoid confusion
arschmitz Mar 7, 2014
d903e1a
Checkboxradio: use control.labels if defined
arschmitz Mar 7, 2014
6591ad1
Checkboxradio: move inital dom manipulation into its own method
arschmitz Mar 12, 2014
b782bfc
squash: code cleanup
arschmitz Mar 12, 2014
19c6b9e
checkboxradio: fix label selection if control.labels length is 0
arschmitz Mar 12, 2014
3223c29
Button: fixing missed instances of text option switching to showLabel
arschmitz Mar 12, 2014
01c54ec
Button: Fixing issues found by jscs
arschmitz Mar 28, 2014
fe00326
Dialog: Updating dialog and tests for new button API
arschmitz Mar 28, 2014
35564dd
Button: simplifying _create by setting label option first
arschmitz Mar 28, 2014
0d71cbf
Button: updates based on pr review
arschmitz Apr 2, 2014
995a855
Controlgroup: initial css prototyping and updating of selectmenu
arschmitz Apr 9, 2014
f55d4ce
Button: updates to demos based on pr review
arschmitz Apr 23, 2014
1e225e7
Button: updating tests
arschmitz Apr 30, 2014
d566fec
Button: Update css based on pr comments
arschmitz Apr 30, 2014
1ccec99
Button: remove duplicate rule from core.css
arschmitz Apr 30, 2014
8d64f1f
Button: Updates based on pr comments
arschmitz May 14, 2014
21afafd
Checkboxradio: updates based on pr review
arschmitz May 15, 2014
661ce0e
Checkboxradio: updates based on pr review
arschmitz May 21, 2014
d3b0f85
Checkboxradio: add option and method tests
arschmitz Jul 16, 2014
0fead84
Revert "Controlgroup: initial css prototyping and updating of select"
arschmitz Jul 16, 2014
9b7dbc6
Button: comment out test thats failing only in phantom
arschmitz Jul 16, 2014
234aeb1
Checkboxradio: add visual focus outline to checkbox and radio buttons
arschmitz Jul 24, 2014
06455ac
Build: Remove .DS_Store file
arschmitz Aug 13, 2014
320e2ec
Checkboxradio: remove ui-state-active in destroy
arschmitz Aug 13, 2014
c485bc5
Checkboxradio: Properly label unit test link for checkboxradio
arschmitz Aug 13, 2014
4ab74f1
Button: updated options in visual tests and removed checkbox and
arschmitz Aug 13, 2014
bad64ec
Button: Fix vertical position of icon when font size has been changed
arschmitz Aug 13, 2014
d95139e
Checkboxradio: fix csslint issues
arschmitz Aug 13, 2014
b865d59
Button: fix incorrect option name in demo
arschmitz Aug 13, 2014
baf108e
Checkboxradio: do not update label in demo if it is an empty string
arschmitz Aug 13, 2014
841abaf
Checkboxradio: add missing classes in destroy
arschmitz Aug 13, 2014
48c7481
Theme: tone down visual focus outline
arschmitz Aug 13, 2014
dae9466
Button: fix htmllint issues
arschmitz Aug 13, 2014
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
Prev Previous commit
Next Next commit
Checkboxradio: inital commit of new widget
  • Loading branch information
@arschmitz
arschmitz committed Mar 28, 2014
commit cf6e11960ec539654c297f27eb95bbcb69198366
65 changes: 53 additions & 12 deletions demos/button/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,71 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/checkboxradio.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#check" ).button();
$( "#format" ).buttonset();
$( "form input" ).checkboxradio();
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 17, 2014

Choose a reason for hiding this comment

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

Store this selection and reuse it below.


$(".controls input, .controls select").on( "change", function(){
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 17, 2014

Choose a reason for hiding this comment

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

Whitespace. For the text input, keyup would help.

var option = $( this ).attr( "name" ),
value = $( this ).val();

if( $( this ).attr( "type" ) === "checkbox" ) {
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 17, 2014

Choose a reason for hiding this comment

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

I'd use this.type here.

Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 17, 2014

Choose a reason for hiding this comment

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

Or $( this ).is( "[type=checkbox] ") (five chars less!)

if( $( this ).is(":checked") ) {
value = true;
} else {
value = false;
}
}
$( "form input" ).checkboxradio( "option", option, value );
});
$( "#create" ).click( function(){
$( "form input" ).checkboxradio();
});
$( "#destroy" ).click( function(){
$( "form input" ).checkboxradio( "destroy" );
});
$( "#enable" ).click( function(){
$( "form input" ).checkboxradio( "enable");
});
$( "#disable" ).click( function(){
$( "form input" ).checkboxradio( "disable" );
});
$( "#refresh" ).click( function(){
$( "form input" ).checkboxradio( "refresh" );
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 17, 2014

Choose a reason for hiding this comment

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

This stuff could be refactored, using this.id as the method argument.

});
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>

<input type="checkbox" id="check" /><label for="check">Toggle</label>

<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
<div class="demo-description">
css for new checkbox widget
</div>
<div class="controls">
<button id="create">Create</button>
<button id="destroy">Destroy</button>
<button id="enable">Enable</button>
<button id="disable">Disable</button>
<button id="refresh">Refresh</button>
<input type="checkbox" id="icon" name="icon"><label for="icon">Icon</label>
<input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label>
<input type="text" id="label" name="label"><label for="label">Label</label>
</div>
<form>

<div class="demo-description">
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
<input type="checkbox" id="checkbox-1" />
<label for="checkbox-1">Checkbox widget sample</label>
<label for="checkbox-2">Checkbox widget sample<input type="checkbox" id="checkbox-2" /></label>

<input type="radio" id="radio-1" name="radio"/>
<label for="radio-1">Radio widget sample</label>
<label for="radio-2">Radio widget sample 2<input type="radio" id="radio-2"/></label>
<button type="reset">Reset</button>
</form>
</div>
</body>
</html>
8 changes: 3 additions & 5 deletions tests/unit/button/button_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
TestHelpers.commonWidgetTests( "button", {
defaults: {
disabled: null,
icons: {
primary: null,
secondary: null
},
label: null,
text: true,
label: null,
icon: null,
iconPosition: "begining",

// callbacks
create: null
Expand Down
201 changes: 3 additions & 198 deletions tests/unit/button/button_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,66 +7,6 @@

module("button: core");

test("checkbox", function() {
expect( 4 );
var input = $("#check"),
label = $("label[for=check]");
ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") );
input.button();
ok( input.is(".ui-helper-hidden-accessible") );
ok( label.is(".ui-button") );
});

test("radios", function() {
expect( 4 );
var inputs = $("#radio0 input"),
labels = $("#radio0 label");
ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") );
inputs.button();
ok( inputs.is(".ui-helper-hidden-accessible") );
ok( labels.is(".ui-button") );
});

function assert(noForm, form1, form2) {
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
}

test("radio groups", function() {
expect( 12 );
$("input[type=radio]").button();
assert(":eq(0)", ":eq(1)", ":eq(2)");

// click outside of forms
$("#radio0 .ui-button:eq(1)").click();
assert(":eq(1)", ":eq(1)", ":eq(2)");

// click in first form
$("#radio1 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(2)");

// click in second form
$("#radio2 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(0)");
});

test( "radio groups - ignore elements with same name", function() {
expect( 1 );
var form = $( "form:first" ),
radios = form.find( "[type=radio]" ).button(),
checkbox = $( "<input>", {
type: "checkbox",
name: radios.attr( "name" )
});

form.append( checkbox );
radios.button( "refresh" );
ok( true, "no exception from accessing button instance of checkbox" );
});

test("input type submit, don't create child elements", function() {
expect( 2 );
var input = $("#submit");
Expand All @@ -75,150 +15,15 @@ test("input type submit, don't create child elements", function() {
deepEqual( input.children().length, 0 );
});

test("buttonset", function() {
expect( 6 );
var set = $("#radio1").buttonset();
ok( set.is(".ui-buttonset") );
deepEqual( set.children(".ui-button").length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
});

test("buttonset (rtl)", function() {
expect( 6 );
var set,
parent = $("#radio1").parent();
// Set to rtl
parent.attr("dir", "rtl");

set = $("#radio1").buttonset();
ok( set.is(".ui-buttonset") );
deepEqual( set.children(".ui-button").length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
});

// TODO: simulated click events don't behave like real click events in IE
// remove this when simulate properly simulates this
// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
expect( 3 );

$("#check2").button().change( function() {
var lbl = $( this ).button("widget");
ok( this.checked, "checked ok" );
ok( lbl.attr("aria-pressed") === "true", "aria ok" );
ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
});

// support: Opera
// Opera doesn't trigger a change event when this is done synchronously.
// This seems to be a side effect of another test, but until that can be
// tracked down, this delay will have to do.
setTimeout(function() {
$("#check2").button("widget").simulate("click");
start();
}, 1 );
});
}

test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
expect( 5 );
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );

group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );

group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
group.find( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );

group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );

group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
});

test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
expect( 2 );
$( "#radio01" ).next().addBack().hide();
var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" });
ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
});

test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
expect( 3 );
$( "#radio0" ).hide();
var set = $( "#radio0" ).buttonset();
ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
});

asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {
expect( 2 );
var form = $( "<form>" +
"<button></button>" +
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
"</form>" ),
button = form.find( "button" ).button(),
checkbox = form.find( "input[type=checkbox]" ).button();

checkbox.prop( "checked", false ).button( "refresh" );
ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) );

form.get( 0 ).reset();

// #9213: If a button has been removed, refresh should not be called on it when
// its corresponding form is reset.
button.remove();

setTimeout(function() {
ok( checkbox.button( "widget" ).hasClass( "ui-state-active" ));
start();
}, 1 );
});

asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
expect( 2 );
var check = $( "#check" ).button(),
label = $( "label[for='check']" );
ok( !label.is( ".ui-state-focus" ) );
check.focus();
setTimeout(function() {
ok( label.is( ".ui-state-focus" ) );
start();
});
});

test( "#7534 - Button label selector works for ids with \":\"", function() {
expect( 1 );
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
group.find( "input" ).button();
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
});

asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() {
expect( 2 );
var element = $( "#button1" ).button();
element[ 0 ].focus();
setTimeout(function() {
ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" );
ok( element.is( ":focus" ), "button is focused" );
element.button( "disable" );
ok( !element.hasClass( "ui-state-focus" ),
"button does not have ui-state-focus when disabled" );
ok( !element.is( ":focus" ),
"button has had focus removed" );
start();
});
});
Expand Down
8 changes: 0 additions & 8 deletions tests/unit/button/button_events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@

module("button: events");

test("buttonset works with single-quote named elements (#7505)", function() {
expect( 1 );
$("#radio3").buttonset();
$("#radio33").click( function(){
ok( true, "button clicks work with single-quote named elements" );
}).click();
});

asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() {
expect( 1 );

Expand Down
13 changes: 4 additions & 9 deletions tests/unit/button/button_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ test("text false without icon", function() {
$("#button").button({
text: false
});
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
ok( $("#button").is(":not(.ui-button-icon-only)") );
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 18, 2014

Choose a reason for hiding this comment

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

Let's rewrite this test to something like this:

equal( $("#button").attr( "class" ), "..." );

ok is bad for debugging in general. Negative testing, here using the :not selector, provides very little value compared to checking the expected value.


$("#button").button("destroy");
});
Expand All @@ -52,9 +52,7 @@ test("text false with icon", function() {
expect( 1 );
$("#button").button({
text: false,
icons: {
primary: "iconclass"
}
icon: "iconclass"
});
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
Copy link
Copy Markdown
Member

@jzaefferer jzaefferer Apr 18, 2014

Choose a reason for hiding this comment

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

As above, let's look at the class and be specific. Also applies to all the other ok/is tests in here.


Expand Down Expand Up @@ -100,12 +98,9 @@ test("icons", function() {
expect( 1 );
$("#button").button({
text: false,
icons: {
primary: "iconclass",
secondary: "iconclass2"
}
icon: "iconclass"
});
ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") );
ok( $("#button").is(":has(span.ui-icon.iconclass)") );

$("#button").button("destroy");
});
Expand Down
1 change: 1 addition & 0 deletions themes/base/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import url("accordion.css");
@import url("autocomplete.css");
@import url("button.css");
@import url("checkboxradio.css");
@import url("datepicker.css");
@import url("dialog.css");
@import url("draggable.css");
Expand Down
Loading