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

[typescript] [createMuiTheme] Fix typings & deepmerge shape #11993

Merged
merged 6 commits into from
Jun 27, 2018
Merged

[typescript] [createMuiTheme] Fix typings & deepmerge shape #11993

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6b7fd3f
fix typings
franklixuefei Jun 27, 2018
577fa28
fix
franklixuefei Jun 27, 2018
7975548
revert
franklixuefei Jun 27, 2018
d4b69f0
fix shape
franklixuefei Jun 27, 2018
542f2cf
fix unit test
franklixuefei Jun 27, 2018
e832dae
add unit test
oliviertassinari Jun 27, 2018
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
6 changes: 4 additions & 2 deletions packages/material-ui/src/styles/createMuiTheme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Mixins, MixinsOptions } from './createMixins';
import { Palette, PaletteOptions } from './createPalette';
import { Typography, TypographyOptions } from './createTypography';
import { Shadows } from './shadows';
import { Shape, ShapeOptions } from './shape';
import { Shape } from './shape';
import { Spacing, SpacingOptions } from './spacing';
import { Transitions, TransitionsOptions } from './transitions';
import { ZIndex, ZIndexOptions } from './zIndex';
Expand All @@ -13,7 +13,7 @@ import { ComponentsProps } from './props';
export type Direction = 'ltr' | 'rtl';

export interface ThemeOptions {
shape?: ShapeOptions;
shape?: Shape;
Copy link
Member

@oliviertassinari oliviertassinari Jun 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Don't we still need the partial? Like we do for the Spacing.

Copy link
Contributor Author

@franklixuefei franklixuefei Jun 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Unlike spacing, which is deepmerged, shape is not.
https://github.com/mui-org/material-ui/blob/ca33d9773581a8b0ff37c92260b48c9f72b42de9/packages/material-ui/src/styles/createMuiTheme.js#L38-L44

https://github.com/mui-org/material-ui/blob/ca33d9773581a8b0ff37c92260b48c9f72b42de9/packages/material-ui/src/styles/createMuiTheme.js#L36

This means that for spacing, we can specify just partial of it, but for shadow, we need to specify the full props, from what I understand.

Copy link
Contributor Author

@franklixuefei franklixuefei Jun 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

FYI - if you take a look at shadow type definition under the ThemeOptions interface, it is not Partial<> either.
https://github.com/mui-org/material-ui/blob/ca33d9773581a8b0ff37c92260b48c9f72b42de9/packages/material-ui/src/styles/createMuiTheme.d.ts#L23

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for raising the issue! Should we fix the implementation over the TypeScript definition then? I have missed this part. I think that spacing and shape should behave the same way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I see. I'll do this. BTW, what about shadows? Should it also be a partial in the ThemeOptions?

Copy link
Member

@oliviertassinari oliviertassinari Jun 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

we need to specify the full props

I don't think that it's the behavior people expect. We need to fix the shape key :).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

NVM. shadows is different.

Copy link
Member

Choose a reason for hiding this comment

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

Regarding the shadows, yeah it's fine. Relative values are important, people need to provide the full property.

breakpoints?: BreakpointsOptions;
direction?: Direction;
mixins?: MixinsOptions;
Expand All @@ -25,6 +25,7 @@ export interface ThemeOptions {
transitions?: TransitionsOptions;
typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
zIndex?: ZIndexOptions;
status?: Record<string, string>;
Copy link
Member

@oliviertassinari oliviertassinari Jun 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

No, it's too specific.

}

export interface Theme {
Expand All @@ -40,6 +41,7 @@ export interface Theme {
transitions: Transitions;
typography: Typography;
zIndex: ZIndex;
status?: Record<string, string>;
Copy link
Member

Choose a reason for hiding this comment

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

No, it's too specific.

}

export default function createMuiTheme(options?: ThemeOptions): Theme;
7 changes: 4 additions & 3 deletions packages/material-ui/src/styles/createPalette.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ interface TypeBackground {
paper: string;
}

type TypeDivider = string;

export type PaletteColorOptions = SimplePaletteColorOptions | Partial<Color>;

export interface SimplePaletteColorOptions {
Expand All @@ -40,6 +42,7 @@ export interface PaletteColor {
export interface TypeObject {
text: TypeText;
action: TypeAction;
divider: TypeDivider;
background: TypeBackground;
}

Expand All @@ -56,7 +59,7 @@ export interface Palette {
error: PaletteColor;
grey: Color;
text: TypeText;
divider: string;
divider: TypeDivider;
action: TypeAction;
background: TypeBackground;
getContrastText: (background: string) => string;
Expand Down Expand Up @@ -85,6 +88,4 @@ export interface PaletteOptions {
getContrastText?: (background: string) => string;
}

//export type PaletteOptions = DeepPartial<Palette>;
Copy link
Member

Choose a reason for hiding this comment

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

Why?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was commented out. Why do we want to preserve the commented out code?

Copy link
Member

Choose a reason for hiding this comment

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

I was wondering why it was commented out; Let's remove it then :)


export default function createPalette(palette: PaletteOptions): Palette;
2 changes: 0 additions & 2 deletions packages/material-ui/src/styles/shape.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ export interface Shape {
borderRadius: number;
}

export type ShapeOptions = Partial<Shape>;

declare const shape: Shape;

export default shape;