Merge branch 'next' into bugfix/icon-dropdown-border

.github/workflows/publish.yml

@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - master
+      - next
 
 jobs:
   publish:
@@ -46,6 +47,4 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        # Dry-run only for now for testing purposes. Travis CI does the actual publish currently.
-        # https://semantic-release.gitbook.io/semantic-release/usage/configuration#dryrun
-        run: yarn publish-npm --dry-run
+        run: yarn publish-npm

package.json

@@ -126,7 +126,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@carbon/charts": "^0.40.13",
+    "@carbon/charts": "^0.41.1",
     "@carbon/charts-react": "^0.40.13",
     "@carbon/colors": "10.15.0",
     "@carbon/icons-react": "10.17.0",

src/components/CardEditor/CardEditForm/CardEditFormContent.jsx

@@ -66,6 +66,15 @@ const propTypes = {
     selectASize: PropTypes.string,
     timeRange: PropTypes.string,
     selectATimeRange: PropTypes.string,
+    last24HoursLabel: PropTypes.string,
+    last7DaysLabel: PropTypes.string,
+    lastMonthLabel: PropTypes.string,
+    lastQuarterLabel: PropTypes.string,
+    lastYearLabel: PropTypes.string,
+    thisWeekLabel: PropTypes.string,
+    thisMonthLabel: PropTypes.string,
+    thisQuarterLabel: PropTypes.string,
+    thisYearLabel: PropTypes.string,
   }),
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
@@ -108,23 +117,32 @@ const defaultProps = {
     selectASize: 'Select a size',
     timeRange: 'Time range',
     selectATimeRange: 'Select a time range',
+    last24Hours: 'Last 24 hours',
+    last7Days: 'Last 7 days',
+    lastMonth: 'Last month',
+    lastQuarter: 'Last quarter',
+    lastYear: 'Last year',
+    thisWeek: 'This week',
+    thisMonth: 'This month',
+    thisQuarter: 'This quarter',
+    thisYear: 'This year',
   },
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
 };
 
-export const defaultTimeRangeOptions = {
-  last24Hours: 'Last 24 hrs',
-  last7Days: 'Last 7 days',
-  lastMonth: 'Last month',
-  lastQuarter: 'Last quarter',
-  lastYear: 'Last year',
-  thisWeek: 'This week',
-  thisMonth: 'This month',
-  thisQuarter: 'This quarter',
-  thisYear: 'This year',
-};
+const defaultTimeRangeOptions = [
+  'last24Hours',
+  'last7Days',
+  'lastMonth',
+  'lastQuarter',
+  'lastYear',
+  'thisWeek',
+  'thisMonth',
+  'thisQuarter',
+  'thisYear',
+];
 
 /**
  * Returns card size and dimensions labels
@@ -155,8 +173,7 @@ const CardEditFormContent = ({
 
   const validTimeRanges = getValidTimeRanges
     ? getValidTimeRanges(cardConfig, selectedDataItems)
-    : Object.keys(defaultTimeRangeOptions);
-
+    : defaultTimeRangeOptions;
   return (
     <>
       <div className={`${baseClassName}--input`}>
@@ -215,7 +232,7 @@ const CardEditFormContent = ({
                 validTimeRanges
                   ? validTimeRanges.map((range) => ({
                       id: range,
-                      text: defaultTimeRangeOptions[range],
+                      text: mergedI18n[range] || range,
                     }))
                   : []
               }

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.jsx

@@ -108,23 +108,26 @@ const DATAITEM_COLORS_OPTIONS = [
  */
 export const formatSeries = (selectedItems, cardJson) => {
   const cardSeries = cardJson?.content?.series;
-  const series = selectedItems.map(({ id, text }, i) => {
+  const series = selectedItems.map(({ id }, i) => {
+    const currentItem = cardSeries?.find(
+      (dataItem) => dataItem.dataSourceId === id
+    );
     const color =
-      cardSeries?.find((dataItem) => dataItem.label === id)?.color ??
+      currentItem?.color ??
       DATAITEM_COLORS_OPTIONS[i % DATAITEM_COLORS_OPTIONS.length];
     return {
       dataSourceId: id,
-      label: text,
+      label: currentItem?.label || id,
       color,
     };
   });
   return series;
 };
 
 export const formatDataItemsForDropdown = (dataItems) =>
-  dataItems?.map(({ dataSourceId, label }) => ({
+  dataItems?.map(({ dataSourceId }) => ({
     id: dataSourceId,
-    text: label || dataSourceId,
+    text: dataSourceId,
   })) || [];
 
 const DataSeriesFormItem = ({

src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem.test.jsx

@@ -68,7 +68,7 @@ describe('DataSeriesFormItem', () => {
     ];
     it('should correctly format the card series', () => {
       expect(formatSeries(selectedItems, cardConfig)).toEqual([
-        { dataSourceId: 'temperature', label: 'Temperature', color: '#6929c4' },
+        { dataSourceId: 'temperature', label: 'Temperature', color: 'red' },
         { dataSourceId: 'pressure', label: 'Pressure', color: '#1192e8' },
       ]);
     });
@@ -84,8 +84,8 @@ describe('DataSeriesFormItem', () => {
   describe('formatDataItemsForDropdown', () => {
     it('should correctly format the items for the dropdown', () => {
       expect(formatDataItemsForDropdown(dataItems)).toEqual([
-        { id: 'temperature', text: 'Temperature' },
-        { id: 'pressure', text: 'Pressure' },
+        { id: 'temperature', text: 'temperature' },
+        { id: 'pressure', text: 'pressure' },
       ]);
     });
   });

src/components/DataTable/_data-table.scss

@@ -73,6 +73,11 @@ html[dir='rtl'] {
   .#{$prefix}--table-sort {
     padding-left: $spacing-04;
     padding-right: $spacing-04;
+
+    .#{$prefix}--table-header-label {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 }
 

src/components/List/HierarchyList/HierarchyList.jsx

@@ -244,7 +244,8 @@ const HierarchyList = ({
     cancelMoveClicked();
   };
 
-  useEffect(
+  useDeepCompareEffect(
+    // have to use deep compare to accurately compare items
     () => {
       // Expand the parent elements of the defaultSelectedId
       if (defaultSelectedId) {

src/components/List/List.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { DragDropContext } from 'react-dnd';
@@ -144,7 +144,7 @@ const List = forwardRef((props, ref) => {
     itemWillMove,
     emptyState,
   } = props;
-  const mergedI18n = { ...defaultProps.i18n, i18n };
+  const mergedI18n = useMemo(() => ({ ...defaultProps.i18n, i18n }), [i18n]);
   const selectedItemRef = ref;
   const ListHeader = overrides?.header?.component || DefaultListHeader;
   const renderItemAndChildren = (item, index, parentId, level) => {

src/components/List/ListItem/ListItem.jsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { Draggable16, ChevronUp16, ChevronDown16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
+import warning from 'warning';
 
 import { EditingStyle } from '../../../utils/DragAndDropUtils';
 import { settings } from '../../../constants/Settings';
@@ -32,7 +33,11 @@ const ListItemPropTypes = {
   expanded: PropTypes.bool,
   value: PropTypes.string.isRequired,
   secondaryValue: PropTypes.string,
-  rowActions: PropTypes.arrayOf(PropTypes.node), // TODO
+  /** either a callback render function or a node */
+  rowActions: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.func,
+  ]),
   icon: PropTypes.node,
   iconPosition: PropTypes.string,
   isCategory: PropTypes.bool,
@@ -116,11 +121,20 @@ const ListItem = ({
 }) => {
   const handleExpansionClick = () => isExpandable && onExpand(id);
 
+  if (__DEV__ && Array.isArray(rowActions)) {
+    warning(
+      false,
+      'You have passed an array of nodes to ListItem as rowActions.  This can cause performance problems and has been deprecated.  You should pass a render function instead.'
+    );
+  }
+
   const renderNestingOffset = () => {
     return nestingLevel > 0 ? (
       <div
         className={`${iotPrefix}--list-item--nesting-offset`}
-        style={{ width: `${nestingLevel * 30}px` }}
+        style={{
+          width: `${nestingLevel * 30}px`,
+        }}
       />
     ) : null;
   };
@@ -151,9 +165,10 @@ const ListItem = ({
     ) : null;
 
   const renderRowActions = () =>
-    rowActions && rowActions.length > 0 ? (
+    rowActions &&
+    (typeof rowActions === 'function' || rowActions.length > 0) ? (
       <div className={`${iotPrefix}--list-item--content--row-actions`}>
-        {rowActions}
+        {typeof rowActions === 'function' ? rowActions() : rowActions}
       </div>
     ) : null;
 

src/components/List/ListItem/_list-item.scss

@@ -152,6 +152,7 @@
       }
     }
     &--values {
+      position: relative;
       flex: 1;
       max-width: 100%;
       &--main {
@@ -167,10 +168,11 @@
       }
       &--value {
         flex: 1;
+
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        padding-right: $spacing-05;
+        padding-right: $spacing-09;
         &__with-actions {
           padding-right: 0;
           width: $spacing-05;
@@ -191,6 +193,8 @@
       margin-right: 0;
       overflow: none;
       display: flex;
+      position: absolute;
+      right: 0;
     }
   }
   &--nesting-offset {

src/components/Table/StatefulTable.test.jsx

@@ -405,4 +405,53 @@ describe('stateful table with real reducer', () => {
     expect(initialState.data.length).toEqual(100);
     expect(screen.queryByText('1–10 of 500 items')).toBeTruthy();
   });
+
+  it('stateful table every third row unselectable', () => {
+    const modifiedData = initialState.data.map((eachRow, index) => ({
+      ...eachRow,
+      isSelectable: index % 3 !== 0,
+    }));
+
+    const dataCount = modifiedData.filter((data) => data.isSelectable).length;
+    render(
+      <StatefulTable
+        {...merge({}, { ...pick(initialState, 'columns', 'actions') })}
+        options={{
+          hasRowSelection: 'multi',
+          hasRowExpansion: false,
+        }}
+        data={modifiedData}
+        view={{ table: { selectedIds: [] } }}
+      />
+    );
+
+    // check if checkboxes displayed correctly
+    const checkboxes = screen.getAllByLabelText('Select row');
+    checkboxes.forEach((box, i) => {
+      if (i % 3 !== 0) {
+        expect(box).toHaveProperty('disabled', false);
+      } else {
+        expect(box).toHaveProperty('disabled', true);
+      }
+    });
+
+    // select all elements
+    const selectAllCheckbox = screen.getByLabelText('Select all items');
+    expect(selectAllCheckbox).toBeInTheDocument();
+    expect(selectAllCheckbox).toHaveProperty('checked', false);
+    fireEvent.click(selectAllCheckbox);
+
+    // check that only selectable items are counted
+    expect(selectAllCheckbox).toHaveProperty('checked', true);
+    expect(screen.getByText(`${dataCount} items selected`)).toBeInTheDocument();
+
+    // check if selectable checkboxes checked
+    checkboxes.forEach((box, i) => {
+      if (i % 3 !== 0) {
+        expect(box).toHaveProperty('checked', true);
+      } else {
+        expect(box).toHaveProperty('checked', false);
+      }
+    });
+  });
 });

src/components/Table/baseTableReducer.js

@@ -292,10 +292,11 @@ export const baseTableReducer = (state = {}, action) => {
             isSelectAllSelected: {
               $set: isSelected,
             },
-            //
             selectedIds: {
               $set: isSelected
-                ? state.data.map((i) => i.isSelectable !== false && i.id)
+                ? state.data
+                    .filter((i) => i.isSelectable !== false)
+                    .map((i) => i.id)
                 : [],
             },
             isSelectAllIndeterminate: {

yarn.lock

@@ -2545,6 +2545,17 @@
     lodash-es "4.17.15"
     resize-observer-polyfill "1.5.0"
 
+"@carbon/charts@^0.41.1":
+  version "0.41.1"
+  resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.1.tgz#766ad4ed306ad3df0b4fa3a4e97dec9cdd649f55"
+  integrity sha512-nCWNMOsiV0E0Tdulf9TcsUSFvkhY5onkdqfZ8NEKX40LQzSWO/nGG1fRAlPxfZpFDuZr7rAW9l0/Z8W5QzkddQ==
+  dependencies:
+    "@carbon/colors" "10.15.0"
+    "@carbon/utils-position" "1.1.1"
+    date-fns "2.8.1"
+    lodash-es "4.17.15"
+    resize-observer-polyfill "1.5.0"
+
 "@carbon/[email protected]":
   version "10.15.0"
   resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.15.0.tgz#1a7f211a9e92b51c838995f5f3ffae002a3fed8b"