Moving EuiBreadcrumb styles to Emotion.

src-docs/src/views/breadcrumbs/breadcrumbs_example.js

@@ -3,8 +3,8 @@ import { Link } from 'react-router-dom';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiBreadcrumbs, EuiText } from '../../../../src/components';
-import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props';
+import { EuiBreadcrumbs, EuiCode, EuiText } from '../../../../src/components';
+import { BreadcrumbProps, BreadcrumbResponsiveMaxCount } from './props';
 
 import { breadcrumbsConfig } from './playground';
 
@@ -28,7 +28,7 @@ const maxSource = require('!!raw-loader!./max');
 import Color from './color';
 const colorSource = require('!!raw-loader!./color');
 
-const breadcrumpProps = {
+const props = {
   EuiBreadcrumbs,
   EuiBreadcrumb: BreadcrumbProps,
   EuiBreadcrumbResponsiveMaxCount: BreadcrumbResponsiveMaxCount,
@@ -84,7 +84,7 @@ export const BreadcrumbsExample = {
           />
         </>
       ),
-      props: breadcrumpProps,
+      props,
       playground: breadcrumbsConfig,
       snippet: `<EuiBreadcrumbs
   breadcrumbs={[
@@ -118,13 +118,13 @@ export const BreadcrumbsExample = {
         <>
           <p>
             Use the <EuiCode>max</EuiCode> prop to collapse breadcrumbs beyond a
-            certain number. The center breadcrumbs will collpase into a single
+            certain number. The center breadcrumbs will collapse into a single
             item allowing the user to navigate these items from within a
             popover.
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: `<EuiBreadcrumbs
   max={4}
   breadcrumbs={breadcrumbs}
@@ -149,7 +149,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <Truncate />,
       snippet: [
         `<EuiBreadcrumbs
@@ -174,7 +174,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <TruncateSingle />,
       snippet: [
         `<EuiBreadcrumbs
@@ -206,7 +206,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: [
         `<EuiBreadcrumbs
   responsive={false}
@@ -231,7 +231,7 @@ export const BreadcrumbsExample = {
           </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       snippet: [
         `<EuiBreadcrumbs
   responsive={{
@@ -258,9 +258,13 @@ export const BreadcrumbsExample = {
             emphasis or indicate state like <EuiCode>{"'danger'"}</EuiCode> for
             an error. However, use caution not to use color alone.
           </p>
+          <p>
+            Please also note that link colors cannot be overriden for{' '}
+            <EuiCode>type={'"application"'}</EuiCode> breadcrumbs.
+          </p>
         </>
       ),
-      props: breadcrumpProps,
+      props,
       demo: <Color />,
       source: [
         {

src-docs/src/views/breadcrumbs/playground.js

@@ -1,4 +1,4 @@
-import { EuiBreadcrumbs } from '../../../../src/components/breadcrumbs';
+import { EuiBreadcrumbs } from '../../../../src/components';
 import {
   propUtilityForPlayground,
   generateCustomProps,

src-docs/src/views/breadcrumbs/props.tsx

@@ -5,8 +5,8 @@ import {
   EuiBreadcrumbResponsiveMaxCount,
 } from '../../../../src/components/breadcrumbs';
 
+export const BreadcrumbProps: FunctionComponent<EuiBreadcrumb> = () => <div />;
+
 export const BreadcrumbResponsiveMaxCount: FunctionComponent<EuiBreadcrumbResponsiveMaxCount> = () => (
   <div />
 );
-
-export const BreadcrumbProps: FunctionComponent<EuiBreadcrumb> = () => <div />;