[UI Framework] [K7] Require modifiers for components with multiple ty…

…pes (elastic#13380) * Add primary KuiButton type. * Add info KuiCallOut type. * Remove commented-out SCSS.
cjcenizal · Aug 16, 2017 · a4e7fb3 · a4e7fb3
1 parent 0940ea3
commit a4e7fb3
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 60 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -345,9 +345,8 @@ table {
   cursor: pointer;
   height: 40px;
   text-decoration: none;
-  border: solid 1px #0079a5;
+  border: solid 1px transparent;
   border-radius: 4px;
-  color: #0079a5;
   padding: 0 12px;
   min-width: 112px;
   text-align: center;
@@ -360,8 +359,6 @@ table {
    */ }
   .kuiButton.kuiButton--small {
     height: 32px; }
-  .kuiButton .kuiButton__icon {
-    fill: #0079a5; }
   .kuiButton .kuiButton__content {
     display: -webkit-box;
     display: -webkit-flex;
@@ -384,15 +381,6 @@ table {
   .kuiButton:focus {
     -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
             animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
-  .kuiButton.kuiButton--fill {
-    background-color: #0079a5;
-    color: #FFF;
-    border-color: #0079a5; }
-    .kuiButton.kuiButton--fill:hover, .kuiButton.kuiButton--fill:focus {
-      background-color: #00668c;
-      border-color: #00668c; }
-    .kuiButton.kuiButton--fill .kuiButton__icon {
-      fill: #FFF; }
   .kuiButton.kuiButton--reverse .kuiButton__content {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
@@ -403,6 +391,23 @@ table {
       margin-left: 0;
       margin-right: 8px; }
 
+.kuiButton--primary {
+  color: #0079a5;
+  border-color: #0079a5; }
+  .kuiButton--primary .kuiButton__icon {
+    fill: #0079a5; }
+  .kuiButton--primary:hover, .kuiButton--primary:focus {
+    background-color: rgba(0, 121, 165, 0.1); }
+  .kuiButton--primary.kuiButton--fill {
+    background-color: #0079a5;
+    color: #FFF;
+    border-color: #0079a5; }
+    .kuiButton--primary.kuiButton--fill:hover, .kuiButton--primary.kuiButton--fill:focus {
+      background-color: #00668c;
+      border-color: #00668c; }
+    .kuiButton--primary.kuiButton--fill .kuiButton__icon {
+      fill: #FFF; }
+
 .kuiButton--secondary {
   color: #00A69B;
   border-color: #00A69B; }
@@ -484,9 +489,15 @@ table {
 
 .kuiCallOut {
   padding: 12px 24px;
-  border-left: 4px solid #0079a5;
-  background-color: #e6f2f6;
-  /* 1 */ }
+  border-left: 4px solid transparent; }
+
+.kuiCallOut--info {
+  border-color: #0079a5;
+  background-color: #e6f2f6; }
+  .kuiCallOut--info .kuiCallOutHeader__icon {
+    fill: #005574; }
+  .kuiCallOut--info .kuiCallOutHeader__title {
+    color: #005574; }
 
 .kuiCallOut--success {
   border-color: #00A69B;

diff --git a/ui_framework/doc_site/src/views/button/button.js b/ui_framework/doc_site/src/views/button/button.js
@@ -9,7 +9,7 @@ export default () => (
     <KuiButton
       onClick={() => window.alert('Button clicked')}
     >
-      Default
+      Primary
     </KuiButton>
 
     &nbsp;&nbsp;

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
@@ -10,9 +10,9 @@ import {
   GuideText,
 } from '../../components';
 
-import CallOut from './call_out';
-const callOutSource = require('!!raw!./call_out');
-const callOutHtml = renderToHtml(CallOut);
+import Info from './info';
+const infoSource = require('!!raw!./info');
+const infoHtml = renderToHtml(Info);
 
 import Success from './success';
 const successSource = require('!!raw!./success');
@@ -29,21 +29,21 @@ const dangerHtml = renderToHtml(Danger);
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
-      title="CallOut"
+      title="Info"
       source={[{
         type: GuideSectionTypes.JS,
-        code: callOutSource,
+        code: infoSource,
       }, {
         type: GuideSectionTypes.HTML,
-        code: callOutHtml,
+        code: infoHtml,
       }]}
     >
       <GuideText>
         Use this CallOut to communicate general information to the user.
       </GuideText>
 
       <GuideDemo>
-        <CallOut />
+        <Info />
       </GuideDemo>
     </GuideSection>
 

diff --git a/...k/doc_site/src/views/call_out/call_out.js → ...ework/doc_site/src/views/call_out/info.js b/...k/doc_site/src/views/call_out/call_out.js → ...ework/doc_site/src/views/call_out/info.js
diff --git a/ui_framework/src/components/button/_button.scss b/ui_framework/src/components/button/_button.scss
@@ -5,9 +5,8 @@
   cursor: pointer;
   height: $kuiSizeXXL;
   text-decoration: none;
-  border: solid 1px $kuiColorPrimary;
+  border: solid 1px transparent;
   border-radius: $kuiBorderRadius;
-  color: $kuiColorPrimary;
   padding: 0 ($kuiSize - $kuiSizeXS);
   min-width: $kuiSize * 7;
   text-align: center;
@@ -20,10 +19,6 @@
     height: $kuiSizeXL;
   }
 
-  .kuiButton__icon {
-    fill: $kuiColorPrimary;
-  }
-
   /**
    * 1. Apply margin to all but last item in the flex.
    */
@@ -46,21 +41,6 @@
     animation: kuiButtonFocus $kuiAnimSpeedNormal $kuiAnimSlightBounce;
   }
 
-  &.kuiButton--fill {
-    background-color: $kuiColorPrimary;
-    color: #FFF;
-    border-color: $kuiColorPrimary;
-
-    &:hover, &:focus {
-      background-color: darken($kuiColorPrimary, 5%);
-      border-color: darken($kuiColorPrimary, 5%);
-    }
-
-    .kuiButton__icon {
-      fill: #FFF;
-    }
-  }
-
   &.kuiButton--reverse {
     .kuiButton__content {
       flex-direction: row-reverse;
@@ -75,6 +55,7 @@
 
 // Modifier naming and colors.
 $buttonTypes: (
+  primary: $kuiColorPrimary,
   secondary: $kuiColorSecondary,
   warning: $kuiColorWarning,
   danger: $kuiColorDanger,

diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
@@ -10,9 +10,10 @@ import {
 } from '../icon';
 
 const typeToClassNameMap = {
-  danger: 'kuiButton--danger',
-  warning: 'kuiButton--warning',
+  primary: 'kuiButton--primary',
   secondary: 'kuiButton--secondary',
+  warning: 'kuiButton--warning',
+  danger: 'kuiButton--danger',
   disabled: 'kuiButton--disabled',
 };
 
@@ -25,16 +26,18 @@ const sizeToClassNameMap = {
 
 export const SIZES = Object.keys(sizeToClassNameMap);
 
-export const KuiButton = ({
-  children,
-  className,
-  iconType,
-  iconReverse,
-  type,
-  size,
-  fill,
-  ...rest,
-}) => {
+export const KuiButton = props => {
+  const {
+    children,
+    className,
+    iconType,
+    iconReverse,
+    type,
+    size,
+    fill,
+    ...rest,
+  } = props;
+
   const classes = classNames(
     'kuiButton',
     typeToClassNameMap[type],
@@ -83,5 +86,6 @@ KuiButton.propTypes = {
 
 KuiButton.defaultProps = {
   iconReverse: false,
+  type: 'primary',
   fill: false,
 };
diff --git a/ui_framework/src/components/call_out/_call_out.scss b/ui_framework/src/components/call_out/_call_out.scss
@@ -1,11 +1,11 @@
 .kuiCallOut {
   padding: $kuiSizeM $kuiSizeL;
-  border-left: 4px solid $kuiColorPrimary;
-  background-color: tintOrShade($kuiColorPrimary, 90%, 70%); /* 1 */
+  border-left: 4px solid transparent;
 }
 
 // Modifier naming and colors.
 $callOutTypes: (
+  info: $kuiColorPrimary,
   success: $kuiColorSecondary,
   warning: $kuiColorWarning,
   danger: $kuiColorDanger,
@@ -54,6 +54,5 @@ $callOutTypes: (
   }
 
   .kuiCallOutHeader__title {
-    // font-weight: $kuiFontWeightMedium;
     color: $kuiColorPrimary;
   }
diff --git a/ui_framework/src/components/call_out/call_out.js b/ui_framework/src/components/call_out/call_out.js
@@ -10,6 +10,7 @@ import {
 } from '../icon';
 
 const typeToClassNameMap = {
+  info: 'kuiCallOut--info',
   success: 'kuiCallOut--success',
   warning: 'kuiCallOut--warning',
   danger: 'kuiCallOut--danger',
@@ -56,3 +57,7 @@ KuiCallOut.propTypes = {
   iconType: PropTypes.oneOf(ICON_TYPES),
   type: PropTypes.oneOf(TYPES),
 };
+
+KuiCallOut.defaultProps = {
+  type: 'info',
+};