Moving EuiBreadcrumb styles to Emotion. (#5934)

* Moving EuiBreadcrumb styles to Emotion.

* Adding basic Emotion styles for links and content.
* Adding the truncated link and content styles to Emotion.
* Added all rules to Emotion. Testing for visual regression.
* Fixed the focus halo for overflow:hidden declarations.
* Removed breadcrumb overrides from Amsterdam theme.
* Added last styles for individual truncated content.
* Final Emotion style updates and a11y QA testing complete.
* Updating snapshot tests for breadcrumb Emotion styles.

* Adding EUIHeaderBreadcrumb styles.

* Removing first group of SCSS files ahead of Amsterdam overrides.
* Moving Amsterdam overrides to Emotion.
* Added majority of the header breadcrumb styles.
* Header styles are now contained, not casting into regular breadcrumbs.
* Last color and bgColor styles added.
* Removed Amsterdam SCSS overrides file.
* Updating Jest snapshots for Emotion.
* Adding CHANGELOG, final mobile styles.

* Apply suggestions from code review

* Fix Prettier complaints from GitHub suggestions

* [PR feedback] Rename `headerBreadcrumb` to use boolean var naming

+ clarify prop documentation
+ simplify style declaration

* Split out internal EuiBreadcrumb & EuiBreadcrumbContent components

- for easier dev readability and testing

+ remove unnecessary classNames modifiers - they're not used in Kibana anywhere

* Simplify text truncation CSS

- pass `maxWidth` to text truncation util

- instead of using `> a` or `> span` selectors, just set the styles directly on the content child + use JS to conditionally skip the last breadcrumb

- remove `isTruncated` on parent li, it's no longer needed

* Remove unnecessary repeated font-weight declarations

- they're already handled in the content CSS and incidentally also in EuiLink styles

* Simplify and clean up nested .euiBreadcrumb styles

- apply nested CSS to .euiBreadcrumb__content directly instead of using nested selectors

- use a nested object and conditional JS logic (vs first/only/last-child) to flatten and DRY out CSS

* Refactor `EuiBreadcrumbCollapsed` into separate component

- Remove unnecessary `--collapsed` modifier class

- DRY out `<li>` and `__content` logic/styles by reusing the `EuiBreadcrumb` and `EuiBreadcrumbContent` components, passing props/overrides as necessary

- Allow any children as `EuiBreadcrumb` child to support this behavior/the popover

- Pass EuiBreadcrumbContent in at the EuiBreadcrumbs level as a result

* Remove `inPopover` CSS/nesting

- in favor of JS logic instead

* Misc EuiBreadcrumbs CSS cleanup

- remove unnecessary `--truncate` modifier - not used in Kibana

* Fix EuiControlBar Sass styling

+ update snapshots

* Refactor responsive detection/calculation logic to separate util

- For easier dev readability / testing

+ microperf optimization onWindowResize: move declaration to useEffect so it's only declared every time `responsive` changes instead of on every rerender
+ remove unnecessary conditional around state setter, React already does its own optimization around values that stay the same

* Refactor & optimize limitBreadcrumbs

- Move to separate util for easier reading / testing

- Memoize both limitBreadcrumb and breadcrumb mapping so arrays aren't being traversed on every rerender

- refactor: instead of potentially rendering a bunch of hidden breadcrumb elements that never get displayed, splice the breadcrumbs array first, insert a custom object that signifies the EuiBreadcrumbCollapsed button, and then have the element traversal map handle conditionally rendering the collapse button in-place

* [PR feedback] Hide new header styling and nested/popover props from docs

- rename both props to be more specific, since they're now internal only / used for a specific purpose

- move both props to an underscore prefixed type and modify props table and playground to not display them

* [PR feedback] Change internal `isInEuiHeader` prop to an exposed `type` prop

* Refactor out last internal prop to more descriptive flag

- This may be useful to other consumers where their last breadcrumb is not the current page

+ tweak styling to show color difference for both `span`s and `a` tags - using JS `color` props instead of CSS

+ fix `color` prop being passed to underlying span tags

* Fix the "Truncate each breadcrumb" example not matching production

- the `<li>` parent still needs an overflow hidden as it turns out

- the last breadcrumb also still needs text truncation styles, it's just max-width should be set ot none

* Fix useCurrentEuiBreakpoint refactor lost in merge conflict

* Remove deleted Sass variables from JSON files and document in changelog

* woops 1 more smol thing

Co-authored-by: Constance <[email protected]>
Co-authored-by: Constance Chen <[email protected]>

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

src-docs/src/views/theme/_json/eui_theme_dark.json

@@ -3,8 +3,6 @@
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"
   },
-  "euiBreadcrumbSpacing": "8px",
-  "euiBreadcrumbTruncateWidth": "160px",
   "euiButtonEmptyTypes": {
     "primary": "#36a2ef",
     "danger": "#f86b63",
@@ -660,4 +658,4 @@
     "warning": "#f3d371",
     "danger": "#f86b63"
   }
-}
+}

src-docs/src/views/theme/_json/eui_theme_light.json

@@ -3,8 +3,6 @@
     "gutterExtraSmall": "4px",
     "gutterSmall": "8px"
   },
-  "euiBreadcrumbSpacing": "8px",
-  "euiBreadcrumbTruncateWidth": "160px",
   "euiButtonEmptyTypes": {
     "primary": "#0071c2",
     "danger": "#bd271e",
@@ -660,4 +658,4 @@
     "warning": "#fec514",
     "danger": "#bd271e"
   }
-}
+}