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
wants to merge 37 commits into from
Closed

Button icon span #1216

Show file tree
Hide file tree
Changes from all commits
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
59 changes: 46 additions & 13 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,63 @@
<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();
var checkboxes = $( "form input" ).checkboxradio();

$( ".controls input, .controls select" ).on( "change keyup", function(){
var option = $( this ).attr( "name" ),
value = $( this ).val();

if( $( this ).is( "[type=checkbox] ") ) {
Copy link
Member

Choose a reason for hiding this comment

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

Missing space after if, a few more times below. Too bad we don't run jscs and jshint for inline scripts, that would help here.

if( $( this ).is(":checked") ) {
value = true;
} else {
value = false;
}
}
if( option != "label" || value !== "" ) {
checkboxes.checkboxradio( "option", option, value );
}
});
$( ".controls>button" ).click( function(){
if( this.id !== "create" ){
checkboxes.checkboxradio( this.id );
} else {
checkboxes.checkboxradio();
}
});
});
</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>

<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>
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>
<input type="checkbox" id="checkbox-1" />
Copy link
Member

Choose a reason for hiding this comment

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

Remove closing slash on empty elements, here and below.

<label for="checkbox-1">Checkbox widget sample</label>
<input type="checkbox" id="checkbox-2" /><label for="checkbox-2">Checkbox widget sample</label>

<input type="radio" id="radio-1" name="radio" checked/>
<label for="radio-1">Radio widget sample</label>
<input type="radio" id="radio-2" name="radio"/><label for="radio-2">Radio widget sample 2</label>
<button type="reset">Reset</button>
</form>
</body>
</html>
16 changes: 12 additions & 4 deletions demos/button/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
$( ".widget input[type=submit], .widget a, .widget button" )
.button()
.click(function( event ) {
event.preventDefault();
Expand All @@ -20,12 +20,20 @@
</script>
</head>
<body>
<div class="widget">
<h1>Widget Buttons</h1>
<button>A button element</button>

<button>A button element</button>
<input type="submit" value="A submit button">

<input type="submit" value="A submit button">
<a href="#">An anchor</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">A button element</button>

<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">

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

<div class="demo-description">
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
Expand Down
65 changes: 42 additions & 23 deletions demos/button/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,58 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
$( ".widget button:first" ).button({
icon: "ui-icon-gear",
showLabel: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
icon: "ui-icon-triangle-1-w"
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
icon: "ui-icon-triangle-1-e",
iconPosition: "end"
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
icon: "ui-icon-triangle-1-s",
iconPosition: "bottom"
}).next().button({
icon: "ui-icon-triangle-1-n",
iconPosition: "top"
});
});
</script>
</head>
<body>

<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>

<div class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>
<div class="widget">
<h1>Widget</h1>
<button>Button with icon only</button>
Copy link
Member

Choose a reason for hiding this comment

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

Icon + text, though inconsistent with the CSS button equivalent, which is really just icon, no text.

<button>Button with icon on the left</button>
<button>Button with icon</button>
<button>Button with icon and text</button>
</div>
<div class="css">
<h1>CSS</h1>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only">
<span class="ui-icon ui-icon-gear"></span>
Copy link
Member

Choose a reason for hiding this comment

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

Double space, remove one

Button with icon only
</button>
<button class="ui-button ui-widget ui-corner-all ui-icon-beginning">
<span class="ui-icon ui-icon-triangle-1-w"></span>
Button with icon on the left
</button>
<button class="ui-button ui-widget ui-corner-all ui-icon-end">
<span class="ui-icon ui-icon-triangle-1-e"></span>
Button with icon on the right
</button>
<button class="ui-button ui-widget ui-corner-all ui-icon-bottom">
<span class="ui-icon ui-icon-triangle-1-s"></span>
Button with icon on bottom
</button>
<button class="ui-button ui-widget ui-corner-all ui-icon-top">
<span class="ui-icon ui-icon-triangle-1-n"></span>
Button with icon on top
</button>

</div>
</body>
</html>
2 changes: 1 addition & 1 deletion tests/unit/button/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div id="qunit"></div>
<div id="qunit-fixture">

<div><button id="button" class="foo">Label</button></div>
<div><button id="button">Label</button></div>

<div id="radio0" style="margin-top: 2em;">
<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
Expand Down
10 changes: 4 additions & 6 deletions tests/unit/button/button_common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
TestHelpers.commonWidgetTests( "button", {
defaults: {
disabled: null,
icons: {
primary: null,
secondary: null
},
showLabel: true,
label: null,
text: true,
icon: null,
iconPosition: "beginning",

// callbacks
// Callbacks
create: null
}
});
Loading