Wes/ct 1972/mx UI v2 redo

README.md

@@ -2,7 +2,7 @@
 
 ![NPM Version](https://img.shields.io/npm/v/%40mxenabled%2Fconnect-widget)
 
-This is the **UI only** for the connect widget. Heavy configuration and an API are needed for this project to work. See [usage](#usage) and [props](#props) for more details
+This is the **UI only** for the connect widget. Heavy configuration and an API are needed for this project to work. See [usage](#usage) and [props](#props) for more details.
 
 ## Installation
 

package.json

@@ -16,10 +16,10 @@
     "access": "public"
   },
   "overrides": {
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "lodash": "^4.18.1",
     "flatted": "^3.4.2",
     "picomatch": "^4.0.4"
@@ -44,13 +44,13 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@kyper/hooks": "^1.0.0",
-    "@kyper/icon": "^1.18.1",
-    "@kyper/progressindicators": "^3.1.0",
-    "@kyper/tokenprovider": "^4.0.1",
-    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^6.1.5",
-    "@mxenabled/mxui": "^1.8.0",
+    "@kyper/hooks": "^1.3.0",
+    "@kyper/icon": "^1.22.0",
+    "@kyper/progressindicators": "^3.5.0",
+    "@kyper/tokenprovider": "^4.4.0",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mxenabled/mxui": "^2.9.1",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/node": "^22.1.0",
     "bowser": "^2.11.0",
@@ -61,9 +61,9 @@
     "js-sha256": "^0.11.0",
     "lodash": "^4.18.1",
     "numeral": "^2.0.6",
-    "react": "^19.2.4",
+    "react": "^19.3.0",
     "react-confetti": "^6.1.0",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.3.0",
     "react-redux": "^9.2.0",
     "rxjs": "^7.8.1",
     "uuid": "^11.1.0",
@@ -76,8 +76,8 @@
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.56.1",
     "@typescript-eslint/parser": "^8.56.1",

src/ConnectedTokenProvider.tsx

@@ -2,153 +2,12 @@ import React from 'react'
 import { RootState } from 'src/redux/Store'
 import { useSelector } from 'react-redux'
 
-import { GlobalStyles, Theme, ThemeProvider } from '@mui/material'
-import { deepmerge } from '@mui/utils'
-import { createMXTheme, Icon, IconWeight } from '@mxenabled/mxui'
+import { ThemeProvider } from '@mui/material'
+import { createMXTheme } from '@mxenabled/mxui'
 import { TokenProvider, THEMES } from '@kyper/tokenprovider'
 
 import { getPrimarySeedColor } from 'src/redux/selectors/ClientColorScheme'
 
-declare module '@mui/material/styles' {
-  interface PaletteColor {
-    lighter?: string
-    darker?: string
-  }
-
-  interface SimplePaletteColorOptions {
-    lighter?: string
-    darker?: string
-  }
-}
-
-const connectThemeOverrides = (palette: Theme['palette']) => ({
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          // Sets the default color of text. Can override singluar usage with color prop.
-          color: palette?.text?.primary,
-        },
-      },
-    },
-    MuiAccordion: {
-      styleOverrides: {
-        root: () => ({
-          margin: '16px 0',
-          padding: '0px 16px',
-          borderRadius: '8px',
-          '&:first-of-type': {
-            marginTop: 0,
-          },
-          '&::before': {
-            display: 'none',
-          },
-          ...(palette.mode === 'dark' && {
-            backgroundColor: '#262626',
-            boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)',
-          }),
-        }),
-      },
-    },
-    MuiAccordionSummary: {
-      styleOverrides: {
-        root: {
-          padding: '0px',
-          '&.Mui-expanded': {
-            minHeight: 'unset',
-          },
-          '& .MuiAccordionSummary-content': {
-            margin: '16px 0px',
-            '&.Mui-expanded': {
-              margin: '16px 0px',
-            },
-          },
-        },
-      },
-      defaultProps: {
-        expandIcon: (
-          <Icon color="secondary" name="stat_minus_1" size={24} weight={IconWeight.Dark} />
-        ),
-      },
-    },
-    MuiAccordionDetails: {
-      styleOverrides: {
-        root: {
-          padding: '8px 0px 24px 0px',
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        asterisk: {
-          color: '#E32727',
-          '&$error': {
-            color: '#E32727',
-          },
-        },
-      },
-    },
-    MuiIcon: {
-      styleOverrides: {
-        root: {
-          fontFamily: 'MaterialSymbolsRounded',
-        },
-      },
-    },
-    MuiFormControlLabel: {
-      styleOverrides: {
-        root: {
-          '&.MuiFormControlLabel-labelPlacementStart': {
-            // TODO: Remove the custom margins once we are on MXUI v2.
-            marginBottom: '16px',
-            marginLeft: 0,
-            marginRight: 0,
-            // mxui's theme uses `spacing: 1`, so SelectionBox's internal `ml: 16` means 16px.
-            // Our 8px scale turns it into 128px, pushing the control out of the box.
-            '& .MuiRadio-root, & .MuiCheckbox-root': {
-              marginLeft: '16px',
-            },
-          },
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        // MUI sizes icon slot children off the button size (medium 20px, large 22px),
-        // which beats the Icon's own size prop. Our chevrons are always 24px.
-        endIcon: {
-          '& > *:nth-of-type(1)': {
-            fontSize: '24px',
-          },
-        },
-      },
-    },
-    MuiChip: {
-      styleOverrides: {
-        label: {
-          fontWeight: 700,
-        },
-      },
-    },
-    MuiLink: {
-      defaultProps: {
-        sx: {
-          display: 'inline-flex',
-          alignItems: 'center',
-          '&:hover': {
-            textDecoration: 'underline',
-          },
-          '&:focus': {
-            textDecoration: 'underline',
-          },
-        },
-      },
-    },
-  },
-  // TODO: Remove this custom spacing scale once we are on MXUI v2.
-  spacing: (factor: number) => `${factor * 8}px`,
-})
-
 interface Props {
   children: React.ReactNode
 }
@@ -167,13 +26,9 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
       // let the rest of the palette colors be generated by MXUI.
       primary: clientPrimarySeedColor,
     },
+    useMUIStandardSpacing: true,
   })
 
-  const combinedTheme = deepmerge(
-    mxTheme,
-    connectThemeOverrides(mxTheme.palette as Theme['palette']), // Theme object with connect overrides
-  )
-
   const kyperTokenOverrides = {
     Color: {
       Brand100: isDarkModeEnabled ? mxTheme.palette.primary[800] : mxTheme.palette.primary[100],
@@ -194,26 +49,7 @@ export const ConnectedTokenProvider = ({ children }: Props): React.ReactNode =>
       theme={isDarkModeEnabled ? THEMES.DARK : colorScheme}
       tokenOverrides={kyperTokenOverrides}
     >
-      <ThemeProvider theme={combinedTheme}>
-        <GlobalStyles
-          styles={{
-            ':root': {
-              // These can be deleted once we are on MXUI v2.
-              '--mui-palette-primary-main': combinedTheme.palette.primary.main,
-              '--mui-palette-primary-light': combinedTheme.palette.primary.light,
-              '--mui-palette-primary-dark': combinedTheme.palette.primary.dark,
-              '--mui-palette-primary-contrastText': combinedTheme.palette.primary.contrastText,
-              '--mui-palette-error-main': combinedTheme.palette.error.main,
-              '--mui-palette-error-contrastText': combinedTheme.palette.error.contrastText,
-              '--mui-palette-text-primary': combinedTheme.palette.text.primary,
-              '--mui-palette-text-secondary': combinedTheme.palette.text.secondary,
-              '--mui-palette-background-default': combinedTheme.palette.background.default,
-              '--mui-palette-background-paper': combinedTheme.palette.background.paper,
-            },
-          }}
-        />
-        {children}
-      </ThemeProvider>
+      <ThemeProvider theme={mxTheme}>{children}</ThemeProvider>
     </TokenProvider>
   )
 }

src/components/ActionTile.js

@@ -2,8 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Text } from '@mxenabled/mxui'
-import { ChevronRightIcon } from '@mxenabled/mxui'
+import { Text, Icon } from '@mxenabled/mxui'
 import { Button } from '@mui/material'
 
 export const ActionTile = (props) => {
@@ -19,18 +18,18 @@ export const ActionTile = (props) => {
   return (
     <div>
       <Button
-        endIcon={<ChevronRightIcon size={24} />}
+        endIcon={<Icon name="chevron_right" size={24} />}
         fullWidth={true}
         onClick={onSelectAction}
         size="large"
         startIcon={startIcon}
         style={{ height: '60px' }}
       >
         <div style={styles.textColumn}>
-          <Text bold={true} style={styles.title} truncate={false} variant="Body">
+          <Text bold={true} style={styles.title} truncate={false} variant="body1">
             {title}
           </Text>
-          <Text style={styles.subtitle} truncate={false} variant="ParagraphSmall">
+          <Text style={styles.subtitle} truncate={false} variant="subtitle2">
             {subTitle}
           </Text>
         </div>

src/components/ActionableUtilityRow.tsx

@@ -36,7 +36,7 @@ export const ActionableUtilityRow: React.FC<ActionableUtilityRowProps> = (props)
             component="p"
             style={textStyles ?? {}}
             truncate={false}
-            variant="Paragraph"
+            variant="subtitle1"
           >
             {text}
           </Text>

src/components/ConfigError.tsx

@@ -20,10 +20,10 @@ export const ConfigError: React.FC<ConfigErrorProps> = ({ error }) => {
       <Stack alignItems="center" className={styles.container} spacing={3}>
         <Icon fill={true} name="error" size={32} />
         <Stack spacing={0.5}>
-          <Text component="h2" truncate={false} variant="H2">
+          <Text component="h2" truncate={false} variant="h2">
             {error.title}
           </Text>
-          <Text component="p" truncate={false} variant="Paragraph">
+          <Text component="p" truncate={false} variant="subtitle1">
             {error.message}
           </Text>
         </Stack>

src/components/ConnectSuccessSurvey.tsx

@@ -106,7 +106,7 @@ export const ConnectSuccessSurvey = React.forwardRef<
         <ThankYouMessage handleDone={handleDone} />
       ) : (
         <Stack alignItems="center" justifyContent="center" spacing={4}>
-          <Text component="h2" truncate={false} variant="H2">
+          <Text component="h2" truncate={false} variant="h2">
             {currentQuestion.question()}
           </Text>
           {currentQuestion.type === 'number' ? (
@@ -139,17 +139,17 @@ export const ConnectSuccessSurvey = React.forwardRef<
                 direction="row"
                 justifyContent="space-between"
               >
-                <Text bold={true} variant="Small">
+                <Text bold={true} variant="body2">
                   {__('Strongly disagree')}
                 </Text>
-                <Text bold={true} variant="Small">
+                <Text bold={true} variant="body2">
                   {__('Strongly agree')}
                 </Text>
               </Stack>
             </React.Fragment>
           ) : (
             <Stack className={styles.textQuestion} spacing={2}>
-              <Text className={styles.textQuestionTitle} variant="Paragraph">
+              <Text className={styles.textQuestionTitle} variant="subtitle1">
                 {__('Please let us know how we can improve.')}
               </Text>
               <TextField
@@ -169,7 +169,7 @@ export const ConnectSuccessSurvey = React.forwardRef<
               spacing={0.5}
             >
               <Icon color="error" fill={true} name="error" size={16} />
-              <Text color="error" truncate={false} variant="ParagraphSmall">
+              <Text color="error" truncate={false} variant="subtitle2">
                 {__('Please select an option before continuing.')}
               </Text>
             </Stack>

src/components/DataCluster.js

@@ -14,7 +14,7 @@ export const DataCluster = (props) => {
         data-test={`${dataCluster.dataTest}-title`}
         style={styles.subTitle}
         truncate={false}
-        variant="Body"
+        variant="body1"
       >
         {dataCluster.name}
       </Text>
@@ -23,7 +23,7 @@ export const DataCluster = (props) => {
         data-test={`${dataCluster.dataTest}-subtitle`}
         style={styles.body}
         truncate={false}
-        variant="Body"
+        variant="body1"
       >
         {dataCluster.description}
       </Text>

src/components/DataClusterDropDown.module.css

@@ -0,0 +1,4 @@
+.accordionDetailText {
+  margin-left: var(--spacing-5);
+  margin-top: calc(var(--spacing-point-5) * -1);
+}