[UI Framework] Add HeaderBar, StatusText, Menu, Text, and Event components. (#10075)

* Add HeaderBar component.
* Add StatusText component.
* Add Menu, Text, and Event components.

ui_framework/components/event/_event.scss

@@ -0,0 +1,26 @@
+.kuiEvent {
+  display: flex;
+}
+
+.kuiEventSymbol {
+  flex: 0 1 auto;
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  padding-right: 8px;
+}
+
+.kuiEventBody {
+  flex: 1 1 0%;
+}
+
+  .kuiEventBody__message {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+    color: $fontColor;
+  }
+
+  .kuiEventBody__metadata {
+    font-size: $fontSize;
+    line-height: $lineHeight;
+    color: $subduedFontColor;
+  }

ui_framework/components/event/_index.scss

@@ -0,0 +1 @@
+@import "event";

ui_framework/components/header_bar/_header_bar.scss

@@ -0,0 +1,16 @@
+.kuiHeaderBar {
+  @include bar;
+
+  border-bottom: $tableBorder;
+}
+
+/**
+ * 1. Align a single section to the left by default.
+ */
+.kuiHeaderBarSection {
+  @include barSection;
+
+  &:only-child {
+    margin-left: 0; /* 1 */
+  }
+}

ui_framework/components/header_bar/_index.scss

@@ -0,0 +1 @@
+@import "header_bar";

ui_framework/components/index.scss

@@ -30,8 +30,9 @@ $titleFontSize: 18px;
 $buttonBorderRadius: 4px;
 
 // Colors
+$infoColor: #3fa8c7;
 $successColor: #417505;
-$warningColor: #ffac15;
+$warningColor: #ec9800;
 $errorColor: #D86051;
 $focusColor: #6EADC1;
 $focusDangerColor: #ff523c;
@@ -155,7 +156,7 @@ $verticalRhythm: 10px;
 
 /**
  * 1. Put 10px of space between each child.
- * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
+ * 2. If there is only one section, align it to the right. If you wanted it aligned right, you
  *    wouldn't use the Bar in the first place.
  * 3. Children in the middle should center their content.
  * 4. Fix an IE bug which causes the last child to overflow the container.
@@ -183,7 +184,7 @@ $verticalRhythm: 10px;
   }
 
   &:only-child {
-    margin-left: auto; /* 1 */
+    margin-left: auto; /* 2 */
   }
 
   & > * + * {
@@ -235,17 +236,21 @@ body {
 
 @import "bar/index";
 @import "button/index";
+@import "event/index";
 @import "form/index";
+@import "header_bar/index";
 @import "icon/index";
 @import "info_panel/index";
 @import "link/index";
 @import "loading_items/index";
 @import "local_nav/index";
+@import "menu/index";
 @import "micro_button/index";
 @import "modal/index";
 @import "no_items/index";
 @import "panel/index";
 @import "prompt_for_items/index";
+@import "status_text/index";
 @import "table/index";
 @import "tabs/index";
 @import "tool_bar/index";

ui_framework/components/menu/_index.scss

@@ -0,0 +1 @@
+@import "menu";

ui_framework/components/menu/_menu.scss

@@ -0,0 +1,18 @@
+.kuiMenu {
+}
+
+.kuiMenu--contained {
+  border: $tableRowBorder;
+
+  .kuiMenuItem {
+    padding: 6px 10px;
+  }
+}
+
+.kuiMenuItem {
+  padding: 6px 0;
+
+  & + & {
+    border-top: $tableRowBorder;
+  }
+}

ui_framework/components/status_text/_index.scss

@@ -0,0 +1 @@
+@import "status_text";

ui_framework/components/status_text/_status_text.scss

@@ -0,0 +1,24 @@
+.kuiStatusText {
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.kuiStatusText--info {
+  color: $infoColor;
+}
+
+.kuiStatusText--success {
+  color: $successColor;
+}
+
+.kuiStatusText--warning {
+  color: $warningColor;
+}
+
+.kuiStatusText--error {
+  color: $errorColor;
+}
+
+  .kuiStatusText__icon {
+    margin-right: 6px;
+  }

ui_framework/components/typography/_typography.scss

@@ -17,3 +17,14 @@
   color: $fontColor;
   font-size: 18px;
 }
+
+/**
+ * 1. Override p.
+ */
+.kuiText {
+  margin: 0; /* 1 */
+  font-weight: 400; /* 1 */
+  color: $fontColor;
+  line-height: $lineHeight;
+  font-size: $fontSize;
+}

ui_framework/dist/ui_framework.css

@@ -17,7 +17,7 @@
  */
 /**
  * 1. Put 10px of space between each child.
- * 2. If there is only one child, align it to the right. If you wanted it aligned right, you
+ * 2. If there is only one section, align it to the right. If you wanted it aligned right, you
  *    wouldn't use the Bar in the first place.
  * 3. Children in the middle should center their content.
  * 4. Fix an IE bug which causes the last child to overflow the container.
@@ -82,7 +82,7 @@ body {
     /* 5 */ }
   .kuiBarSection:only-child {
     margin-left: auto;
-    /* 1 */ }
+    /* 2 */ }
   .kuiBarSection > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -229,6 +229,37 @@ body {
 .kuiButtonGroup--united .kuiButton + .kuiButton {
   margin-left: 2px; }
 
+.kuiEvent {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiEventSymbol {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
+  font-size: 14px;
+  line-height: 1.5;
+  padding-right: 8px; }
+
+.kuiEventBody {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 1 0%;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%; }
+
+.kuiEventBody__message {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #191E23; }
+
+.kuiEventBody__metadata {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #9fa3a7; }
+
 /**
  * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
  *    ugly default appearance which we can't customize, so our best option is to give Firefox
@@ -399,6 +430,71 @@ body {
     opacity: 0.4;
     cursor: not-allowed; }
 
+.kuiHeaderBar {
+  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: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 30px;
+  /* 1 */
+  border-bottom: 2px solid #E4E4E4; }
+
+/**
+ * 1. Align a single section to the left by default.
+ */
+.kuiHeaderBarSection {
+  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-flex: 1;
+  -webkit-flex: 1 1 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  margin-left: 25px;
+  margin-right: 25px; }
+  .kuiHeaderBarSection:not(:first-child):not(:last-child):not(:only-child) {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    /* 3 */ }
+  .kuiHeaderBarSection:first-child {
+    margin-left: 0; }
+  .kuiHeaderBarSection:last-child {
+    margin-right: 0;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 1 auto;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    /* 4 */
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
+    /* 5 */ }
+  .kuiHeaderBarSection:only-child {
+    margin-left: auto;
+    /* 2 */ }
+  .kuiHeaderBarSection > * + * {
+    margin-left: 10px;
+    /* 1 */ }
+  .kuiHeaderBarSection:only-child {
+    margin-left: 0;
+    /* 1 */ }
+
 /**
  * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
  *    from FontAwesome someday. When we do migrate away, we can just update this definition.
@@ -421,7 +517,7 @@ body {
   color: #417505; }
 
 .kuiIcon--warning {
-  color: #ffac15; }
+  color: #ec9800; }
 
 .kuiIcon--error {
   color: #D86051; }
@@ -838,6 +934,16 @@ body {
   font-size: 14px;
   font-weight: bold; }
 
+.kuiMenu--contained {
+  border: 1px solid #E4E4E4; }
+  .kuiMenu--contained .kuiMenuItem {
+    padding: 6px 10px; }
+
+.kuiMenuItem {
+  padding: 6px 0; }
+  .kuiMenuItem + .kuiMenuItem {
+    border-top: 1px solid #E4E4E4; }
+
 .kuiMicroButton {
   display: inline-block;
   /* 1 */
@@ -1041,6 +1147,31 @@ body {
 .kuiPromptForItems__actions {
   margin-top: 10px; }
 
+.kuiStatusText {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline; }
+
+.kuiStatusText--info {
+  color: #3fa8c7; }
+
+.kuiStatusText--success {
+  color: #417505; }
+
+.kuiStatusText--warning {
+  color: #ec9800; }
+
+.kuiStatusText--error {
+  color: #D86051; }
+
+.kuiStatusText__icon {
+  margin-right: 6px; }
+
 /**
  * 1. Make seamless transition from ToolBar to Table header.
  * 1. Make seamless transition from Table to ToolBarFooter header.
@@ -1258,7 +1389,7 @@ body {
     /* 5 */ }
   .kuiToolBarSection:only-child {
     margin-left: auto;
-    /* 1 */ }
+    /* 2 */ }
   .kuiToolBarSection > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -1327,7 +1458,7 @@ body {
     /* 5 */ }
   .kuiToolBarFooterSection:only-child {
     margin-left: auto;
-    /* 1 */ }
+    /* 2 */ }
   .kuiToolBarFooterSection > * + * {
     margin-left: 10px;
     /* 1 */ }
@@ -1425,5 +1556,17 @@ body {
   color: #191E23;
   font-size: 18px; }
 
+/**
+ * 1. Override p.
+ */
+.kuiText {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  color: #191E23;
+  line-height: 1.5;
+  font-size: 14px; }
+
 .kuiVerticalRhythm + .kuiVerticalRhythm {
   margin-top: 10px; }

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

@@ -7,9 +7,15 @@ import BarExample
 import ButtonExample
   from '../../views/button/button_example.jsx';
 
+import EventExample
+  from '../../views/event/event_example.jsx';
+
 import FormExample
   from '../../views/form/form_example.jsx';
 
+import HeaderBarExample
+  from '../../views/header_bar/header_bar_example.jsx';
+
 import IconExample
   from '../../views/icon/icon_example.jsx';
 
@@ -19,18 +25,24 @@ 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';
 
+import MenuExample
+  from '../../views/menu/menu_example.jsx';
+
 import MicroButtonExample
   from '../../views/micro_button/micro_button_example.jsx';
 
+import ModalExample
+  from '../../views/modal/modal_example.jsx';
+
 import PanelExample
   from '../../views/panel/panel_example.jsx';
 
+import StatusTextExample
+  from '../../views/status_text/status_text_example.jsx';
+
 import TableExample
   from '../../views/table/table_example.jsx';
 
@@ -53,9 +65,15 @@ const components = [{
 }, {
   name: 'Button',
   component: ButtonExample,
+}, {
+  name: 'Event',
+  component: EventExample,
 }, {
   name: 'Form',
   component: FormExample,
+}, {
+  name: 'HeaderBar',
+  component: HeaderBarExample,
 }, {
   name: 'Icon',
   component: IconExample,
@@ -68,6 +86,9 @@ const components = [{
 }, {
   name: 'LocalNav',
   component: LocalNavExample,
+}, {
+  name: 'Menu',
+  component: MenuExample,
 }, {
   name: 'MicroButton',
   component: MicroButtonExample,
@@ -77,6 +98,9 @@ const components = [{
 }, {
   name: 'Panel',
   component: PanelExample,
+}, {
+  name: 'StatusText',
+  component: StatusTextExample,
 }, {
   name: 'Table',
   component: TableExample,

ui_framework/doc_site/src/views/event/event.html

@@ -0,0 +1,15 @@
+<div class="kuiEvent">
+  <div class="kuiEventSymbol">
+    <span class="kuiIcon kuiIcon--error fa-warning"></span>
+  </div>
+
+  <div class="kuiEventBody">
+    <div class="kuiEventBody__message">
+    minimum_master_nodes setting of 1 is less than quorum of 2
+    </div>
+
+    <div class="kuiEventBody__metadata">
+      August 4, 2021
+    </div>
+  </div>
+</div>

ui_framework/doc_site/src/views/event/event_example.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Event',
+  description: (
+    <p>Events can represent updates, logs, notifications, and status changes.</p>
+  ),
+  html: require('./event.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Event Menu',
+  description: (
+    <p>You&rsquo;ll typically want to present them within a Menu.</p>
+  ),
+  html: require('./event_menu.html'),
+  hasDarkTheme: false,
+},]);

ui_framework/doc_site/src/views/event/event_menu.html

@@ -0,0 +1,56 @@
+<div class="kuiMenu">
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--error fa-warning"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          minimum_master_nodes setting of 1 is less than quorum of 2
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          August 4, 2021 02:23:28
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--error fa-warning"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          Cluster state is red because 17 primary shards are unassigned
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          August 3, 2021 12:00:54
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="kuiMenuItem">
+    <div class="kuiEvent">
+      <div class="kuiEventSymbol">
+        <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+      </div>
+
+      <div class="kuiEventBody">
+        <div class="kuiEventBody__message">
+          Elasticsearch node version mismatches detected: 5.1.0
+        </div>
+
+        <div class="kuiEventBody__metadata">
+          July 27, 2021 11:20:09
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

ui_framework/doc_site/src/views/header_bar/header_bar.html

@@ -0,0 +1,7 @@
+ <div class="kuiHeaderBar">
+  <div class="kuiHeaderBarSection">
+    <h2 class="kuiSubTitle">
+      Section 1
+    </h2>
+  </div>
+</div>

ui_framework/doc_site/src/views/header_bar/header_bar_example.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Header Bar',
+  html: require('./header_bar.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Two sections',
+  html: require('./header_bar_two_sections.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/header_bar/header_bar_two_sections.html

@@ -0,0 +1,16 @@
+ <div class="kuiHeaderBar">
+  <div class="kuiHeaderBarSection">
+    <h2 class="kuiSubTitle">
+      Cluster Alerts
+    </h2>
+  </div>
+
+  <div class="kuiHeaderBarSection">
+    <span class="kuiText">
+      <span class="kuiStatusText kuiStatusText--error">
+        <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+        Red health
+      </span>
+    </span>
+  </div>
+</div>

ui_framework/doc_site/src/views/menu/menu.html

@@ -0,0 +1,13 @@
+<div class="kuiMenu">
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item A</p>
+  </div>
+
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item B</p>
+  </div>
+
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item C</p>
+  </div>
+</div>

ui_framework/doc_site/src/views/menu/menu_contained.html

@@ -0,0 +1,13 @@
+<div class="kuiMenu kuiMenu--contained">
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item A</p>
+  </div>
+
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item B</p>
+  </div>
+
+  <div class="kuiMenuItem">
+    <p class="kuiText">Item C</p>
+  </div>
+</div>

ui_framework/doc_site/src/views/menu/menu_example.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Menu',
+  html: require('./menu.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Menu, contained',
+  html: require('./menu_contained.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/status_text/status_text_error.html

@@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--error">
+  <span class="kuiStatusText__icon kuiIcon fa-warning"></span>
+  Something&rsquo;s gone terribly wrong
+</span>

ui_framework/doc_site/src/views/status_text/status_text_example.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Info',
+  html: require('./status_text_info.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Success',
+  html: require('./status_text_success.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Warning',
+  html: require('./status_text_warning.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'Error',
+  html: require('./status_text_error.html'),
+  hasDarkTheme: false,
+}]);

ui_framework/doc_site/src/views/status_text/status_text_info.html

@@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--info">
+  <span class="kuiStatusText__icon kuiIcon fa-info"></span>
+  Just to let you know
+</span>

ui_framework/doc_site/src/views/status_text/status_text_success.html

@@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--success">
+  <span class="kuiStatusText__icon kuiIcon fa-check"></span>
+  Eveything is OK
+</span>

ui_framework/doc_site/src/views/status_text/status_text_warning.html

@@ -0,0 +1,4 @@
+<span class="kuiStatusText kuiStatusText--warning">
+  <span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
+  Careful!
+</span>

ui_framework/doc_site/src/views/table/controlled_table_no_items.html

@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <!-- NoResults -->
+  <!-- NoItems -->
   <div class="kuiPanel kuiPanel--centered">
     <div class="kuiNoItems">
       No Items matched your search.

ui_framework/doc_site/src/views/typography/text.html

@@ -0,0 +1,3 @@
+<p class="kuiText">
+  That was the winter the Sager froze over.
+</p>

ui_framework/doc_site/src/views/typography/typography_example.jsx

@@ -18,4 +18,11 @@ export default createExample([{
   ),
   html: require('./sub_title.html'),
   hasDarkTheme: false,
+}, {
+  title: 'Text',
+  description: (
+    <p>Works well with a <code className="guideCode">p</code>.</p>
+  ),
+  html: require('./text.html'),
+  hasDarkTheme: false,
 }]);