Add Modal, ModalOverlay, and Hollow Button components. (#9873) (#9875)

* Add Modal and Hollow Button components.
* Add error-checking for missing elements for the UI Framework examples that use JS.

ui_framework/components/button/_button.scss

@@ -109,6 +109,21 @@
   }
 }
 
+.kuiButton--hollow {
+  color: $linkColor;
+  background-color: transparent;
+
+  &:hover:enabled,
+  &:active:enabled {
+    color: $linkHoverColor;
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    color: #dddddd;
+  }
+}
+
 @mixin buttonOnReverseBackground {
   .kuiButton--basic {
     color: #5a5a5a;

ui_framework/components/index.scss

@@ -30,6 +30,7 @@ $buttonBorderRadius: 4px;
 $successColor: #417505;
 $warningColor: #ffac15;
 $errorColor: #D86051;
+$focusColor: #6EADC1;
 $fontColor: #191E23;
 $subduedFontColor: #9fa3a7;
 $linkColor: #3CAED2;
@@ -55,7 +56,7 @@ $formTransitionTiming: 0.1s linear;
  * 1. Make sure outline doesn't get hidden beneath adjacent elements.
  * 2. Override inherited styles (possibly from Bootstrap).
  */
-@mixin focus($color: #6EADC1) {
+@mixin focus($color: $focusColor) {
   z-index: 1; /* 1 */
   outline: 1px solid $color !important; /* 2 */
   outline-offset: 2px !important; /* 2 */
@@ -95,6 +96,26 @@ $formTransitionTiming: 0.1s linear;
   }
 }
 
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Fit MicroButton inside of Table rows without pushing them taller.
+ */
+@mixin microButton {
+  display: inline-block; /* 1 */
+  appearance: none;
+  cursor: pointer;
+  padding: 2px 5px;
+  border: 1px solid transparent;
+  color: $subduedFontColor;
+  background-color: transparent;
+  line-height: 1; /* 2 */
+
+  &:hover {
+    color: $fontColor;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -111,6 +132,7 @@ body {
 @import "loading_items/index";
 @import "local_nav/index";
 @import "micro_button/index";
+@import "modal/index";
 @import "no_items/index";
 @import "panel/index";
 @import "table/index";

ui_framework/components/micro_button/_micro_button.scss

@@ -1,20 +1,4 @@
-/**
- * 1. Setting to inline-block guarantees the same height when applied to both
- *    button elements and anchor tags.
- * 2. Fit MicroButton inside of Table rows without pushing them taller.
- */
 .kuiMicroButton {
-  display: inline-block; /* 1 */
-  appearance: none;
-  cursor: pointer;
-  padding: 2px 5px;
-  border: 1px solid transparent;
-  color: $subduedFontColor;
-  background-color: transparent;
+  @include microButton;
   font-size: 12px;
-  line-height: 1; /* 2 */
-
-  &:hover {
-    color: $fontColor;
-  }
 }

ui_framework/components/modal/_index.scss

@@ -0,0 +1,2 @@
+@import "modal_overlay";
+@import "modal";

ui_framework/components/modal/_modal.scss

@@ -0,0 +1,44 @@
+$modalPadding: 10px;
+
+.kuiModal {
+  line-height: $lineHeight;
+  background-color: #ffffff;
+  border: 1px solid $focusColor;
+  border-radius: 4px;
+  box-shadow: 0 5px 22px rgba(#000000, 0.25);
+}
+
+.kuiModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $modalPadding;
+  border-bottom: $tableBorder;
+}
+
+  .kuiModalHeader__title {
+    font-size: 18px;
+  }
+
+.kuiModalHeaderCloseButton {
+  @include microButton;
+  font-size: 18px;
+}
+
+.kuiModalBody {
+  padding: 20px $modalPadding;
+}
+
+.kuiModalBodyText {
+  font-size: 14px;
+}
+
+.kuiModalFooter {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 $modalPadding $modalPadding;
+
+  > * + * {
+    margin-left: 5px;
+  }
+}

ui_framework/components/modal/_modal_overlay.scss

@@ -0,0 +1,13 @@
+.kuiModalOverlay {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 10vh;
+  background-color: rgba(#000000, 0.3);
+}

ui_framework/dist/ui_framework.css

@@ -2,6 +2,11 @@
  * 1. Make sure outline doesn't get hidden beneath adjacent elements.
  * 2. Override inherited styles (possibly from Bootstrap).
  */
+/**
+ * 1. Setting to inline-block guarantees the same height when applied to both
+ *    button elements and anchor tags.
+ * 2. Fit MicroButton inside of Table rows without pushing them taller.
+ */
 * {
   box-sizing: border-box; }
 
@@ -100,6 +105,15 @@ body {
     color: #FFFFFF !important;
     /* 1 */ }
 
+.kuiButton--hollow {
+  color: #3CAED2;
+  background-color: transparent; }
+  .kuiButton--hollow:hover:enabled, .kuiButton--hollow:active:enabled {
+    color: #006E8A;
+    text-decoration: underline; }
+  .kuiButton--hollow:disabled {
+    color: #dddddd; }
+
 .kuiButtonGroup {
   display: -webkit-box;
   display: -webkit-flex;
@@ -682,11 +696,6 @@ body {
   font-size: 14px;
   font-weight: bold; }
 
-/**
- * 1. Setting to inline-block guarantees the same height when applied to both
- *    button elements and anchor tags.
- * 2. Fit MicroButton inside of Table rows without pushing them taller.
- */
 .kuiMicroButton {
   display: inline-block;
   /* 1 */
@@ -698,9 +707,9 @@ body {
   border: 1px solid transparent;
   color: #9fa3a7;
   background-color: transparent;
-  font-size: 12px;
   line-height: 1;
-  /* 2 */ }
+  /* 2 */
+  font-size: 12px; }
   .kuiMicroButton:hover {
     color: #191E23; }
 
@@ -712,6 +721,90 @@ body {
   .kuiMicroButtonGroup .kuiMicroButton + .kuiMicroButton {
     margin-left: 2px; }
 
+.kuiModalOverlay {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  padding-bottom: 10vh;
+  background-color: rgba(0, 0, 0, 0.3); }
+
+.kuiModal {
+  line-height: 1.5;
+  background-color: #ffffff;
+  border: 1px solid #6EADC1;
+  border-radius: 4px;
+  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.25); }
+
+.kuiModalHeader {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 10px;
+  border-bottom: 2px solid #E4E4E4; }
+
+.kuiModalHeader__title {
+  font-size: 18px; }
+
+.kuiModalHeaderCloseButton {
+  display: inline-block;
+  /* 1 */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  padding: 2px 5px;
+  border: 1px solid transparent;
+  color: #9fa3a7;
+  background-color: transparent;
+  line-height: 1;
+  /* 2 */
+  font-size: 18px; }
+  .kuiModalHeaderCloseButton:hover {
+    color: #191E23; }
+
+.kuiModalBody {
+  padding: 20px 10px; }
+
+.kuiModalBodyText {
+  font-size: 14px; }
+
+.kuiModalFooter {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  padding: 0 10px 10px; }
+  .kuiModalFooter > * + * {
+    margin-left: 5px; }
+
 .kuiNoItems {
   padding: 30px;
   font-size: 18px;

ui_framework/doc_site/src/components/guide_page/_guide_page.scss

@@ -7,9 +7,9 @@
 
 .guidePageBody {
   flex: 1 1 auto;
-  padding: 0 80px 0 81px + $guideSideNavWidth;
+  padding: 0 80px 0 120px + $guideSideNavWidth;
 
   @include whenNarrowerThan($normalBreakpoint) {
-    padding: 0 20px 0 1px + $guideSideNavSmallWidth;
+    padding: 0 20px 0 20px + $guideSideNavSmallWidth;
   }
 }

ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss

@@ -5,7 +5,7 @@
   left: 0;
   bottom: 0;
   width: $guideSideNavWidth;
-  padding: 0 20px 30px 80px;
+  padding: 0 0 30px 80px;
   overflow: auto;
   background-color: #ffffff;
   z-index: 100;
@@ -13,7 +13,7 @@
   @include scrollbar;
 
   @include whenNarrowerThan($normalBreakpoint) {
-    padding: 0 20px 30px 20px;
+    padding: 0 0 30px 20px;
     width: $guideSideNavSmallWidth;
   }
 }

ui_framework/doc_site/src/services/routes/Routes.js

@@ -16,6 +16,9 @@ import InfoPanelExample
 import LinkExample
   from '../../views/link/link_example.jsx';
 
+import ModalExample
+  from '../../views/modal/modal_example.jsx';
+
 import LocalNavExample
   from '../../views/local_nav/local_nav_example.jsx';
 
@@ -53,6 +56,9 @@ const components = [{
 }, {
   name: 'MicroButton',
   component: MicroButtonExample,
+}, {
+  name: 'Modal',
+  component: ModalExample,
 }, {
   name: 'Table',
   component: TableExample,

ui_framework/doc_site/src/views/button/button_example.jsx

@@ -11,6 +11,13 @@ export default createExample([{
   ),
   html: require('./button_basic.html'),
   hasDarkTheme: false,
+}, {
+  title: 'Hollow Button',
+  description: (
+    <p>Use the hollow Button when presenting a neutral action, e.g. a "Cancel" button.</p>
+  ),
+  html: require('./button_hollow.html'),
+  hasDarkTheme: false,
 }, {
   title: 'Primary Button',
   description: (

ui_framework/doc_site/src/views/button/button_hollow.html

@@ -0,0 +1,9 @@
+<button class="kuiButton kuiButton--hollow">
+  Hollow button
+</button>
+
+<hr class="guideBreak">
+
+<button disabled class="kuiButton kuiButton--hollow">
+  Hollow button, disabled
+</button>

ui_framework/doc_site/src/views/modal/modal.html

@@ -0,0 +1,25 @@
+<div class="kuiModal" style="width: 450px">
+  <div class="kuiModalHeader">
+    <div class="kuiModalHeader__title">
+      Delete object
+    </div>
+
+    <div class="kuiModalHeaderCloseButton kuiIcon fa-times"></div>
+  </div>
+
+  <div class="kuiModalBody">
+    <div class="kuiModalBodyText">
+      Are you sure you want to delete this object? You can&rsquo;t undo this.
+    </div>
+  </div>
+
+  <div class="kuiModalFooter">
+    <button class="kuiButton kuiButton--hollow">
+      No, cancel
+    </button>
+
+    <button class="kuiButton kuiButton--primary">
+      Yes, delete this object
+    </button>
+  </div>
+</div>

ui_framework/doc_site/src/views/modal/modal_example.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Modal',
+  html: require('./modal.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'ModalOverlay',
+  html: require('./modal_overlay.html'),
+  js: require('raw!./modal_overlay.js'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/modal/modal_overlay.html

@@ -0,0 +1,29 @@
+<button data-id="showModalOverlay">Show modal overlay</button>
+
+<div class="kuiModalOverlay">
+  <div class="kuiModal" style="width: 450px">
+    <div class="kuiModalHeader">
+      <div class="kuiModalHeader__title">
+        Delete object
+      </div>
+
+      <div class="kuiModalHeaderCloseButton kuiIcon fa-times"></div>
+    </div>
+
+    <div class="kuiModalBody">
+      <div class="kuiModalBodyText">
+        Are you sure you want to delete this object? You can&rsquo;t undo this.
+      </div>
+    </div>
+
+    <div class="kuiModalFooter">
+      <button class="kuiButton kuiButton--hollow">
+        No, cancel
+      </button>
+
+      <button class="kuiButton kuiButton--primary">
+        Yes, delete this object
+      </button>
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/modal/modal_overlay.js

@@ -0,0 +1,45 @@
+/* eslint-disable */
+
+const $showModalOverlayButton = $('[data-id="showModalOverlay"]');
+const $modalOverlay = $('.kuiModalOverlay');
+const $modalOverlayCloseButton = $('.kuiModalOverlay .kuiModalHeaderCloseButton');
+const $modalOverlayCancelButton = $('.kuiModalOverlay .kuiButton--hollow');
+const $modalOverlayConfirmButton = $('.kuiModalOverlay .kuiButton--primary');
+
+if (!$showModalOverlayButton.length) {
+  throw new Error('$showModalOverlayButton missing');
+}
+
+if (!$modalOverlay.length) {
+  throw new Error('$modalOverlay missing');
+}
+
+if (!$modalOverlayCloseButton.length) {
+  throw new Error('$modalOverlayCloseButton missing');
+}
+
+if (!$modalOverlayCancelButton.length) {
+  throw new Error('$modalOverlayCancelButton missing');
+}
+
+if (!$modalOverlayConfirmButton.length) {
+  throw new Error('$modalOverlayConfirmButton missing');
+}
+
+$modalOverlay.hide();
+
+$showModalOverlayButton.on('click', () => {
+  $modalOverlay.show();
+});
+
+$modalOverlayCloseButton.on('click', () => {
+  $modalOverlay.hide();
+});
+
+$modalOverlayCancelButton.on('click', () => {
+  $modalOverlay.hide();
+});
+
+$modalOverlayConfirmButton.on('click', () => {
+  $modalOverlay.hide();
+});

ui_framework/doc_site/src/views/table/table.js

@@ -6,6 +6,10 @@ $('[data-sort-icon-descending]').hide();
 
 const demoSortableColumns = $('[data-demo-sortable-column]');
 
+if (!demoSortableColumns.length) {
+  throw new Error('demoSortableColumns missing');
+}
+
 let sortedColumn;
 let isSortAscending = true;
 
@@ -20,6 +24,15 @@ function sortColumn(column) {
       $sortedColumn.removeClass('tableHeaderCell-isSorted');
       const ascendingIcon = $sortedColumn.find('[data-sort-icon-ascending]');
       const descendingIcon = $sortedColumn.find('[data-sort-icon-descending]');
+
+      if (!ascendingIcon.length) {
+        throw new Error('ascendingIcon missing');
+      }
+
+      if (!descendingIcon.length) {
+        throw new Error('descendingIcon missing');
+      }
+
       ascendingIcon.hide();
       descendingIcon.hide();
     }
@@ -29,8 +42,18 @@ function sortColumn(column) {
   sortedColumn = column;
   const $sortedColumn = $(sortedColumn);
   $sortedColumn.addClass('tableHeaderCell-isSorted');
+
   const ascendingIcon = $(sortedColumn).find('[data-sort-icon-ascending]');
   const descendingIcon = $(sortedColumn).find('[data-sort-icon-descending]');
+
+  if (!ascendingIcon.length) {
+    throw new Error('ascendingIcon missing');
+  }
+
+  if (!descendingIcon.length) {
+    throw new Error('descendingIcon missing');
+  }
+
   if (isSortAscending) {
     ascendingIcon.show();
     descendingIcon.hide();

ui_framework/doc_site/src/views/tabs/tabs.js

@@ -3,6 +3,10 @@
 const $tabs = $('.kuiTab');
 let $selectedTab = undefined;
 
+if (!$tabs.length) {
+  throw new Error('$tabs missing');
+}
+
 function selectTab(tab) {
   if ($selectedTab) {
     $selectedTab.removeClass('kuiTab-isSelected');