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

[theme] Fix TypographyOptions type #9364

Merged
merged 12 commits into from Dec 2, 2017
Merged

[theme] Fix TypographyOptions type #9364

merged 12 commits into from Dec 2, 2017

Conversation

aigoncharov
Copy link

Without this fix the following code can not be compiled, but it should since we do deep merge anyway

const theme = createMuiTheme({
  typography: {
    // Fails here because currently it's TypographyStyle, not Partial<TypographyStyle>, therefore it wants to get complete TypographyStyle object, not a part of it
    display4: {
      fontSize: '18px'
    }
  }
})

pelotom
pelotom suggested changes Dec 1, 2017
View reviewed changes
Copy link
Member

@pelotom pelotom left a comment

Choose a reason for hiding this comment

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

Can you add the the snippet you used in the PR description to styles.spec.tsx so as to prevent regressions?

src/styles/createTypography.d.ts Outdated
@@ -36,7 +36,7 @@ export interface TypographyStyle {

export type Typography = { [type in Style]: TypographyStyle } & FontStyle;

export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
export type TypographyOptions = Partial<FontStyle> & Partial<{ [type in Style]: Partial<TypographyStyle> }>;
Copy link
Member

@pelotom pelotom Dec 1, 2017 •
edited

Choose a reason for hiding this comment

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

This seems a little more straightforward?

type DeepPartial<T> = {
  [P in keyof T]?: DeepPartial<T[P]>;
};

export type TypographyOptions = DeepPartial<Typography>;

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.spec.js
const customFontSize = '18px';
const typography = createTypography(palette, { display4: { fontSize: customFontSize } });
assert.strictEqual(typography.display4.fontSize, customFontSize);
});
Copy link
Member

Choose a reason for hiding this comment

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

This test is fine, but it doesn't really relate to this PR, since it's a runtime (JS) test. What we need is something that checks for compilation failures, see here.

Copy link
Author

Choose a reason for hiding this comment

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

Sorry, misread the name of the file you wanted me to add the test to.

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.d.ts Outdated
export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
export type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
};
Copy link
Member

Choose a reason for hiding this comment

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

This should probably go in index.d.ts along with Diff and Omit... we will need it to fix #9333 too.

@aigoncharov aigoncharov changed the title Bug Fixed: createTypography TypographyOptions type is invalid [WIP] Bug Fixed: createTypography TypographyOptions type is invalid Dec 1, 2017
pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.d.ts Outdated
[P in keyof T]?: DeepPartial<T[P]>;
};

export type TypographyOptions = Partial<FontStyle> & DeepPartial<TypographyStyle>;
Copy link
Member

Choose a reason for hiding this comment

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

You didn't actually make use of DeepPartial yet :)

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/index.d.ts Outdated

export type DeepPartial<T> = {
[P in keyof T]?: DeepPartial<T[P]>;
}
Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I meant src/index.d.ts

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.d.ts Outdated
@@ -36,7 +37,7 @@ export interface TypographyStyle {

export type Typography = { [type in Style]: TypographyStyle } & FontStyle;

export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
export type TypographyOptions = Partial<FontStyle> | DeepPartial<TypographyStyle>;
Copy link
Member

Choose a reason for hiding this comment

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

Should be just

export type TypographyOptions = DeepPartial<Typography>;

Copy link
Author

Choose a reason for hiding this comment

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

It doesn't work like that

Copy link
Member

Choose a reason for hiding this comment

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

What's the problem?

Copy link
Author

Choose a reason for hiding this comment

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

Trying to reproduce it on the playground. No luck so far. Maybe it's a problem with my local env

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.d.ts Outdated
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Palette } from './createPalette';
import { DeepPartial } from './index'
Copy link
Member

Choose a reason for hiding this comment

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

import { DeepPartial } from '..'

pelotom
pelotom reviewed Dec 1, 2017
View reviewed changes
src/styles/createTypography.d.ts Outdated
@@ -36,7 +37,7 @@ export interface TypographyStyle {

export type Typography = { [type in Style]: TypographyStyle } & FontStyle;

export type TypographyOptions = Partial<FontStyle> & Partial<Typography>;
export type TypographyOptions = DeepPartial<TypographyStyle>;
Copy link
Member

Choose a reason for hiding this comment

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

-export type TypographyOptions = DeepPartial<TypographyStyle>;
+export type TypographyOptions = DeepPartial<Typography>;

Copy link
Author

Choose a reason for hiding this comment

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

Why?
This way you get no mapped type over Style.

Copy link
Member

Choose a reason for hiding this comment

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

But Typography is already a mapped type over Style 🤔

@pelotom pelotom merged commit bbc75dc into mui:v1-beta Dec 2, 2017
@pelotom
Copy link
Member

pelotom commented Dec 2, 2017

Thanks for your contribution!

@aigoncharov
Copy link
Author

@pelotom sorry it took me so many comments from you to finally make it.

@pelotom pelotom added the core label Dec 2, 2017
@pelotom pelotom mentioned this pull request Dec 2, 2017
Merged
oliviertassinari pushed a commit to oliviertassinari/material-ui that referenced this pull request Dec 3, 2017
@oliviertassinari
[WIP] Bug Fixed: createTypography TypographyOptions type is invalid (m…
582c4c2 
…ui#9364)

Make TypographyOptions = DeepPartial<Typography>
@oliviertassinari oliviertassinari changed the title [WIP] Bug Fixed: createTypography TypographyOptions type is invalid [theme] createTypography TypographyOptions type is invalid Dec 8, 2017
@oliviertassinari oliviertassinari changed the title [theme] createTypography TypographyOptions type is invalid [theme] Fix TypographyOptions type Dec 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pelotom pelotom pelotom approved these changes

Assignees
No one assigned
Labels
typescript
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@aigoncharov @pelotom @rosskevin