From 33a1ac310d4ba42f73cd5c52c5a7e2caff7df33b Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Mon, 25 Nov 2024 22:26:19 +0000 Subject: [PATCH 01/13] Migrating from deprecated APIs --- src/Autocomplete/Autocomplete.tsx | 18 +++++---- src/Color/Color.jsx | 40 +++++++++++-------- src/FontPicker/FontPicker.jsx | 14 ++++--- src/LabelSelector/LabelSelector.jsx | 22 +++++----- src/NumberField/NumberField.tsx | 29 ++++++++------ .../PasswordChangeDialog.jsx | 4 +- src/TextField/TextField.tsx | 4 +- 7 files changed, 77 insertions(+), 54 deletions(-) diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx index 22921b7e8..6a175bd65 100644 --- a/src/Autocomplete/Autocomplete.tsx +++ b/src/Autocomplete/Autocomplete.tsx @@ -102,17 +102,21 @@ export default function Autocomplete< label={label} error={error} helperText={helperText} - InputProps={{ - ...params.InputProps, - className: readOnly ? "Mui-disabled label.Mui-disabled" : undefined - }} - InputLabelProps={{ - ...params.InputLabelProps - }} name={name} margin={margin} required={required} variant={variant} + slotProps={{ + input: { + ...params.InputProps, + className: readOnly + ? "Mui-disabled label.Mui-disabled" + : undefined + }, + inputLabel: { + ...params.InputLabelProps + } + }} /> )} renderOption={Option} diff --git a/src/Color/Color.jsx b/src/Color/Color.jsx index aae534363..c5c8c3efa 100644 --- a/src/Color/Color.jsx +++ b/src/Color/Color.jsx @@ -170,11 +170,13 @@ export default function Color({ marginRight: theme.spacing(1), width: "33%" })} - InputLabelProps={{ - shrink: true - }} onChange={handleRedChange} - inputProps={{ max: 255, min: 0 }} + slotProps={{ + input: { max: 255, min: 0 }, + inputLabel: { + shrink: true + } + }} /> 255} value={noColorChecked ? "" : rgbaObj.b} sx={{ width: "33%" }} - InputLabelProps={{ - shrink: true - }} onChange={handleBlueChange} - inputProps={{ max: 255, min: 0 }} + slotProps={{ + input: { max: 255, min: 0 }, + inputLabel: { + shrink: true + } + }} /> 1} value={noColorChecked ? "" : rgbaObj.a} fullWidth - InputLabelProps={{ - shrink: true - }} onChange={handleAlphaChange} - inputProps={{ max: 1, min: 0, step: 0.1 }} + slotProps={{ + input: { max: 1, min: 0, step: 0.1 }, + inputLabel: { + shrink: true + } + }} /> )} diff --git a/src/FontPicker/FontPicker.jsx b/src/FontPicker/FontPicker.jsx index 5aa84c040..4bc0236dc 100644 --- a/src/FontPicker/FontPicker.jsx +++ b/src/FontPicker/FontPicker.jsx @@ -189,16 +189,18 @@ export default function FontPicker({ )} renderOption={(props, option) => ( diff --git a/src/LabelSelector/LabelSelector.jsx b/src/LabelSelector/LabelSelector.jsx index 8874fa046..6c0408119 100644 --- a/src/LabelSelector/LabelSelector.jsx +++ b/src/LabelSelector/LabelSelector.jsx @@ -188,16 +188,6 @@ export default function LabelSelector({ const filtered = filter(options, params); return filtered; }} - PaperComponent={props => { - return ( - - ); - }} renderOption={(props, option, { selected }) => ( { + return ( + + ); + } + }} /> {endAdornment} - ) - }), - ...(startAdornment && { - startAdornment: ( - {startAdornment} - ) - }) - }} onChange={handleChange} sx={ !stepper @@ -120,6 +107,22 @@ export default function NumberField(props: NumberFieldProps) { } type="number" value={currentValue} + slotProps={{ + input: { + ...(endAdornment && { + endAdornment: ( + {endAdornment} + ) + }), + ...(startAdornment && { + startAdornment: ( + {startAdornment} + ) + }) + }, + + inputLabel: { shrink: true } + }} /> ); } diff --git a/src/PasswordChangeDialog/PasswordChangeDialog.jsx b/src/PasswordChangeDialog/PasswordChangeDialog.jsx index 937e17ae6..56a498d04 100644 --- a/src/PasswordChangeDialog/PasswordChangeDialog.jsx +++ b/src/PasswordChangeDialog/PasswordChangeDialog.jsx @@ -123,7 +123,6 @@ export default function PasswordChangeDialog({ label="Confirm new password" type="password" autoComplete="new-password" - inputProps={{ "aria-label": "newPasswordRepeat" }} error={Boolean(errors.newPasswordRepeat)} helperText={errors?.newPasswordRepeat?.message} disabled={status === "loading"} @@ -132,6 +131,9 @@ export default function PasswordChangeDialog({ validate: value => value === password.current || "Password does not match" })} + slotProps={{ + input: { "aria-label": "newPasswordRepeat" } + }} /> diff --git a/src/TextField/TextField.tsx b/src/TextField/TextField.tsx index 2590a71df..79be9575a 100644 --- a/src/TextField/TextField.tsx +++ b/src/TextField/TextField.tsx @@ -55,12 +55,14 @@ export default function TextField({ onBlur={onBlur} onChange={onChange} placeholder={placeholder} - InputProps={!isFieldMasked ? undefined : InputProps} required={required} size={size} type="string" value={value} variant={variant} + slotProps={{ + input: !isFieldMasked ? undefined : InputProps + }} /> ); } From a3db5ff201aebba9319c670c9c07e5f2caf216d6 Mon Sep 17 00:00:00 2001 From: Manjesh M Pillai Date: Tue, 26 Nov 2024 14:49:00 +0000 Subject: [PATCH 02/13] forcing to use sx prop --- src/AppHeader/AppHeader.tsx | 43 +++++-- src/AppLauncher/AppLauncher.tsx | 28 ++++- src/AppLayout/AppLayout.tsx | 23 ++-- src/CanvasItem/CanvasItem.stories.jsx | 22 +++- src/Card/DetailCard/DetailCard.tsx | 29 +++-- src/Card/SummaryCard/SummaryCard.stories.tsx | 6 +- src/Card/SummaryCard/SummaryCard.tsx | 6 +- src/CardContent/FileDetails/FileDetails.tsx | 37 ++++-- src/CardContent/Infographic/Infographic.tsx | 21 +++- .../ConfirmProvider.stories.tsx | 7 +- src/EditLabelDialog/EditLabelDialog.jsx | 8 +- src/FeedbackForm/FeedbackForm.jsx | 33 ++++-- src/FileUploader/FileUploader.tsx | 33 +++++- src/Filter/LabelFilter/LabelFilter.jsx | 8 +- src/Filter/RangeFilter/RangeFilter.jsx | 7 +- src/Filter/SidebarFilter/SidebarFilter.tsx | 14 ++- src/ImageUploader/ImageUploader.tsx | 20 +++- .../LabelChipGroup/LabelChipGroup.stories.tsx | 2 +- .../LabelChipGroup/LabelChipGroup.tsx | 4 +- src/LabelSelector/LabelSelector.jsx | 23 +++- src/LabelSelector/LabelSelector.stories.jsx | 6 +- src/LinePlot/LinePlot.tsx | 12 +- src/LoadErrorMessage/LoadErrorMessage.tsx | 30 +++-- src/Loading/Loading.jsx | 12 +- src/LoginForm/LoginForm.jsx | 7 +- src/MultiColor/MultiColor.jsx | 9 +- src/MultiLabelPopover/MultiLabelPopover.jsx | 14 ++- src/MultiText/MultiText.jsx | 9 +- src/PartSelector/PartSelector.tsx | 12 +- src/PasswordChangeForm/PasswordChangeForm.jsx | 7 +- src/PasswordResetForm/PasswordResetForm.jsx | 7 +- src/RegistrationForm/RegistrationForm.jsx | 7 +- src/RoadPreview/RoadPreview.tsx | 112 ++++++++++++++---- src/Sidebar/Sidebar.tsx | 20 +++- src/Sidebar/SidebarItem/SidebarItem.tsx | 25 +++- src/Slider/Slider.jsx | 18 ++- src/Slider/Slider.stories.jsx | 20 ++-- src/Snackbar/Snackbar.stories.tsx | 6 +- src/Status/StatusCard/StatusCard.tsx | 13 +- .../StatusCountBar/StatusCountBar.stories.tsx | 34 +++--- .../StatusCountBar/StatusCountBar.test.tsx | 8 +- src/Status/StatusCountBar/StatusCountBar.tsx | 18 ++- .../StatusCountTable/StatusCountTable.tsx | 8 +- src/SurfacePlot/SurfacePlot.tsx | 12 +- src/TabPanel/TabPanel.stories.tsx | 20 +++- src/TabPanel/TabPanel.tsx | 32 +++-- src/TransferList/TransferList.tsx | 16 +-- src/Uploader/UploaderHeader.tsx | 16 +-- src/VehicleSelect/VehicleSelect.tsx | 24 +++- .../VehicleSelectDialog.tsx | 7 +- src/VehicleSelector/VehicleSelector.tsx | 25 +++- src/VirtoAppHeader/VirtoAppHeader.tsx | 54 ++++++--- src/VirtoAppLayout/VirtoAppLayout.tsx | 15 ++- src/Wizard/WizardActions/WizardActions.tsx | 8 +- 54 files changed, 739 insertions(+), 278 deletions(-) diff --git a/src/AppHeader/AppHeader.tsx b/src/AppHeader/AppHeader.tsx index 830f57fc8..fc2aea4de 100644 --- a/src/AppHeader/AppHeader.tsx +++ b/src/AppHeader/AppHeader.tsx @@ -22,7 +22,12 @@ function AppHeader({ })} > - + - + {appLogo ? ( {appLogo} ) : ( ({ - color: "white", - ...theme.applyStyles("dark", { - color: "#003063" + sx={[ + { + fontSize: "20px", + fontWeight: "600", + letterSpacing: "0.05em", + lineHeight: "34px" + }, + theme => ({ + color: "white", + ...theme.applyStyles("dark", { + color: "#003063" + }) }) - })} + ]} > {appName} )} - + {children} - + ({ color: theme.palette.primary.main, @@ -103,7 +108,12 @@ function AppLauncher({ ); return ( - + {showLogo ? ( {logoLinkUrl ? ( @@ -122,7 +132,13 @@ function AppLauncher({ )} ) : null} - + {appList.map(app => { return ( - + ); } diff --git a/src/AppLayout/AppLayout.tsx b/src/AppLayout/AppLayout.tsx index a4124f0f1..32991d04a 100644 --- a/src/AppLayout/AppLayout.tsx +++ b/src/AppLayout/AppLayout.tsx @@ -28,7 +28,12 @@ function Layout({ return ( - + ({ - background: theme.palette.background.default - })} + sx={[ + { + display: "flex", + flexDirection: "column", + flexGrow: 1 + }, + theme => ({ + background: theme.palette.background.default + }) + ]} > theme.mixins.toolbar} /> { }; return ( - + { onClick={onClick} > ({ - background: theme.palette.grey[100] - })} - width="100%" - height="100%" + sx={[ + { + height: "100%", + width: "100%" + }, + theme => ({ + background: theme.palette.grey[100] + }) + ]} > diff --git a/src/Card/DetailCard/DetailCard.tsx b/src/Card/DetailCard/DetailCard.tsx index cc0d9f46b..8e7cc289e 100644 --- a/src/Card/DetailCard/DetailCard.tsx +++ b/src/Card/DetailCard/DetailCard.tsx @@ -29,13 +29,13 @@ function DetailCard({ return ( @@ -55,7 +55,11 @@ function DetailCard({ overflow: "auto" }} > - + {content} @@ -133,11 +142,11 @@ function DetailCardHeader({ return ( @@ -170,7 +179,11 @@ function DetailCardHeader({ {buttonsStack} - + {labels && labels.length > 0 && } diff --git a/src/Card/SummaryCard/SummaryCard.stories.tsx b/src/Card/SummaryCard/SummaryCard.stories.tsx index a707c80b0..302597351 100644 --- a/src/Card/SummaryCard/SummaryCard.stories.tsx +++ b/src/Card/SummaryCard/SummaryCard.stories.tsx @@ -98,7 +98,11 @@ const WithMoreOptionsButtonRef: StoryFn = args => { vertical: "bottom" }} > - + This popover is anchored to the more options button diff --git a/src/Card/SummaryCard/SummaryCard.tsx b/src/Card/SummaryCard/SummaryCard.tsx index 116f393c7..bc9c74c47 100644 --- a/src/Card/SummaryCard/SummaryCard.tsx +++ b/src/Card/SummaryCard/SummaryCard.tsx @@ -120,12 +120,12 @@ function SummaryCard({ } /> diff --git a/src/CardContent/FileDetails/FileDetails.tsx b/src/CardContent/FileDetails/FileDetails.tsx index ba25a2d10..482cbb707 100644 --- a/src/CardContent/FileDetails/FileDetails.tsx +++ b/src/CardContent/FileDetails/FileDetails.tsx @@ -99,11 +99,11 @@ function FileDetails({ return ( @@ -119,14 +119,14 @@ function FileDetails({ {fileTitle} @@ -147,7 +147,12 @@ function FileDetails({ - + - + {files.map(({ header, files }, index) => ( {files.length > 0 ? ( - + {header} diff --git a/src/CardContent/Infographic/Infographic.tsx b/src/CardContent/Infographic/Infographic.tsx index ac15c8a4a..5b1ba85c3 100644 --- a/src/CardContent/Infographic/Infographic.tsx +++ b/src/CardContent/Infographic/Infographic.tsx @@ -54,16 +54,20 @@ const Infographic = ({ media, version }: InfographicProps) => { return ( {showSkeleton ? ( - + { /> {version ? ( - + diff --git a/src/ConfirmProvider/ConfirmProvider.stories.tsx b/src/ConfirmProvider/ConfirmProvider.stories.tsx index 318eb5642..0fb4be00a 100644 --- a/src/ConfirmProvider/ConfirmProvider.stories.tsx +++ b/src/ConfirmProvider/ConfirmProvider.stories.tsx @@ -98,7 +98,12 @@ WithCustomContent.args = { content: (
- + This isn't wrapped in DialogContentText.
diff --git a/src/EditLabelDialog/EditLabelDialog.jsx b/src/EditLabelDialog/EditLabelDialog.jsx index 8cc27dae4..4fea6c303 100644 --- a/src/EditLabelDialog/EditLabelDialog.jsx +++ b/src/EditLabelDialog/EditLabelDialog.jsx @@ -186,7 +186,13 @@ export default function EditLabelDialog({ /> - + {name ? ( ) : null} diff --git a/src/FeedbackForm/FeedbackForm.jsx b/src/FeedbackForm/FeedbackForm.jsx index 7d0456883..3606107ed 100644 --- a/src/FeedbackForm/FeedbackForm.jsx +++ b/src/FeedbackForm/FeedbackForm.jsx @@ -138,19 +138,24 @@ export default function FeedbackForm({ > I like Something - + We like to hear what we're doing right. @@ -173,19 +178,24 @@ export default function FeedbackForm({ > I don't like Something - + If something's not right, we want to know about it. @@ -208,19 +218,24 @@ export default function FeedbackForm({ > I have a suggestion - + Share an idea or improvement. diff --git a/src/FileUploader/FileUploader.tsx b/src/FileUploader/FileUploader.tsx index efe86a20f..d8f1b4815 100644 --- a/src/FileUploader/FileUploader.tsx +++ b/src/FileUploader/FileUploader.tsx @@ -120,10 +120,18 @@ export default function FileUploader({ {isValidating ? ( - + {multiple ? `Validating Selection(s)` : `Validating Selection`} - + @@ -131,14 +139,22 @@ export default function FileUploader({ <> {!multiple && selectedFiles.length === 1 ? ( - + {selectedFiles[0].file.name} ) : ( - + {rejectionMessage ?? dropzoneText} @@ -147,7 +163,14 @@ export default function FileUploader({ )} {multiple && selectedFiles.length > 0 ? ( - + {selectedFiles.map((thisFile, i) => { return ( diff --git a/src/Filter/LabelFilter/LabelFilter.jsx b/src/Filter/LabelFilter/LabelFilter.jsx index 717b0de43..d09e664e4 100644 --- a/src/Filter/LabelFilter/LabelFilter.jsx +++ b/src/Filter/LabelFilter/LabelFilter.jsx @@ -137,7 +137,13 @@ function Option(props, option, { selected }) { flexGrow: 1 }} > - {option.name} + + {option.name} + {option.description || "No description"} diff --git a/src/Filter/RangeFilter/RangeFilter.jsx b/src/Filter/RangeFilter/RangeFilter.jsx index 22af8c85d..b9d855297 100644 --- a/src/Filter/RangeFilter/RangeFilter.jsx +++ b/src/Filter/RangeFilter/RangeFilter.jsx @@ -40,7 +40,12 @@ export default function RangeFilter({ // return component return ( - + - - + + Filters {isUploading ? ( - Uploading Image - + + Uploading Image + + ) : selectedFiles.length === 0 ? ( - + {rejectionMessage ?? dropzoneText} diff --git a/src/LabelSelector/LabelChipGroup/LabelChipGroup.stories.tsx b/src/LabelSelector/LabelChipGroup/LabelChipGroup.stories.tsx index 1d1f82134..8d4ce8d20 100644 --- a/src/LabelSelector/LabelChipGroup/LabelChipGroup.stories.tsx +++ b/src/LabelSelector/LabelChipGroup/LabelChipGroup.stories.tsx @@ -24,9 +24,9 @@ const OverflowComponent: StoryFn = args => { return ( diff --git a/src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx b/src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx index ebbde5188..816eed146 100644 --- a/src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx +++ b/src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx @@ -155,8 +155,10 @@ export default function LabelChipGroup({ chips }: LabelChipGroupProps) { {overflowingChips.map((chip, index) => ( diff --git a/src/LabelSelector/LabelSelector.jsx b/src/LabelSelector/LabelSelector.jsx index 6c0408119..5b2b51398 100644 --- a/src/LabelSelector/LabelSelector.jsx +++ b/src/LabelSelector/LabelSelector.jsx @@ -68,7 +68,12 @@ const CustomPaper = ({ {props.children} {addEnabled && ( - +