Animate the chevron icon when opening sub-menus in the admin (#3069)

CHANGELOG.txt

@@ -5,6 +5,7 @@ Changelog
 ~~~~~~~~~~~~~~~~
 
  * Persist tab hash in URL to allow direct navigation to tabs in the admin interface (Ben Weatherman)
+ * Animate the chevron icon when opening sub-menus in the admin (Carlo Ascani)
  * Fix: Status button on 'edit page' now links to the correct URL when live and draft slug differ (LB (Ben Johnston))
  * Fix: Image title text in the gallery and in the chooser now wraps for long filenames (LB (Ben Johnston), Luiz Boaretto)
 

CONTRIBUTORS.rst

@@ -274,6 +274,7 @@ Contributors
 * Dário Marcelino
 * Dave Bell
 * Ben Weatherman
+* Carlo Ascani
 
 Translators
 ===========

client/src/components/Explorer/ExplorerToggle.js

@@ -11,7 +11,8 @@ import Button from '../../components/Button/Button';
  */
 const ExplorerToggle = ({ children, onToggle }) => (
   <Button
-    icon={['folder-open-inverse', 'arrow-right-after']}
+    className="submenu-trigger"
+    icon="folder-open-inverse"
     onClick={onToggle}
   >
     {children}

client/src/components/Explorer/ExplorerToggle.test.js

@@ -18,7 +18,7 @@ describe('ExplorerToggle', () => {
           To infinity and beyond!
         </span>
       </ExplorerToggle>
-    ))).toMatchSnapshot();
+    )).find('ExplorerToggle').dive()).toMatchSnapshot();
   });
 
   describe('actions', () => {

client/src/components/Explorer/__snapshots__/ExplorerToggle.test.js.snap

@@ -1,32 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplorerToggle basic 1`] = `
-<ExplorerToggle
-  onToggle={[Function]}
-  storeSubscription={
-    Subscription {
-      "listeners": Object {
-        "clear": [Function],
-        "get": [Function],
-        "notify": [Function],
-        "subscribe": [Function],
-      },
-      "onStateChange": [Function],
-      "parentSub": undefined,
-      "store": Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "unsubscribe": [Function],
-    }
-  }
+<Button
+  accessibleLabel={null}
+  className="submenu-trigger"
+  href="#"
+  icon="folder-open-inverse"
+  isLoading={false}
+  onClick={[Function]}
+  preventDefault={true}
+  target={null}
 >
   <span>
     To infinity and beyond!
   </span>
-</ExplorerToggle>
+</Button>
 `;

docs/releases/2.1.rst

@@ -15,6 +15,7 @@ Other features
 ~~~~~~~~~~~~~~
 
 * Persist tab hash in URL to allow direct navigation to tabs in the admin interface (Ben Weatherman)
+* Animate the chevron icon when opening sub-menus in the admin (Carlo Ascani)
 
 Bug fixes
 ~~~~~~~~~

wagtail/admin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -121,6 +121,20 @@ $footer-submenu: $submenu-color;
     }
 }
 
+.submenu-trigger:after {
+    @include medium {
+        // The menus are collapsible on desktop only.
+        content: map-get($icons, arrow-right);
+        width: auto;
+        @include transition(transform 0.3s ease);
+
+        .submenu-active > & {
+            transform-origin: 50% 50%;
+            transform: rotate(180deg);
+        }
+    }
+}
+
 .nav-submenu {
     background: $submenu-color;
 
@@ -336,10 +350,6 @@ body.explorer-open {
                 }
             }
         }
-
-        a.submenu-trigger:after {
-            content: 'n';
-        }
     }
 
     .nav-submenu {