From 8603bd7bb07e1e6eabaac52d2226adfb1ff895f9 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 8 Jan 2018 15:07:05 -0500
Subject: [PATCH] =?UTF-8?q?Added=20a=20small=20(`size=3D=E2=80=9Cs?=
 =?UTF-8?q?=E2=80=9D`)=20version=20of=20the=20`EuiCallOut`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src-docs/src/views/call_out/call_out_example.js | 14 ++++++++++----
 src-docs/src/views/call_out/info.js             |  9 +++++++++
 src/components/call_out/_call_out.scss          |  9 +++++++++
 src/components/call_out/call_out.js             | 17 ++++++++++++++++-
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js
index 0552e7ce787..af78d14f755 100644
--- a/src-docs/src/views/call_out/call_out_example.js
+++ b/src-docs/src/views/call_out/call_out_example.js
@@ -38,10 +38,16 @@ export const CallOutExample = {
       code: infoHtml,
     }],
     text: (
-      <p>
-        Use <EuiCode>EuiCallOut</EuiCode> to communicate general information to the user.
-        Note that the <EuiCode>Icon</EuiCode> prop is optional.
-      </p>
+      <div>
+        <p>
+          Use <EuiCode>EuiCallOut</EuiCode> to communicate general information to the user.
+          Note that the <EuiCode>Icon</EuiCode> prop is optional.
+        </p>
+        <p>
+          For callouts that have a perminant spot in the UI, but need to be less obstructive,
+          set the <EuiCode>size</EuiCode> property to <EuiCode>s</EuiCode> (small).
+        </p>
+      </div>
     ),
     demo: <Info />,
   }, {
diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.js
index bc3641d1355..3235a63799a 100644
--- a/src-docs/src/views/call_out/info.js
+++ b/src-docs/src/views/call_out/info.js
@@ -27,5 +27,14 @@ export default () => (
       title="Callouts can exist as just a title. Simply omit the child content."
       iconType="gear"
     />
+
+    <EuiSpacer size="m" />
+
+    <EuiCallOut
+      size="s"
+      title="This is a small callout for more unintrusive but constant messages."
+      iconType="pin"
+    />
+
   </div>
 );
diff --git a/src/components/call_out/_call_out.scss b/src/components/call_out/_call_out.scss
index 11cbf8f1ef9..54a8a0b2c75 100644
--- a/src/components/call_out/_call_out.scss
+++ b/src/components/call_out/_call_out.scss
@@ -1,6 +1,10 @@
 .euiCallOut {
   padding: $euiSize;
   border-left: $euiSizeXS / 2 solid transparent;
+
+  &.euiCallOut--small {
+    padding: $euiSizeS;
+  }
 }
 
 // Modifier naming and colors.
@@ -46,6 +50,11 @@ $callOutTypes: (
   > * + * {
     margin-left: $euiSizeS; /* 3 */
   }
+
+  // smaller font size for headers in small callout
+  .euiCallOut--small & {
+    @include euiFontSizeS;
+  }
 }
 
   /**
diff --git a/src/components/call_out/call_out.js b/src/components/call_out/call_out.js
index 827ef7f2973..81874f2c62c 100644
--- a/src/components/call_out/call_out.js
+++ b/src/components/call_out/call_out.js
@@ -21,15 +21,28 @@ const colorToClassNameMap = {
 
 export const COLORS = Object.keys(colorToClassNameMap);
 
+const sizeToClassNameMap = {
+  s: 'euiCallOut--small',
+  m: '',
+};
+
+export const SIZES = Object.keys(sizeToClassNameMap);
+
 export const EuiCallOut = ({
   title,
   color,
+  size,
   iconType,
   children,
   className,
   ...rest
 }) => {
-  const classes = classNames('euiCallOut', colorToClassNameMap[color], className);
+  const classes = classNames(
+    'euiCallOut',
+    colorToClassNameMap[color],
+    sizeToClassNameMap[size],
+    className,
+  );
 
   let headerIcon;
 
@@ -77,8 +90,10 @@ EuiCallOut.propTypes = {
   title: PropTypes.node,
   iconType: PropTypes.oneOf(ICON_TYPES),
   color: PropTypes.oneOf(COLORS),
+  size: PropTypes.oneOf(SIZES),
 };
 
 EuiCallOut.defaultProps = {
   color: 'primary',
+  size: 'm',
 };