Merge branch 'master' into feat/custom-disabled-cursor-theme

grommet · Nov 3, 2023 · c0adae7 · c0adae7
2 parents ffb912d + 213afd7
commit c0adae7
Show file tree

Hide file tree

Showing 20 changed files with 1,469 additions and 698 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -116,6 +116,16 @@ jobs:
             git config --global user.name "Grommet Community Bot"
             git config --global user.email "grommet@hpe.com"
             yarn release-stable
+  release-styled-components-beta-stable:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/grommet-ci
+      - run:
+          command: |
+            git config --global user.name "Grommet Community Bot"
+            git config --global user.email "grommet@hpe.com"
+            yarn release-styled-components-beta-stable
   publish:
     <<: *defaults
     steps:
@@ -193,6 +203,16 @@ workflows:
             branches:
               only:
                 - master
+      - release-styled-components-beta-stable:
+          requires:
+            - jest
+            - chromatic
+            - lint
+            - build
+          filters:
+            branches:
+              only:
+                - styled-components-beta
       - publish:
           requires:
             - jest

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grommet",
-  "version": "2.33.2",
+  "version": "2.34.0",
   "main": "index.js",
   "module": "es6/index.js",
   "jsnext:main": "es6/index.js",
@@ -30,6 +30,7 @@
   "scripts": {
     "build": "webpack --mode production && babel ./src/js/ --out-dir ./dist --ignore '**/**/__tests__' --ignore './e2e' --ignore 'src/**/portal.js' && copyfiles -u 2 \"src/js/**/**/*.*\" -e \"src/js/**/**/*.js\" -e \"src/js/**/**/*.js.snap\" \"./dist\" && cross-env BABEL_ENV=es6 babel ./src/js/ --out-dir ./dist/es6 --ignore '**/**/__tests__' --ignore 'src/**/portal.js' && copyfiles -u 2 \"src/js/**/**/*.*\" -e \"src/js/**/**/*.js\" -e \"src/js/**/**/*.js.snap\" \"./dist/es6\"",
     "release-stable": "babel-node ./tools/release-stable",
+    "release-styled-components-beta-stable": "babel-node ./tools/release-styled-components-beta-stable",
     "lint": "eslint src",
     "lint-fix": "eslint src --fix",
     "test": "jest --runInBand && yarn test-timezones",
@@ -60,19 +61,19 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.10",
-    "@babel/core": "^7.22.11",
-    "@babel/eslint-parser": "^7.22.11",
-    "@babel/node": "^7.22.10",
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/node": "^7.22.19",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-do-expressions": "^7.22.5",
-    "@babel/plugin-proposal-export-default-from": "^7.22.5",
+    "@babel/plugin-proposal-export-default-from": "^7.22.17",
     "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-pipeline-operator": "^7.22.5",
-    "@babel/preset-env": "^7.22.14",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/plugin-proposal-pipeline-operator": "^7.22.15",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
     "@storybook/addon-a11y": "7.0.20",
     "@storybook/addon-storysource": "7.0.20",
     "@storybook/addon-toolbars": "7.0.20",
@@ -84,15 +85,15 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/testcafe": "^5.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.4",
-    "@types/jest-axe": "^3.5.5",
-    "@types/node": "^20.5.8",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@types/styled-components": "^5.1.26",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/jest-axe": "^3.5.6",
+    "@types/node": "^20.8.5",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@types/styled-components": "^5.1.28",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^29.6.4",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "2.0.6",
     "babel-plugin-transform-imports": "^2.0.0",
@@ -101,29 +102,29 @@
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.32.1",
+    "core-js": "^3.33.0",
     "cross-env": "^7.0.3",
     "del": "^6.1.1",
     "elliptic": "^6.5.4",
-    "eslint": "^8.48.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.11.0",
     "fs-extra": "^11.1.1",
     "grommet-theme-hpe": "^5.0.3",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-cli": "^29.6.4",
-    "jest-environment-jsdom": "^29.6.4",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "7.0.5",
     "jsdom": "^21.1.2",
-    "postcss": "^8.4.29",
+    "postcss": "^8.4.31",
     "pre-commit": "^1.2.2",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.1.3",
@@ -134,15 +135,15 @@
     "react-shadow": "^20.4.0",
     "regenerator-runtime": "^0.14.0",
     "require-reload": "^0.2.2",
-    "simple-git": "^3.19.1",
+    "simple-git": "^3.20.0",
     "storybook": "7.0.20",
     "styled-components": "5.3.9",
     "tarball-extract": "^0.0.6",
     "testcafe": "^3.3.0",
     "testcafe-react-selectors": "^5.0.3",
     "testcafe-reporter-xunit": "^2.2.3",
     "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.4",
+    "ts-loader": "^9.5.0",
     "typescript": "^5.2.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
@@ -205,7 +206,7 @@
   "bundlesize": [
     {
       "path": "./dist/grommet.min.js",
-      "maxSize": "161 kB"
+      "maxSize": "162 kB"
     }
   ],
   "keywords": [

diff --git a/src/js/components/Box/index.d.ts b/src/js/components/Box/index.d.ts
@@ -52,7 +52,7 @@ export interface BoxProps {
     | 'evenly'
     | 'start'
     | 'stretch';
-  onClick?: (...args: any[]) => any;
+  onClick?: (event: React.MouseEvent) => void;
   overflow?:
     | 'auto'
     | 'hidden'

diff --git a/src/js/components/Chart/index.d.ts b/src/js/components/Chart/index.d.ts
@@ -31,8 +31,8 @@ export interface ChartProps {
   dash?: boolean;
   direction?: 'horizontal' | 'vertical';
   gap?: GapType;
-  onClick?: (...args: any[]) => any;
-  onHover?: (...args: any[]) => any;
+  onClick?: (event: React.MouseEvent) => void;
+  onHover?: (over: boolean) => void;
   opacity?: 'weak' | 'medium' | 'strong' | boolean | number;
   overflow?: boolean;
   pad?: EdgeSizeType | { horizontal?: EdgeSizeType; vertical?: EdgeSizeType };
@@ -93,8 +93,8 @@ export interface ChartProps {
     | {
         color?: ColorType;
         label?: string;
-        onClick?: (...args: any[]) => any;
-        onHover?: (...args: any[]) => any;
+        onClick?: (event: React.MouseEvent) => void;
+        onHover?: (over: boolean) => void;
         opacity?: 'weak' | 'medium' | 'strong' | boolean | number;
         thickness?: ThicknessType;
         value: number | number[];

diff --git a/src/js/components/DataTable/Body.js b/src/js/components/DataTable/Body.js
@@ -196,7 +196,7 @@ const Body = forwardRef(
     const usingKeyboard = useKeyboard();
 
     const onFocusActive =
-      active ?? lastActive ?? (usingKeyboard ? 0 : undefined);
+      active ?? lastActive ?? (usingKeyboard && onClickRow ? 0 : undefined);
 
     const activePrimaryValue =
       active >= 0 ? datumValue(data[active], primaryProperty) : undefined;

diff --git a/src/js/components/List/stories/RenderedList.js b/src/js/components/List/stories/RenderedList.js
@@ -32,6 +32,7 @@ export const RenderedList = () => (
           {item.location}
         </Text>
       )}
+      itemKey={(item) => (item.entry)}
     />
   </Box>
 );

diff --git a/src/js/components/RadioButton/RadioButton.js b/src/js/components/RadioButton/RadioButton.js
@@ -43,8 +43,20 @@ const RadioButton = forwardRef(
 
     const Icon = theme.radioButton.icons.circle;
     let borderColor = normalizeColor(theme.radioButton.border.color, theme);
+    let backgroundColor = normalizeColor(
+      theme.radioButton.background?.color,
+      theme,
+    );
+
     if (checked) {
       borderColor = normalizeColor(theme.radioButton.color || 'control', theme);
+
+      if (theme.radioButton.check?.background?.color) {
+        backgroundColor = normalizeColor(
+          theme.radioButton.check.background.color,
+          theme,
+        );
+      }
     }
 
     return (
@@ -96,6 +108,7 @@ const RadioButton = forwardRef(
                 size: theme.radioButton.border.width,
                 color: borderColor,
               }}
+              backgroundColor={backgroundColor}
               round={theme.radioButton.check.radius}
             >
               {checked &&

diff --git a/src/js/components/RadioButton/StyledRadioButton.js b/src/js/components/RadioButton/StyledRadioButton.js
@@ -101,11 +101,7 @@ StyledRadioButtonIcon.defaultProps = {};
 Object.setPrototypeOf(StyledRadioButtonIcon.defaultProps, defaultProps);
 
 const StyledRadioButtonBox = styled.div`
-  background-color: ${(props) =>
-    normalizeColor(
-      props.theme.radioButton.check.background?.color,
-      props.theme,
-    )};
+  background-color: ${(props) => props.backgroundColor};
   ${(props) => props.focus && focusStyle()};
   ${(props) => props.theme.radioButton.check.extend};
 `;

diff --git a/src/js/components/RadioButton/__tests__/RadioButton-test.tsx b/src/js/components/RadioButton/__tests__/RadioButton-test.tsx
@@ -101,7 +101,7 @@ describe('RadioButton', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('background-color themed', () => {
+  test('background-color check themed', () => {
     const customTheme = {
       radioButton: {
         check: {
@@ -121,6 +121,24 @@ describe('RadioButton', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('background-color themed', () => {
+    const customTheme = {
+      radioButton: {
+        background: {
+          color: 'blue',
+        },
+      },
+    };
+
+    const { container } = render(
+      <Grommet theme={customTheme}>
+        <RadioButton name="test" />
+      </Grommet>,
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('background-color themed symbolic', () => {
     const customTheme = {
       radioButton: {