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.

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

VE-252 Combine dark and light themes for mui v6 #1009

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
3861160
trying combined theme
m4manjesh Dec 4, 2024
264fb14
sort -order fix
m4manjesh Dec 4, 2024
ba38641
useColorTheme hook from mui
mattcorner Dec 4, 2024
b5a45bb
Merge branch 'enhancement/ve-252-combine-theme-for-mui-v6' of https:/…
m4manjesh Dec 4, 2024
b19b8df
fixing test to use useColorScheme
m4manjesh Dec 4, 2024
c254436
removing context for use theme
m4manjesh Dec 4, 2024
4a9ab81
fixing warning
m4manjesh Dec 4, 2024
8a12323
adding missing tokens
m4manjesh Dec 4, 2024
4bab5b4
updating props to correct values
m4manjesh Dec 4, 2024
07fd7ec
Merge branch 'migrate-depricated-apis-to-v6' into enhancement/ve-252-…
m4manjesh Dec 10, 2024
f0935bb
fix test
m4manjesh Dec 10, 2024
e4d7efd
fix sorting
m4manjesh Dec 10, 2024
9993061
adding the color schemes
m4manjesh Dec 10, 2024
0f7089a
10.0.0-3
m4manjesh Dec 10, 2024
e5313f4
updating colors and unwanted space removed
m4manjesh Dec 10, 2024
4add550
change the prefix to ipg
m4manjesh Dec 10, 2024
f88a2af
update theme color prefix
m4manjesh Dec 10, 2024
a067452
10.0.0-4
m4manjesh Dec 10, 2024
913d61e
update hook comments
m4manjesh Dec 10, 2024
13bb88e
remove commented code
m4manjesh Dec 10, 2024
db855f7
Merge branch 'release/v10.0.0' into enhancement/ve-252-combine-theme-…
m4manjesh Dec 10, 2024
c507a4e
set mode to light when theme mode is system
m4manjesh Dec 12, 2024
3c8608d
fix type values
m4manjesh Dec 12, 2024
15df447
set defaultComponents
m4manjesh Dec 12, 2024
ec2aae7
10.0.0-5
m4manjesh Dec 12, 2024
a0a443d
Convert VirtoLogo to typescript
m4manjesh Dec 12, 2024
190b5c5
10.0.0-6
m4manjesh Dec 13, 2024
d1ad40a
fixing font picker
m4manjesh Dec 16, 2024
0c01d06
using grid2 and updated border color
m4manjesh Dec 16, 2024
4294cc2
fixed/added broken theme definitions
m4manjesh Dec 16, 2024
0a72cfc
rename and update doc
m4manjesh Dec 16, 2024
18a10b8
fixing tests
m4manjesh Dec 16, 2024
e0072d4
enable themeCssVarsAugmentation and update interfaces
m4manjesh Dec 16, 2024
a18e56b
using old theme colors
m4manjesh Dec 16, 2024
74f22fe
fixing the colors
m4manjesh Dec 16, 2024
d235e5c
adding grey bg color to story
m4manjesh Dec 17, 2024
87d45b6
using theme colors for buttons
m4manjesh Dec 17, 2024
0079504
remove console log
m4manjesh Dec 17, 2024
f65f34e
setting mode to correct local storage
m4manjesh Dec 17, 2024
47d7b5e
10.0.0-7
m4manjesh Dec 17, 2024
3a2a01c
fixing the icon button color
m4manjesh Dec 17, 2024
f508bcd
fixing the label color
m4manjesh Dec 17, 2024
a0ff0d3
fixing the missing spacing by moving font family to allVariants
m4manjesh Dec 17, 2024
7247bca
button colour use default action.active
m4manjesh Dec 17, 2024
6971838
label color to text secondary
m4manjesh Dec 17, 2024
c972d9d
removing hardcoded color for close buttons
m4manjesh Dec 18, 2024
55a6e6f
fixing font
m4manjesh Dec 18, 2024
4fda39d
10.0.0-8
m4manjesh Dec 18, 2024
1364279
fixing the font for step icon text
m4manjesh Dec 19, 2024
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
46 changes: 24 additions & 22 deletions .storybook/styles.css
Original file line number Diff line number Diff line change
@@ -1,70 +1,72 @@
.dark {
background: #1b1c1d;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

added background , this was getting overwritten by dark color-scheme from mui


.sb-nopreview_main {
background: #1B1C1D;
background: #1b1c1d;
}

.sb-nopreview_heading {
text-align: center;
text-align: center;
}

.sb-errordisplay {
background: #2c2f33;
color: white;
background: #2c2f33;
color: white;
}

.sb-errordisplay_main {
background: #1e1e1e;
box-shadow: 0 0 64px rgba(255, 255, 255, 0.1);
background: #1e1e1e;
box-shadow: 0 0 64px rgba(255, 255, 255, 0.1);
}

.sb-errordisplay_code {
background: #1c1c1c;
color: #d4d4d4;
background: #1c1c1c;
color: #d4d4d4;
}

.sb-preparing-story,
.sb-preparing-docs {
background-color: #1B1C1D;
background-color: #1b1c1d;
}

.sb-loader {
border-color: rgba(158, 158, 158, 0.29);
border-color: rgba(158, 158, 158, 0.29);
}

.sb-previewBlock {
background: #2c2f33;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: rgba(255, 255, 255, 0.1) 0 1px 3px 0;
background: #2c2f33;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: rgba(255, 255, 255, 0.1) 0 1px 3px 0;
}

.sb-previewBlock_header {
box-shadow: rgba(255, 255, 255, 0.1) 0 -1px 0 0 inset;
box-shadow: rgba(255, 255, 255, 0.1) 0 -1px 0 0 inset;
}

.sb-previewBlock_icon {
background: #3c3f43;
background: #3c3f43;
}

.sb-argstableBlock th span,
.sb-argstableBlock td span {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
}

.sb-argstableBlock-body {
box-shadow:
rgba(255, 255, 255, 0.1) 0 1px 3px 1px,
rgba(255, 255, 255, 0.065) 0 0 0 1px;
box-shadow:
rgba(255, 255, 255, 0.1) 0 1px 3px 1px,
rgba(255, 255, 255, 0.065) 0 0 0 1px;
}

.sb-argstableBlock-body tr:not(:first-child) {
border-top: 1px solid #3c3f43;
border-top: 1px solid #3c3f43;
}

.sb-argstableBlock-body td {
background: #1B1C1D;
background: #1b1c1d;
}

.sb-argstableBlock-body button {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ipguk/react-ui",
"version": "10.0.0-2",
"version": "10.0.0-8",
"description": "React UI component library for IPG web applications",
"author": {
"name": "IPG-Automotive-UK"
Expand Down
5 changes: 2 additions & 3 deletions src/ActionDialog/ActionDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,11 @@ export default function ActionDialog({
data-testid="close-icon"
aria-label="close"
onClick={onCancelClick}
sx={theme => ({
color: theme.palette.grey[500],
sx={{
position: "absolute",
right: 8,
top: 8
})}
}}
>
<CloseIcon />
</IconButton>
Expand Down
2 changes: 1 addition & 1 deletion src/AppHeader/AppHeader.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React from "react";
import SearchBar from "../SearchBar";
import ThemeProvider from "../ThemeProvider";
import ToggleColorMode from "../ToggleColorMode";
import VirtoLogo from "../SvgIcons/VirtoLogo";
import { VirtoLogo } from "../SvgIcons/VirtoLogo";
import { fixedPositionComponentDecorator } from "../../.storybook/decorators";
import { useDarkMode } from "storybook-dark-mode";

Expand Down
2 changes: 1 addition & 1 deletion src/AppHeader/AppHeader.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";

import AppHeader from ".";
import React from "react";
import VirtoLogo from "../SvgIcons/VirtoLogo";
import { VirtoLogo } from "../SvgIcons/VirtoLogo";
import userEvent from "@testing-library/user-event";
import { vi } from "vitest";

Expand Down
2 changes: 1 addition & 1 deletion src/AppLauncher/AppLauncher.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
VirtoVehicle
} from "../SvgIcons";

import VirtoLogo from "../SvgIcons/VirtoLogo";
import { VirtoLogo } from "../SvgIcons/VirtoLogo";

// AppLauncher component for app which displays logo, list of items and app version
function AppLauncher({
Expand Down
5 changes: 3 additions & 2 deletions src/ConfirmProvider/ConfirmProvider.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -248,8 +248,9 @@ describe("useConfirm", () => {
);
fireEvent.click(getByText("Delete"));
const dialog = getByText("Dialog Title").closest("div");

expect(dialog).toHaveStyle("color:rgb(255, 255, 255)");
waitFor(() => {
expect(dialog).toHaveStyle("color:rgb(255, 255, 255)");
});
});
});

Expand Down
5 changes: 2 additions & 3 deletions src/DialogTitle/DialogTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,12 @@ const DialogTitle = ({ children, onClose, ...other }: DialogTitleProps) => {
<IconButton
aria-label="close"
onClick={onClose}
sx={theme => ({
color: theme.palette.grey[500],
sx={{
flexGrow: 0,
height: 35,
marginTop: -0.3,
width: 35
})}
}}
>
<CloseIcon />
</IconButton>
Expand Down
6 changes: 5 additions & 1 deletion src/Filter/SidebarFilter/SidebarFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,11 @@ export function SidebarFilter({
<IconButton
data-testid="filter-close-button"
onClick={() => setOpen(false)}
sx={{ position: "absolute", right: 12, top: 12 }}
sx={{
position: "absolute",
right: 12,
top: 12
}}
>
<Close />
</IconButton>
Expand Down
20 changes: 12 additions & 8 deletions src/FontPicker/FontPicker.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export default function FontPicker({
required={required}
variant={variant}
slotProps={{
input: {
htmlInput: {
...params.inputProps,
sx: {
fontFamily: `${value}, Arial, sans-serif`
Expand All @@ -203,13 +203,17 @@ export default function FontPicker({
}}
/>
)}
renderOption={(props, option) => (
<Box {...props}>
<Typography sx={{ fontFamily: `${option}, Arial, sans-serif` }}>
{option}
</Typography>
</Box>
)}
renderOption={(props, option) => {
// Destructure to separate key
const { key, ...otherProps } = props;
return (
<Box {...otherProps} key={key}>
<Typography sx={{ fontFamily: `${option}, Arial, sans-serif` }}>
{option}
</Typography>
</Box>
);
}}
/>
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/LazyLoadImage/LazyLoadImage.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Grid, Typography } from "@mui/material";
import { Box, Grid2 as Grid, Typography } from "@mui/material";
import { Meta, StoryFn } from "@storybook/react";

import LazyLoadImage from "./LazyLoadImage";
Expand Down Expand Up @@ -126,7 +126,7 @@ const FlexSizeComponent: StoryFn<LazyLoadImageProps> = args => {
transition: "color 0.1s"
},
backgroundColor: theme.palette.background.paper,
border: `1px solid`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: "6px",
mattcorner marked this conversation as resolved.
Show resolved Hide resolved
cursor: "pointer",
height: "238px",
Expand Down
7 changes: 1 addition & 6 deletions src/MultiColor/MultiColor.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ export default function MultiColor({ onChange = () => {}, rows = [] }) {
headerName: "Action",
renderCell: params => (
<IconButton
color="primary"
data-testid="deleteButton"
onClick={event => handleOnDeleteClick(event, params)}
>
Expand Down Expand Up @@ -136,11 +135,7 @@ export default function MultiColor({ onChange = () => {}, rows = [] }) {
onCellEditCommit={handleEditCell}
/>
<Box>
<IconButton
color="primary"
data-testid="addButton"
onClick={handleOnAddClick}
>
<IconButton data-testid="addButton" onClick={handleOnAddClick}>
<AddCircleIcon />
</IconButton>
</Box>
Expand Down
7 changes: 1 addition & 6 deletions src/MultiText/MultiText.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export default function LabelSetter({ onChange = () => {}, rows = [] }) {
headerName: "Action",
renderCell: params => (
<IconButton
color="primary"
data-testid="deleteButton"
onClick={event => handleOnDeleteClick(event, params)}
>
Expand Down Expand Up @@ -97,11 +96,7 @@ export default function LabelSetter({ onChange = () => {}, rows = [] }) {
onCellEditCommit={handleEditCell}
/>
<Box>
<IconButton
color="primary"
data-testid="addButton"
onClick={handleOnAddClick}
>
<IconButton data-testid="addButton" onClick={handleOnAddClick}>
<AddCircleIcon />
</IconButton>
</Box>
Expand Down
1 change: 0 additions & 1 deletion src/PasswordChangeDialog/PasswordChangeDialog.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,6 @@ PasswordChangeDialog.propTypes = {
// theming for dialog title
const dialogTitleStyles = {
closeButton: {
color: theme => theme.palette.grey[500],
position: "absolute",
right: theme => theme.spacing(1),
top: theme => theme.spacing(1)
Expand Down
4 changes: 3 additions & 1 deletion src/RadioButtons/RadioButtons.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ export default function RadioButtons({
// return components
return (
<FormControl disabled={disabled} component="fieldset">
<FormLabel component="legend">{title}</FormLabel>
<FormLabel component="legend" color="textSecondary">
{title}
</FormLabel>
<RadioGroup
sx={style}
aria-label={title}
Expand Down
2 changes: 1 addition & 1 deletion src/Slider/Slider.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export const Default = {
color: "primary",
disabled: false,
labelPosition: "bottom",
labels: [],
labelStyle: {},
labels: [],
max: 10,
min: 1,
orientation: "horizontal",
Expand Down
19 changes: 0 additions & 19 deletions src/SvgIcons/VirtoLogo/VirtoLogo.stories.jsx

This file was deleted.

26 changes: 26 additions & 0 deletions src/SvgIcons/VirtoLogo/VirtoLogo.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Meta, StoryFn } from "@storybook/react";

import React from "react";
import { VirtoLogo } from "./VirtoLogo";
import { VirtoLogoProps } from "./VirtoLogo.types";

/**
* Story metadata
*/
const meta: Meta<typeof VirtoLogo> = {
component: VirtoLogo,
title: "General/SvgIcons/VirtoLogo"
};
export default meta;

const Template: StoryFn<VirtoLogoProps> = args => {
return <VirtoLogo {...args} />;
};

export const Default = {
args: {
sx: { height: 40, width: 160 }
},

render: Template
};
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from "react";

import PropTypes from "prop-types";
import SvgIcon from "@mui/material/SvgIcon";
import { VirtoLogoProps } from "./VirtoLogo.types";

// Virto logo svg
function Icon(props) {
function Icon(props: VirtoLogoProps) {
return (
<SvgIcon viewBox="0 0 164 36" {...props}>
<path d="M124.58 0H93.2086C92.5382 0.00459184 92.0928 0.707143 92.3775 1.31327L94.88 6.68112C95.0316 7.00255 95.3576 7.21378 95.7112 7.21378H105.556V35.077C105.556 35.5867 105.969 35.9954 106.474 35.9954H111.314C111.819 35.9954 112.233 35.5821 112.233 35.077V7.21378H122.077C122.436 7.20918 122.757 6.99796 122.909 6.67653L125.411 1.30867C125.696 0.697959 125.25 0 124.58 0Z" />
Expand All @@ -17,13 +17,6 @@ function Icon(props) {
}

// Virto logo component
export default function VirtoLogo({ sx }) {
export function VirtoLogo({ sx }: VirtoLogoProps) {
return <Icon sx={sx} />;
}

VirtoLogo.propTypes = {
/**
* styles applied to the svg element
*/
sx: PropTypes.object
};
3 changes: 3 additions & 0 deletions src/SvgIcons/VirtoLogo/VirtoLogo.types.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { SvgIconProps } from "../SvgIcons.types";

export type VirtoLogoProps = SvgIconProps;
8 changes: 2 additions & 6 deletions src/SvgIcons/VirtoLogo/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
import { SvgIconProps } from "../SvgIcons.types";
import VirtoLogo from "./VirtoLogo";

export type VirtoLogoProps = SvgIconProps;

export default VirtoLogo as React.FC<VirtoLogoProps>;
export { VirtoLogo } from "./VirtoLogo";
export type { VirtoLogoProps } from "./VirtoLogo.types";
Loading
Loading