From c0e5abcc219349636facbc8da05f4be4e3f50a63 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Thu, 6 Jan 2022 23:35:29 -0300 Subject: [PATCH 1/8] [docs] Replace @mui/styles in x-data-grid-generator --- docs/pages/_app.js | 1 - .../src/renderer/renderCountry.tsx | 40 ++++---- .../src/renderer/renderEditContractType.tsx | 31 ++---- .../src/renderer/renderEditCountry.tsx | 60 ++++++------ .../src/renderer/renderEditCurrency.tsx | 56 +++++------ .../src/renderer/renderEditIncoterm.tsx | 37 ++----- .../src/renderer/renderEditProgress.tsx | 86 +++++++--------- .../src/renderer/renderEditRateType.tsx | 31 ++---- .../src/renderer/renderEditRating.tsx | 35 +++---- .../src/renderer/renderEditStatus.tsx | 35 ++----- .../src/renderer/renderEditTaxCode.tsx | 31 ++---- .../src/renderer/renderIncoterm.tsx | 21 +--- .../src/renderer/renderLink.tsx | 24 ++--- .../src/renderer/renderPnl.tsx | 44 ++++----- .../src/renderer/renderProgress.tsx | 79 +++++++-------- .../src/renderer/renderRating.tsx | 35 +++---- .../src/renderer/renderStatus.tsx | 73 ++++++-------- .../src/renderer/renderTotalPrice.tsx | 48 +++++---- packages/storybook/package.json | 1 - .../src/stories/grid-filter.stories.tsx | 27 +++-- .../src/stories/grid-rows.stories.tsx | 98 +++++++------------ 21 files changed, 345 insertions(+), 548 deletions(-) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index effe2a6a423c..021e315e9df3 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -50,7 +50,6 @@ ponyfillGlobal.muiDocConfig = { newDeps['@mui/material'] = versions['@mui/material']; newDeps['@mui/icons-material'] = versions['@mui/icons-material']; newDeps['@mui/x-data-grid'] = versions['@mui/x-data-grid']; // TS types are imported from @mui/x-data-grid - newDeps['@mui/styles'] = versions['@mui/styles']; } return newDeps; diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx index 7352962d87d6..da37aa50c2d0 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderCountry.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@mui/styles'; +import Box from '@mui/material/Box'; import { GridRenderCellParams } from '@mui/x-data-grid-pro'; // ISO 3166-1 alpha-2 @@ -12,23 +12,6 @@ function countryToFlag(isoCode: string) { : isoCode; } -const useStyles = makeStyles({ - root: { - display: 'flex', - }, - flag: { - marginRight: 4, - marginTop: 2, - height: 32, - width: 32, - fontSize: '28px', - }, - label: { - overflow: 'hidden', - textOverflow: 'ellipsis', - }, -}); - interface CountryProps { value: { code: string; @@ -38,13 +21,24 @@ interface CountryProps { const Country = React.memo(function Country(props: CountryProps) { const { value } = props; - const classes = useStyles(); return ( -
- {value.code && countryToFlag(value.code)} - {value.label} -
+ + + {value.code && countryToFlag(value.code)} + + + {value.label} + + ); }); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx index e12a3b70b411..464ebd6f6439 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditContractType.tsx @@ -3,31 +3,9 @@ import { GridRenderCellParams, GridEvents } from '@mui/x-data-grid'; import Select, { SelectProps } from '@mui/material/Select'; import { MenuProps } from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; import { CONTRACT_TYPE_OPTIONS } from '../services/static-data'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 36, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - function EditContractType(props: GridRenderCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange: SelectProps['onChange'] = (event) => { @@ -55,11 +33,18 @@ function EditContractType(props: GridRenderCellParams) { return ( - - {code} - - + {code} + ); })} diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx index b64ab2b2e13c..412487513e62 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditProgress.tsx @@ -1,55 +1,47 @@ import * as React from 'react'; import clsx from 'clsx'; import { GridRenderEditCellParams } from '@mui/x-data-grid'; -import Slider, { SliderProps } from '@mui/material/Slider'; +import Slider, { SliderProps, sliderClasses } from '@mui/material/Slider'; import { ValueLabelProps } from '@mui/base/SliderUnstyled'; import Tooltip from '@mui/material/Tooltip'; -import { createStyles, makeStyles } from '@mui/styles'; import { debounce } from '@mui/material/utils'; -import { alpha, createTheme } from '@mui/material/styles'; +import { alpha, styled } from '@mui/material/styles'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - root: { - display: 'flex', - height: '100%', - width: '100%', - alignItems: 'center', - justifyContent: 'center', - padding: 0, - borderRadius: 0, - }, - rail: { - height: '100%', - backgroundColor: 'transparent', - }, - track: { - height: '100%', - transition: theme.transitions.create('background-color', { - duration: theme.transitions.duration.shorter, - }), - '&.low': { - backgroundColor: '#f44336', - }, - '&.medium': { - backgroundColor: '#efbb5aa3', - }, - '&.high': { - backgroundColor: '#088208a3', - }, - }, - thumb: { - height: '100%', - width: 5, - borderRadius: 0, - marginTop: 0, - backgroundColor: alpha('#000000', 0.2), - }, +const StyledSlider = styled(Slider)(({ theme }) => ({ + display: 'flex', + height: '100%', + width: '100%', + alignItems: 'center', + justifyContent: 'center', + padding: 0, + borderRadius: 0, + [`& .${sliderClasses.rail}`]: { + height: '100%', + backgroundColor: 'transparent', + }, + [`& .${sliderClasses.track}`]: { + height: '100%', + transition: theme.transitions.create('background-color', { + duration: theme.transitions.duration.shorter, }), - { defaultTheme }, -); + '&.low': { + backgroundColor: '#f44336', + }, + '&.medium': { + backgroundColor: '#efbb5aa3', + }, + '&.high': { + backgroundColor: '#088208a3', + }, + }, + [`& .${sliderClasses.thumb}`]: { + height: '100%', + width: 5, + borderRadius: 0, + marginTop: 0, + backgroundColor: alpha('#000000', 0.2), + }, +})); const ValueLabelComponent = (props: ValueLabelProps) => { const { children, open, value } = props; @@ -62,7 +54,6 @@ const ValueLabelComponent = (props: ValueLabelProps) => { }; function EditProgress(props: GridRenderEditCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const [valueState, setValueState] = React.useState(Number(value)); @@ -94,11 +85,10 @@ function EditProgress(props: GridRenderEditCellParams) { }; return ( - = 0.3 && valueState <= 0.7, high: valueState > 0.7, diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditRateType.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditRateType.tsx index 1b17fee66179..2b95956d5e23 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditRateType.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditRateType.tsx @@ -3,31 +3,9 @@ import { GridRenderCellParams, GridEvents } from '@mui/x-data-grid'; import Select, { SelectProps } from '@mui/material/Select'; import { MenuProps } from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; import { RATE_TYPE_OPTIONS } from '../services/static-data'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 36, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - function EditRateType(props: GridRenderCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange: SelectProps['onChange'] = (event) => { @@ -55,11 +33,18 @@ function EditRateType(props: GridRenderCellParams) { return ( - + - + ); })} diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditTaxCode.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditTaxCode.tsx index 4a9ba99b2683..81650647ecbc 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditTaxCode.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditTaxCode.tsx @@ -3,31 +3,9 @@ import { GridRenderCellParams, GridEvents } from '@mui/x-data-grid'; import Select, { SelectProps } from '@mui/material/Select'; import { MenuProps } from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; -import { createStyles, makeStyles } from '@mui/styles'; -import { createTheme } from '@mui/material/styles'; import { TAXCODE_OPTIONS } from '../services/static-data'; -const defaultTheme = createTheme(); -const useStyles = makeStyles( - (theme) => - createStyles({ - select: { - display: 'flex', - alignItems: 'center', - paddingLeft: theme.spacing(1), - }, - optionIcon: { - minWidth: 36, - }, - optionText: { - overflow: 'hidden', - }, - }), - { defaultTheme }, -); - function EditTaxCode(props: GridRenderCellParams) { - const classes = useStyles(); const { id, value, api, field } = props; const handleChange: SelectProps['onChange'] = (event) => { @@ -55,11 +33,18 @@ function EditTaxCode(props: GridRenderCellParams) { return ( - {CONTRACT_TYPE_OPTIONS.map((option) => { - return ( - - {option} - - ); - })} - - ); -} - -export function renderEditContractType(params: GridRenderCellParams) { - return ; -} From 1420d76163015aef56f99176f635d801f59f6d8a Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 17 Jan 2022 16:41:28 -0300 Subject: [PATCH 5/8] Make Autocomplete to extend cell height --- .../x-data-grid-generator/src/renderer/renderEditCountry.tsx | 1 + .../x-data-grid-generator/src/renderer/renderEditCurrency.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx index e58a9fb3a154..4035592c82dd 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditCountry.tsx @@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles'; import { COUNTRY_ISO_OPTIONS } from '../services/static-data'; const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({ + height: '100%', [`& .${autocompleteClasses.inputRoot}`]: { ...theme.typography.body2, padding: '1px 0', diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx index 644139948a78..ae49d5155a15 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditCurrency.tsx @@ -7,6 +7,7 @@ import { styled } from '@mui/material/styles'; import { CURRENCY_OPTIONS } from '../services/static-data'; const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({ + height: '100%', [`& .${autocompleteClasses.inputRoot}`]: { ...theme.typography.body2, padding: '1px 0', From f0ad99d31f82fbd66a5b69891df42211d03042ef Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 17 Jan 2022 16:53:31 -0300 Subject: [PATCH 6/8] Update Select items minWidth --- .../x-data-grid-generator/src/renderer/renderEditIncoterm.tsx | 2 +- .../x-data-grid-generator/src/renderer/renderEditStatus.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx index a9cf384ab64e..9f417d477046 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditIncoterm.tsx @@ -57,7 +57,7 @@ function EditIncoterm(props: GridRenderEditCellParams) { return ( - {code} + {code} ); diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx index 3d368ad06db3..55d34d181d8d 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderEditStatus.tsx @@ -74,7 +74,7 @@ function EditStatus(props: GridRenderEditCellParams) { return ( - + From 5dd734b35477a12cc899979d34bd985af414d9eb Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Mon, 17 Jan 2022 18:48:34 -0300 Subject: [PATCH 7/8] Don't block flags images --- test/regressions/index.test.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index dd0f97fb4b6c..a1311ccc37a4 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.js @@ -27,7 +27,8 @@ async function main() { // They're also most likely decorative for documentation demos await page.route(/./, async (route, request) => { const type = await request.resourceType(); - if (type === 'image') { + // Block all images except the flags + if (type === 'image' && !request.url().startsWith('https://flagcdn.com')) { route.abort(); } else { route.continue(); From a50d851832eae9d460758416af313c67be60ece6 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Wed, 19 Jan 2022 19:38:11 -0300 Subject: [PATCH 8/8] fix types --- .../grid/x-data-grid-generator/src/renderer/renderStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx b/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx index 59e30bdb7ca2..15a75723d6af 100644 --- a/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx +++ b/packages/grid/x-data-grid-generator/src/renderer/renderStatus.tsx @@ -63,5 +63,5 @@ export function renderStatus(params: GridCellParams) { return ''; } - return ; + return ; }