[UI Framework] [K7] Add KuiCallOut component. (#13306)

* Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class.
elastic · Aug 3, 2017 · af2c8b0 · af2c8b0
1 parent d353f19
commit af2c8b0
Show file tree

Hide file tree

Showing 40 changed files with 825 additions and 213 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -352,22 +352,19 @@ table {
   text-align: center;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
-  whitespace: nowrap; }
+  whitespace: nowrap;
+  /**
+   * 1. Apply margin to all but last item in the flex.
+   */ }
   .kuiButton.kuiButton--small {
     height: 32px; }
   .kuiButton .kuiButton__icon {
-    vertical-align: -2px;
     fill: #0079a5; }
   .kuiButton .kuiButton__content {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
@@ -377,7 +374,8 @@ table {
         -ms-flex-align: center;
             align-items: center; }
     .kuiButton .kuiButton__content > * + * {
-      margin-left: 8px; }
+      margin-left: 8px;
+      /* 1 */ }
   .kuiButton:hover, .kuiButton:focus {
     text-decoration: underline;
     background-color: rgba(0, 121, 165, 0.1); }
@@ -420,23 +418,6 @@ table {
     .kuiButton--secondary.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
 
-.kuiButton--danger {
-  color: #A30000;
-  border-color: #A30000; }
-  .kuiButton--danger .kuiButton__icon {
-    fill: #A30000; }
-  .kuiButton--danger:hover, .kuiButton--danger:focus {
-    background-color: rgba(163, 0, 0, 0.1); }
-  .kuiButton--danger.kuiButton--fill {
-    background-color: #A30000;
-    color: #FFF;
-    border-color: #A30000; }
-    .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
-      background-color: #8a0000;
-      border-color: #8a0000; }
-    .kuiButton--danger.kuiButton--fill .kuiButton__icon {
-      fill: #FFF; }
-
 .kuiButton--warning {
   color: #E5830E;
   border-color: #E5830E; }
@@ -454,6 +435,23 @@ table {
     .kuiButton--warning.kuiButton--fill .kuiButton__icon {
       fill: #FFF; }
 
+.kuiButton--danger {
+  color: #A30000;
+  border-color: #A30000; }
+  .kuiButton--danger .kuiButton__icon {
+    fill: #A30000; }
+  .kuiButton--danger:hover, .kuiButton--danger:focus {
+    background-color: rgba(163, 0, 0, 0.1); }
+  .kuiButton--danger.kuiButton--fill {
+    background-color: #A30000;
+    color: #FFF;
+    border-color: #A30000; }
+    .kuiButton--danger.kuiButton--fill:hover, .kuiButton--danger.kuiButton--fill:focus {
+      background-color: #8a0000;
+      border-color: #8a0000; }
+    .kuiButton--danger.kuiButton--fill .kuiButton__icon {
+      fill: #FFF; }
+
 .kuiButton--disabled {
   color: #c5c5c5;
   border-color: #c5c5c5; }
@@ -482,6 +480,70 @@ table {
     -webkit-transform: translateY(2px);
             transform: translateY(2px); } }
 
+.kuiCallOut {
+  padding: 16px 24px;
+  border-left: 4px solid #0079a5;
+  background-color: #e6f2f6;
+  /* 1 */ }
+
+.kuiCallOut--success {
+  border-color: #00A69B;
+  background-color: #e6f6f5; }
+  .kuiCallOut--success .kuiCallOutHeader__icon {
+    fill: #00746d; }
+  .kuiCallOut--success .kuiCallOutHeader__title {
+    color: #00746d; }
+
+.kuiCallOut--warning {
+  border-color: #E5830E;
+  background-color: #fcf3e7; }
+  .kuiCallOut--warning .kuiCallOutHeader__icon {
+    fill: #a05c0a; }
+  .kuiCallOut--warning .kuiCallOutHeader__title {
+    color: #a05c0a; }
+
+.kuiCallOut--danger {
+  border-color: #A30000;
+  background-color: #f6e6e6; }
+  .kuiCallOut--danger .kuiCallOutHeader__icon {
+    fill: #720000; }
+  .kuiCallOut--danger .kuiCallOutHeader__title {
+    color: #720000; }
+
+/**
+ * 1. Align icon with first line of title text if it wraps.
+ * 2. Apply margin to all but last item in the flex.
+ */
+.kuiCallOutHeader {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px;
+  margin-bottom: 9px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: baseline;
+  -webkit-align-items: baseline;
+      -ms-flex-align: baseline;
+          align-items: baseline;
+  /* 1 */ }
+  .kuiCallOutHeader > * + * {
+    margin-left: 8px;
+    /* 2 */ }
+
+/**
+   * 1. Vertically center icon with first line of title.
+   */
+.kuiCallOutHeader__icon {
+  fill: #0079a5;
+  -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+  /* 1 */ }
+
+.kuiCallOutHeader__title {
+  color: #0079a5; }
+
 .kuiHeader {
   display: -webkit-box;
   display: -webkit-flex;
@@ -675,12 +737,14 @@ table {
 
 .kuiIcon {
   display: inline-block;
-  fill: #3F3F3F;
   vertical-align: middle; }
   .kuiIcon:focus {
     opacity: 1;
     background: #e6f2f6; }
 
+.kuiIcon--basic {
+  fill: #3F3F3F; }
+
 .kuiIcon--medium {
   width: 16px;
   height: 16px; }
@@ -1490,3 +1554,26 @@ table {
   line-height: 24px;
   color: #3F3F3F;
   font-weight: 400; }
+
+.kuiText--small {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 18px; }
+
+.kuiVerticalRhythm {
+  margin-bottom: 12px; }
+
+.kuiVerticalRhythm--xSmall {
+  margin-bottom: 9px; }
+
+.kuiVerticalRhythm--small {
+  margin-bottom: 9px; }
+
+.kuiVerticalRhythm--large {
+  margin-bottom: 18px; }
+
+.kuiVerticalRhythm--xLarge {
+  margin-bottom: 24px; }
+
+.kuiVerticalRhythm--xxLarge {
+  margin-bottom: 36px; }
diff --git a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
@@ -1,6 +1,6 @@
 .guideCode {
-  padding: 2px 4px;
+  padding: 0 0.25em;
   font-family: 'Roboto Mono', monospace;
-  background-color: #e8e8e8;
-  color: #565656;
+  color: #000000;
+  font-size: 0.9em
 }
diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -6,6 +6,9 @@ import AccessibilityExample
 import ButtonExample
   from '../../views/button/button_example';
 
+import CallOutExample
+  from '../../views/call_out/call_out_example';
+
 import IconExample
   from '../../views/icon/icon_example';
 
@@ -52,13 +55,17 @@ const components = [{
   component: ButtonExample,
   hasReact: true,
 }, {
-  name: 'Icon',
-  component: IconExample,
+  name: 'CallOut',
+  component: CallOutExample,
   hasReact: true,
 }, {
   name: 'Header',
   component: HeaderExample,
   hasReact: true,
+}, {
+  name: 'Icon',
+  component: IconExample,
+  hasReact: true,
 }, {
   name: 'KeyPadMenu',
   component: KeyPadMenuExample,
@@ -67,6 +74,10 @@ const components = [{
   name: 'Link',
   component: LinkExample,
   hasReact: true,
+}, {
+  name: 'Loading',
+  component: LoadingExample,
+  hasReact: true,
 }, {
   name: 'Modal',
   component: ModalExample,
@@ -75,10 +86,6 @@ const components = [{
   name: 'Page',
   component: PageExample,
   hasReact: true,
-}, {
-  name: 'Loading',
-  component: LoadingExample,
-  hasReact: true,
 }, {
   name: 'Popover',
   component: PopoverExample,

diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -8,7 +8,7 @@ export default () => (
   <div>
     <KuiButton
       onClick={() => window.alert('Button clicked')}
-      icon="arrowUp"
+      iconType="arrowUp"
     >
       Default
     </KuiButton>
@@ -17,7 +17,7 @@ export default () => (
 
     <KuiButton
       fill
-      icon="arrowDown"
+      iconType="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -26,7 +26,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon="arrowLeft"
+      iconType="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -36,7 +36,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon="arrowRight"
+      iconType="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
@@ -49,7 +49,7 @@ export default () => (
     <KuiButton
       iconReverse
       onClick={() => window.alert('Button clicked')}
-      icon="arrowUp"
+      iconType="arrowUp"
     >
       Default
     </KuiButton>
@@ -59,7 +59,7 @@ export default () => (
     <KuiButton
       iconReverse
       fill
-      icon="arrowDown"
+      iconType="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -69,7 +69,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon="arrowLeft"
+      iconType="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -80,7 +80,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon="arrowRight"
+      iconType="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}

diff --git a/ui_framework/doc_site/src/views/call_out/call_out.js b/ui_framework/doc_site/src/views/call_out/call_out.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  KuiCallOut,
+  KuiLink,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiCallOut
+    title="Check it out, here's a really long title that will wrap within a narrower browser"
+    iconType="search"
+  >
+    <KuiText size="small" verticalRhythm>
+      <p>
+        Here&rsquo;s some stuff that you need to know. We can make this text really long so that,
+        when viewed within a browser that&rsquo;s fairly narrow, it will wrap, too.
+      </p>
+    </KuiText>
+
+    <KuiText size="small">
+      <p>
+        And some other stuff on another line, just for kicks. And <KuiLink href="#">here&rsquo;s a link</KuiLink>.
+      </p>
+    </KuiText>
+  </KuiCallOut>
+);