From 2c3794e28d25c3e49d8a3adc89dbe976b9043ace Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Thu, 27 Dec 2018 22:18:27 -0800
Subject: [PATCH] [design] use angle icons instead of carets for expandable
 panels (#6564)

* [design] use angle icons instead of carets for expandable panels

Also moving to the right to conform to the material design specs

* Fix cypress test
---
 .../integration/explore/control.test.js       |  1 +
 .../components/ControlPanelSection.jsx        | 24 +++++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/superset/assets/cypress/integration/explore/control.test.js b/superset/assets/cypress/integration/explore/control.test.js
index 68b7a148831..36de57d778e 100644
--- a/superset/assets/cypress/integration/explore/control.test.js
+++ b/superset/assets/cypress/integration/explore/control.test.js
@@ -208,6 +208,7 @@ describe('Advanced analytics', () => {
 
     cy.get('span')
       .contains('Advanced Analytics')
+      .parent()
       .siblings()
       .first()
       .click();
diff --git a/superset/assets/src/explore/components/ControlPanelSection.jsx b/superset/assets/src/explore/components/ControlPanelSection.jsx
index 7992fa6f8f2..c5be657d1e1 100644
--- a/superset/assets/src/explore/components/ControlPanelSection.jsx
+++ b/superset/assets/src/explore/components/ControlPanelSection.jsx
@@ -31,21 +31,21 @@ export default class ControlPanelSection extends React.Component {
     return (
       label &&
         <div>
+          <span>
+            <span onClick={this.toggleExpand.bind(this)}>{label}</span>
+            {' '}
+            {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
+            {hasErrors &&
+              <InfoTooltipWithTrigger
+                label="validation-errors"
+                bsStyle="danger"
+                tooltip="This section contains validation errors"
+              />}
+          </span>
           <i
-            className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
+            className={`float-right fa-lg text-primary expander fa fa-angle-${this.state.expanded ? 'up' : 'down'}`}
             onClick={this.toggleExpand.bind(this)}
           />
-          {' '}
-          <span onClick={this.toggleExpand.bind(this)}>{label}</span>
-          {' '}
-          {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
-          {hasErrors &&
-            <InfoTooltipWithTrigger
-              label="validation-errors"
-              bsStyle="danger"
-              tooltip="This section contains validation errors"
-            />
-          }
         </div>);
   }