Merge branch 'next' into fix-3695

carbon-design-system · Mar 15, 2023 · 74cceb3 · 74cceb3
2 parents 02e166d + 151c4a5
commit 74cceb3
Show file tree

Hide file tree

Showing 24 changed files with 265 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.153.0-next.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.153.0-next.1...v2.153.0-next.2) (2023-03-10)
+
+
+### Bug Fixes
+
+* **proptypes:** adding defaultDateFormatPattern to the PropType ([8ff6102](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8ff6102ab991b534a9bbcbf211f16f0a63981f30))
+* **tablecard:** update images ([49c1f52](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/49c1f524a5ef44b8d0164eca717a3a805c0dc110))
+* **tablecardutils:** formatting the file ([943f361](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/943f3612e852d98ff1541e91637158c7d6f54cc2))
+
+
+### Features
+
+* adding default date format pattern for table, timeseriesbar and combochart cards ([dc399ff](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/dc399ffa2981e1bc7b2d762f1b328ada79f849dc))
+* adding default date format pattern for table, timeseriesbar and combochart cards ([f6ba0de](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f6ba0deada4dadcc7594f1c8563b2a4a7a179b7f))
+
+
+### Reverts
+
+* **barchartutils:** reverting the tooltipDateFormatPattern format ([d9fa261](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d9fa261ea78dcb55c97ad4c86cc2d06c551a7ec5))
+* revert the defaultDateFormatPattern to old format ([30b537f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/30b537ffa5685ec39bdcd8e8797a45454384a082))
+
+
+
+
+
+# [2.153.0-next.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.153.0-next.0...v2.153.0-next.1) (2023-03-09)
+
+
+### Bug Fixes
+
+* **header:** handle server-side rendering  [#3742](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3742) ([e15989f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/e15989f656cf71bd3095453ce7d4c2dcfe4a6b65))
+
+
+
+
+
+# [2.153.0-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.6-next.1...v2.153.0-next.0) (2023-03-09)
+
+
+### Bug Fixes
+
+* **datetimepickerv2:** fix autoposition ([b4a47f1](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b4a47f1fad871e020a5a6068965a8018b7b9149d))
+
+
+### Features
+
+* **card:** add support for browser tooltip in extra actions ([8d51c03](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8d51c038334d93a6a51ef8a9e1464535c73564af))
+
+
+
+
+
+## [2.152.6-next.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.6-next.0...v2.152.6-next.1) (2023-03-09)
+
+
+### Bug Fixes
+
+* **walkme:** Defining the required Walkme global variable and function in a useEffect hook because they were not being set inside the script tag for some reason. ([d8bb98d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d8bb98d06729dbfa9145757270fcdf9331ded757))
+* **walkme:** Running yarn format ([f2f9436](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f2f943612e985e135dc61d042c2b140cc8d826bc))
+
+
+
+
+
 ## [2.152.6-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.5...v2.152.6-next.0) (2023-03-07)
 
 

diff --git a/lerna.json b/lerna.json
@@ -3,6 +3,6 @@
     "packages/*"
   ],
   "useWorkspaces": true,
-  "version": "2.152.6-next.0",
+  "version": "2.153.0-next.2",
   "npmClient": "yarn"
 }
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.153.0-next.2](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.153.0-next.1...v2.153.0-next.2) (2023-03-10)
+
+
+### Bug Fixes
+
+* **proptypes:** adding defaultDateFormatPattern to the PropType ([8ff6102](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8ff6102ab991b534a9bbcbf211f16f0a63981f30))
+* **tablecard:** update images ([49c1f52](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/49c1f524a5ef44b8d0164eca717a3a805c0dc110))
+* **tablecardutils:** formatting the file ([943f361](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/943f3612e852d98ff1541e91637158c7d6f54cc2))
+
+
+### Features
+
+* adding default date format pattern for table, timeseriesbar and combochart cards ([dc399ff](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/dc399ffa2981e1bc7b2d762f1b328ada79f849dc))
+
+
+### Reverts
+
+* **barchartutils:** reverting the tooltipDateFormatPattern format ([d9fa261](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d9fa261ea78dcb55c97ad4c86cc2d06c551a7ec5))
+* revert the defaultDateFormatPattern to old format ([30b537f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/30b537ffa5685ec39bdcd8e8797a45454384a082))
+
+
+
+
+
+# [2.153.0-next.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.153.0-next.0...v2.153.0-next.1) (2023-03-09)
+
+
+### Bug Fixes
+
+* **header:** handle server-side rendering  [#3742](https://github.com/carbon-design-system/carbon-addons-iot-react/issues/3742) ([e15989f](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/e15989f656cf71bd3095453ce7d4c2dcfe4a6b65))
+
+
+
+
+
+# [2.153.0-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.6-next.1...v2.153.0-next.0) (2023-03-09)
+
+
+### Bug Fixes
+
+* **datetimepickerv2:** fix autoposition ([b4a47f1](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/b4a47f1fad871e020a5a6068965a8018b7b9149d))
+
+
+### Features
+
+* **card:** add support for browser tooltip in extra actions ([8d51c03](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8d51c038334d93a6a51ef8a9e1464535c73564af))
+
+
+
+
+
+## [2.152.6-next.1](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.6-next.0...v2.152.6-next.1) (2023-03-09)
+
+
+### Bug Fixes
+
+* **walkme:** Defining the required Walkme global variable and function in a useEffect hook because they were not being set inside the script tag for some reason. ([d8bb98d](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/d8bb98d06729dbfa9145757270fcdf9331ded757))
+* **walkme:** Running yarn format ([f2f9436](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/f2f943612e985e135dc61d042c2b140cc8d826bc))
+
+
+
+
+
 ## [2.152.6-next.0](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.152.5...v2.152.6-next.0) (2023-03-07)
 
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -340,7 +340,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.152.6-next.0",
+  "version": "2.153.0-next.2",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",

diff --git a/packages/react/src/components/BarChartCard/BarChartCard.jsx b/packages/react/src/components/BarChartCard/BarChartCard.jsx
@@ -61,6 +61,7 @@ const defaultProps = {
   showTimeInGMT: false,
   tooltipDateFormatPattern: 'L HH:mm:ss',
   values: null,
+  defaultDateFormatPattern: 'L HH:mm',
 };
 
 const BarChartCard = ({
@@ -87,6 +88,7 @@ const BarChartCard = ({
   // TODO: remove deprecated testID in v3.
   testID,
   testId,
+  defaultDateFormatPattern,
   ...others
 }) => {
   // need to deep merge the nested content default props as default props only uses a shallow merge natively
@@ -244,8 +246,16 @@ const BarChartCard = ({
   ]);
 
   const tableData = useMemo(
-    () => formatTableData(timeDataSourceId, categoryDataSourceId, type, values, chartData),
-    [categoryDataSourceId, chartData, timeDataSourceId, type, values]
+    () =>
+      formatTableData(
+        timeDataSourceId,
+        categoryDataSourceId,
+        type,
+        values,
+        chartData,
+        defaultDateFormatPattern
+      ),
+    [categoryDataSourceId, chartData, defaultDateFormatPattern, timeDataSourceId, type, values]
   );
 
   const previousTick = useRef();

diff --git a/packages/react/src/components/BarChartCard/BarChartCard.mdx b/packages/react/src/components/BarChartCard/BarChartCard.mdx
@@ -50,6 +50,7 @@ import { BarChartCard } from 'carbon-addon-iot-react';
   size="MEDIUMWIDE"
   title="Particles by city"
   tooltipDateFormatPattern="L HH:mm:ss"
+  defaultDateFormatPattern="L HH:mm"
   values={[
     {
       city: 'Amsterdam',
@@ -121,6 +122,7 @@ import { BarChartCard } from 'carbon-addon-iot-react';
   size="MEDIUMWIDE"
   title="Particles and temperature in cities"
   tooltipDateFormatPattern="L HH:mm:ss"
+  defaultDateFormatPattern="L HH:mm"
   values={[
     {
       city: 'Amsterdam',
@@ -260,7 +262,8 @@ import { BarChartCard } from 'carbon-addon-iot-react';
 | i18n.overflowMenuDescription          | string                                                                                                                    | 'Open and close list of options'                                                                                                                                               |                                                                                                                                                                                                                                                                                                                                                  |
 | domainRange                           | arrayOf(oneOfType([number, Date]))                                                                                        | null                                                                                                                                                                           | optional domain to graph from. First value is the beginning of the range. Second value is the end of the range can be date instance or timestamp                                                                                                                                                                                                 |
 | showTimeInGMT                         | bool                                                                                                                      | false                                                                                                                                                                          | Show timestamp in browser local time or GMT                                                                                                                                                                                                                                                                                                      |
-| tooltipDateFormatPattern              | string                                                                                                                    | 'L HH:mm:ss'                                                                                                                                                                   | tooltip format pattern that follows the dayjs formatting patterns                                                                                                                                                                                                                                                                                |
+| tooltipDateFormatPattern              | String                                                                                                                    | 'L HH:mm:ss'                                                                                                                                                                   | tooltip format pattern that follows the dayjs formatting patterns
+| defaultDateFormatPattern              | String                                                                                                                    | 'L HH:mm'                                                                                                                                                                   | default date format pattern that follows the dayjs formatting patterns                                                                                                                                                                                                                                                                                |
 
 ### cardDimensions Prop
 

diff --git a/packages/react/src/components/BarChartCard/barChartUtils.js b/packages/react/src/components/BarChartCard/barChartUtils.js
@@ -526,7 +526,8 @@ export const formatTableData = (
   categoryDataSourceId,
   type,
   values,
-  chartData
+  chartData,
+  defaultDateFormatPattern = 'L HH:mm'
 ) => {
   const tableData = [];
   if (!isNil(values) && !isNil(chartData)) {
@@ -548,7 +549,7 @@ export const formatTableData = (
           values: {
             ...barTimeValue,
             // format the date locally
-            [timeDataSourceId]: dayjs(timestamp).format('L HH:mm'),
+            [timeDataSourceId]: dayjs(timestamp).format(defaultDateFormatPattern),
           },
           isSelectable: false,
         });

diff --git a/packages/react/src/components/Card/CardToolbar.jsx b/packages/react/src/components/Card/CardToolbar.jsx
@@ -191,6 +191,7 @@ const CardToolbar = ({
                 itemText={child.itemText}
                 disabled={child.disabled}
                 onClick={() => (child.callback ? child.callback(child) : null)}
+                requireTitle
               />
             ) : null
           )}

diff --git a/packages/react/src/components/ComboChartCard/ComboChartCard.jsx b/packages/react/src/components/ComboChartCard/ComboChartCard.jsx
@@ -43,6 +43,7 @@ const defaultProps = {
   showTimeInGMT: false,
   domainRange: null,
   tooltipDateFormatPattern: 'L HH:mm:ss',
+  defaultDateFormatPattern: 'L HH:mm',
 };
 
 const ComboChartCard = ({
@@ -69,6 +70,7 @@ const ComboChartCard = ({
   // TODO: remove deprecated testID in v3.
   testID,
   testId,
+  defaultDateFormatPattern,
   ...others
 }) => {
   const mergedI18n = { ...defaultProps.i18n, ...i18n };
@@ -92,6 +94,7 @@ const ComboChartCard = ({
     isLoading,
     showTimeInGMT,
     tooltipDateFormatPattern,
+    defaultDateFormatPattern,
     chartTitle: content.title,
     values,
     i18n: mergedI18n,

diff --git a/packages/react/src/components/ComboChartCard/comboChartHelpers.js b/packages/react/src/components/ComboChartCard/comboChartHelpers.js
@@ -188,6 +188,7 @@ export const useChartOptions = (content) => {
       size,
       timeDataSourceId,
       tooltipDateFormatPattern,
+      defaultDateFormatPattern,
       unit,
       values,
     } = content;
@@ -220,6 +221,7 @@ export const useChartOptions = (content) => {
       toolbar: {
         enabled: false,
       },
+      defaultDateFormatPattern,
     };
 
     options.data = merge(options.data, { loading: isLoading });
@@ -228,7 +230,7 @@ export const useChartOptions = (content) => {
 };
 
 const extractDataAndColumnNames = (values, chartOptions) => {
-  const { timeDataSourceId, showTimeInGMT } = chartOptions;
+  const { timeDataSourceId, showTimeInGMT, defaultDateFormatPattern } = chartOptions;
   let maxColumnNames = [];
 
   const tableValues = values.map((value, index) => {
@@ -242,7 +244,7 @@ const extractDataAndColumnNames = (values, chartOptions) => {
         [timeDataSourceId]: (showTimeInGMT
           ? dayjs.utc(value[timeDataSourceId])
           : dayjs(value[timeDataSourceId])
-        ).format('L HH:mm'),
+        ).format(defaultDateFormatPattern),
       },
       isSelectable: false,
     };

diff --git a/packages/react/src/components/ComboChartCard/comboChartHelpers.test.js b/packages/react/src/components/ComboChartCard/comboChartHelpers.test.js
@@ -156,11 +156,11 @@ describe('comboChartHelpers', () => {
         ...getChartOptionsParams(),
         locale: 'fr',
         showTimeInGMT: true,
-        tooltipDateFormatPattern: 'L HH:mm',
+        tooltipDateFormatPattern: 'L HH:mm:ss',
       };
       wrappedResult = renderHook(() => useChartOptions(params));
       wrappedResult.result.current.tooltip.customHTML(dateValue);
-      expect(handleTooltip).toHaveBeenCalledWith(dateValue, 'date-id', true, 'L HH:mm', 'fr');
+      expect(handleTooltip).toHaveBeenCalledWith(dateValue, 'date-id', true, 'L HH:mm:ss', 'fr');
     });
   });
   describe('useChartData', () => {

diff --git a/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx b/packages/react/src/components/DateTimePicker/DateTimePickerV2.test.jsx
@@ -2078,7 +2078,7 @@ describe('DateTimePickerV2', () => {
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });
 
-  it('when flyout offscreen top right render direction to LeftStart', () => {
+  it('when flyout offscreen top right render direction to bottomEnd', () => {
     const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
     const mockGetBoundingClientRect = jest.fn(
       generateBoundingClientRect({
@@ -2123,7 +2123,7 @@ describe('DateTimePickerV2', () => {
     const menu = screen.getByTestId(`${testId}-datepicker-flyout`);
 
     expect(
-      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.LeftStart}`)
+      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.BottomEnd}`)
     ).toBe(true);
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });
@@ -2323,7 +2323,7 @@ describe('DateTimePickerV2', () => {
     const menu = screen.getByTestId(`${testId}-datepicker-flyout`);
 
     expect(
-      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.LeftEnd}`)
+      menu.classList.contains(`${iotPrefix}--flyout-menu--body__${FlyoutMenuDirection.BottomEnd}`)
     ).toBe(true);
     Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
   });

diff --git a/packages/react/src/components/Header/HeaderActionGroup.jsx b/packages/react/src/components/Header/HeaderActionGroup.jsx
@@ -103,10 +103,18 @@ const HeaderActionGroup = ({
   }, [actionItems, langDir, overflowItems.length]);
 
   useLayoutEffect(() => {
-    checkForOverflow();
-    window.addEventListener('resize', checkForOverflow);
+    // Check for SSR
+    if (typeof window !== 'undefined') {
+      checkForOverflow();
+      window.addEventListener('resize', checkForOverflow);
+    }
 
-    return () => window.removeEventListener('resize', checkForOverflow);
+    return () => {
+      // Check for SSR
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', checkForOverflow);
+      }
+    };
   }, [checkForOverflow]);
 
   return (