Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Typography] Migrate styles to emotion #23841

Merged
merged 34 commits into from
Dec 18, 2020
Merged

[Typography] Migrate styles to emotion #23841

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
8bdd48c
First draft for typography migration to emotion
DanailH Dec 4, 2020
e844fc4
Fix formatting
DanailH Dec 4, 2020
565cd4f
fixes
mnajdova Dec 4, 2020
2f95356
fixes
mnajdova Dec 7, 2020
8ae6f0d
fixed tests
mnajdova Dec 7, 2020
1d3cc1d
prettier
mnajdova Dec 7, 2020
0cad18a
default props
mnajdova Dec 7, 2020
eb9e493
fix build
mnajdova Dec 7, 2020
5540769
fixes
mnajdova Dec 8, 2020
859ca7f
Merge branch 'next' into feature/Typography-switch-to-emotion
mnajdova Dec 8, 2020
f8c9934
prettier
mnajdova Dec 8, 2020
158a5ff
Check if color has "text" to cover more colors
DanailH Dec 8, 2020
1e8567f
Merge branch 'next' of github.com:mui-org/material-ui into feature/Ty…
DanailH Dec 8, 2020
f518bd0
Update docs/scripts/buildApi.ts
mnajdova Dec 8, 2020
8da0c44
Fix pr comments
DanailH Dec 8, 2020
925f180
checks
DanailH Dec 8, 2020
9910160
Merge branch 'feature/Typography-switch-to-emotion' of github.com:Dan…
DanailH Dec 8, 2020
e89016f
add overrideResolver
DanailH Dec 8, 2020
f624b0d
Update packages/material-ui/src/Typography/Typography.js
mnajdova Dec 8, 2020
a439583
overridesResolver & prettier
mnajdova Dec 8, 2020
290dd31
formatting
mnajdova Dec 8, 2020
4a70683
Merge branch 'next' into feature/Typography-switch-to-emotion
mnajdova Dec 11, 2020
a656da8
docs:api
mnajdova Dec 11, 2020
d9d73ed
Merge branch 'next' into feature/Typography-switch-to-emotion
mnajdova Dec 14, 2020
5c5e764
updated tests
mnajdova Dec 15, 2020
3280345
Fix ttp not detecting input props
eps1lon Dec 15, 2020
25ec283
comment
mnajdova Dec 15, 2020
66a81e8
prettier
mnajdova Dec 15, 2020
40b9ec5
reverted describeConformance test changes
mnajdova Dec 15, 2020
c42898f
examples updated
mnajdova Dec 16, 2020
d764665
added migration guide
mnajdova Dec 16, 2020
e73af0f
sorted props
mnajdova Dec 16, 2020
928f85d
Merge branch 'next' into feature/Typography-switch-to-emotion
mnajdova Dec 18, 2020
ff81d3e
updated test
mnajdova Dec 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/src/modules/components/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ import MuiLink from '@material-ui/core/Link';
import { useUserLanguage } from 'docs/src/modules/utils/i18n';

const NextComposed = React.forwardRef(function NextComposed(props, ref) {
const { as, href, ...other } = props;
const { linkAs, href, ...other } = props;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We had conflict here with the as prop from emotion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should document the props that are now intercepted by emotion. It is a breaking change if you were passing these through. Maybe add a section in the changelog that only lists affected components and once we migrated all we just give the general advise that if you had <MuiComponent component={SomeOtherComponent} emotionProp1 emotionProp2 />, that these are no longer passed to SomeOtherComponent

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will we need to update the Next.js and Gatsby examples for the conflict?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eps1lon will add an entry in the migration-v4.md for it. @oliviertassinari good call, let me check if the examples need to be updated.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added migration entry - d764665 we can extend it with more props if there are any. At this moment this is the only one I could notice not being propagated.

Both nextjs examples have been updated. I didn't noticed anything worth updating in the gatsby examples.


return (
<NextLink href={href} as={as}>
<NextLink href={href} as={linkAs}>
<a ref={ref} {...other} />
</NextLink>
);
});

NextComposed.propTypes = {
as: PropTypes.string,
href: PropTypes.string,
linkAs: PropTypes.string,
};

// A styled version of the Next.js Link component:
Expand Down Expand Up @@ -64,7 +64,7 @@ function Link(props) {
if (naked) {
return (
<NextComposed
as={linkAs}
linkAs={linkAs}
className={className}
href={href}
ref={innerRef}
Expand All @@ -76,7 +76,7 @@ function Link(props) {

return (
<MuiLink
as={linkAs}
linkAs={linkAs}
component={NextComposed}
className={className}
href={href}
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/CardHeader/CardHeader.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import * as React from 'react';
import { expect } from 'chai';
import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
import CardHeader from './CardHeader';
import Typography from '../Typography';
import { typographyClasses } from '../Typography';

describe('<CardHeader />', () => {
const mount = createMount();
let classes;
let typographyClasses;
const render = createClientRender();

before(() => {
typographyClasses = getClasses(<Typography />);
classes = getClasses(<CardHeader />);
});

Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/InputAdornment/InputAdornment.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
import Typography from '../Typography';
import { typographyClasses } from '../Typography';
import InputAdornment from './InputAdornment';
import TextField from '../TextField';
import FormControl from '../FormControl';
Expand All @@ -26,7 +26,6 @@ describe('<InputAdornment />', () => {

it('should wrap text children in a Typography', () => {
const { container } = render(<InputAdornment position="start">foo</InputAdornment>);
const typographyClasses = getClasses(<Typography />);
const typography = container.querySelector(`.${typographyClasses.root}`);

expect(typography).not.to.equal(null);
Expand Down Expand Up @@ -161,7 +160,6 @@ describe('<InputAdornment />', () => {
foo
</InputAdornment>,
);
const typographyClasses = getClasses(<Typography />);

expect(container.querySelector(`.${typographyClasses.root}`)).to.equal(null);
});
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/Link/Link.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
fireEvent,
} from 'test/utils';
import Link from './Link';
import Typography from '../Typography';
import Typography, { typographyClasses } from '../Typography';

function focusVisible(element) {
act(() => {
Expand All @@ -24,11 +24,9 @@ describe('<Link />', () => {
const mount = createMount();
const render = createClientRender();
let classes;
let typographyClasses;

before(() => {
classes = getClasses(<Link href="/">Home</Link>);
typographyClasses = getClasses(<Typography />);
});

describeConformance(<Link href="/">Home</Link>, () => ({
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/ListItemText/ListItemText.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import * as React from 'react';
import { expect } from 'chai';
import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils';
import Typography from '../Typography';
import Typography, { typographyClasses } from '../Typography';
import ListItemText from './ListItemText';

describe('<ListItemText />', () => {
const mount = createMount();
const render = createClientRender();
let classes;
let typographyClasses;

before(() => {
classes = getClasses(<ListItemText />);
typographyClasses = getClasses(<Typography />);
});

describeConformance(<ListItemText />, () => ({
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/StepLabel/StepLabel.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import { expect } from 'chai';
import { getClasses, createClientRender, createMount, describeConformance } from 'test/utils';
import Typography from '../Typography';
import Typography, { typographyClasses } from '../Typography';
import Stepper from '../Stepper';
import Step from '../Step';
import StepIcon from '../StepIcon';
Expand All @@ -10,14 +10,12 @@ import StepLabel from './StepLabel';
describe('<StepLabel />', () => {
let classes;
let iconClasses;
let typographyClasses;
const mount = createMount({ strict: true });
const render = createClientRender();

before(() => {
classes = getClasses(<StepLabel />);
iconClasses = getClasses(<StepIcon />);
typographyClasses = getClasses(<Typography />);
});

describeConformance(<StepLabel />, () => ({
Expand Down
Loading