From af2c8b08883fcbc135fd8cfa8eb49e66f021a3a3 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 3 Aug 2017 14:50:39 -0700 Subject: [PATCH] [UI Framework] [K7] Add KuiCallOut component. (#13306) * Add KuiCallOut component. - Add verticalRhythm prop to Typography components. - Add kuiIcon--basic class. --- ui_framework/dist/ui_framework.css | 139 ++++++++++++++---- .../components/guide_code/_guide_code.scss | 6 +- .../doc_site/src/services/routes/routes.js | 19 ++- .../src/views/button/button_with_icon.js | 16 +- .../doc_site/src/views/call_out/call_out.js | 27 ++++ .../src/views/call_out/call_out_example.js | 107 ++++++++++++++ .../doc_site/src/views/call_out/danger.js | 21 +++ .../doc_site/src/views/call_out/success.js | 21 +++ .../doc_site/src/views/call_out/warning.js | 21 +++ .../doc_site/src/views/header/header.js | 14 +- ui_framework/doc_site/src/views/icon/apps.js | 66 +++------ ui_framework/doc_site/src/views/icon/icons.js | 56 +++---- .../src/views/typography/small_text.js | 17 +++ .../src/views/typography/typography.js | 32 ++-- .../views/typography/typography_example.js | 29 ++++ .../src/components/button/_button.scss | 12 +- ui_framework/src/components/button/button.js | 31 ++-- .../__snapshots__/call_out.test.js.snap | 17 +++ .../src/components/call_out/_call_out.scss | 59 ++++++++ .../src/components/call_out/_index.scss | 1 + .../src/components/call_out/call_out.js | 58 ++++++++ .../src/components/call_out/call_out.test.js | 16 ++ ui_framework/src/components/call_out/index.js | 1 + .../icon/__snapshots__/icon.test.js.snap | 46 +++--- ui_framework/src/components/icon/_icon.scss | 5 +- .../src/components/icon/assets/help.svg | 4 +- ui_framework/src/components/icon/icon.js | 7 +- ui_framework/src/components/icon/index.js | 1 + ui_framework/src/components/index.js | 5 + ui_framework/src/components/index.scss | 2 + .../__snapshots__/loading_kibana.test.js.snap | 2 +- .../page/page_content/page_content.js | 2 +- .../__snapshots__/typography.test.js.snap | 12 +- .../components/typography/_typography.scss | 4 + .../src/components/typography/typography.js | 60 ++++++-- .../components/typography/typography.test.js | 22 ++- .../components/vertical_rhythm/_index.scss | 1 + .../vertical_rhythm/_vertical_rhythm.scss | 23 +++ .../src/global_styling/variables/_colors.scss | 24 ++- .../global_styling/variables/_typography.scss | 32 +++- 40 files changed, 825 insertions(+), 213 deletions(-) create mode 100644 ui_framework/doc_site/src/views/call_out/call_out.js create mode 100644 ui_framework/doc_site/src/views/call_out/call_out_example.js create mode 100644 ui_framework/doc_site/src/views/call_out/danger.js create mode 100644 ui_framework/doc_site/src/views/call_out/success.js create mode 100644 ui_framework/doc_site/src/views/call_out/warning.js create mode 100644 ui_framework/doc_site/src/views/typography/small_text.js create mode 100644 ui_framework/src/components/call_out/__snapshots__/call_out.test.js.snap create mode 100644 ui_framework/src/components/call_out/_call_out.scss create mode 100644 ui_framework/src/components/call_out/_index.scss create mode 100644 ui_framework/src/components/call_out/call_out.js create mode 100644 ui_framework/src/components/call_out/call_out.test.js create mode 100644 ui_framework/src/components/call_out/index.js create mode 100644 ui_framework/src/components/vertical_rhythm/_index.scss create mode 100644 ui_framework/src/components/vertical_rhythm/_vertical_rhythm.scss diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 1ba0b18f66b47..e1d09b2bd4f2f 100644 --- 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 index 8ae357af031de..16900a97e2f20 100644 --- 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 index 337bacc441bb6..4891e589aae46 100644 --- 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 index da9168564b3cd..1d78946e52e4a 100644 --- 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 () => (
window.alert('Button clicked')} - icon="arrowUp" + iconType="arrowUp" > Default @@ -17,7 +17,7 @@ export default () => ( window.alert('Button clicked')} > Filled @@ -26,7 +26,7 @@ export default () => (    window.alert('Button clicked')} > @@ -36,7 +36,7 @@ export default () => (    window.alert('Button clicked')} @@ -49,7 +49,7 @@ export default () => ( window.alert('Button clicked')} - icon="arrowUp" + iconType="arrowUp" > Default @@ -59,7 +59,7 @@ export default () => ( window.alert('Button clicked')} > Filled @@ -69,7 +69,7 @@ export default () => ( window.alert('Button clicked')} > @@ -80,7 +80,7 @@ export default () => ( 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 new file mode 100644 index 0000000000000..7960ad477d39b --- /dev/null +++ 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 () => ( + + +

+ Here’s some stuff that you need to know. We can make this text really long so that, + when viewed within a browser that’s fairly narrow, it will wrap, too. +

+ + + +

+ And some other stuff on another line, just for kicks. And here’s a link. +

+ + +); diff --git a/ui_framework/doc_site/src/views/call_out/call_out_example.js b/ui_framework/doc_site/src/views/call_out/call_out_example.js new file mode 100644 index 0000000000000..dc0dd3368e1eb --- /dev/null +++ b/ui_framework/doc_site/src/views/call_out/call_out_example.js @@ -0,0 +1,107 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideDemo, + GuidePage, + GuideSection, + GuideSectionTypes, + GuideText, +} from '../../components'; + +import CallOut from './call_out'; +const callOutSource = require('!!raw!./call_out'); +const callOutHtml = renderToHtml(CallOut); + +import Success from './success'; +const successSource = require('!!raw!./success'); +const successHtml = renderToHtml(Success); + +import Warning from './warning'; +const warningSource = require('!!raw!./warning'); +const warningHtml = renderToHtml(Warning); + +import Danger from './danger'; +const dangerSource = require('!!raw!./danger'); +const dangerHtml = renderToHtml(Danger); + +export default props => ( + + + + Use this CallOut to communicate general information to the user. + + + + + + + + + + Use this CallOut to notify the user of a succesfully completed action. + + + + + + + + + + Use this CallOut to warn the user against decisions they might regret. + + + + + + + + + + Use this CallOut to let the user know something went wrong. + + + + + + + +); diff --git a/ui_framework/doc_site/src/views/call_out/danger.js b/ui_framework/doc_site/src/views/call_out/danger.js new file mode 100644 index 0000000000000..42d4583fbff85 --- /dev/null +++ b/ui_framework/doc_site/src/views/call_out/danger.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { + KuiCallOut, + KuiLink, + KuiText, +} from '../../../../components'; + +export default () => ( + + +

+ Now you have to fix it, but maybe this link can help. +

+ + +); diff --git a/ui_framework/doc_site/src/views/call_out/success.js b/ui_framework/doc_site/src/views/call_out/success.js new file mode 100644 index 0000000000000..39ba9d836f239 --- /dev/null +++ b/ui_framework/doc_site/src/views/call_out/success.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { + KuiCallOut, + KuiLink, + KuiText, +} from '../../../../components'; + +export default () => ( + + +

+ I have no news. Which is good! And here’s a link. +

+ + +); diff --git a/ui_framework/doc_site/src/views/call_out/warning.js b/ui_framework/doc_site/src/views/call_out/warning.js new file mode 100644 index 0000000000000..d7b9b4ba9955c --- /dev/null +++ b/ui_framework/doc_site/src/views/call_out/warning.js @@ -0,0 +1,21 @@ +import React from 'react'; + +import { + KuiCallOut, + KuiLink, + KuiText, +} from '../../../../components'; + +export default () => ( + + +

+ Here be dragons. Don’t wanna mess with no dragons. And here’s a link. +

+ + +); diff --git a/ui_framework/doc_site/src/views/header/header.js b/ui_framework/doc_site/src/views/header/header.js index 943634f7feac4..afb03df8bc394 100644 --- a/ui_framework/doc_site/src/views/header/header.js +++ b/ui_framework/doc_site/src/views/header/header.js @@ -84,7 +84,10 @@ export default class extends Component { renderSearch() { return ( - + ); } @@ -92,8 +95,13 @@ export default class extends Component { renderUserMenu() { const button = ( - - 3 + + + 3 + ); diff --git a/ui_framework/doc_site/src/views/icon/apps.js b/ui_framework/doc_site/src/views/icon/apps.js index 01ba7a66f6cd4..f2f979acb4db9 100644 --- a/ui_framework/doc_site/src/views/icon/apps.js +++ b/ui_framework/doc_site/src/views/icon/apps.js @@ -3,54 +3,28 @@ import React from 'react'; import { KuiIcon, } from '../../../../components'; +const iconTypes = [ + 'dashboardApp', + 'devToolsApp', + 'discoverApp', + 'graphApp', + 'machineLearningApp', + 'timelionApp', + 'visualizeApp', +]; export default () => (
- - -   - - - -   - - - -   - - - -   - - - -   - - - -   - - + { + iconTypes.map(iconType => ( + + +   + + )) + }
); diff --git a/ui_framework/doc_site/src/views/icon/icons.js b/ui_framework/doc_site/src/views/icon/icons.js index 5be1700933e34..b7926857de1bb 100644 --- a/ui_framework/doc_site/src/views/icon/icons.js +++ b/ui_framework/doc_site/src/views/icon/icons.js @@ -4,40 +4,30 @@ import { KuiIcon, } from '../../../../components'; +const iconTypes = [ + 'apps', + 'search', + 'user', + 'cross', + 'help', + 'arrowUp', + 'arrowDown', + 'arrowLeft', + 'arrowRight', +]; + export default () => (
- - -   - - - -   - - - -   - - - -   - - - -   - - - -   - - - -   - - - -   - - + { + iconTypes.map(iconType => ( + + +   + + )) + }
); diff --git a/ui_framework/doc_site/src/views/typography/small_text.js b/ui_framework/doc_site/src/views/typography/small_text.js new file mode 100644 index 0000000000000..81b6dedbc10ce --- /dev/null +++ b/ui_framework/doc_site/src/views/typography/small_text.js @@ -0,0 +1,17 @@ +import React from 'react'; + +import { + KuiText, +} from '../../../../components'; + +export default () => ( + +

+ The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was { + // react/jsx-closing-tag-location + } just practicing mindfulness, so really in the long run it was much more { + // react/jsx-closing-tag-location + } satisfied with its life than that fox was. +

+ +); diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js index 7b38493da33d4..bad1a763042a9 100644 --- a/ui_framework/doc_site/src/views/typography/typography.js +++ b/ui_framework/doc_site/src/views/typography/typography.js @@ -7,29 +7,43 @@ import { export default () => (
- +

This is the title of the page -- descriptive enough for ya?

 - +

And this is a section within the page

 - -

Note

+ +

A brief note on lazy dogs and quick foxes

 - +

- The quick brown fox jumped over the lazy dog. + Once upon a time in a land far, far away, a quick brown fox jumped over a lazy dog.

- +

- But the dog wasn't lazy, it was just + But the dog wasn’t lazy, it was just practicing mindfulness, so it had a greater sense of - life-satisfaction than that fox with all its jumping. + life-satisfaction than that fox with all its silly jumping. +

+ + + +

+ And from the fox’s perspective, life was full of hoops to jump through, low-hanging + fruit to jump for, and dead car batteries to jump-start. +

+ + + +

+ So it thought the dog was making a poor life choice by focusing so much on mindfulness. + What if its car broke down?

diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js index a0c73ad360954..eea71905a7ae5 100644 --- a/ui_framework/doc_site/src/views/typography/typography_example.js +++ b/ui_framework/doc_site/src/views/typography/typography_example.js @@ -3,6 +3,7 @@ import React from 'react'; import { renderToHtml } from '../../services'; import { + GuideCode, GuideDemo, GuidePage, GuideSection, @@ -30,6 +31,10 @@ import Text from './text'; const textSource = require('!!raw!./text'); const textHtml = renderToHtml(Text); +import SmallText from './small_text'; +const smallTextSource = require('!!raw!./small_text'); +const smallTextHtml = renderToHtml(SmallText); + export default props => ( ( code: typographyHtml, }]} > + + You can set the verticalRhythm prop to automatically create vertical + spacing between typographic components. + + @@ -128,5 +138,24 @@ export default props => ( + + + + For less-important paragraphs. + + + + + + ); diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss index f35d19501e08d..4eff8b618dac0 100644 --- a/ui_framework/src/components/button/_button.scss +++ b/ui_framework/src/components/button/_button.scss @@ -20,19 +20,19 @@ } .kuiButton__icon { - vertical-align: -2px; fill: $kuiColorPrimary; } + /** + * 1. Apply margin to all but last item in the flex. + */ .kuiButton__content { display: flex; - flex-direction: row; justify-content: center; align-items: center; - // Apply margin to all but last item in the flex. > * + * { - margin-left: $kuiSizeS; + margin-left: $kuiSizeS; /* 1 */ } } @@ -61,7 +61,6 @@ } &.kuiButton--reverse { - .kuiButton__content { flex-direction: row-reverse; // Margin gets flipped because of the row-reverse. @@ -73,12 +72,11 @@ } } - // Modifier naming and colors. $buttonTypes: ( secondary: $kuiColorSecondary, - danger: $kuiColorDanger, warning: $kuiColorWarning, + danger: $kuiColorDanger, disabled: tintOrShade($kuiTextColor, 70%, 80%) ); diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js index b199f9de108b5..6390cae4ddf55 100644 --- a/ui_framework/src/components/button/button.js +++ b/ui_framework/src/components/button/button.js @@ -2,8 +2,13 @@ import React, { Component, PropTypes, } from 'react'; + import classNames from 'classnames'; -import { KuiIcon } from '../../components'; + +import { + ICON_TYPES, + KuiIcon, +} from '../icon'; const typeToClassNameMap = { danger: 'kuiButton--danger', @@ -12,12 +17,13 @@ const typeToClassNameMap = { disabled: 'kuiButton--disabled', }; +export const TYPES = Object.keys(typeToClassNameMap); + const sizeToClassNameMap = { small: 'kuiButton--small', large: 'kuiButton--large', }; -export const TYPES = Object.keys(typeToClassNameMap); export const SIZES = Object.keys(sizeToClassNameMap); export class KuiButton extends Component { @@ -29,7 +35,7 @@ export class KuiButton extends Component { const { children, className, - icon, + iconType, iconReverse, type, size, @@ -49,16 +55,16 @@ export class KuiButton extends Component { ); // Add an icon to the button if one exists. - let buttonIcon = null; - if (icon) { + let buttonIcon; + + if (iconType) { buttonIcon = ( - +