Merge pull request #3857 from carbon-design-system/feat-optional-thre…

…shold-icon feat: make the threshold icon optional
carbon-design-system · Apr 19, 2024 · 33d0a0c · 33d0a0c
2 parents 2b691e3 + 8afa61d
commit 33d0a0c
Show file tree

Hide file tree

Showing 19 changed files with 550 additions and 764 deletions.
diff --git a/.github/workflows/codesandbox.md b/.github/workflows/codesandbox.md
@@ -13,7 +13,7 @@ options: --privileged
     steps:
       - name: Upgrade git
         run: |
-          echo deb "http://deb.debian.org/debian buster-backports main" >> /etc/apt/sources.list
+          echo deb "http://archive.debian.org/debian buster-backports main" >> /etc/apt/sources.list
           apt-get update
           apt-get install -y git/buster-backports
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -70,7 +70,7 @@ jobs:
     steps:
       - name: Upgrade git
         run: |
-          echo deb "http://deb.debian.org/debian buster-backports main" >> /etc/apt/sources.list
+          echo deb "http://archive.debian.org/debian buster-backports main" >> /etc/apt/sources.list
           apt-get update
           apt-get install -y git/buster-backports
 
@@ -90,6 +90,13 @@ jobs:
         with:
           node-version: '16.x'
 
+      - name: Install dependencies
+        if: steps.changes.outputs.react == 'true'
+        run: |
+          yarn --frozen-lockfile
+          yarn lerna run --stream postinstall
+          yarn lerna link
+
       - name: Cache dependencies
         uses: actions/cache@v2
         if: steps.changes.outputs.react == 'true'
@@ -105,15 +112,6 @@ jobs:
         with:
           path: ~/.cache/Cypress
           key: cypress-${{ runner.os }}-cypress-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            cypress-${{ runner.os }}-cypress-
-
-      - name: Install dependencies
-        if: steps.changes.outputs.react == 'true'
-        run: |
-          yarn --frozen-lockfile
-          yarn lerna run --stream postinstall
-          yarn lerna link
 
       - name: Run Cypress tests, collect coverage
         if: steps.changes.outputs.react == 'true'

diff --git a/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx b/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.jsx
@@ -6,7 +6,6 @@ import {
   teal70,
   magenta70,
   red50,
-  red60,
   red90,
   green60,
   blue80,
@@ -15,7 +14,7 @@ import {
   teal50,
   cyan90,
 } from '@carbon/colors';
-import { WarningAlt32, Add16 } from '@carbon/icons-react';
+import { Add16 } from '@carbon/icons-react';
 import { FormLabel } from 'carbon-components-react';
 import classnames from 'classnames';
 import { isEmpty, omit } from 'lodash-es';
@@ -563,8 +562,6 @@ const DataSeriesFormItemModal = ({
             dataSourceId={type !== CARD_TYPES.VALUE ? editDataItem.dataSourceId : null}
             thresholds={editDataItem.thresholds}
             translateWithId={handleTranslation}
-            selectedIcon={{ carbonIcon: <WarningAlt32 />, name: 'Warning alt' }}
-            selectedColor={{ carbonColor: red60, name: 'red60' }}
             onChange={(thresholds) => {
               setEditDataItem({
                 ...editDataItem,

diff --git a/...src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.test.jsx b/...src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.test.jsx
@@ -1257,11 +1257,11 @@ describe('DataSeriesFormItemModal', () => {
 
     userEvent.click(screen.getByRole('button', { name: 'Add threshold' }));
     expect(setEditDataItem).toHaveBeenLastCalledWith({
-      thresholds: [{ color: '#da1e28', comparison: '>', icon: 'Warning alt', value: 0 }],
+      thresholds: [{ color: '#da1e28', comparison: '>', value: 0 }],
     });
     userEvent.click(screen.getByLabelText('Increment number'));
     expect(setEditDataItem).toHaveBeenLastCalledWith({
-      thresholds: [{ color: '#da1e28', comparison: '>', icon: 'Warning alt', value: 1 }],
+      thresholds: [{ color: '#da1e28', comparison: '>', value: 1 }],
     });
   });
 

diff --git a/...ardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.test.jsx b/...ardEditor/CardEditForm/CardEditFormItems/TableCardFormItems/TableCardFormContent.test.jsx
@@ -467,7 +467,7 @@ describe('TableCardFormContent', () => {
                 dataSourceId: 'manufacturer',
                 comparison: '>',
                 value: 5,
-                icon: 'Warning alt',
+
                 color: '#da1e28',
                 severity: 1,
               },
@@ -550,7 +550,7 @@ describe('TableCardFormContent', () => {
             color: '#da1e28',
             comparison: '>',
             dataSourceId: 'manufacturer',
-            icon: 'Warning alt',
+
             value: 0,
           },
         ],
@@ -584,14 +584,14 @@ describe('TableCardFormContent', () => {
             color: '#da1e28',
             comparison: '<',
             dataSourceId: 'temperature',
-            icon: 'Warning alt',
+
             value: 10,
           },
           {
             color: '#da1e28',
             comparison: '<',
             dataSourceId: 'manufacturer',
-            icon: 'Warning alt',
+
             value: 0,
           },
         ],
@@ -605,23 +605,23 @@ describe('TableCardFormContent', () => {
       color: '#da1e28',
       comparison: '<',
       dataSourceId: 'temperature',
-      icon: 'Warning alt',
+
       value: 10,
     });
 
     const th2Expected = expect.objectContaining({
       color: '#da1e28',
       comparison: '<',
       dataSourceId: 'manufacturer',
-      icon: 'Warning alt',
+
       value: 0,
     });
 
     const th3Expected = expect.objectContaining({
       color: '#da1e28',
       comparison: '>',
       dataSourceId: 'manufacturer',
-      icon: 'Warning alt',
+
       value: 0,
     });
 
@@ -701,7 +701,7 @@ describe('TableCardFormContent', () => {
             color: '#da1e28',
             comparison: '>',
             dataSourceId: 'manufacturer',
-            icon: 'Warning alt',
+
             value: 1,
           },
         ],
@@ -746,7 +746,7 @@ describe('TableCardFormContent', () => {
             color: '#da1e28',
             comparison: '>',
             dataSourceId: 'manufacturer',
-            icon: 'Warning alt',
+
             value: 1,
           },
         ],

diff --git a/...ges/react/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.jsx b/...ges/react/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.jsx
@@ -276,9 +276,12 @@ const ThresholdsFormItem = ({
           let newThreshold = {
             comparison: '>',
             value: 0,
-            icon: selectedIcon?.name || 'Warning alt',
             color: selectedColor?.carbonColor || red60,
           };
+          if (selectedIcon?.name) {
+            newThreshold.icon = selectedIcon.name;
+          }
+
           if (dataSourceId) {
             newThreshold = { dataSourceId, ...newThreshold };
           }

diff --git a/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.test.jsx b/...eact/src/components/CardEditor/CardEditForm/CardEditFormItems/ThresholdsFormItem.test.jsx
@@ -58,7 +58,7 @@ describe('ThresholdsFormItem', () => {
   };
 
   it('Adding thresholds invokes onChange', () => {
-    render(<ThresholdsFormItem {...commonProps} />);
+    render(<ThresholdsFormItem {...commonProps} selectedIcon={{ name: 'Warning alt' }} />);
 
     const addBtn = screen.getByText('Add threshold');
     expect(addBtn).toBeInTheDocument();