From dd996f78832be6a0d3021276ad4ba1db0db5f5be Mon Sep 17 00:00:00 2001
From: antoniopol06 <antonio.pol@liferay.com>
Date: Wed, 6 Jul 2016 13:18:32 +0200
Subject: [PATCH] Refactor button styles list, Now it uses dropdown button.

Fixes #557
---
 .../components/buttons/button-styles-list.jsx | 20 +++++++++----------
 1 file changed, 9 insertions(+), 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
index 109e2aeaef..14c583499f 100644
--- 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>
             );
         },