Added a small (size=“s”) version of the EuiCallOut

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