Merge branch 'master' into feature/sc-304698/backend-based-widget-cal…

…culation-using-spatialfilter

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Not released
 
+- LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634)
+- LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635)
+- LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636)
+- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637)
+- GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638)
+- RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639)
+- FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640)
+- LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641)
+- TableWidgetUI component migrated from makeStyles to styled-components + cleanup [#642](https://github.com/CartoDB/carto-react/pull/642)
+- TimeSeriesWidgetUI component cleanup makeStyles and unnecessary className [#643](https://github.com/CartoDB/carto-react/pull/643)
+
 ## 2.0
 
 ### 2.0.2 (2023-04-26)

lerna.json

@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.0.1"
+  "version": "2.0.2"
 }

packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -64,9 +64,9 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
-    "@carto/react-redux": "^2.0.1",
-    "@carto/react-workers": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
+    "@carto/react-redux": "^2.0.2",
+    "@carto/react-workers": "^2.0.2",
     "@deck.gl/carto": "^8.9.6",
     "@deck.gl/core": "^8.9.6",
     "@deck.gl/extensions": "^8.9.6",

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"
   }

packages/react-basemaps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-basemaps",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
     "@deck.gl/google-maps": "^8.9.6",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x"

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-core",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Core",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-redux",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - Redux",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -63,8 +63,8 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
-    "@carto/react-workers": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
+    "@carto/react-workers": "^2.0.2",
     "@deck.gl/carto": "^8.9.6",
     "@deck.gl/core": "^8.9.6",
     "@reduxjs/toolkit": "^1.5.0"

packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, screen } from '../../widgets/utils/testUtils';
+import { render, screen } from '../utils/testUtils';
 import LegendCategories from '../../../src/widgets/legend/LegendCategories';
 import { getPalette } from '../../../src/utils/palette';
+import { hexToRgb } from '@mui/material';
 
 const COLOR = 'TealGrn';
 
@@ -21,9 +22,10 @@ describe('LegendCategories', () => {
   test('renders colors (CARTOColors) correctly', () => {
     render(<LegendCategories legend={DEFAULT_LEGEND} />);
     const elements = document.querySelectorAll('[class*="marker"]');
-    getPalette(COLOR, 2).forEach((color, idx) =>
-      expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-    );
+    getPalette(COLOR, 2).forEach((color, idx) => {
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['background-color']).toBe(hexToRgb(color));
+    });
   });
   test('renders colors (hex) correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, colors: ['#000', '#fff'] }} />);
@@ -35,9 +37,10 @@ describe('LegendCategories', () => {
   test('renders stroked colors correctly', () => {
     render(<LegendCategories legend={{ ...DEFAULT_LEGEND, isStrokeColor: true }} />);
     const elements = document.querySelectorAll('[class*="marker"]');
-    getPalette(COLOR, 2).forEach((color, idx) =>
-      expect(elements[idx]).toHaveStyle(`border-color: ${color}`)
-    );
+    getPalette(COLOR, 2).forEach((color, idx) => {
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['border-color']).toBe(color);
+    });
   });
   test('renders masked icons correctly', () => {
     render(
@@ -47,8 +50,9 @@ describe('LegendCategories', () => {
     );
     const elements = document.querySelectorAll('[class*="marker"]');
     getPalette(COLOR, 2).forEach((color, idx) => {
-      expect(elements[idx]).toHaveStyle(`mask-image: url(https://xyz.com/x.png)`);
-      expect(elements[idx]).toHaveStyle(`background-color: ${color}`);
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['mask-image']).toBe('url(https://xyz.com/x.png)');
+      expect(styles['background-color']).toBe(hexToRgb(color));
     });
   });
   test('renders non-masked icons correctly', () => {
@@ -63,8 +67,9 @@ describe('LegendCategories', () => {
     );
     const elements = document.querySelectorAll('[class*="marker"]');
     getPalette(COLOR, 2).forEach((color, idx) => {
-      expect(elements[idx]).toHaveStyle(`background-image: url(https://xyz.com/x.png)`);
-      expect(elements[idx]).toHaveStyle(`background-color: rgba(0,0,0,0)`);
+      const styles = window.getComputedStyle(elements[idx]);
+      expect(styles['background-image']).toBe('url(https://xyz.com/x.png)');
+      expect(styles['background-color']).toBe('rgba(0, 0, 0, 0)');
     });
   });
 });

packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '../../widgets/utils/testUtils';
 import LegendRamp from '../../../src/widgets/legend/LegendRamp';
 import { getPalette } from '../../../src/utils/palette';
+import { hexToRgb } from '@mui/material';
 
 const COLOR = 'TealGrn';
 
@@ -31,22 +32,28 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('< 0')).toBeInTheDocument();
       expect(screen.queryByText('≥ 200')).toBeInTheDocument();
 
-      const elements = document.querySelectorAll('[class*="step"]');
+      const elements = document.querySelectorAll('[data-testid=step-discontinuous]');
       expect(elements.length).toBe(3);
-      getPalette(COLOR, 3).forEach((color, idx) =>
-        expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-      );
+      getPalette(COLOR, 3).forEach((color, idx) => {
+        const backgroundColor = window.getComputedStyle(elements[idx])[
+          'background-color'
+        ];
+        expect(backgroundColor).toBe(hexToRgb(color));
+      });
     });
     test('renders formatted labels correctly', () => {
       render(<LegendRamp legend={DEFAULT_LEGEND_WITH_FORMATTED_LABELS} />);
       expect(screen.queryByText('< 0 km')).toBeInTheDocument();
       expect(screen.queryByText('≥ 200 km')).toBeInTheDocument();
 
-      const elements = document.querySelectorAll('[class*="step"]');
+      const elements = document.querySelectorAll('[data-testid=step-discontinuous]');
       expect(elements.length).toBe(3);
-      getPalette(COLOR, 3).forEach((color, idx) =>
-        expect(elements[idx]).toHaveStyle(`background-color: ${color}`)
-      );
+      getPalette(COLOR, 3).forEach((color, idx) => {
+        const backgroundColor = window.getComputedStyle(elements[idx])[
+          'background-color'
+        ];
+        expect(backgroundColor).toBe(hexToRgb(color));
+      });
     });
   });
   describe('continuous', () => {
@@ -55,10 +62,10 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('0')).toBeInTheDocument();
       expect(screen.queryByText('200')).toBeInTheDocument();
 
-      const ramp = document.querySelector('[class*="step"]');
+      const ramp = document.querySelector('[data-testid=step-continuous]');
       const palette = getPalette(COLOR, 2);
       expect(ramp).toHaveStyle(
-        `background-image: linear-gradient(to right, ${palette.join()})`
+        `background: linear-gradient(to right, ${palette.join()})`
       );
     });
     test('renders formatted labels correctly', () => {
@@ -68,10 +75,10 @@ describe('LegendRamp', () => {
       expect(screen.queryByText('0 km')).toBeInTheDocument();
       expect(screen.queryByText('200 km')).toBeInTheDocument();
 
-      const ramp = document.querySelector('[class*="step"]');
+      const ramp = document.querySelector('[data-testid=step-continuous]');
       const palette = getPalette(COLOR, 2);
       expect(ramp).toHaveStyle(
-        `background-image: linear-gradient(to right, ${palette.join()})`
+        `background: linear-gradient(to right, ${palette.join()})`
       );
     });
   });

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-ui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "CARTO for React - UI",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -78,7 +78,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.0.1",
+    "@carto/react-core": "^2.0.2",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.16",

packages/react-ui/src/theme/sections/components/dataDisplay.js

@@ -223,6 +223,7 @@ export const dataDisplayOverrides = {
         border: `2px solid ${commonPalette.divider}`,
         borderRadius: getSpacing(0.5),
         fontWeight: themeTypography.fontWeightMedium,
+        paddingRight: getSpacing(3),
         '& .MuiSelect-icon': {
           top: '50%',
           transform: 'translateY(-50%)',

packages/react-ui/src/types.d.ts

@@ -3,7 +3,9 @@ import {
   AppBarProps as MuiAppBarProps,
   TextFieldProps,
   TypographyProps as MuiTypographyProps,
-  AvatarProps as MuiAvatarProps
+  AvatarProps as MuiAvatarProps,
+  SxProps,
+  Theme
 } from '@mui/material';
 import { CSSProperties } from 'react';
 
@@ -164,6 +166,7 @@ export type FeatureSelectionWidgetUI = {
   onSelectGeometry?: Function;
   tooltipPlacement?: string;
   className?: string;
+  sx?: SxProps<Theme>;
 };
 
 // Legends