Refactor button styles list, Now it uses dropdown button.

Fixes #557
liferay · Jul 6, 2016 · dd996f7 · dd996f7
1 parent 50c9425
commit dd996f7
Showing 1 changed file with 9 additions and 11 deletions.
diff --git a/src/ui/react/src/components/buttons/button-styles-list.jsx b/src/ui/react/src/components/buttons/button-styles-list.jsx
@@ -97,20 +97,18 @@
             }
 
             return (
-                <div className="ae-dropdown ae-arrow-box ae-arrow-box-top-left" onFocus={this.focus} onKeyDown={this.handleKey} tabIndex="0">
-                    <ul className="ae-listbox" role="listbox">
-                        {removeStylesItem}
+                <AlloyEditor.ButtonDropdown {...this.props}>
+                    {removeStylesItem}
 
-                        <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.blockStyles} styles={this._blockStyles} />
-                        {this._renderStylesItems(this._blockStyles)}
+                    <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.blockStyles} styles={this._blockStyles} />
+                    {this._renderStylesItems(this._blockStyles)}
 
-                        <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.inlineStyles} styles={this._inlineStyles} />
-                        {this._renderStylesItems(this._inlineStyles)}
+                    <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.inlineStyles} styles={this._inlineStyles} />
+                    {this._renderStylesItems(this._inlineStyles)}
 
-                        <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.objectStyles} styles={this._objectStyles} />
-                        {this._renderStylesItems(this._objectStyles)}
-                    </ul>
-                </div>
+                    <AlloyEditor.ButtonsStylesListHeader name={AlloyEditor.Strings.objectStyles} styles={this._objectStyles} />
+                    {this._renderStylesItems(this._objectStyles)}
+                </AlloyEditor.ButtonDropdown>
             );
         },