Added a small version of the EuiCallOut

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)
 

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 />,
   }, {

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>
 );

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;
+  }
 }
 
   /**

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',
 };