Skip to content

Button Re-write #1333

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

Button Re-write #1333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
73 commits
Select commit Hold shift + click to select a range
891a7d9
Widget: add the _classes method.
petersendidit Oct 19, 2012
6a6446b
Tabs: use the _classes method.
petersendidit Oct 19, 2012
07f52c1
Dialog: use the _classes method.
petersendidit Apr 23, 2013
f8c5aea
Accordion: use the _classes method.
petersendidit Apr 23, 2013
544f9ff
Autocomplete: use the _classes method.
petersendidit Apr 24, 2013
3c52f19
Slider: use the _classes method.
petersendidit Apr 24, 2013
b1c0f22
Spinner: use the _classes method.
petersendidit Apr 24, 2013
43ec02b
Progressbar: use the _classes method.
petersendidit Apr 24, 2013
51d1d33
Menu: use the _classes method.
petersendidit Apr 25, 2013
0aa2e1f
Tooltip: use the _classes method.
petersendidit Apr 25, 2013
9562d7a
Selectmenu: use the _classes method.
petersendidit Aug 23, 2014
808bb7f
Widget: Process "classes" option during _setOption()
Sep 5, 2014
a813056
Widget: Avoid adding extra spaces to the result of this._classes(...)
Oct 23, 2014
330dc7e
Widget: Add tests for classes option setting
arschmitz Nov 5, 2014
157ba04
Autocomplete: Implement _elementsFromFromClassKey()
Sep 5, 2014
8c0b1ac
Accordion: Implementing _elementsFromClassKey()
Sep 5, 2014
dfaba1d
Dialog: Add support for setOption with classes
arschmitz Oct 15, 2014
af57abd
Menu: Add support for setOption with classes
arschmitz Oct 15, 2014
aa4bbb3
Progressbar: Add support for setOption with classes
arschmitz Oct 15, 2014
e59c360
Selectmenu: Add support for setOption with classes
arschmitz Oct 15, 2014
d93e475
Slider: Add support for setOption with classes
arschmitz Oct 15, 2014
31dcc86
Spinner: Add support for setOption with classes
arschmitz Oct 15, 2014
2a0b8eb
Tabs: Add support for setOption with classes
arschmitz Oct 15, 2014
69bdbfc
Tooltip: Add support for setOption with classes
arschmitz Oct 21, 2014
b238f36
Accordion: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
c31c9f1
Autocomplete: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
9ab23dc
Dialog: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
c5ada6d
Menu: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
98a2cc7
Progressbar: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
7c7acda
Slider: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
836feb5
Spinner: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
b97ff0e
Tabs: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
5dd9120
Tooltip: Update classes option to use empty string instead of null
arschmitz Oct 15, 2014
e183631
Dialog: Fix checking of $.uiBackcompat in tests
arschmitz Nov 5, 2014
7628f28
Tooltip: Update checking of $.uiBackcompat in tests
arschmitz Nov 5, 2014
cecd4e2
Dialog: Simplify tests for classes
arschmitz Nov 5, 2014
328308a
Accordion: Simplify tests for classes
arschmitz Nov 5, 2014
758ff6c
Menu: Simplify tests for classes
arschmitz Nov 5, 2014
21fbfa3
Progressbar: simplify tests for classes
arschmitz Nov 5, 2014
7382fd3
Selectmenu: Simplify tests for classes
arschmitz Nov 5, 2014
3ac52a8
Slider: Simplify tests for classes
arschmitz Nov 5, 2014
ab96209
Tabs: Simplify tests for classes
arschmitz Nov 5, 2014
0fec7d4
Selectmenu: Remove unneeded comment
arschmitz Nov 7, 2014
ef9ed64
Tooltip: Remove deprecated tooltip class replaces with classes option
arschmitz Nov 7, 2014
913edd3
Autocomplete: Remove use of deprecated tooltipClass option in demo
arschmitz Nov 7, 2014
a0b707b
Menu: Update for menu wrapper
arschmitz Nov 7, 2014
e383e5e
Build: add box-sizing: false to .csslintrc
arschmitz Nov 8, 2014
c33af61
Button: Inital commit of button refactor
arschmitz Jan 22, 2014
bbabe61
Button: comment out test thats failing only in phantom
arschmitz Jul 16, 2014
51c996f
Button: Move all dom minipulation in _create into its own method
arschmitz Aug 22, 2014
e60bc37
Button: remove outdated demos
arschmitz Aug 28, 2014
d443a88
Button: Adding classes option
arschmitz Sep 3, 2014
122c578
Button: Fixed the height of icon-only buttons in controlgroups
jaspermdegroot Sep 4, 2014
8645e04
Button: Added user-select none
jaspermdegroot Sep 8, 2014
3d65007
Button: Fixup from PR Review
arschmitz Sep 23, 2014
259f8aa
Button: backcompat for old button widget
arschmitz Oct 22, 2014
737e99a
Dialog: Updating dialog and tests for new button API
arschmitz Mar 28, 2014
33f1959
Selectmenu: update to use button css
arschmitz Aug 22, 2014
66833ea
Tests: Make it possible to not have a default element in common tests
arschmitz Nov 8, 2014
1f7333b
Checkboxradio: inital commit of new widget
arschmitz Aug 28, 2014
cbd6e03
Checkboxradio: add visual focus outline to checkbox and radio buttons
arschmitz Jul 24, 2014
80cb6e7
Checkboxradio: allow the parent of the input to be the label
arschmitz Jul 23, 2014
7ac96c8
Checkboxradio: Fixup demos
arschmitz Nov 8, 2014
4fde24d
Checkboxradio: Remove default element
arschmitz Nov 8, 2014
2f4bf6a
Checkboxradio: add classes option
arschmitz Sep 3, 2014
2fc590f
Checkboxradio: Added new product selector demo
arschmitz Sep 3, 2014
c70e383
Checkboxradio: change all classes to be prefixed with ui-checkboxradio
arschmitz Oct 23, 2014
987a83f
Controlgroup: Inital commit of new widget
arschmitz Aug 23, 2014
35697d4
Controlgroup: add classes option
arschmitz Sep 3, 2014
3e1478a
Controlgroup: Add extension points for special options and refresh
arschmitz Oct 22, 2014
5969ce6
Button: breakup deprecated tests
arschmitz Nov 12, 2014
2d04b3e
Button: Add backcompat tests and fix backcompat issues
arschmitz Dec 3, 2014
8e28a60
Checkboxradio: formatting
arschmitz Dec 3, 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
3 changes: 2 additions & 1 deletion .csslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
"important": false,
"outline-none": false,
"overqualified-elements": false,
"text-indent": false
"text-indent": false,
"box-sizing": false
}
4 changes: 3 additions & 1 deletion demos/autocomplete/combobox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,9 @@
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
classes: {
"ui-tooltip": "ui-state-highlight"
}
});

this._on( this.input, {
Expand Down
37 changes: 0 additions & 37 deletions demos/button/checkbox.html
View file
Open in desktop

This file was deleted.

25 changes: 17 additions & 8 deletions demos/button/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,33 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function( event ) {
event.preventDefault();
});
$( ".widget input[type=submit], .widget a, .widget button" ).button();
$( "button, input, a" ).click( function( event ) {
event.preventDefault();
});
});
</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>
Copy link
Member

Choose a reason for hiding this comment

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

Extend this to mention the difference between "Widget buttons" and "CSS buttons".

<p>Buttons can be styled via the button widget for by adding the classes yourself to avoid the javascript overhead if you dont need any of the methods provided by the button widget</p>p>
<p>Here you can see examples of both buttons styled with css only and done using the button widget</p>
</div>
</body>
</html>
64 changes: 42 additions & 22 deletions demos/button/icons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,57 @@
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "button:first" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
$( ".widget button, .widget a" ).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>
<div class="widget">
Copy link
Member

Choose a reason for hiding this comment

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

Why did you move the demo markup below the description? If there's no reason, let's move it back up. Generally the demo description should be below the markup.

Copy link
Member

Choose a reason for hiding this comment

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

Not just generally, the specific formatting should be exactly the same because of the post-processing for jqueryui.com.

<h1>Widget</h1>
<a href="#">Button with icon only</a>
<button>Button with icon on the left</button>
<button>Button with icon on the right</button>
<button>Button with icon on the bottom</button>
<button>Button with icon on the top</button>
</div>
<div class="css">
<h1>CSS</h1>
<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 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>

<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>
<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
32 changes: 0 additions & 32 deletions demos/button/radio.html
View file
Open in desktop

This file was deleted.

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

This file was deleted.

Loading