diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index 2976d05874c..ef5cb01e0b7 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -19,6 +19,7 @@ "start": "../../utils/scripts/start.sh" }, "dependencies": { + "@zendeskgarden/container-breadcrumb": "^0.2.2", "classnames": "^2.2.5" }, "peerDependencies": { diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md index 50928b9969b..2057aeacc59 100644 --- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md @@ -1,20 +1,7 @@ -```jsx -const { Anchor } = require('@zendeskgarden/react-buttons/src'); +## DEPRECATION WARNING - - {({ getContainerProps }) => ( - /* role not needed as `BreadcrumbView` is a navigation landmark. */ - - - - One - - - Two - - Three - - - )} -; -``` +This component has been deprecated in favor of the API provided in the +[@zendeskgarden/container-breadcrumb](https://www.npmjs.com/package/@zendeskgarden/container-breadcrumb) +package. + +This package will be removed in a future major release. diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js index ef1af4deb05..df3661d1458 100644 --- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js @@ -8,6 +8,16 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; +if (process.env.NODE_ENV !== 'production') { + /* eslint-disable no-console */ + console.warn( + 'Deprecation Warning: The `BreadcrumbContainer` component has been deprecated. ' + + 'It will be removed in an upcoming major release. Migrate to the ' + + '`@zendeskgarden/container-breadcrumb` package to continue receiving updates.' + ); + /* eslint-enable */ +} + export default class BreadcrumbContainer extends Component { static propTypes = { /** diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js index 5e36ae77c58..6630076a3cd 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.js +++ b/packages/breadcrumbs/src/elements/Breadcrumb.js @@ -8,8 +8,8 @@ import React, { Component, Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; import { hasType } from '@zendeskgarden/react-utilities'; +import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb'; -import BreadcrumbContainer from '../containers/BreadcrumbContainer'; import BreadcrumbView from '../views/BreadcrumbView'; import List from '../views/List'; import Item from '../views/Item'; @@ -44,16 +44,13 @@ export default class Breadcrumb extends Component { render() { const { children, ...breadcrumbProps } = this.props; + const { getContainerProps, getCurrentPageProps } = useBreadcrumb(); return ( - - {({ getContainerProps, getCurrentPageProps }) => ( - /* role not needed as `BreadcrumbView` is a navigation landmark. */ - - {this.renderItems(children, getCurrentPageProps)} - - )} - + /* role not needed as `BreadcrumbView` is a navigation landmark. */ + + {this.renderItems(children, getCurrentPageProps)} + ); } }