Merge pull request #922 from etn-ccis/feature/6187-update-component-c…

…ss-variables Feature/6187 update component css variables
etn-ccis · Nov 22, 2024 · 9a1ef58 · 9a1ef58
2 parents e760c23 + 90c131c
commit 9a1ef58
Show file tree

Hide file tree

Showing 47 changed files with 3,214 additions and 3,337 deletions.
diff --git a/.github/workflows/blui-ci.yml b/.github/workflows/blui-ci.yml
@@ -2,9 +2,9 @@ name: Build
 
 on:
   push:
-    branches: [ "dev", "master" ]
+    branches: [ "dev", "master", "release/mui-v6" ]
   pull_request:
-    branches: [ "dev", "master" ]
+    branches: [ "dev", "master", "release/mui-v6" ]
   pull_request_target:
     types:
       - opened
@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
     - name: Checkout
@@ -46,7 +46,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
     - name: Checkout
@@ -73,7 +73,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
     - name: Checkout
@@ -132,7 +132,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
     - name: Checkout
@@ -168,7 +168,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     env:
         REACT_APP_BRANCH:  ${{ github.ref == 'refs/heads/master' && 'master' || 'dev' }}
         PUBLIC_URL: ${{ github.ref == 'refs/heads/master' && '/react' || '/react-dev' }}
@@ -177,22 +177,26 @@ jobs:
     steps:
     - name: Checkout
       uses: actions/checkout@v4
-    - name: Download tarball
-      uses: actions/download-artifact@v3
-      with:
-        name: tarball
-        path: tarball
-    - run: |
-        PACKAGED_VERSION=`node -p "require('./tarball/package.json').version"`
-        yarn add ./tarball/brightlayer-ui-react-components-$PACKAGED_VERSION.tgz
-    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'yarn'
     - run: yarn --immutable
       working-directory: docs
+    - name: Download tarball
+      uses: actions/download-artifact@v3
+      with:
+        name: tarball
+        path: tarball
+    - run: yarn --immutable
+      working-directory: docs
+    - run: |
+        PACKAGED_VERSION=`node -p "require('../tarball/package.json').version"`
+        yarn add ../tarball/brightlayer-ui-react-components-$PACKAGED_VERSION.tgz
+      working-directory: docs
+    - run: yarn
+      working-directory: docs
     - run: yarn build
       working-directory: docs
     - name: Save build
@@ -258,7 +262,7 @@ jobs:
     needs: build_library
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
     env:
       NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       BRANCH: ${{ github.ref == 'refs/heads/master' && 'master' || 'dev' }}

diff --git a/components/LICENSES.json b/components/LICENSES.json
@@ -1,14 +1,14 @@
 {
     "@brightlayer-ui/[email protected]": {
         "licenses": "BSD-3-Clause",
-        "repository": "https://github.com/etn-ccis/blui-colors",
-        "licenseUrl": "https://github.com/etn-ccis/blui-colors/raw/master/LICENSE",
+        "repository": "https://github.com/brightlayer-ui/colors",
+        "licenseUrl": "https://github.com/brightlayer-ui/colors/raw/master/LICENSE",
         "parents": "@brightlayer-ui/react-components"
     },
-    "@emotion/css@11.9.0": {
+    "@emotion/css@11.13.4": {
         "licenses": "MIT",
         "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css",
-        "licenseUrl": "https://github.com/emotion-js/emotion/raw/main/packages/css/LICENSE",
+        "licenseUrl": "https://github.com/emotion-js/emotion/tree/main/packages/css/raw/master/LICENSE",
         "parents": "@brightlayer-ui/react-components"
     },
     "@seznam/[email protected]": {

diff --git a/components/package.json b/components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@brightlayer-ui/react-components",
-    "version": "6.3.1",
+    "version": "7.0.0-alpha.0",
     "description": "React components for Brightlayer UI applications",
     "scripts": {
         "test": "jest src --maxWorkers=50%",
@@ -20,11 +20,11 @@
     "devDependencies": {
         "@brightlayer-ui/eslint-config": "^3.0.1",
         "@brightlayer-ui/prettier-config": "^1.0.3",
-        "@brightlayer-ui/react-themes": "^7.1.0",
+        "@brightlayer-ui/react-themes": "^8.0.0-alpha.0",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@mui/icons-material": "^5.10.9",
-        "@mui/material": "^5.15.11",
+        "@mui/icons-material": "^6.1.8",
+        "@mui/material": "^6.1.8",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/react": "^14.2.2",
         "@types/color": "^3.0.3",
@@ -52,8 +52,8 @@
         "@brightlayer-ui/colors": "^3.0.0",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
-        "@mui/icons-material": "^5.3.1",
-        "@mui/material": "^5.4.0",
+        "@mui/icons-material": "^6.1.8",
+        "@mui/material": "^6.1.8",
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
     },

diff --git a/components/src/core/AppBar/AppBar.test.tsx b/components/src/core/AppBar/AppBar.test.tsx
@@ -2,12 +2,10 @@ import React from 'react';
 import { render, screen, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { AppBar } from './AppBar';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
+import { ThemeProvider } from '@mui/material/styles';
+import { blueThemes as theme } from '@brightlayer-ui/react-themes';
 import Typography from '@mui/material/Typography';
 
-const theme = createTheme(BLUIThemes.blue);
-
 afterEach(cleanup);
 
 describe('AppBar', () => {

diff --git a/components/src/core/AppBar/AppBar.tsx b/components/src/core/AppBar/AppBar.tsx
@@ -5,7 +5,7 @@ import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 // import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 import clsx from 'clsx';
 import { usePrevious } from '../hooks/usePrevious';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import appBarClasses, { AppBarClasses, AppBarClassKey, getAppBarUtilityClass } from './AppBarClasses';
 import { cx } from '@emotion/css';
 

diff --git a/components/src/core/ChannelValue/ChannelValue.test.tsx b/components/src/core/ChannelValue/ChannelValue.test.tsx
@@ -3,10 +3,8 @@ import { render, screen, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ChannelValue } from './ChannelValue';
 import Menu from '@mui/icons-material/Menu';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
-
-const theme = createTheme(BLUIThemes.blue);
+import { ThemeProvider } from '@mui/material/styles';
+import { blueThemes as theme } from '@brightlayer-ui/react-themes';
 
 afterEach(cleanup);
 

diff --git a/components/src/core/ChannelValue/ChannelValue.tsx b/components/src/core/ChannelValue/ChannelValue.tsx
@@ -8,7 +8,7 @@ import channelValueClasses, {
     ChannelValueClassKey,
     getChannelValueUtilityClass,
 } from './ChannelValueClasses';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import Box, { BoxProps } from '@mui/material/Box';
 
 const useUtilityClasses = (ownerState: ChannelValueProps): Record<ChannelValueClassKey, string> => {
@@ -154,10 +154,10 @@ const ChannelValueRender: React.ForwardRefRenderFunction<unknown, ChannelValuePr
 
     return (
         <Root
-            component="span"
+            as="span"
             ref={ref}
             className={cx(generatedClasses.root, userClassName)}
-            data-testid={'blui-channel-value-root'}
+            data-testid={'blui-channel-value-root-test'}
             fontSize={fontSize}
             color={color}
             {...otherProps}

diff --git a/components/src/core/Drawer/Drawer.test.tsx b/components/src/core/Drawer/Drawer.test.tsx
@@ -11,10 +11,8 @@ import { DrawerNavGroup } from './DrawerNavGroup';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { DrawerRailItem } from './DrawerRailItem';
 import { DrawerNavItem } from './DrawerNavItem';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import * as BLUIThemes from '@brightlayer-ui/react-themes';
-
-const theme = createTheme(BLUIThemes.blue);
+import { ThemeProvider } from '@mui/material/styles';
+import { blueThemes as theme } from '@brightlayer-ui/react-themes';
 
 afterEach(cleanup);
 

diff --git a/components/src/core/Drawer/Drawer.tsx b/components/src/core/Drawer/Drawer.tsx
@@ -9,7 +9,7 @@ import { NavItemSharedStyleProps, NavItemSharedStylePropTypes, SharedStyleProps,
 import { findChildByType, mergeStyleProp } from './utilities';
 import clsx from 'clsx';
 import drawerClasses, { DrawerClasses, DrawerClassKey, getDrawerUtilityClass } from './DrawerClasses';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import Box from '@mui/material/Box';
 
 export const RAIL_WIDTH = 'calc(3.5rem + 16px)'; // 72;

diff --git a/components/src/core/Drawer/DrawerBody.tsx b/components/src/core/Drawer/DrawerBody.tsx
@@ -6,7 +6,7 @@ import { mergeStyleProp } from './utilities';
 import Box, { BoxProps } from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { DrawerBodyClasses, DrawerBodyClassKey, getDrawerBodyUtilityClass } from './DrawerBodyClasses';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 
 const useUtilityClasses = (ownerState: DrawerBodyProps): Record<DrawerBodyClassKey, string> => {
     const { classes } = ownerState;

diff --git a/components/src/core/Drawer/DrawerFooter/DrawerFooter.tsx b/components/src/core/Drawer/DrawerFooter/DrawerFooter.tsx
@@ -4,7 +4,7 @@ import Divider from '@mui/material/Divider';
 import { useDrawerContext } from '../DrawerContext';
 import { styled, Theme, SxProps } from '@mui/material/styles';
 import { cx } from '@emotion/css';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import drawerFooterClasses, {
     DrawerFooterClasses,
     DrawerFooterClassKey,

diff --git a/components/src/core/Drawer/DrawerHeader/DrawerHeader.tsx b/components/src/core/Drawer/DrawerHeader/DrawerHeader.tsx
@@ -13,7 +13,7 @@ import drawerHeaderClasses, {
 import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 
 const useUtilityClasses = (ownerState: DrawerHeaderProps): Record<DrawerHeaderClassKey, string> => {
     const { classes } = ownerState;
@@ -78,13 +78,14 @@ const Root = styled(Toolbar, {
     [theme.breakpoints.down('sm')]: {
         minHeight: `3.5rem`,
     },
-    backgroundColor:
-        backgroundColor || (theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.main),
-    color:
-        fontColor ||
-        theme.palette.getContrastText(
-            backgroundColor || (theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.main)
-        ),
+    backgroundColor: backgroundColor || (theme.vars || theme).palette.primary.main,
+    // TODO: Update to use theme.vars.palette.primary.main
+    color: fontColor || theme.palette.getContrastText(backgroundColor || theme.palette.primary.main),
+    ...theme.applyStyles('dark', {
+        backgroundColor: backgroundColor || (theme.vars || theme).palette.primary.dark,
+        // TODO: Update to use theme.vars.palette.primary.main
+        color: fontColor || theme.palette.getContrastText(backgroundColor || theme.palette.primary.dark),
+    }),
     [`& .${drawerHeaderClasses.nonClickable}`]: {},
     [`& .${drawerHeaderClasses.railIcon}`]: {
         marginLeft: theme.spacing(0.5),

diff --git a/components/src/core/Drawer/DrawerNavGroup/DrawerNavGroup.tsx b/components/src/core/Drawer/DrawerNavGroup/DrawerNavGroup.tsx
@@ -13,7 +13,7 @@ import { DrawerRailItem, DrawerRailItemProps } from '../DrawerRailItem';
 import { findChildByType, mergeStyleProp } from '../utilities';
 import { cx } from '@emotion/css';
 import { DrawerNavGroupClasses, DrawerNavGroupClassKey, getDrawerNavGroupUtilityClass } from './DrawerNavGroupClasses';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 
 const useUtilityClasses = (ownerState: DrawerNavGroupProps): Record<DrawerNavGroupClassKey, string> => {
     const { classes } = ownerState;
@@ -120,7 +120,7 @@ const DrawerNavGroupRender: React.ForwardRefRenderFunction<unknown, DrawerNavGro
         className: userClassName,
         items = [],
         title,
-        titleColor = theme.palette.text.primary,
+        titleColor = (theme.vars || theme).palette.text.primary,
         titleContent,
         titleDivider = true,
         // Shared Style Props