fix(ag-style): style cleanup and checkbox fix (#1919)

* fix(ag-style): style cleanup and checkbox fix

* fix(react-components): package manager up to 9.1.1

* fix(ag-styles): additional data

* fix(ag-styles): more changeset info

* fix(ag-styles): removed root from readme

* fix(ag-styles): empty root class

---------

Co-authored-by: Andrej Nikolic <[email protected]>

.changeset/late-ways-punch.md

@@ -0,0 +1,7 @@
+---
+'@equinor/fusion-react-ag-grid-styles': patch
+---
+
+- **IMPORTANT:** root is no longer needed and inline-edit-mode has been removed
+- Cleanup AgGrid style with adding `alpine-active-color` and background colors to main style theme
+- In order to fix not beeing able to click on checkbox in AgGrid, removed `indicateEditMode` from **useStyle**

package.json

@@ -68,4 +68,4 @@
       "eslint --quiet --fix"
     ]
   }
-}
+}

packages/ag-grid-styles/README.md

@@ -10,29 +10,25 @@ npm install @equinor/fusion-react-ag-grid-styles
 
 ## About
 
-The hook adds the theme ``alpine-fusion`` to your ag-grid instance without adding global stylesheet to the portal.
+The hook adds the theme `alpine-fusion` to your ag-grid instance without adding global stylesheet to the portal.
 It sets up the required variables and classnames for use in your component in a scoped naming scheme.
 
 You do not need any other styles from the ag-grid package or other fusion packages.
 
 ## Usage
 
-- Add the ``root`` item from the hook to set up required variables in your scope.
-
-- And set the theme name to ``ag-theme-alpine-fusion``
+- And set the theme name to `ag-theme-alpine-fusion`
 
 ```tsx
 import AgGridReact from '@ag-grid-community/core';
 import useStyles from '@equinor/fusion-react-ag-grid-styles';
 
 const MyComponent = (): JSX.Element => {
   const styles = useStyles();
-  
+
   return (
-    <div className={ styles.root }>
-      <div className='ag-theme-alpine-fusion'>
-        <AgGridReact { ...props } />
-      </div>
+    <div className="ag-theme-alpine-fusion">
+      <AgGridReact {...props} />
     </div>
   );
 };

packages/ag-grid-styles/gulpfile.js

@@ -8,11 +8,16 @@ const named = require('vinyl-named');
 const through2 = require('through2');
 const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 const jssCli = require('jss-cli');
+const { tokens } = require('@equinor/eds-tokens');
+
+const primaryColor = tokens.colors.interactive.primary__resting.hex;
+const backgroundColor = tokens.colors.interactive.table__cell__fill_resting.hex;
+const headerColor = tokens.colors.interactive.table__header__fill_resting.hex;
 
 // Start of scss/css related tasks
 const scssTask = () => {
   return gulp
-    .src('./src/agGridStyles/*.scss')
+    .src('./src/agGridStyles/styles.scss')
     .pipe(named())
     .pipe(
       webpackStream({
@@ -40,8 +45,7 @@ const scssTask = () => {
                 {
                   loader: 'sass-loader',
                   options: {
-                    additionalData:
-                      '$ag-compatibility-mode: false;\n$ag-suppress-all-theme-deprecation-warnings: true;',
+                    additionalData: `$active-color: ${primaryColor};\n$background-color: ${backgroundColor};\n$header-color: ${headerColor};\n$ag-compatibility-mode: false;\n$ag-suppress-all-theme-deprecation-warnings: true;`,
                   },
                 },
               ],
@@ -79,7 +83,7 @@ const scssTask = () => {
           ],
         },
         plugins: [new RemoveEmptyScriptsPlugin(), new MiniCssExtractPlugin({ filename: '[name].jss.json' })],
-      })
+      }),
     )
     .pipe(
       through2.obj(function (file, _, cb) {
@@ -95,7 +99,7 @@ const scssTask = () => {
         }
 
         cb(null, file);
-      })
+      }),
     )
     .pipe(gulp.dest('./src/agGridStyles/'));
 };

packages/ag-grid-styles/package.json

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@ag-grid-community/styles": "31.3.2",
-    "@equinor/fusion-react-styles": "^0.6.0",
+    "@equinor/fusion-react-styles": "^0.6.2",
     "@types/gulp": "^4.0.9",
     "@types/react": "^18.2.24",
     "@types/webpack-stream": "^3.2.12",
@@ -62,6 +62,7 @@
   },
   "peerDependencies": {
     "@ag-grid-community/styles": "31.3.2",
-    "@equinor/fusion-react-styles": "^0.6.0"
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/fusion-react-styles": "^0.6.2"
   }
 }

packages/ag-grid-styles/src/agGridStyles/styles.scss

@@ -1,7 +1,11 @@
 @use '~@ag-grid-community/styles' as ag;
 
 @include ag.grid-styles((theme: alpine-fusion,
-    extend-theme: alpine));
+    extend-theme: alpine,
+    alpine-active-color: $active-color,
+    --ag-background-color: $background-color,
+    --ag-header-background-color: $header-color
+    ));
 
 .ag-theme-alpine-fusion {
   font-family: "Equinor", sans-serif;

packages/ag-grid-styles/src/agGridStyles/useAgGridStyles.ts

@@ -1,27 +1,11 @@
-import { makeStyles, createStyles, ClassNameMap } from '@equinor/fusion-react-styles';
+import { ClassNameMap, createStyles, makeStyles } from '@equinor/fusion-react-styles';
 import styles from './styles.jss.json';
 
-type agGridProps = {
-  indicateEditMode?: boolean;
-};
-
 export const useStyles = makeStyles(
-  (theme) =>
+  () =>
     createStyles({
       ...styles,
-      root: (props?: agGridProps) => ({
-        '--ag-row-hover-color': theme.colors.interactive.table__cell__fill_hover.getVariable('color'),
-        '--ag-selected-row-background-color': theme.colors.interactive.table__cell__fill_activated.getVariable('color'),
-        '--ag-background-color': theme.colors.interactive.table__cell__fill_resting.getVariable('color'),
-        '--ag-header-background-color': theme.colors.interactive.table__header__fill_resting.getVariable('color'),
-        '--ag-header-cell-hover-background-color':
-          theme.colors.interactive.table__header__fill_hover.getVariable('color'),
-        '--ag-header-cell-moving-background-color':
-          theme.colors.interactive.table__header__fill_activated.getVariable('color'),
-        '& :not(.inline-edit-mode)': {
-          opacity: `${props?.indicateEditMode ? '0.8' : '1'}`,
-        },
-      }),
+      root: () => ({}),
     }),
   { name: 'fusion-ag-grid-styles' },
 ) as () => ClassNameMap;