[UI Framework] Change menu to unordered list (#12102)

* [UI Framework] Change menu to unordered list * Add usage comments * Update events_sandbox example * Improve comments and regenerate css * Improve comments
elastic · Jun 1, 2017 · 46c832d · 46c832d
1 parent 4bc4c58
commit 46c832d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 24 deletions.
diff --git a/ui_framework/components/menu/_menu.scss b/ui_framework/components/menu/_menu.scss
@@ -1,3 +1,10 @@
+/**
+ * 1. Allow class to be applied to `ul` and `ol` elements
+ */
+.kuiMenu {
+  padding-left: 0; /* 1 */
+}
+
 .kuiMenu--contained {
   border: $globalBorderThin;
 
@@ -6,7 +13,11 @@
   }
 }
 
+/**
+ * 1. Allow class to be applied to `li` elements
+ */
 .kuiMenuItem {
+  list-style: none; /* 1 */
   padding: 6px 0;
 
   & + & {

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -2016,12 +2016,22 @@ body {
   font-size: 14px;
   font-weight: bold; }
 
+/**
+ * 1. Allow class to be applied to `ul` and `ol` elements
+ * 2. Allow class to be applied to `li` elements
+ */
+.kuiMenu {
+  padding-left: 0;
+  /* 1 */ }
+
 .kuiMenu--contained {
   border: 1px solid #E4E4E4; }
   .kuiMenu--contained .kuiMenuItem {
     padding: 6px 10px; }
 
 .kuiMenuItem {
+  list-style: none;
+  /* 2 */
   padding: 6px 0; }
   .kuiMenuItem + .kuiMenuItem {
     border-top: 1px solid #E4E4E4; }

diff --git a/ui_framework/doc_site/src/views/event/events_sandbox.html b/ui_framework/doc_site/src/views/event/events_sandbox.html
@@ -17,8 +17,8 @@ <h2 class="kuiSubTitle">
         </div>
       </div>
 
-      <div class="kuiMenu kuiVerticalRhythm">
-        <div class="kuiMenuItem">
+      <ul class="kuiMenu kuiVerticalRhythm">
+        <li class="kuiMenuItem">
           <div class="kuiEvent">
             <div class="kuiEventSymbol">
               <span class="kuiIcon kuiIcon--info fa-info"></span>
@@ -34,9 +34,9 @@ <h2 class="kuiSubTitle">
               </div>
             </div>
           </div>
-        </div>
+        </li>
 
-        <div class="kuiMenuItem">
+        <li class="kuiMenuItem">
           <div class="kuiEvent">
             <div class="kuiEventSymbol">
               <span class="kuiIcon kuiIcon--error fa-warning"></span>
@@ -52,9 +52,9 @@ <h2 class="kuiSubTitle">
               </div>
             </div>
           </div>
-        </div>
+        </li>
 
-        <div class="kuiMenuItem">
+        <li class="kuiMenuItem">
           <div class="kuiEvent">
             <div class="kuiEventSymbol">
               <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
@@ -70,8 +70,8 @@ <h2 class="kuiSubTitle">
               </div>
             </div>
           </div>
-        </div>
-      </div>
+        </li>
+      </ul>
 
     </div>
   </div>

diff --git a/ui_framework/doc_site/src/views/menu/menu.html b/ui_framework/doc_site/src/views/menu/menu.html
@@ -1,13 +1,13 @@
-<div class="kuiMenu">
-  <div class="kuiMenuItem">
+<ul class="kuiMenu">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item A</p>
-  </div>
+  </li>
 
-  <div class="kuiMenuItem">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item B</p>
-  </div>
+  </li>
 
-  <div class="kuiMenuItem">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item C</p>
-  </div>
-</div>
+  </li>
+</ul>
diff --git a/ui_framework/doc_site/src/views/menu/menu_contained.html b/ui_framework/doc_site/src/views/menu/menu_contained.html
@@ -1,13 +1,13 @@
-<div class="kuiMenu kuiMenu--contained">
-  <div class="kuiMenuItem">
+<ul class="kuiMenu kuiMenu--contained">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item A</p>
-  </div>
+  </li>
 
-  <div class="kuiMenuItem">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item B</p>
-  </div>
+  </li>
 
-  <div class="kuiMenuItem">
+  <li class="kuiMenuItem">
     <p class="kuiText">Item C</p>
-  </div>
-</div>
+  </li>
+</ul>