From 8c538ad2ebf7bbbb751dfc4a46b8dc0f20f335d3 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 8 Jan 2018 17:49:20 -0500
Subject: [PATCH] Added a small version of the EuiCallOut (#269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Added a small (`size=“s”`) version of the `EuiCallOut`
---
 CHANGELOG.md                                  |  1 +
 .../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           | 25 +++++++++++++++++--
 5 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8980593cc9a..4d4f265d8d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added Apache, Nginx, MySQL logos [(#270)](https://github.com/elastic/eui/pull/270)
 - Fixed `<EuiContextMenu>` to pass the `event` argument to a `<EuiContextMenuItem>`'s `onClick` handler even when a panel is defined. [(#265)](https://github.com/elastic/eui/pull/265)
+- Added small version of `EuiCallOut` [(#269)](https://github.com/elastic/eui/pull/269)
 
 # [`0.0.11`](https://github.com/elastic/eui/tree/v0.0.11)
 
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..9e2692476aa 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;
 
@@ -45,7 +58,13 @@ export const EuiCallOut = ({
   }
 
   let optionalChildren;
-  if (children) {
+  if (children && size === 's') {
+    optionalChildren = (
+      <EuiText size="xs">
+        {children}
+      </EuiText>
+    );
+  } else if (children) {
     optionalChildren = (
       <EuiText size="s">
         {children}
@@ -77,8 +96,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',
 };