Use EuiInnerText in EuiBreadcrumbs (#2425)

* use euiinnertext instead * CL
elastic · Oct 14, 2019 · 12cfaf2 · 12cfaf2
1 parent 0bc49c4
commit 12cfaf2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,19 +4,20 @@
 - Added new `EuiColorStops` component ([#2360](https://github.com/elastic/eui/pull/2360))
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
-- Added `hasChildLabel` prop to `EuiFormRow` to avoid duplicate labels ([#2390](https://github.com/elastic/eui/pull/2390))
+- Added `hasChildLabel` prop to `EuiFormRow` to avoid duplicate labels ([#2411](https://github.com/elastic/eui/pull/2411))
 - Added `component` prop to `EuiPageBody`, switching the default from `div` to `main` ([#2410](https://github.com/elastic/eui/pull/2410))
 - Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406))
 - Added `keyboardShorcut` glyph to 'EuiIcon ([#2413](https://github.com/elastic/eui/pull/2413))
 - Improved a11y in `EuiNavDrawer` ([#2417](https://github.com/elastic/eui/pull/2417))
+- Improved a11y in `EuiSuperDatePicker` ([#2426](https://github.com/elastic/eui/pull/2426))
 
 **Bug fixes**
 
 - Fixed `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390))
-- Fixed poor labeling in `EuiSuperDatePicker` ([#2390](https://github.com/elastic/eui/pull/2411))
-- Fixed `EuiCodeEditor`'s ID to be dynamic between renders ([#2390](https://github.com/elastic/eui/pull/2411))
-- Fixed `EuiCodeEditor` to not render multiple labels for some inputs ([#2390](https://github.com/elastic/eui/pull/2411))
-- Continues a11y fixes in `EuiSuperDatePicker` ([#2426](https://github.com/elastic/eui/pull/2426))
+- Fixed poor labeling in `EuiSuperDatePicker` ([#2411](https://github.com/elastic/eui/pull/2411))
+- Fixed `EuiCodeEditor`'s ID to be dynamic between renders ([#2411](https://github.com/elastic/eui/pull/2411))
+- Fixed `EuiCodeEditor` to not render multiple labels for some inputs ([#2411](https://github.com/elastic/eui/pull/2411))
+- Fixed `EuiBreadcrumbs` improper use of `useInnerText` hook ([#2425](https://github.com/elastic/eui/pull/2425))
 
 ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0)
 

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -10,7 +10,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../common';
 import { EuiBadge } from '../badge';
 import { EuiI18n } from '../i18n';
-import { useInnerText } from '../inner_text';
+import { EuiInnerText } from '../inner_text';
 import { EuiLink } from '../link';
 import { EuiPopover } from '../popover';
 
@@ -174,31 +174,38 @@ export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps> = ({
     });
 
     let link;
-    const [setRef, innerText] = useInnerText();
 
     if (isLastBreadcrumb && !href) {
       link = (
-        <span
-          ref={setRef}
-          className={breadcrumbClasses}
-          title={innerText}
-          aria-current="page"
-          {...breadcrumbRest}>
-          {text}
-        </span>
+        <EuiInnerText>
+          {(ref, innerText) => (
+            <span
+              ref={ref}
+              className={breadcrumbClasses}
+              title={innerText}
+              aria-current="page"
+              {...breadcrumbRest}>
+              {text}
+            </span>
+          )}
+        </EuiInnerText>
       );
     } else {
       link = (
-        <EuiLink
-          ref={setRef}
-          color={isLastBreadcrumb ? 'text' : 'subdued'}
-          onClick={onClick}
-          href={href}
-          className={breadcrumbClasses}
-          title={innerText}
-          {...breadcrumbRest}>
-          {text}
-        </EuiLink>
+        <EuiInnerText>
+          {(ref, innerText) => (
+            <EuiLink
+              ref={ref}
+              color={isLastBreadcrumb ? 'text' : 'subdued'}
+              onClick={onClick}
+              href={href}
+              className={breadcrumbClasses}
+              title={innerText}
+              {...breadcrumbRest}>
+              {text}
+            </EuiLink>
+          )}
+        </EuiInnerText>
       );
     }