Skip to content

Button Re-write #1513

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 55 commits into from
Closed

Button Re-write #1513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
6e70f94
Build: add box-sizing: false to .csslintrc
arschmitz Nov 8, 2014
79d312f
Tests: Allow widgets to not have a default element
arschmitz Apr 21, 2015
0203326
Button: Initial commit of button re-factor
arschmitz Jan 22, 2014
25d0c85
Checkboxradio: Initial commit of new widget
arschmitz Aug 28, 2014
6e2bbca
Theme: Add visual focus outline for checkbox and radio buttons
arschmitz Jul 24, 2014
40a9d1d
Controlgroup: Inital commit of new widget
arschmitz Aug 23, 2014
897ec38
Dialog: Updating dialog and tests for new button API
arschmitz Mar 28, 2014
9f7f0a4
Selectmenu: update to use button css
arschmitz Aug 22, 2014
dbf4172
Spinner: Updates for new button widget and classes option
arschmitz Jan 8, 2015
7fdf575
Button: fixup
arschmitz Aug 9, 2015
db6a878
Checkboxradio: fixup
arschmitz Aug 9, 2015
00d67bd
Checkboxxradio: Fixup headers and demos
arschmitz Aug 9, 2015
f11a100
Checkboxradio: Add inset shadow to iconbackground to make it stand out
arschmitz Aug 9, 2015
f22c265
Demos: Add checkboxradio to bootstrap
arschmitz Aug 9, 2015
a504705
Controlgroup: add too demos bootstrap
arschmitz Aug 9, 2015
65af870
Controlgroup: Fixup
arschmitz Aug 9, 2015
040dff6
Controlgroup: Fixup headers and demos
arschmitz Aug 9, 2015
14d97f3
Controlgroup: Add spinner to widgets controlgroup works with
arschmitz Aug 10, 2015
daa3cd1
Controlgroup: Add controlgroup labels
arschmitz Aug 12, 2015
f783897
Controlgroup: fixup for spinner and label
arschmitz Aug 14, 2015
21c8d79
Controlgroup: Fixes for spinner
arschmitz Aug 17, 2015
30c1955
Controlgroup: Fixup visual focus in controlgroups
arschmitz Aug 18, 2015
dc178e8
Fixup: .dsstore
arschmitz Aug 10, 2015
e2c566c
Spinner: Update markup for buttons
arschmitz Aug 14, 2015
5de82d0
Spinner: Use border-style: none instead of border: none
arschmitz Aug 17, 2015
e97c50e
Build: Fixup remove duplicate box-sizing from .csslintrc
arschmitz Aug 18, 2015
e8f056d
Checkboxradio: Style updates
arschmitz Sep 11, 2015
58d876e
Controlgroup: Style updates
arschmitz Sep 11, 2015
22d53d6
Controlgroup: Style updates
arschmitz Sep 11, 2015
3155751
Spinner: Style updates
arschmitz Sep 11, 2015
caaf4b5
Button: address review comments
arschmitz Sep 16, 2015
6a16927
Checkboxradio: Address review comments
arschmitz Sep 16, 2015
5010c7e
Controlgroup: Address review comments
arschmitz Sep 16, 2015
1cd3259
Selectmenu: Address review comments
arschmitz Sep 16, 2015
54cfaaa
Dialog: address review comments
arschmitz Sep 16, 2015
9f3a5ee
Datepicker: address review comments
arschmitz Sep 16, 2015
56d426e
Spinner: Address review comments
arschmitz Sep 16, 2015
944d654
Theme: address review comment for visual focus
arschmitz Sep 16, 2015
77ae5f9
Controlgroup: Update toolbar demo to warn about "this is just a demo"
jzaefferer Sep 30, 2015
be88320
Controlgroup: Rename excludeInvisible to onlyVisible
jzaefferer Sep 30, 2015
39deb6e
Controlgroup: Improve comments and remove a misleading blank line
jzaefferer Sep 30, 2015
a3919dd
Controlgroup: Optimize and simplify data access and storage
jzaefferer Sep 30, 2015
424f517
Button: fixup
arschmitz Sep 30, 2015
2cafee9
Checkboxradio: fixup
arschmitz Sep 30, 2015
7591c5f
Controlgroup: fixup
arschmitz Sep 30, 2015
3e1c4c3
Demos: Replace with ffb33daa229c62c7095cff39cde034f84ef54b15
jzaefferer Oct 6, 2015
df4b2e5
Tests: Prevent default on anchor click to avoid navigation
jzaefferer Oct 6, 2015
8da05d9
Controlgroup: Fix css reference in unit tests
jzaefferer Oct 6, 2015
6fdc73c
Controlgroup: Convert to onevar, fix guard-clause/else, rm tmp var
jzaefferer Oct 6, 2015
5f0b3d1
Checkboxradio: Fix invalid markup in core tests
jzaefferer Oct 6, 2015
77e48a9
Checkboxradio: Fix invalid chars, remove unused var, add comment
jzaefferer Oct 6, 2015
c2c2915
Checkboxradio: Fix label option tests by trimming DOM text
jzaefferer Oct 6, 2015
754b6f0
Button: Can't test for " " in IE8, just make sure the element exists
jzaefferer Oct 6, 2015
f5a4ab6
Controlgroup: Fix refresh method tests by adding text content to button
jzaefferer Oct 6, 2015
e84b815
Checkboxradio: Add ui-state-highlight class to icon on create
jzaefferer Oct 6, 2015
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
1 change: 1 addition & 0 deletions .csslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"adjoining-classes": false,
"box-model": false,
"box-sizing": false,
"compatible-vendor-prefixes": false,
"duplicate-background-images": false,
"import": false,
Expand Down
4 changes: 3 additions & 1 deletion demos/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ var widgets = [
"accordion",
"autocomplete",
"button",
"checkboxradio",
"controlgroup",
"datepicker",
"dialog",
"draggable",
Expand Down Expand Up @@ -104,7 +106,7 @@ require( modules, function() {
document.documentElement.className = "";

newScript.text = "( function() { " + script.innerHTML + " } )();";
document.head.appendChild( newScript ).parentNode.removeChild( newScript );
document.body.appendChild( newScript ).parentNode.removeChild( newScript );
} );

} )();
38 changes: 0 additions & 38 deletions demos/button/checkbox.html
View file
Open in desktop

This file was deleted.

33 changes: 18 additions & 15 deletions demos/button/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.on( "click", function( event ) {
event.preventDefault();
});
});
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
} );
Copy link
Member

Choose a reason for hiding this comment

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

Why not keep the chaining?

Also, this may just be personal preference, but I think $( ".widget" ).find( "button, input, a" ) is easier to read.

Copy link
Member

Choose a reason for hiding this comment

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

Ignore the chaining comment, I see why you did that now that I've looked at the full diff.

</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>
<p>Buttons can be styled via the button widget or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
</div>
</body>
</html>
83 changes: 49 additions & 34 deletions demos/button/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,59 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Button - Icons</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( ".widget button" )
.eq( 0 ).button()
.end().eq( 1 ).button( {
icon: "ui-icon-gear",
showLabel: false
} ).end().eq( 2 ).button( {
icon: "ui-icon-gear"
} ).end().eq( 3 ).button( {
icon: "ui-icon-gear",
iconPosition: "end"
} ).end().eq( 4 ).button( {
icon: "ui-icon-gear",
iconPosition: "top"
} ).end().eq( 5 ).button( {
icon: "ui-icon-gear",
iconPosition: "bottom"
} );
Copy link
Member

Choose a reason for hiding this comment

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

I know the style was already like this, but let's make this follow our actual indentation rules. It's probably a lot easier if you use .eq(x) and .end() since the current form would just keep moving further in.

</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="widget">
<h1>Widget</h1>
<button>Button with only text</button>
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with icon on the right</button>
<button>Button with icon on the top</button>
<button>Button with icon on the bottom</button>
</div>
<div class="css">
<h1>CSS</h1>
<button class="ui-button ui-widget ui-corner-all">
Button with only text
</button>
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
<span class="ui-icon ui-icon-gear"></span> Button with icon only
</button>
<button class="ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-gear"></span> Button with icon on the left
Copy link
Member

Choose a reason for hiding this comment

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

The equivalent JS button also gets the "ui-button-icon" class on the icon span, and uses <span class="ui-button-icon-space"> </span>. Need to add these here, or change the widget.

Copy link
Member Author

Choose a reason for hiding this comment

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

These classes don't do anything they are just part of the classes option

Copy link
Member

Choose a reason for hiding this comment

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

Then this should be correct: https://github.com/jquery/api.jqueryui.com/pull/280/files#diff-bf14c9f5ccd16aa682040e25fcc9231eR19

</button>
<button class="ui-button ui-widget ui-corner-all">
Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
</button>
<button class="ui-button ui-widget ui-corner-all">
<span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
</button>
<button class="ui-button ui-widget ui-corner-all">
Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
</button>
</div>
<div class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>
Expand Down
4 changes: 0 additions & 4 deletions demos/button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="radio.html">Radios</a></li>
<li><a href="checkbox.html">Checkboxes</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="toolbar.html">Toolbar</a></li>
<li><a href="splitbutton.html">Split Button</a></li>
</ul>

</body>
Expand Down
33 changes: 0 additions & 33 deletions demos/button/radio.html
View file
Open in desktop

This file was deleted.

70 changes: 0 additions & 70 deletions demos/button/splitbutton.html
View file
Open in desktop

This file was deleted.

Loading