From 6923ccbc845e50a7dc464952ab0448f4f59e74f7 Mon Sep 17 00:00:00 2001 From: dakahn Date: Thu, 16 Sep 2021 18:01:48 -0500 Subject: [PATCH 1/8] feat(Carbon-React): add usePrefix hook and examples --- .../react/src/components/Accordion/Accordion.Skeleton.js | 6 +++--- packages/react/src/components/Accordion/Accordion.js | 5 ++--- .../src/components/ContentSwitcher/ContentSwitcher.js | 7 ++++--- packages/react/src/internal/usePrefix.js | 8 ++++++++ 4 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 packages/react/src/internal/usePrefix.js diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js index 4767ddba9092..bf775e43e449 100644 --- a/packages/react/src/components/Accordion/Accordion.Skeleton.js +++ b/packages/react/src/components/Accordion/Accordion.Skeleton.js @@ -9,13 +9,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; import { ChevronRight16 } from '@carbon/icons-react'; -import { settings } from 'carbon-components'; import SkeletonText from '../SkeletonText'; import deprecate from '../../prop-types/deprecate'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; function AccordionSkeleton({ align, open, count, className, ...rest }) { + const prefix = usePrefix(); const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, { [`${prefix}--accordion--${align}`]: align, }); @@ -77,6 +76,7 @@ AccordionSkeleton.defaultProps = { }; function AccordionSkeletonItem() { + const prefix = usePrefix(); return (
  • diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js index 5189ce87e207..18c173e71ffa 100644 --- a/packages/react/src/components/Accordion/Accordion.js +++ b/packages/react/src/components/Accordion/Accordion.js @@ -5,13 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; +import { usePrefix } from '../../internal/usePrefix'; import PropTypes from 'prop-types'; import React from 'react'; -const { prefix } = settings; - function Accordion({ align, children, @@ -20,6 +18,7 @@ function Accordion({ size, ...rest }) { + const prefix = usePrefix(); const className = cx(`${prefix}--accordion`, customClassName, { [`${prefix}--accordion--${align}`]: align, [`${prefix}--accordion--${size}`]: size, diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js index 4e667238da34..cd044d232ea2 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.js @@ -8,12 +8,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; -import { settings } from 'carbon-components'; import { composeEventHandlers } from '../../tools/events'; import { getNextIndex, matches, keys } from '../../internal/keyboard'; import deprecate from '../../prop-types/deprecate'; - -const { prefix } = settings; +import { PrefixContext } from '../../internal/usePrefix'; export default class ContentSwitcher extends React.Component { /** @@ -68,6 +66,8 @@ export default class ContentSwitcher extends React.Component { size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']), }; + static contextType = PrefixContext; + static defaultProps = { selectedIndex: 0, selectionMode: 'automatic', @@ -130,6 +130,7 @@ export default class ContentSwitcher extends React.Component { }; render() { + const prefix = this.context; const { children, className, diff --git a/packages/react/src/internal/usePrefix.js b/packages/react/src/internal/usePrefix.js new file mode 100644 index 000000000000..c5965da7aebe --- /dev/null +++ b/packages/react/src/internal/usePrefix.js @@ -0,0 +1,8 @@ +import { settings } from 'carbon-components'; +import React from 'react'; + +export const PrefixContext = React.createContext(settings.prefix); + +export function usePrefix() { + return React.useContext(PrefixContext); +} From 1707fba2897ccd28bda80ab079494f652914c594 Mon Sep 17 00:00:00 2001 From: dakahn Date: Thu, 16 Sep 2021 19:06:03 -0500 Subject: [PATCH 2/8] feat(Carbon-React): add AspectRatio -> Link --- .../src/components/AspectRatio/AspectRatio.js | 5 ++- .../Breadcrumb/Breadcrumb.Skeleton.js | 23 ++++++++------ .../src/components/Breadcrumb/Breadcrumb.js | 5 ++- .../src/components/Button/Button.Skeleton.js | 5 ++- .../react/src/components/Button/Button.js | 4 +-- .../components/Checkbox/Checkbox.Skeleton.js | 31 ++++++++++--------- .../react/src/components/Checkbox/Checkbox.js | 5 ++- .../CodeSnippet/CodeSnippet.Skeleton.js | 5 ++- .../src/components/CodeSnippet/CodeSnippet.js | 5 ++- .../react/src/components/ComboBox/ComboBox.js | 5 ++- .../src/components/CopyButton/CopyButton.js | 5 ++- .../components/Dropdown/Dropdown.Skeleton.js | 5 ++- .../react/src/components/Dropdown/Dropdown.js | 5 ++- packages/react/src/components/Form/Form.js | 5 ++- .../src/components/FormGroup/FormGroup.js | 5 ++- .../src/components/FormLabel/FormLabel.js | 5 ++- packages/react/src/components/Grid/Column.js | 13 ++++---- packages/react/src/components/Grid/Grid.js | 5 ++- packages/react/src/components/Grid/Row.js | 5 ++- .../components/InlineLoading/InlineLoading.js | 5 ++- packages/react/src/components/Link/Link.js | 5 ++- 21 files changed, 71 insertions(+), 85 deletions(-) diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.js index 7c25ddf09869..fc7fde00f2b4 100644 --- a/packages/react/src/components/AspectRatio/AspectRatio.js +++ b/packages/react/src/components/AspectRatio/AspectRatio.js @@ -5,13 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; +import { usePrefix } from '../../internal/usePrefix'; import PropTypes from 'prop-types'; import React from 'react'; -const { prefix } = settings; - /** * The AspectRatio component provides a `ratio` prop that will be used to * specify the aspect ratio that the children you provide will be displayed in. @@ -25,6 +23,7 @@ function AspectRatio({ ratio = '1x1', ...rest }) { + const prefix = usePrefix(); const className = cx( containerClassName, `${prefix}--aspect-ratio`, diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js index a3a8e267afc8..001c7a2c428f 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js @@ -8,24 +8,27 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; -import { settings } from 'carbon-components'; +import { usePrefix } from '../../internal/usePrefix'; -const { prefix } = settings; +function Item() { + const prefix = usePrefix(); -const item = ( -
    -   -
    -); + return ( +
    +   +
    + ); +} function BreadcrumbSkeleton({ className, ...rest }) { + const prefix = usePrefix(); const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className); return (
    - {item} - {item} - {item} + {Item()} + {Item()} + {Item()}
    ); } diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.js b/packages/react/src/components/Breadcrumb/Breadcrumb.js index 526823d67d3e..b7d1cdd59d3c 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.js @@ -8,9 +8,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; -import { settings } from 'carbon-components'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const Breadcrumb = React.forwardRef(function Breadcrumb( { @@ -22,6 +20,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb( }, ref ) { + const prefix = usePrefix(); const className = cx({ [`${prefix}--breadcrumb`]: true, [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash, diff --git a/packages/react/src/components/Button/Button.Skeleton.js b/packages/react/src/components/Button/Button.Skeleton.js index e3e36707d8a3..c853ec979716 100644 --- a/packages/react/src/components/Button/Button.Skeleton.js +++ b/packages/react/src/components/Button/Button.Skeleton.js @@ -8,13 +8,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; -import { settings } from 'carbon-components'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const ButtonSkeleton = ({ className, small, href, size, ...rest }) => { const enabled = useFeatureFlag('enable-v11-release'); + const prefix = usePrefix(); const buttonClasses = cx(className, { [`${prefix}--skeleton`]: true, diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js index ec81c3704cda..0860291c0eaf 100644 --- a/packages/react/src/components/Button/Button.js +++ b/packages/react/src/components/Button/Button.js @@ -8,16 +8,15 @@ import PropTypes from 'prop-types'; import React, { useState, useEffect, useRef } from 'react'; import classNames from 'classnames'; -import { settings } from 'carbon-components'; import { ButtonKinds } from '../../prop-types/types'; import deprecate from '../../prop-types/deprecate'; import { composeEventHandlers } from '../../tools/events'; import { keys, matches } from '../../internal/keyboard'; +import { usePrefix } from '../../internal/usePrefix'; import { useId } from '../../internal/useId'; import toggleClass from '../../tools/toggleClass'; import { useFeatureFlag } from '../FeatureFlags'; -const { prefix } = settings; const Button = React.forwardRef(function Button( { children, @@ -52,6 +51,7 @@ const Button = React.forwardRef(function Button( const [isFocused, setIsFocused] = useState(false); const tooltipRef = useRef(null); const tooltipTimeout = useRef(null); + const prefix = usePrefix(); const closeTooltips = (evt) => { const tooltipNode = document?.querySelectorAll(`.${prefix}--tooltip--a11y`); diff --git a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js b/packages/react/src/components/Checkbox/Checkbox.Skeleton.js index 6e7bf8bf071d..d2b7a6f5a5c7 100644 --- a/packages/react/src/components/Checkbox/Checkbox.Skeleton.js +++ b/packages/react/src/components/Checkbox/Checkbox.Skeleton.js @@ -8,22 +8,23 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; -import { settings } from 'carbon-components'; +import { usePrefix } from '../../internal/usePrefix'; -const { prefix } = settings; - -const CheckboxSkeleton = ({ className, ...rest }) => ( -
    - -
    -); +const CheckboxSkeleton = ({ className, ...rest }) => { + const prefix = usePrefix(); + return ( +
    + +
    + ); +}; CheckboxSkeleton.propTypes = { /** diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js index 7bdca235a0b8..f8c80a603bbe 100644 --- a/packages/react/src/components/Checkbox/Checkbox.js +++ b/packages/react/src/components/Checkbox/Checkbox.js @@ -9,10 +9,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import classNames from 'classnames'; import { useFeatureFlag } from '../FeatureFlags'; -import { settings } from 'carbon-components'; import deprecate from '../../prop-types/deprecate'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const Checkbox = React.forwardRef(function Checkbox( { @@ -29,6 +27,7 @@ const Checkbox = React.forwardRef(function Checkbox( ref ) { const enabled = useFeatureFlag('enable-v11-release'); + const prefix = usePrefix(); const labelClasses = classNames(`${prefix}--checkbox-label`, [ enabled ? null : className, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js b/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js index 36cbdc98a990..9a8dd909282e 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js @@ -5,18 +5,17 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; function CodeSnippetSkeleton({ className: containerClassName, type = 'single', ...rest }) { + const prefix = usePrefix(); const className = cx(containerClassName, { [`${prefix}--snippet`]: true, [`${prefix}--skeleton`]: true, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index 64fbf870de3a..0551a230261a 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js @@ -10,14 +10,12 @@ import React, { useState, useRef, useEffect, useCallback } from 'react'; import classNames from 'classnames'; import useResizeObserver from 'use-resize-observer/polyfilled'; import { ChevronDown16 } from '@carbon/icons-react'; -import { settings } from 'carbon-components'; import Copy from '../Copy'; import Button from '../Button'; import CopyButton from '../CopyButton'; import getUniqueId from '../../tools/uniqueId'; import copy from 'copy-to-clipboard'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const rowHeightInPixels = 16; const defaultMaxCollapsedNumberOfRows = 15; @@ -62,6 +60,7 @@ function CodeSnippet({ return codeContentRef; } }, [type]); + const prefix = usePrefix(); const getCodeRefDimensions = useCallback(() => { const { diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js index 87e68a018940..0ddb461d47bc 100644 --- a/packages/react/src/components/ComboBox/ComboBox.js +++ b/packages/react/src/components/ComboBox/ComboBox.js @@ -9,7 +9,6 @@ import cx from 'classnames'; import Downshift from 'downshift'; import PropTypes from 'prop-types'; import React, { useEffect, useState, useRef } from 'react'; -import { settings } from 'carbon-components'; import { Checkmark16, WarningAltFilled16, @@ -22,8 +21,7 @@ import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { mapDownshiftProps } from '../../tools/createPropAdapter'; import mergeRefs from '../../tools/mergeRefs'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const defaultItemToString = (item) => { if (typeof item === 'string') { @@ -101,6 +99,7 @@ const ComboBox = React.forwardRef((props, ref) => { warnText, ...rest } = props; + const prefix = usePrefix(); const textInput = useRef(); const comboBoxInstanceId = getInstanceId(); diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js index 51680635c971..d4c7d3c0195b 100644 --- a/packages/react/src/components/CopyButton/CopyButton.js +++ b/packages/react/src/components/CopyButton/CopyButton.js @@ -8,13 +8,12 @@ import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; import { Copy16 } from '@carbon/icons-react'; import Copy from '../Copy'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; export default function CopyButton({ iconDescription, className, ...other }) { + const prefix = usePrefix(); return ( { + const prefix = usePrefix(); const wrapperClasses = cx(className, { [`${prefix}--skeleton`]: true, [`${prefix}--dropdown-v2`]: true, diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js index 0ca9fb9728ab..60dfe7238578 100644 --- a/packages/react/src/components/Dropdown/Dropdown.js +++ b/packages/react/src/components/Dropdown/Dropdown.js @@ -7,7 +7,6 @@ import React, { useRef } from 'react'; import { useSelect } from 'downshift'; -import { settings } from 'carbon-components'; import cx from 'classnames'; import PropTypes from 'prop-types'; import { @@ -20,8 +19,7 @@ import { mapDownshiftProps } from '../../tools/createPropAdapter'; import mergeRefs from '../../tools/mergeRefs'; import deprecate from '../../prop-types/deprecate'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const defaultItemToString = (item) => { if (typeof item === 'string') { @@ -61,6 +59,7 @@ const Dropdown = React.forwardRef(function Dropdown( }, ref ) { + const prefix = usePrefix(); const selectProps = mapDownshiftProps({ ...downshiftProps, items, diff --git a/packages/react/src/components/Form/Form.js b/packages/react/src/components/Form/Form.js index f6b1304a1704..3d29d8f40bd8 100644 --- a/packages/react/src/components/Form/Form.js +++ b/packages/react/src/components/Form/Form.js @@ -8,11 +8,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const Form = ({ className, children, ...other }) => { + const prefix = usePrefix(); const classNames = classnames(`${prefix}--form`, className); return (
    diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js index b79ade29461d..f2cd065863d5 100644 --- a/packages/react/src/components/FormGroup/FormGroup.js +++ b/packages/react/src/components/FormGroup/FormGroup.js @@ -8,10 +8,8 @@ import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const FormGroup = ({ legendId, @@ -24,6 +22,7 @@ const FormGroup = ({ hasMargin, ...other }) => { + const prefix = usePrefix(); const enabled = useFeatureFlag('enable-v11-release'); const classNamesLegend = classnames(`${prefix}--label`, [ enabled ? null : className, diff --git a/packages/react/src/components/FormLabel/FormLabel.js b/packages/react/src/components/FormLabel/FormLabel.js index d2de264759a7..a1e88dbf87fa 100644 --- a/packages/react/src/components/FormLabel/FormLabel.js +++ b/packages/react/src/components/FormLabel/FormLabel.js @@ -8,11 +8,10 @@ import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const FormLabel = ({ className, children, id, ...other }) => { + const prefix = usePrefix(); const classNames = classnames(`${prefix}--label`, className); return ( diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js index bc9c02f3e6af..71dfb825bae3 100644 --- a/packages/react/src/components/Grid/Column.js +++ b/packages/react/src/components/Grid/Column.js @@ -5,13 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; function Column({ as: BaseComponent = 'div', @@ -24,10 +22,11 @@ function Column({ max, ...rest }) { + const prefix = usePrefix(); const hasCSSGrid = useFeatureFlag('enable-css-grid'); const columnClassName = hasCSSGrid - ? getClassNameForBreakpoints([sm, md, lg, xlg, max]) - : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max]); + ? getClassNameForBreakpoints([sm, md, lg, xlg, max], prefix) + : getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix); const className = cx(containerClassName, columnClassName, { [`${prefix}--col`]: columnClassName.length === 0, @@ -119,7 +118,7 @@ const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max']; * @param {Array} breakpoints * @returns {string} */ -function getClassNameForBreakpoints(breakpoints) { +function getClassNameForBreakpoints(breakpoints, prefix) { const classNames = []; for (let i = 0; i < breakpoints.length; i++) { @@ -171,7 +170,7 @@ function getClassNameForBreakpoints(breakpoints) { * @param {Array} breakpoints * @returns {string} */ -function getClassNameForFlexGridBreakpoints(breakpoints) { +function getClassNameForFlexGridBreakpoints(breakpoints, prefix) { const classNames = []; for (let i = 0; i < breakpoints.length; i++) { diff --git a/packages/react/src/components/Grid/Grid.js b/packages/react/src/components/Grid/Grid.js index 858164de66f2..e0c0cd8dfecb 100644 --- a/packages/react/src/components/Grid/Grid.js +++ b/packages/react/src/components/Grid/Grid.js @@ -5,13 +5,11 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; import PropTypes from 'prop-types'; import React, { useContext } from 'react'; import { useFeatureFlag } from '../FeatureFlags'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const SubgridContext = React.createContext(false); @@ -25,6 +23,7 @@ function Grid({ children, ...rest }) { + const prefix = usePrefix(); const hasCSSGrid = useFeatureFlag('enable-css-grid'); const isSubgrid = useContext(SubgridContext); diff --git a/packages/react/src/components/Grid/Row.js b/packages/react/src/components/Grid/Row.js index 5b25dce6a2ee..9615ed7b0e41 100644 --- a/packages/react/src/components/Grid/Row.js +++ b/packages/react/src/components/Grid/Row.js @@ -5,12 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -import { settings } from 'carbon-components'; import cx from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; function Row({ as: BaseComponent = 'div', @@ -20,6 +18,7 @@ function Row({ children, ...rest }) { + const prefix = usePrefix(); const className = cx(containerClassName, { [`${prefix}--row`]: true, [`${prefix}--row--condensed`]: condensed, diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js index b84c9af88bef..4c6a0e54793d 100644 --- a/packages/react/src/components/InlineLoading/InlineLoading.js +++ b/packages/react/src/components/InlineLoading/InlineLoading.js @@ -9,11 +9,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { CheckmarkFilled16, ErrorFilled16 } from '@carbon/icons-react'; -import { settings } from 'carbon-components'; import deprecate from '../../prop-types/deprecate'; import Loading from '../Loading'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; export default function InlineLoading({ className, @@ -25,6 +23,7 @@ export default function InlineLoading({ successDelay, ...other }) { + const prefix = usePrefix(); const loadingClasses = classNames(`${prefix}--inline-loading`, className); const getLoading = () => { if (status === 'error') { diff --git a/packages/react/src/components/Link/Link.js b/packages/react/src/components/Link/Link.js index 8a123537db32..d9e53a64b260 100644 --- a/packages/react/src/components/Link/Link.js +++ b/packages/react/src/components/Link/Link.js @@ -8,9 +8,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import classnames from 'classnames'; -import { settings } from 'carbon-components'; - -const { prefix } = settings; +import { usePrefix } from '../../internal/usePrefix'; const Link = ({ children, @@ -23,6 +21,7 @@ const Link = ({ size, ...other }) => { + const prefix = usePrefix(); const classNames = classnames(`${prefix}--link`, className, { [`${prefix}--link--disabled`]: disabled, [`${prefix}--link--inline`]: inline, From 4d02ce882b2a2f92d7a65122e5b58df3b10408af Mon Sep 17 00:00:00 2001 From: dakahn Date: Mon, 20 Sep 2021 18:08:56 -0500 Subject: [PATCH 3/8] test(Breadcrumb): fix invariant violation --- .../__snapshots__/PublicAPI-test.js.snap | 18 +++++++++ .../Breadcrumb/__tests__/Breadcrumb-test.js | 5 +-- .../__snapshots__/Breadcrumb-test.js.snap | 40 +++++-------------- .../ContentSwitcher/ContentSwitcher-test.js | 7 ---- 4 files changed, 31 insertions(+), 39 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index a7f7650dce90..b46a204817b4 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -875,6 +875,24 @@ Map { }, }, "ContentSwitcher" => Object { + "contextType": Object { + "$$typeof": Symbol(react.context), + "Consumer": Object { + "$$typeof": Symbol(react.context), + "_calculateChangedBits": null, + "_context": [Circular], + }, + "Provider": Object { + "$$typeof": Symbol(react.provider), + "_context": [Circular], + }, + "_calculateChangedBits": null, + "_currentRenderer": null, + "_currentRenderer2": null, + "_currentValue": "bx", + "_currentValue2": "bx", + "_threadCount": 0, + }, "defaultProps": Object { "onChange": [Function], "selectedIndex": 0, diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js index ead83b567f18..9ceaa8f01329 100644 --- a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js +++ b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js @@ -7,7 +7,7 @@ import { cleanup, render } from '@testing-library/react'; import React from 'react'; -import { mount } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import { settings } from 'carbon-components'; const { prefix } = settings; @@ -17,14 +17,13 @@ describe('Breadcrumb', () => { let BreadcrumbItem; beforeEach(() => { - jest.resetModules(); const BreadcrumbEntrypoint = require('../'); Breadcrumb = BreadcrumbEntrypoint.Breadcrumb; BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem; }); it('should render', () => { - const wrapper = mount( + const wrapper = shallow( - - + Breadcrumb 1 + + + `; exports[`Breadcrumb should support rendering the current page 1`] = ` diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js index f4e9c053d6cf..ce1b5ab25176 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-test.js @@ -9,9 +9,6 @@ import React from 'react'; import ContentSwitcher from '../ContentSwitcher'; import Switch from '../Switch'; import { mount, shallow } from 'enzyme'; -import { settings } from 'carbon-components'; - -const { prefix } = settings; describe('ContentSwitcher', () => { describe('component initial rendering', () => { @@ -24,10 +21,6 @@ describe('ContentSwitcher', () => { const children = wrapper.find(Switch); - it('should have the correct class', () => { - expect(wrapper.hasClass(`${prefix}--content-switcher`)).toEqual(true); - }); - it('should render children as expected', () => { expect(children.length).toEqual(2); }); From fe8aed3f2c49002f9dd77cb1f3eb362c4d603961 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:11:40 -0500 Subject: [PATCH 4/8] Update packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js Co-authored-by: Josh Black --- .../react/src/components/Breadcrumb/Breadcrumb.Skeleton.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js index 001c7a2c428f..427b0b034716 100644 --- a/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js +++ b/packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js @@ -26,9 +26,9 @@ function BreadcrumbSkeleton({ className, ...rest }) { return (
    - {Item()} - {Item()} - {Item()} + + +
    ); } From 02eca954f585641e427062ba2cdef589305ca9de Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:11:51 -0500 Subject: [PATCH 5/8] Update packages/react/src/components/AspectRatio/AspectRatio.js Co-authored-by: Josh Black --- packages/react/src/components/AspectRatio/AspectRatio.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.js index fc7fde00f2b4..c807e8318136 100644 --- a/packages/react/src/components/AspectRatio/AspectRatio.js +++ b/packages/react/src/components/AspectRatio/AspectRatio.js @@ -6,9 +6,9 @@ */ import cx from 'classnames'; -import { usePrefix } from '../../internal/usePrefix'; import PropTypes from 'prop-types'; import React from 'react'; +import { usePrefix } from '../../internal/usePrefix'; /** * The AspectRatio component provides a `ratio` prop that will be used to From fd0cfaf2a1cc9f703c45a6e990f560eeeeef25e0 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:14:11 -0500 Subject: [PATCH 6/8] Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js Co-authored-by: Josh Black --- .../src/components/Breadcrumb/__tests__/Breadcrumb-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js index 9ceaa8f01329..d96b9879d3ea 100644 --- a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js +++ b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js @@ -23,7 +23,7 @@ describe('Breadcrumb', () => { }); it('should render', () => { - const wrapper = shallow( + const wrapper = mount( Date: Tue, 21 Sep 2021 14:16:48 -0500 Subject: [PATCH 7/8] chore(test): fix broken tests --- .../__snapshots__/Breadcrumb-test.js.snap | 40 ++++++++++---- .../Breadcrumb.Skeleton-test.js.snap | 54 ++++++++++--------- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap index b87cb693458c..d04e3a30e883 100644 --- a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap +++ b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb-test.js.snap @@ -1,21 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Breadcrumb should render 1`] = ` - + +
  • + + + Breadcrumb 1 + + +
    • +     + + +     `; exports[`Breadcrumb should support rendering the current page 1`] = ` diff --git a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap index 23512f872676..7955a20561c1 100644 --- a/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap +++ b/packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap @@ -5,33 +5,39 @@ exports[`BreadcrumbSkeleton should render 1`] = `
    -
    - +
    -   - -
    -
    - +   + +
    + + +
    -   - -
    -
    - +   + +
    +     + +
    -   - -
    + +   + +
    +
    `; From e5a6e22d7f619c63998a81fb6ef64d01a799ab06 Mon Sep 17 00:00:00 2001 From: DAK <40970507+dakahn@users.noreply.github.com> Date: Tue, 21 Sep 2021 14:34:04 -0500 Subject: [PATCH 8/8] Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js --- .../src/components/Breadcrumb/__tests__/Breadcrumb-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js index d96b9879d3ea..24ebf2a9c5c5 100644 --- a/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js +++ b/packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js @@ -7,7 +7,7 @@ import { cleanup, render } from '@testing-library/react'; import React from 'react'; -import { mount, shallow } from 'enzyme'; +import { mount } from 'enzyme'; import { settings } from 'carbon-components'; const { prefix } = settings;