Skip to content

Commit d545dd6

Browse files
dakahnjoshblack
dakahn
and
joshblack
authored
feat(Carbon-React): refactor prefix with context AspectRatio --> Link (#9688)
* feat(Carbon-React): add usePrefix hook and examples * feat(Carbon-React): add AspectRatio -> Link * test(Breadcrumb): fix invariant violation * Update packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js Co-authored-by: Josh Black <josh@josh.black> * Update packages/react/src/components/AspectRatio/AspectRatio.js Co-authored-by: Josh Black <josh@josh.black> * Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js Co-authored-by: Josh Black <josh@josh.black> * chore(test): fix broken tests * Update packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js Co-authored-by: Josh Black <josh@josh.black>
1 parent 58b5202 commit d545dd6

File tree

23 files changed

+101
-110
lines changed

23 files changed

+101
-110
lines changed

‎packages/react/src/components/AspectRatio/AspectRatio.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import { settings } from 'carbon-components';
98
import cx from 'classnames';
109
import PropTypes from 'prop-types';
1110
import React from 'react';
12-
13-
const { prefix } = settings;
11+
import { usePrefix } from '../../internal/usePrefix';
1412

1513
/**
1614
* The AspectRatio component provides a `ratio` prop that will be used to
@@ -25,6 +23,7 @@ function AspectRatio({
2523
ratio = '1x1',
2624
...rest
2725
}) {
26+
const prefix = usePrefix();
2827
const className = cx(
2928
containerClassName,
3029
`${prefix}--aspect-ratio`,

‎packages/react/src/components/Breadcrumb/Breadcrumb.Skeleton.js

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,27 @@
88
import PropTypes from 'prop-types';
99
import React from 'react';
1010
import cx from 'classnames';
11-
import { settings } from 'carbon-components';
11+
import { usePrefix } from '../../internal/usePrefix';
1212

13-
const { prefix } = settings;
13+
function Item() {
14+
const prefix = usePrefix();
1415

15-
const item = (
16-
<div className={`${prefix}--breadcrumb-item`}>
17-
<span className={`${prefix}--link`}>&nbsp;</span>
18-
</div>
19-
);
16+
return (
17+
<div className={`${prefix}--breadcrumb-item`}>
18+
<span className={`${prefix}--link`}>&nbsp;</span>
19+
</div>
20+
);
21+
}
2022

2123
function BreadcrumbSkeleton({ className, ...rest }) {
24+
const prefix = usePrefix();
2225
const classes = cx(`${prefix}--breadcrumb`, `${prefix}--skeleton`, className);
2326

2427
return (
2528
<div className={classes} {...rest}>
26-
{item}
27-
{item}
28-
{item}
29+
<Item />
30+
<Item />
31+
<Item />
2932
</div>
3033
);
3134
}

‎packages/react/src/components/Breadcrumb/Breadcrumb.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
import PropTypes from 'prop-types';
99
import React from 'react';
1010
import cx from 'classnames';
11-
import { settings } from 'carbon-components';
12-
13-
const { prefix } = settings;
11+
import { usePrefix } from '../../internal/usePrefix';
1412

1513
const Breadcrumb = React.forwardRef(function Breadcrumb(
1614
{
@@ -22,6 +20,7 @@ const Breadcrumb = React.forwardRef(function Breadcrumb(
2220
},
2321
ref
2422
) {
23+
const prefix = usePrefix();
2524
const className = cx({
2625
[`${prefix}--breadcrumb`]: true,
2726
[`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,

‎packages/react/src/components/Breadcrumb/__tests__/Breadcrumb-test.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ describe('Breadcrumb', () => {
1717
let BreadcrumbItem;
1818

1919
beforeEach(() => {
20-
jest.resetModules();
2120
const BreadcrumbEntrypoint = require('../');
2221
Breadcrumb = BreadcrumbEntrypoint.Breadcrumb;
2322
BreadcrumbItem = BreadcrumbEntrypoint.BreadcrumbItem;

‎packages/react/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.Skeleton-test.js.snap

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,39 @@ exports[`BreadcrumbSkeleton should render 1`] = `
55
<div
66
className="bx--breadcrumb bx--skeleton"
77
>
8-
<div
9-
className="bx--breadcrumb-item"
10-
>
11-
<span
12-
className="bx--link"
8+
<Item>
9+
<div
10+
className="bx--breadcrumb-item"
1311
>
14-
 
15-
</span>
16-
</div>
17-
<div
18-
className="bx--breadcrumb-item"
19-
>
20-
<span
21-
className="bx--link"
12+
<span
13+
className="bx--link"
14+
>
15+
 
16+
</span>
17+
</div>
18+
</Item>
19+
<Item>
20+
<div
21+
className="bx--breadcrumb-item"
2222
>
23-
 
24-
</span>
25-
</div>
26-
<div
27-
className="bx--breadcrumb-item"
28-
>
29-
<span
30-
className="bx--link"
23+
<span
24+
className="bx--link"
25+
>
26+
 
27+
</span>
28+
</div>
29+
</Item>
30+
<Item>
31+
<div
32+
className="bx--breadcrumb-item"
3133
>
32-
 
33-
</span>
34-
</div>
34+
<span
35+
className="bx--link"
36+
>
37+
 
38+
</span>
39+
</div>
40+
</Item>
3541
</div>
3642
</BreadcrumbSkeleton>
3743
`;

‎packages/react/src/components/Button/Button.Skeleton.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
import PropTypes from 'prop-types';
99
import React from 'react';
1010
import cx from 'classnames';
11-
import { settings } from 'carbon-components';
1211
import { useFeatureFlag } from '../FeatureFlags';
13-
14-
const { prefix } = settings;
12+
import { usePrefix } from '../../internal/usePrefix';
1513

1614
const ButtonSkeleton = ({ className, small, href, size, ...rest }) => {
1715
const enabled = useFeatureFlag('enable-v11-release');
16+
const prefix = usePrefix();
1817

1918
const buttonClasses = cx(className, {
2019
[`${prefix}--skeleton`]: true,

‎packages/react/src/components/Button/Button.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,15 @@
88
import PropTypes from 'prop-types';
99
import React, { useState, useEffect, useRef } from 'react';
1010
import classNames from 'classnames';
11-
import { settings } from 'carbon-components';
1211
import { ButtonKinds } from '../../prop-types/types';
1312
import deprecate from '../../prop-types/deprecate';
1413
import { composeEventHandlers } from '../../tools/events';
1514
import { keys, matches } from '../../internal/keyboard';
15+
import { usePrefix } from '../../internal/usePrefix';
1616
import { useId } from '../../internal/useId';
1717
import toggleClass from '../../tools/toggleClass';
1818
import { useFeatureFlag } from '../FeatureFlags';
1919

20-
const { prefix } = settings;
2120
const Button = React.forwardRef(function Button(
2221
{
2322
children,
@@ -52,6 +51,7 @@ const Button = React.forwardRef(function Button(
5251
const [isFocused, setIsFocused] = useState(false);
5352
const tooltipRef = useRef(null);
5453
const tooltipTimeout = useRef(null);
54+
const prefix = usePrefix();
5555

5656
const closeTooltips = (evt) => {
5757
const tooltipNode = document?.querySelectorAll(`.${prefix}--tooltip--a11y`);

‎packages/react/src/components/Checkbox/Checkbox.Skeleton.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,23 @@
88
import PropTypes from 'prop-types';
99
import React from 'react';
1010
import cx from 'classnames';
11-
import { settings } from 'carbon-components';
11+
import { usePrefix } from '../../internal/usePrefix';
1212

13-
const { prefix } = settings;
14-
15-
const CheckboxSkeleton = ({ className, ...rest }) => (
16-
<div
17-
className={cx(
18-
`${prefix}--form-item`,
19-
`${prefix}--checkbox-wrapper`,
20-
`${prefix}--checkbox-label`,
21-
className
22-
)}
23-
{...rest}>
24-
<span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
25-
</div>
26-
);
13+
const CheckboxSkeleton = ({ className, ...rest }) => {
14+
const prefix = usePrefix();
15+
return (
16+
<div
17+
className={cx(
18+
`${prefix}--form-item`,
19+
`${prefix}--checkbox-wrapper`,
20+
`${prefix}--checkbox-label`,
21+
className
22+
)}
23+
{...rest}>
24+
<span className={`${prefix}--checkbox-label-text ${prefix}--skeleton`} />
25+
</div>
26+
);
27+
};
2728

2829
CheckboxSkeleton.propTypes = {
2930
/**

‎packages/react/src/components/Checkbox/Checkbox.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ import React from 'react';
1010
import classNames from 'classnames';
1111
import { Text } from '../Text';
1212
import { useFeatureFlag } from '../FeatureFlags';
13-
import { settings } from 'carbon-components';
1413
import deprecate from '../../prop-types/deprecate';
15-
16-
const { prefix } = settings;
14+
import { usePrefix } from '../../internal/usePrefix';
1715

1816
const Checkbox = React.forwardRef(function Checkbox(
1917
{
@@ -30,6 +28,7 @@ const Checkbox = React.forwardRef(function Checkbox(
3028
ref
3129
) {
3230
const enabled = useFeatureFlag('enable-v11-release');
31+
const prefix = usePrefix();
3332

3433
const labelClasses = classNames(`${prefix}--checkbox-label`, [
3534
enabled ? null : className,

‎packages/react/src/components/CodeSnippet/CodeSnippet.Skeleton.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,17 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import { settings } from 'carbon-components';
98
import cx from 'classnames';
109
import PropTypes from 'prop-types';
1110
import React from 'react';
12-
13-
const { prefix } = settings;
11+
import { usePrefix } from '../../internal/usePrefix';
1412

1513
function CodeSnippetSkeleton({
1614
className: containerClassName,
1715
type = 'single',
1816
...rest
1917
}) {
18+
const prefix = usePrefix();
2019
const className = cx(containerClassName, {
2120
[`${prefix}--snippet`]: true,
2221
[`${prefix}--skeleton`]: true,

0 commit comments

Comments
 (0)