From c8a5fd2d5826812ea4aed201930c8f6c4a1b921b Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 30 May 2022 12:09:06 +0530 Subject: [PATCH 1/6] test(Chip): add test case for custom color in theme palette --- packages/mui-material/src/Chip/Chip.test.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js index 318e7ae702a29a..6890b3bc425540 100644 --- a/packages/mui-material/src/Chip/Chip.test.js +++ b/packages/mui-material/src/Chip/Chip.test.js @@ -616,4 +616,22 @@ describe('', () => { expect(chip).not.to.have.class(classes.focusVisible); }); }); + + it('should not throw error when a new palette color is added in theme', () => { + const theme = createTheme({ + palette: { + custom: { + main: '#f90', + }, + }, + }); + + expect(() => + render( + + + , + ), + ).not.to.throw(); + }); }); From 4e1aac1beb549d8a3a076218de2db4ed0706e39f Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Mon, 30 May 2022 12:11:47 +0530 Subject: [PATCH 2/6] fix(Chip): calculate contrastColor if custom color is provided in theme palette to avoid crash in alpha function --- packages/mui-material/src/Chip/Chip.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 314e955b786497..bf04593dbe3595 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -152,7 +152,11 @@ const ChipRoot = styled('div', { marginLeft: -4, }), ...(ownerState.color !== 'default' && { - color: alpha(theme.palette[ownerState.color].contrastText, 0.7), + color: alpha( + theme.palette[ownerState.color].contrastText || + theme.palette.getContrastText(theme.palette[ownerState.color].main), + 0.7, + ), '&:hover, &:active': { color: theme.palette[ownerState.color].contrastText, }, From cce47b42c34362179aa0fd1e379b92f3a890763a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 22 Jun 2022 18:06:52 +0530 Subject: [PATCH 3/6] revert changes --- packages/mui-material/src/Chip/Chip.js | 6 +----- packages/mui-material/src/Chip/Chip.test.js | 18 ------------------ 2 files changed, 1 insertion(+), 23 deletions(-) diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index a083f696a03bc8..9596ec57b00fcc 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -159,11 +159,7 @@ const ChipRoot = styled('div', { ...(ownerState.color !== 'default' && { color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` - : alpha( - theme.palette[ownerState.color].contrastText || - theme.palette.getContrastText(theme.palette[ownerState.color].main), - 0.7, - ), + : alpha(theme.palette[ownerState.color].contrastText, 0.7), '&:hover, &:active': { color: (theme.vars || theme).palette[ownerState.color].contrastText, }, diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js index 6890b3bc425540..318e7ae702a29a 100644 --- a/packages/mui-material/src/Chip/Chip.test.js +++ b/packages/mui-material/src/Chip/Chip.test.js @@ -616,22 +616,4 @@ describe('', () => { expect(chip).not.to.have.class(classes.focusVisible); }); }); - - it('should not throw error when a new palette color is added in theme', () => { - const theme = createTheme({ - palette: { - custom: { - main: '#f90', - }, - }, - }); - - expect(() => - render( - - - , - ), - ).not.to.throw(); - }); }); From d60d5a47f5562d584f6a192f96b69275bff92504 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Wed, 22 Jun 2022 18:13:16 +0530 Subject: [PATCH 4/6] update code snippet --- docs/data/material/customization/palette/palette.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index 2eb22a39bb91aa..cc4f4821cfe509 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -87,6 +87,14 @@ const theme = createTheme({ // dark: will be calculated from palette.secondary.main, contrastText: '#ffcc00', }, + // All tokens need to be provided for custom colors if this + // color is going to be used as a prop in the Material UI's components + custom: { + light: '#ffa726' + main: '#f57c00', + dark: '#ef6c00', + contrastText: 'rgba(0, 0, 0, 0.87)', + } // Used by `getContrastText()` to maximize the contrast between // the background and the text. contrastThreshold: 3, From 02b360223a3788571fbebcf9fc0407e8e0ac5382 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 23 Jun 2022 12:10:45 +0530 Subject: [PATCH 5/6] update docs --- docs/data/material/customization/palette/palette.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index cc4f4821cfe509..6bd466967f4b19 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -87,8 +87,9 @@ const theme = createTheme({ // dark: will be calculated from palette.secondary.main, contrastText: '#ffcc00', }, - // All tokens need to be provided for custom colors if this - // color is going to be used as a prop in the Material UI's components + // Provide every color token (light, main, dark, and contrastText) when using + // custom colors for props in Material UI's components. + // Then you will be able to use it like this: `