Merge pull request #10331 from codetheorist/update-menu-docs

Update menu docs/examples and Add backward compatibility for menu icons

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index e73b36743634216f2a81cd8c60fb3048301fb85a..14eb9859ed56a38bc349ac3f00879416101efe8e 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -294,18 +294,71 @@ Menu items can have icons. Wrap the text of the item in a `<span>`, and then add
 
 ---
 
-Add the class `.icon-top` to the Menu to orient icons above the text.
+Add the class `.icons` to the parent menu container to specify that the menu contains icons. Along with this, add your choice of layout class, such as `.icon-top`.
+
+When using any of the menu icon layout classes, ensure that the icon and the text are in the correct order. For `.icon-right` and `.icon-bottom`, the icon must come AFTER the text.
 
 <p>
   <a class="" data-open-video="10:42"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
+<br>
+
+### Icon Top
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/EXLmxO?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="menu icons icon-top">
+  <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>
+  <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
+</ul>
+```
+
+<br>
+
+### Icon Right
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/vZjmEE?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="menu icons icon-right">
+  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
+</ul>
+```
+
+<br>
+
+### Icon Bottom
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/vZjmOE?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="menu icons icon-bottom">
+  <li><a href="#"><span>One</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Two</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Three</span> <i class="fi-list"></i></a></li>
+  <li><a href="#"><span>Four</span> <i class="fi-list"></i></a></li>
+</ul>
+```
+
+<br>
+
+### Icon Left
 <div class="docs-codepen-container">
-  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/vmrYjN?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/qjYmdG?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
 ```html_example
-<ul class="menu icon-top">
+<ul class="menu icons icon-left">
   <li><a href="#"><i class="fi-list"></i> <span>One</span></a></li>
   <li><a href="#"><i class="fi-list"></i> <span>Two</span></a></li>
   <li><a href="#"><i class="fi-list"></i> <span>Three</span></a></li>

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 29e2ce4aaa5801a4578eb9e6b433a1bc74bb2d4f..4ce7a04c478f08365ad1eab3a8abcac0ff845914 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -48,6 +48,11 @@ $menu-state-back-compat: true !default;
 /// @type Boolean
 $menu-centered-back-compat: true !default;
 
+/// Backward compatibility for using `icon-*` classes without `.icons` classes
+/// But please note that this backward compatibility will be removed in upcoming versions.
+/// @type Boolean
+$menu-icons-back-compat: true !default;
+
 /// Creates the base styles for a Menu.
 @mixin menu-base {
   padding: 0;
@@ -406,6 +411,16 @@ $menu-centered-back-compat: true !default;
       @include menu-icons;
     }
 
+    // Backward Compatibility for active state
+    @if $menu-icons-back-compat {
+      &.icon-top,
+      &.icon-right,
+      &.icon-bottom,
+      &.icon-left {
+        @include menu-icons;
+      }
+    }
+
     // Icon Left
     &.icon-left {
       @include menu-icon-position(left);

diff --git a/test/visual/menu/menu-icons-flex.html b/test/visual/menu/menu-icons-flex.html
index 336a1ca966cbd2ccd01410caf3892ebf1bd7b400..b0414dd5aaf5b122152cabbf5854db00496e73a0 100644 (file)
--- a/test/visual/menu/menu-icons-flex.html
+++ b/test/visual/menu/menu-icons-flex.html
@@ -41,7 +41,7 @@
     <div class="grid-container">
       <div class="grid-x grid-padding-x">
         <div class="cell">
-          <h1>Menu with Icons</h1>
+          <h1>Menu with Icons (with icons class)</h1>
 
           <h3>Menu with Icons left</h3>
           <div class="example">
@@ -82,6 +82,50 @@
               <li><a href="#">Four<i class="fi-list"></i></a></li>
             </ul>
           </div>
+
+          <hr>
+
+          <h1>Menu with Icons (without icons class)</h1>
+
+          <h3>Menu with Icons left</h3>
+          <div class="example">
+            <ul class="menu icon-left">
+              <li><a href="#"><i class="fi-list"></i>One</a></li>
+              <li><a href="#"><i class="fi-list"></i>Two</a></li>
+              <li><a href="#"><i class="fi-list"></i>Three</a></li>
+              <li><a href="#"><i class="fi-list"></i>Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Menu with Icons Right</h3>
+          <div class="example">
+            <ul class="menu icon-right">
+              <li><a href="#">One<i class="fi-list"></i></a></li>
+              <li><a href="#">Two<i class="fi-list"></i></a></li>
+              <li><a href="#">Three<i class="fi-list"></i></a></li>
+              <li><a href="#">Four<i class="fi-list"></i></a></li>
+            </ul>
+          </div>
+
+          <h3>Menu with Icon Top</h3>
+          <div class="example">
+            <ul class="menu icon-top">
+              <li><a href="#"><i class="fi-list"></i>One</a></li>
+              <li><a href="#"><i class="fi-list"></i>Two</a></li>
+              <li><a href="#"><i class="fi-list"></i>Three</a></li>
+              <li><a href="#"><i class="fi-list"></i>Four</a></li>
+            </ul>
+          </div>
+
+          <h3>Menu with Icon Bottom</h3>
+          <div class="example">
+            <ul class="menu icon-bottom">
+              <li><a href="#">One<i class="fi-list"></i></a></li>
+              <li><a href="#">Two<i class="fi-list"></i></a></li>
+              <li><a href="#">Three<i class="fi-list"></i></a></li>
+              <li><a href="#">Four<i class="fi-list"></i></a></li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>

diff --git a/test/visual/menu/menu-icons-float.html b/test/visual/menu/menu-icons-float.html
index 409f571b03ae6e88c14c67c4c99cc276b449f753..63c4f2ede9e8749815c99ef60997b3eda67158f7 100644 (file)
--- a/test/visual/menu/menu-icons-float.html
+++ b/test/visual/menu/menu-icons-float.html
@@ -40,7 +40,7 @@
   <body>
     <div class="row">
       <div class="column">
-        <h1>Menu with Icons</h1>
+        <h1>Menu with Icons (with icons class)</h1>
 
         <h3>Menu with Icons left</h3>
         <div class="example">
@@ -81,6 +81,50 @@
             <li><a href="#">Four<i class="fi-list"></i></a></li>
           </ul>
         </div>
+
+        <hr>
+
+        <h1>Menu with Icons (without icons class)</h1>
+
+        <h3>Menu with Icons left</h3>
+        <div class="example">
+          <ul class="menu icon-left">
+            <li><a href="#"><i class="fi-list"></i>One</a></li>
+            <li><a href="#"><i class="fi-list"></i>Two</a></li>
+            <li><a href="#"><i class="fi-list"></i>Three</a></li>
+            <li><a href="#"><i class="fi-list"></i>Four</a></li>
+          </ul>
+        </div>
+
+        <h3>Menu with Icons Right</h3>
+        <div class="example">
+          <ul class="menu icon-right">
+            <li><a href="#">One<i class="fi-list"></i></a></li>
+            <li><a href="#">Two<i class="fi-list"></i></a></li>
+            <li><a href="#">Three<i class="fi-list"></i></a></li>
+            <li><a href="#">Four<i class="fi-list"></i></a></li>
+          </ul>
+        </div>
+
+        <h3>Menu with Icon Top</h3>
+        <div class="example">
+          <ul class="menu icon-top">
+            <li><a href="#"><i class="fi-list"></i>One</a></li>
+            <li><a href="#"><i class="fi-list"></i>Two</a></li>
+            <li><a href="#"><i class="fi-list"></i>Three</a></li>
+            <li><a href="#"><i class="fi-list"></i>Four</a></li>
+          </ul>
+        </div>
+
+        <h3>Menu with Icon Bottom</h3>
+        <div class="example">
+          <ul class="menu icon-bottom">
+            <li><a href="#">One<i class="fi-list"></i></a></li>
+            <li><a href="#">Two<i class="fi-list"></i></a></li>
+            <li><a href="#">Three<i class="fi-list"></i></a></li>
+            <li><a href="#">Four<i class="fi-list"></i></a></li>
+          </ul>
+        </div>
       </div>
     </div>