Skip to content

Commit 874118b

Browse files
brionmariobrionmario
authored
Merge pull request #339 from brionmario/fix-274
chore: migrate to pascal case classnames
2 parents 4410a68 + f4059ec commit 874118b

File tree

219 files changed

+1656
-1792
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

219 files changed

+1656
-1792
lines changed

‎packages/react/src/components/Accordion/Accordion.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import clsx from 'clsx';
2222
import {forwardRef} from 'react';
2323
import type {ElementType, ReactElement, Ref} from 'react';
2424
import type {PaperTypeMap} from '../Paper';
25-
import './accordion.scss';
2625

2726
export type AccordionProps<C extends ElementType = ElementType> = {
2827
/**
@@ -58,11 +57,18 @@ const Accordion: OverridableComponent<PaperTypeMap<AccordionProps>> = forwardRef
5857
<C extends ElementType = ElementType>(
5958
{className, ...rest}: AccordionProps<C>,
6059
ref: Ref<HTMLDivElement>,
61-
): ReactElement => {
62-
const classes: string = clsx('oxygen-accordion', className);
63-
64-
return <MuiAccordion ref={ref} className={classes} {...rest} />;
65-
},
60+
): ReactElement => (
61+
<MuiAccordion
62+
ref={ref}
63+
className={clsx(
64+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
65+
'oxygen-accordion',
66+
'OxygenAccordion-root',
67+
className,
68+
)}
69+
{...rest}
70+
/>
71+
),
6672
) as OverridableComponent<PaperTypeMap<AccordionProps>>;
6773

6874
export default Accordion;

‎packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`Accordion should match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters oxygen-accordion css-1uxb3u4-MuiPaper-root-MuiAccordion-root"
7+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded MuiAccordion-gutters oxygen-accordion OxygenAccordion-root css-1uxb3u4-MuiPaper-root-MuiAccordion-root"
88
>
99
<p>
1010
test accordion

‎packages/react/src/components/Accordion/accordion.scss‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎packages/react/src/components/AccordionDetails/AccordionDetails.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,18 @@ export type AccordionDetailsProps = MuiAccordionDetailsProps;
4646
* @returns The rendered AccordionDetails component.
4747
*/
4848
const AccordionDetails: ForwardRefExoticComponent<AccordionDetailsProps> = forwardRef(
49-
({className, ...rest}: AccordionDetailsProps, ref: Ref<HTMLDivElement>): ReactElement => {
50-
const classes: string = clsx('oxygen-accordion-details', className);
51-
52-
return <MuiAccordionDetails ref={ref} className={classes} {...rest} />;
53-
},
49+
({className, ...rest}: AccordionDetailsProps, ref: Ref<HTMLDivElement>): ReactElement => (
50+
<MuiAccordionDetails
51+
ref={ref}
52+
className={clsx(
53+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
54+
'oxygen-accordion-details',
55+
'OxygenAccordionDetails-root',
56+
className,
57+
)}
58+
{...rest}
59+
/>
60+
),
5461
) as ForwardRefExoticComponent<AccordionDetailsProps>;
5562

5663
export default AccordionDetails;

‎packages/react/src/components/AccordionDetails/__tests__/__snapshots__/AccordionDetails.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`AccordionDetails should match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiAccordionDetails-root oxygen-accordion-details css-15v22id-MuiAccordionDetails-root"
7+
class="MuiAccordionDetails-root oxygen-accordion-details OxygenAccordionDetails-root css-15v22id-MuiAccordionDetails-root"
88
/>
99
</div>
1010
</body>

‎packages/react/src/components/AccordionSummary/AccordionSummary.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,18 @@ const AccordionSummary: OverridableComponent<AccordionSummaryTypeMap<AccordionSu
6464
<C extends ElementType = ElementType>(
6565
{className, ...rest}: AccordionSummaryProps<C>,
6666
ref: Ref<HTMLDivElement>,
67-
): ReactElement => {
68-
const classes: string = clsx('oxygen-accordion-summary', className);
69-
70-
return <MuiAccordionSummary ref={ref} className={classes} {...rest} />;
71-
},
67+
): ReactElement => (
68+
<MuiAccordionSummary
69+
ref={ref}
70+
className={clsx(
71+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
72+
'oxygen-accordion-summary',
73+
'OxygenAccordionSummary-root',
74+
className,
75+
)}
76+
{...rest}
77+
/>
78+
),
7279
) as OverridableComponent<AccordionSummaryTypeMap<AccordionSummaryProps>>;
7380

7481
export default AccordionSummary;

‎packages/react/src/components/AccordionSummary/__tests__/__snapshots__/AccordionSummary.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`AccordionSummary should match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters oxygen-accordion-summary css-n40v0g-MuiButtonBase-root-MuiAccordionSummary-root"
7+
class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters oxygen-accordion-summary OxygenAccordionSummary-root css-n40v0g-MuiButtonBase-root-MuiAccordionSummary-root"
88
role="button"
99
tabindex="0"
1010
>

‎packages/react/src/components/AccountOverview/AccountOverview.tsx‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -108,33 +108,46 @@ const AccountOverview: OverridableComponent<CardTypeMap<AccountOverviewProps>> =
108108
...rest
109109
}: AccountOverviewProps<C>,
110110
ref: Ref<HTMLDivElement>,
111-
): ReactElement => {
112-
const classes: string = clsx('oxygen-account-overview', className);
113-
114-
return (
115-
<Card ref={ref} className={classes} elevation={0} variant="outlined" {...rest}>
116-
<CardHeader
117-
avatar={
118-
<CircularProgressAvatar
119-
color={accountProgress < 100 ? 'warning' : 'success'}
120-
progress={accountProgress}
121-
avatarOptions={{alt: "User's avatar", src: user?.image}}
122-
badgeOptions={{badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success'}}
123-
/>
124-
}
125-
title={title}
126-
subheader={subheader}
127-
{...cardHeaderProps}
128-
/>
129-
{accountCompletionSteps && (
130-
<Box className="oxygen-account-completion-steps-box">
131-
<Divider />
132-
<Carousel title={accountCompletionStepsTitle} steps={accountCompletionSteps} />
133-
</Box>
134-
)}
135-
</Card>
136-
);
137-
},
111+
): ReactElement => (
112+
<Card
113+
ref={ref}
114+
className={clsx(
115+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
116+
'oxygen-account-overview',
117+
'OxygenAccountOverview-root',
118+
className,
119+
)}
120+
elevation={0}
121+
variant="outlined"
122+
{...rest}
123+
>
124+
<CardHeader
125+
avatar={
126+
<CircularProgressAvatar
127+
color={accountProgress < 100 ? 'warning' : 'success'}
128+
progress={accountProgress}
129+
avatarOptions={{alt: "User's avatar", src: user?.image}}
130+
badgeOptions={{badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success'}}
131+
/>
132+
}
133+
title={title}
134+
subheader={subheader}
135+
{...cardHeaderProps}
136+
/>
137+
{accountCompletionSteps && (
138+
<Box
139+
className={clsx(
140+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
141+
'oxygen-account-completion-steps-box',
142+
'OxygenAccountOverview-completionStepsBox',
143+
)}
144+
>
145+
<Divider />
146+
<Carousel title={accountCompletionStepsTitle} steps={accountCompletionSteps} />
147+
</Box>
148+
)}
149+
</Card>
150+
),
138151
) as OverridableComponent<CardTypeMap<AccountOverviewProps>>;
139152

140153
export default AccountOverview;

‎packages/react/src/components/ActionCard/ActionCard.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -77,24 +77,29 @@ const ActionCard: OverridableComponent<CardTypeMap<ActionCardProps>> = forwardRe
7777
<C extends ElementType = ElementType>(
7878
{className, image, title, description, actionText, onActionClick, ...rest}: ActionCardProps<C>,
7979
ref: Ref<HTMLDivElement>,
80-
): ReactElement => {
81-
const classes: string = clsx('oxygen-action-card', className);
82-
83-
return (
84-
<Card ref={ref} className={classes} {...rest}>
85-
<CardContent>
86-
{image}
87-
<Typography variant="subtitle1">{title}</Typography>
88-
<Typography variant="body2">{description}</Typography>
89-
</CardContent>
90-
<CardActions>
91-
<Button onClick={onActionClick} variant="contained">
92-
{actionText}
93-
</Button>
94-
</CardActions>
95-
</Card>
96-
);
97-
},
80+
): ReactElement => (
81+
<Card
82+
ref={ref}
83+
className={clsx(
84+
/* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
85+
'oxygen-action-card',
86+
'OxygenActionCard-root',
87+
className,
88+
)}
89+
{...rest}
90+
>
91+
<CardContent>
92+
{image}
93+
<Typography variant="subtitle1">{title}</Typography>
94+
<Typography variant="body2">{description}</Typography>
95+
</CardContent>
96+
<CardActions>
97+
<Button onClick={onActionClick} variant="contained">
98+
{actionText}
99+
</Button>
100+
</CardActions>
101+
</Card>
102+
),
98103
) as OverridableComponent<CardTypeMap<ActionCardProps>>;
99104

100105
export default ActionCard;

‎packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,31 @@ exports[`ActionCard should match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root oxygen-card oxygen-action-card css-1e3jyt5-MuiPaper-root-MuiCard-root"
7+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root oxygen-card OxygenCard-root oxygen-action-card OxygenActionCard-root css-1e3jyt5-MuiPaper-root-MuiCard-root"
88
>
99
<div
10-
class="MuiCardContent-root oxygen-card-content css-46bh2p-MuiCardContent-root"
10+
class="MuiCardContent-root oxygen-card-content OxygenCardContent-root css-46bh2p-MuiCardContent-root"
1111
>
1212
<img
1313
alt="action card"
1414
src="assets/images/action-card-image.svg"
1515
/>
1616
<h6
17-
class="MuiTypography-root MuiTypography-subtitle1 oxygen-typography css-n2qzog-MuiTypography-root"
17+
class="MuiTypography-root MuiTypography-subtitle1 oxygen-typography OxygenTypography-root css-n2qzog-MuiTypography-root"
1818
>
1919
Secure your account by adding an extra layer of security
2020
</h6>
2121
<p
22-
class="MuiTypography-root MuiTypography-body2 oxygen-typography css-xq9ne1-MuiTypography-root"
22+
class="MuiTypography-root MuiTypography-body2 oxygen-typography OxygenTypography-root css-xq9ne1-MuiTypography-root"
2323
>
2424
Configure additional authentications to sign in easily or to add an extra layer of security to your account.
2525
</p>
2626
</div>
2727
<div
28-
class="MuiCardActions-root MuiCardActions-spacing oxygen-card-actions css-dnrpxu-MuiCardActions-root"
28+
class="MuiCardActions-root MuiCardActions-spacing oxygen-card-actions OxygenCardActions-root css-dnrpxu-MuiCardActions-root"
2929
>
3030
<button
31-
class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation oxygen-button css-1w4rwqf-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
31+
class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-disableElevation oxygen-button OxygenButton-root css-1w4rwqf-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
3232
id=":r1:"
3333
tabindex="0"
3434
type="button"

0 commit comments

Comments
 (0)