Release/v11.0.0 (#1017)

* upgrade mui packages to v6

* Update Grid to Grid2 EditLabelDialog

* Update Grid to Grid2 FileUploader

* Update Grid to Grid2 in LoginForm

* Update Grid to Grid2 in PasswordChangeDialog

* Update Grid to Grid2 in PasswordChangeForm

* Update Grid to Grid2 in PasswordResetForm

* Update Grid to Grid2 in RegistrationForm

* moving Typography color system prop into sx

* adding ode mode utility in styles components

* theme sx props override for MUI 6  and using theme.applyStyles() for mode

* enabling css variables and color schemes

* adding yaml file

* correcting the colors to fix the test

* Migrating from deprecated APIs

* forcing to use sx prop

* fixing a failing test

* remove deprecated hidden , using useMediaQuery

* alert style to sx prop

* fixing  sort-key order

* correcting the statuses order as before

* making use of the theme.mixins.toolbar.minHeight

* 10.0.0-1

* updated packages

* disabling css variables

* 10.0.0-2

* removing enabling cssVariables and colorSchemes

* correcting using padding

* updating mui version to latest

* trying combined theme

* sort -order fix

* useColorTheme hook from mui

* fixing test to use useColorScheme

* removing context for use theme

* fixing warning

* adding missing tokens

* updating props to correct values

* PR feedbacks

* fix test

* fix sorting

* adding the color schemes

* 10.0.0-3

* updating colors and unwanted space removed

* change the prefix to ipg

* update theme color prefix

* 10.0.0-4

* update hook comments

* adding correct margin

* remove commented code

* set  mode to light when theme mode is system

* fix type values

* set defaultComponents

* 10.0.0-5

* Convert VirtoLogo to typescript

* 10.0.0-6

* fixing font picker

* using grid2 and updated border color

* fixed/added broken theme definitions

* rename and update doc

* fixing tests

* enable themeCssVarsAugmentation and update interfaces

* using old theme colors

* fixing the colors

* adding grey bg color to story

* using theme colors for buttons

* remove console log

* setting mode to correct local storage

* 10.0.0-7

* fixing the icon button color

* fixing the label color

* fixing the missing spacing by moving font family to allVariants

* button colour use default action.active

* label color to text secondary

* removing hardcoded color for close buttons

* fixing font

* 10.0.0-8

* fixing the font for step icon text

* system prop to sx proip

* Removing using useTheme

* adding a valid url to open story links

* Fix conflicts

* Removing unused css file

* colors to theme references

* Removing defined background as it is same from palette by default

* Adding theme type in default

* Default to primary main

* 11.0.0-0

* Adding default background

* Labels color to primary main

* 11.0.0-1

* fixing data grid background

* colors to primary colors

* fixing tests

* adding theme types

* adding  back form label root color

* 11.0.0-2

* Fixing filed error color for dark mode

* 11.0.0-3

* color updated

* updated lock file

* 11.0.0-4

* Avartar color to theme reference

* Remove vars usage

* 11.0.0-5

* Update lock file

* Upgraded MUI packages

* color to theme reference

* Fixing broken Road Outlined

* theme provider updated for PR feedback

* 11.0.0-6

* TD-3284 NoWrapTypography truncation ellipsis color issue (#1015)

* bug/TD-3284 nowrap typography truncation ellipsis color issue

* updated request changes by approaching computed style

* Upadted TruncatedTooltip.tsx

* Updated changes requested

* updated comment line for adjacent code

* Update stories to show how to correctly use Link with this component

* Undo change of sx order

* Deleted NoWrapTypography

* Replaced NoWrapTypography with TruncatedTooltip

* Update LabeSelector.jsx

* Replace NoWrapTypography with TruncatedTooltip

* updated changes requested

* Updated changes requested

---------

Co-authored-by: lukemojo <143453762+lukemojo@users.noreply.github.com>
Co-authored-by: Matthew Corner <matt.corner@ipg-automotive.com>

* export them object directly

* 11.0.0-7

* rgba colors to theme references

* 11.0.0-8

* 11.0.0-9

* 11.0.0-10

* Re remove NoWrapTypography export

---------

Co-authored-by: Manjesh M Pillai <m4manjesh@gmail.com>
Co-authored-by: Matthew Corner <matt.corner@ipg-automotive.com>
Co-authored-by: Manjesh M Pillai <56511816+m4manjesh@users.noreply.github.com>
Co-authored-by: ShushN <sushmitha.a@ipg-automotive.com>

.storybook/styles.css

@@ -1,70 +1,72 @@
 .dark {
+  background: #1b1c1d;
+
   .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);
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "10.4.2",
+  "version": "11.0.0-10",
   "description": "React UI component library for IPG web applications",
   "author": {
     "name": "IPG-Automotive-UK"
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/material": "^5.16.4",
+    "@mui/material": "^6.2.0",
     "@mui/x-data-grid-generator": "^7.10.0",
     "@playwright/test": "^1.45.2",
     "@storybook/addon-actions": "^8.2.6",
@@ -112,7 +112,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
-    "@mui/icons-material": "^5.16.4",
+    "@mui/icons-material": "^6.2.0",
     "@mui/x-data-grid": "^7.10.0",
     "@mui/x-tree-view": "^7.10.0",
     "colord": "^2.9.3",
@@ -133,7 +133,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },