Selectmenu: update to use button css

This ensures consistency between different form elements

diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js
index 5431d689d0a9a960131e12a3e901468019bead89..021f9b28a7538d81e53e72c2f7778cec58a2fb87 100644 (file)
--- a/tests/unit/selectmenu/core.js
+++ b/tests/unit/selectmenu/core.js
@@ -6,7 +6,7 @@ define( [
 module( "selectmenu: core" );
 
 test( "markup structure", function( assert ) {
-       expect( 4 );
+       expect( 5 );
 
        var element = $( "#files" ).selectmenu(),
                button = element.selectmenu( "widget" ),
@@ -16,6 +16,7 @@ test( "markup structure", function( assert ) {
        assert.hasClasses( button,
                "ui-selectmenu-button ui-selectmenu-button-closed ui-widget" );
        assert.lacksClasses( button, "ui-selectmenu-button-open" );
+       assert.lacksClasses( button, "ui-selectmenu-open" );
        assert.hasClasses( menuWrap, "ui-selectmenu-menu" );
        assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" );
 } );
@@ -89,7 +90,7 @@ test( "_renderButtonItem()", function() {
        element.selectmenu( "refresh" );
        option = element.find( "option:selected" );
        equal(
-               option.text() + element[ 0 ].selectedIndex,
+               " " + option.text() + element[ 0 ].selectedIndex,
                button.text(),
                "refresh: button item text"
        );
@@ -98,7 +99,7 @@ test( "_renderButtonItem()", function() {
        menu.find( "li" ).last().simulate( "mouseover" ).trigger( "click" );
        option = element.find( "option" ).last();
        equal(
-               option.text() + element[ 0 ].selectedIndex,
+               " " + option.text() + element[ 0 ].selectedIndex,
                button.text(),
                "click: button item text"
        );
@@ -146,7 +147,7 @@ $.each( [
                                selected.val(),
                                "original select state"
                        );
-                       equal( button.text(), selected.text(), "button text" );
+                       equal( button.text(), " " + selected.text(), "button text" );
                        start();
                } );
        } );
@@ -181,7 +182,7 @@ $.each( [
                                selected.val(),
                                "original select state"
                        );
-                       equal( button.text(), selected.text(), "button text" );
+                       equal( button.text(), " " + selected.text(), "button text" );
                        start();
                }, 1 );
        } );
@@ -222,7 +223,7 @@ $.each( [
                                        "button aria-activedescendant" );
                                equal( element.find( "option:selected" ).val(), options.eq( 1 ).val(),
                                        "original select state" );
-                               equal( button.text(), options.eq( 1 ).text(), "button text" );
+                               equal( button.text(), " " + options.eq( 1 ).text(), "button text" );
                                start();
                        } );
                } );

diff --git a/tests/unit/selectmenu/methods.js b/tests/unit/selectmenu/methods.js
index e49da50f5fb10e29ce79a4d41bf993b3df8e28e3..7007abe837d497ae7525c9b1a42e7337ada1f3b1 100644 (file)
--- a/tests/unit/selectmenu/methods.js
+++ b/tests/unit/selectmenu/methods.js
@@ -81,21 +81,21 @@ asyncTest( "refresh - change selected option", function() {
        var element = $( "#speed" ).selectmenu(),
                button = element.selectmenu( "widget" );
 
-       equal( element.find( "option:selected" ).text(), button.text(), "button text after init" );
+       equal( button.text(), " Medium", "button text after init" );
 
        button.simulate( "focus" );
+
        setTimeout( function() {
-               equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" );
+               equal( button.text(), " Medium", "button text after focus" );
 
                element[ 0 ].selectedIndex = 0;
                element.selectmenu( "refresh" );
-               equal( element.find( "option:selected" ).text(), button.text(),
-                       "button text after changing selected option" );
+               equal( button.text(), " Slower", "button text after changing selected option" );
 
                element.find( "option" ).prop( "selected", false );
                element.append( "<option selected value=\"selected_option\">Selected option</option>" );
                element.selectmenu( "refresh" );
-               equal( "Selected option", button.text(), "button text after adding selected option" );
+               equal( button.text(), " Selected option", "button text after adding selected option" );
 
                start();
        } );
@@ -180,7 +180,7 @@ test( "widget and menuWidget", function( assert ) {
                menu = element.selectmenu( "menuWidget" );
 
        equal( button.length, 1, "button: one element" );
-       assert.hasClasses( button, "ui-selectmenu-button" );
+       assert.hasClasses( button, "ui-button" );
 
        equal( menu.length, 1, "Menu Widget: one element" );
        ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" );

diff --git a/tests/unit/selectmenu/selectmenu.html b/tests/unit/selectmenu/selectmenu.html
index 16e0f15a7ce9426c4c3101ee8cb1dd435f0d3552..14a6c8087bda399175443af52fd3150102215d84 100644 (file)
--- a/tests/unit/selectmenu/selectmenu.html
+++ b/tests/unit/selectmenu/selectmenu.html
@@ -3,10 +3,10 @@
 <head>
        <meta charset="utf-8">
        <title>jQuery UI Selectmenu Test Suite</title>
-
        <script src="../../../external/requirejs/require.js"></script>
-       <script src="../../lib/css.js" data-modules="core menu selectmenu"></script>
+       <script src="../../lib/css.js" data-modules="core menu selectmenu button"></script>
        <script src="../../lib/bootstrap.js" data-widget="selectmenu"></script>
+
 </head>
 <body>
 

diff --git a/themes/base/selectmenu.css b/themes/base/selectmenu.css
index 178d7037fb681d54a3d7a8e15aece9e8c16ba588..3449c19b5999783460fd6d22542952525cfa9d00 100644 (file)
--- a/themes/base/selectmenu.css
+++ b/themes/base/selectmenu.css
@@ -33,27 +33,10 @@
 .ui-selectmenu-open {
        display: block;
 }
-.ui-selectmenu-button {
-       display: inline-block;
-       overflow: hidden;
-       position: relative;
-       text-decoration: none;
-       cursor: pointer;
-       width: 14em;
-}
-.ui-selectmenu-button span.ui-icon {
-       right: 0.5em;
-       left: auto;
-       margin-top: -8px;
-       position: absolute;
-       top: 50%;
-}
-.ui-selectmenu-button span.ui-selectmenu-text {
+.ui-selectmenu-button.ui-button {
        text-align: left;
-       padding: 0.4em 2.1em 0.4em 1em;
-       display: block;
-       line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
+       width: 14em;
 }

diff --git a/ui/widgets/selectmenu.js b/ui/widgets/selectmenu.js
index 30d8c71af6327536636595f05a1c609eebffaf14..e57354f2e59d43874d7f00066b5c61d9c05d1ebc 100644 (file)
--- a/ui/widgets/selectmenu.js
+++ b/ui/widgets/selectmenu.js
@@ -13,7 +13,7 @@
 //>>docs: http://api.jqueryui.com/selectmenu/
 //>>demos: http://jqueryui.com/selectmenu/
 //>>css.structure: ../themes/base/core.css
-//>>css.structure: ../themes/base/selectmenu.css
+//>>css.structure: ../themes/base/selectmenu.css, ../themes/base/button.css
 //>>css.theme: ../themes/base/theme.css
 
 ( function( factory ) {
@@ -82,7 +82,7 @@ return $.widget( "ui.selectmenu", {
        },
 
        _drawButton: function() {
-               var icon,
+               var icon, space,
                        that = this,
                        item = this._parseOption(
                                this.element.find( "option:selected" ),
@@ -115,10 +115,13 @@ return $.widget( "ui.selectmenu", {
                        .insertAfter( this.element );
 
                this._addClass( this.button, "ui-selectmenu-button ui-selectmenu-button-closed",
-                       "ui-widget ui-state-default" );
+                       "ui-button ui-widget" );
 
                icon = $( "<span>" ).prependTo( this.button );
+               space = $( "<span> </span>" );
+               this._addClass( space, "ui-selectmenu-icon-space" );
                this._addClass( icon, null, "ui-icon " + this.options.icons.button );
+               icon.after( space );
 
                this.buttonItem = this._renderButtonItem( item )
                        .appendTo( this.button );
@@ -136,8 +139,6 @@ return $.widget( "ui.selectmenu", {
                                that._refreshMenu();
                        }
                } );
-               this._hoverable( this.button );
-               this._focusable( this.button );
        },
 
        _drawMenu: function() {
@@ -606,7 +607,7 @@ return $.widget( "ui.selectmenu", {
                // we always remove classes first and add them second, otherwise if both classes have the
                // same theme class, it will be removed after we add it.
                this._removeClass( this.button, "ui-selectmenu-button-" +
-                               ( this.isOpen ? "closed" : "open" ) )
+                       ( this.isOpen ? "closed" : "open" ) )
                        ._addClass( this.button, "ui-selectmenu-button-" +
                                ( this.isOpen ? "open" : "closed" ) )
                        ._toggleClass( this.menuWrap, "ui-selectmenu-open", null, this.isOpen );