diff --git a/README.MD b/README.MD index dd43b26dc4..c88629b91e 100644 --- a/README.MD +++ b/README.MD @@ -96,7 +96,7 @@ Feedback and improvement requests regarding this configuration would be apprecia ## Dependencies -Usage of this package does not require you to install additional Carbon packages; `carbon-components`, `carbon-icons`, or `@carbon` packages (`@carbon/grid`, `@carbon-layout`, etc) as peer dependencies. You may still need these packages if you use them directly in your project. +Usage of this package does not require you to install additional Carbon packages; `carbon-components`, `carbon-components-react`, or `@carbon` packages (`@carbon/grid`, `@carbon-layout`, etc) as peer dependencies. You may still need these packages if you use them directly in your project. ## 📚 Docs diff --git a/package.json b/package.json index 37a58a3335..e1ffe02569 100644 --- a/package.json +++ b/package.json @@ -81,14 +81,13 @@ "@carbon/charts": "^0.30.18", "@carbon/charts-react": "^0.30.18", "@carbon/colors": "10.8.0", - "@carbon/icons": "10.9.3", "@carbon/icons-react": "10.10.0", "@carbon/layout": "10.7.1", "@carbon/motion": "10.6.0", "@carbon/themes": "10.10.3", "carbon-components": "10.10.3", "carbon-components-react": "7.10.3", - "carbon-icons": "7.0.7", + "carbon-icons": "^7.0.7", "classnames": "^2.2.5", "core-js": "3.6.5", "immutability-helper": "^2.9.0", diff --git a/rollup.config.js b/rollup.config.js index db28746642..f87c2bc66d 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -122,7 +122,6 @@ export default [ 'prop-types': 'PropTypes', react: 'React', 'react-dom': 'ReactDOM', - 'carbon-icons': 'CarbonIcons', '@carbon/icons-react': 'CarbonIconsReact', 'carbon-components': 'CarbonComponents', 'carbon-components-react': 'CarbonComponentsReact', @@ -137,7 +136,6 @@ export default [ 'styled-components', 'prop-types', 'carbon-components-react', - 'carbon-icons', '@carbon/icons', '@carbon/icons-react', 'carbon-components', diff --git a/src/components/Button/Button.story.jsx b/src/components/Button/Button.story.jsx index 726b4dbbf3..5550d2ceea 100644 --- a/src/components/Button/Button.story.jsx +++ b/src/components/Button/Button.story.jsx @@ -3,7 +3,6 @@ import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import { settings } from 'carbon-components'; -import { iconAddSolid, iconSearch } from 'carbon-icons'; import { Add16, Search16 } from '@carbon/icons-react'; import { ButtonSkeleton } from 'carbon-components-react'; @@ -22,8 +21,6 @@ const icons = { }; const iconMap = { - iconAddSolid, - iconSearch, Add16, Search16, }; diff --git a/src/components/Dashboard/CardRenderer.test.jsx b/src/components/Dashboard/CardRenderer.test.jsx index 57e2a8fda9..0fa249f5cb 100644 --- a/src/components/Dashboard/CardRenderer.test.jsx +++ b/src/components/Dashboard/CardRenderer.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { iconCrash } from 'carbon-icons'; +import { Add16, Maximize16 } from '@carbon/icons-react'; import { render, fireEvent } from '@testing-library/react'; import { CARD_SIZES, CARD_TYPES, COLORS } from '../../constants/LayoutConstants'; @@ -147,8 +147,8 @@ describe('CardRenderer', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'crash', labelText: 'Crash', icon: iconCrash }, - { id: 'expand', labelText: 'Expand', icon: iconCrash }, + { id: 'crash', labelText: 'Add', icon: Add16 }, + { id: 'maximize', labelText: 'Maximize', icon: Maximize16 }, ]} cards={[ { diff --git a/src/components/Dashboard/Dashboard.test.jsx b/src/components/Dashboard/Dashboard.test.jsx index 869eed1815..a619f86783 100644 --- a/src/components/Dashboard/Dashboard.test.jsx +++ b/src/components/Dashboard/Dashboard.test.jsx @@ -1,7 +1,6 @@ import { mount } from 'enzyme'; import React from 'react'; -import Add from '@carbon/icons-react/lib/add/20'; -import { iconCrash } from 'carbon-icons'; +import { Add20 } from '@carbon/icons-react'; import { render, waitFor } from '@testing-library/react'; import { CARD_SIZES, CARD_TYPES, COLORS } from '../../constants/LayoutConstants'; @@ -135,7 +134,7 @@ let wrapper = mount( layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'add', labelText: 'Add', icon: }, + { id: 'add', labelText: 'Add', icon: }, { id: 'custom', labelText: 'Custom', customActionComponent: }, ]} cards={cardValues} @@ -160,7 +159,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'crash', labelText: 'Crash', icon: iconCrash }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} @@ -192,7 +191,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'crash', labelText: 'Crash', icon: iconCrash }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} @@ -209,7 +208,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'crash', labelText: 'Crash', icon: iconCrash }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} @@ -235,7 +234,7 @@ describe('Dashboard', () => { layouts={{ lg: [{ id: 'bogus', x: 0, y: 0 }] }} actions={[ { id: 'edit', labelText: 'Edit', icon: 'edit' }, - { id: 'crash', labelText: 'Crash', icon: iconCrash }, + { id: 'add', labelText: 'Add', icon: }, ]} cards={cardValues} onDashboardAction={onClick} diff --git a/src/components/Dashboard/DashboardHeader.jsx b/src/components/Dashboard/DashboardHeader.jsx index 3afe8c4fc0..e16ec6830f 100644 --- a/src/components/Dashboard/DashboardHeader.jsx +++ b/src/components/Dashboard/DashboardHeader.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { SkeletonText, Icon } from 'carbon-components-react'; +import { SkeletonText } from 'carbon-components-react'; import { handleEnterKeyDown } from '../../utils/componentUtilityFunctions'; import icons, { bundledIconNames } from '../../utils/bundledIcons'; @@ -99,19 +99,14 @@ const DashboardHeader = ({ }} > {typeof action.icon === 'string' ? ( - + React.createElement(icons[action.icon], { + 'aria-label': action.labelText, + key: `icon-${action.id}`, + }) ) : React.isValidElement(action.icon) ? ( action.icon ) : ( - + )} ) : ( diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index 8b3bf68379..69125ebd9c 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -739,20 +739,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Bad - @@ -1096,20 +1095,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Healthy - + @@ -1981,20 +1984,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -2099,20 +2101,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -2944,20 +2945,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Bad - @@ -3301,20 +3301,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Healthy - + @@ -4186,20 +4190,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -4304,20 +4307,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -4463,17 +4465,22 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - Edit - + @@ -5181,20 +5188,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Bad - @@ -5538,20 +5544,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Healthy - + @@ -6423,20 +6433,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -6541,20 +6550,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -9794,20 +9802,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Bad - @@ -10151,20 +10158,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Healthy - + @@ -11034,20 +11045,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -11152,20 +11162,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -13605,20 +13614,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -13717,20 +13725,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -13829,20 +13841,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -13941,20 +13952,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -14118,20 +14128,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -14230,20 +14239,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -14342,20 +14355,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -14454,20 +14466,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -16575,20 +16586,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -16687,20 +16697,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -16799,20 +16813,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -16911,20 +16924,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -18472,20 +18484,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -18584,20 +18595,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -18696,20 +18711,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -18808,20 +18822,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -21227,20 +21240,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -21294,20 +21306,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -21409,20 +21425,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -21476,20 +21491,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -21656,20 +21670,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 40 - @@ -21723,20 +21736,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 70 - + @@ -21838,20 +21855,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - < 80 - @@ -21905,20 +21921,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - >= 90 - @@ -22451,20 +22466,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Low - + @@ -22524,20 +22543,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Severe - @@ -22597,20 +22615,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Elevated - @@ -23143,20 +23160,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Low - + @@ -23216,20 +23237,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Severe - @@ -23289,20 +23309,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Elevated - @@ -24123,20 +24142,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Bad - @@ -24480,20 +24498,24 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb > - - = Healthy - + @@ -25365,20 +25387,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - @@ -25483,20 +25504,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb tabIndex={0} > - - - - diff --git a/src/components/ImageCard/CardIcon.jsx b/src/components/ImageCard/CardIcon.jsx index 6cdb8bd5cc..d63b49c409 100644 --- a/src/components/ImageCard/CardIcon.jsx +++ b/src/components/ImageCard/CardIcon.jsx @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Icon } from 'carbon-components-react'; import warning from 'warning'; import icons from '../../utils/bundledIcons'; @@ -26,6 +25,8 @@ const CardIcon = ({ icon, renderIconByName, title, color, width, height, classNa )} so we will default to our 'help' icon.` ); } + const Icon = icons[icon] || icons.help; + return icon ? ( renderIconByName ? ( renderIconByName(icon, { @@ -38,13 +39,12 @@ const CardIcon = ({ icon, renderIconByName, title, color, width, height, classNa }) ) : ( ) ) : null; diff --git a/src/components/ImageCard/HotspotContent.test.jsx b/src/components/ImageCard/HotspotContent.test.jsx index 5ada433b09..3979eef7f6 100644 --- a/src/components/ImageCard/HotspotContent.test.jsx +++ b/src/components/ImageCard/HotspotContent.test.jsx @@ -122,7 +122,7 @@ describe('HotspotContent', () => { /> ); // threshold should be found and french formatted - expect(getAllByTitle(/temperature > 0,05/)).toHaveLength(2); + expect(getAllByTitle(/temperature > 0,05/)).toHaveLength(1); }); it('hotspot threshold', () => { const { getAllByTitle } = render( @@ -148,7 +148,7 @@ describe('HotspotContent', () => { /> ); // threshold should be found - expect(getAllByTitle(/temperature > 0.05/)).toHaveLength(2); + expect(getAllByTitle(/temperature > 0.05/)).toHaveLength(1); }); it('custom render Icon By Name', () => { const mockRenderIconByName = jest.fn().mockReturnValue(); diff --git a/src/components/ImageCard/ImageControls.jsx b/src/components/ImageCard/ImageControls.jsx index 1eadc04942..d4f597d96e 100644 --- a/src/components/ImageCard/ImageControls.jsx +++ b/src/components/ImageCard/ImageControls.jsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Icon } from 'carbon-components-react'; -import { iconMinimize } from 'carbon-icons'; +import { Minimize20 } from '@carbon/icons-react'; import Minimap, { MinimapPropTypes } from './Minimap'; @@ -56,7 +55,7 @@ const ImageControls = ({ {draggable && ( <>

diff --git a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot index 5a55301241..380fcafd26 100644 --- a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot @@ -143,20 +143,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - - diff --git a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot index f5952f8ee9..71b8b74251 100644 --- a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot @@ -79,20 +79,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -115,20 +114,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -368,20 +366,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -404,20 +401,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -657,20 +653,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -693,20 +688,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -946,20 +940,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -982,20 +975,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -1235,20 +1227,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - @@ -1271,20 +1262,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image tabIndex={0} > - - - diff --git a/src/components/List/ListItem/ListItem.jsx b/src/components/List/ListItem/ListItem.jsx index e20b546ff7..e8a938dae9 100644 --- a/src/components/List/ListItem/ListItem.jsx +++ b/src/components/List/ListItem/ListItem.jsx @@ -1,7 +1,6 @@ import React from 'react'; import classnames from 'classnames'; -import { Icon } from 'carbon-components-react'; -import { iconChevronDown, iconChevronUp } from 'carbon-icons'; +import { ChevronUp16, ChevronDown16 } from '@carbon/icons-react'; import PropTypes from 'prop-types'; import { settings } from '../../../constants/Settings'; @@ -129,10 +128,11 @@ const ListItem = ({ onClick={handleExpansionClick} onKeyPress={({ key }) => key === 'Enter' && handleExpansionClick()} > - + {expanded ? ( + + ) : ( + + )} ) : null; diff --git a/src/components/MultiSelect/README.md b/src/components/MultiSelect/README.md index 24f4171bd2..89008c1ab9 100644 --- a/src/components/MultiSelect/README.md +++ b/src/components/MultiSelect/README.md @@ -18,14 +18,14 @@ package on npm. You can install this package by running the following command in your terminal with [npm](https://www.npmjs.com/): ```bash -npm i carbon-components carbon-components-react carbon-icons --save +npm i carbon-components carbon-components-react --save ``` If you prefer [Yarn Classic](https://classic.yarnpkg.com/), use the following command instead: ```bash -yarn add carbon-components-react carbon-components carbon-icons +yarn add carbon-components-react carbon-components ``` ## Usage diff --git a/src/components/OverflowMenu/README.md b/src/components/OverflowMenu/README.md index db25aa000e..9dcd4c7076 100644 --- a/src/components/OverflowMenu/README.md +++ b/src/components/OverflowMenu/README.md @@ -26,9 +26,9 @@ package on NPM. You can install this package by running the following in your terminal: ```bash -npm i carbon-components carbon-components-react carbon-icons --save +npm i carbon-components carbon-components-react --save # Or, with Yarn Classic -yarn add carbon-components carbon-components-react carbon-icons +yarn add carbon-components carbon-components-react ``` ## Usage diff --git a/src/components/Table/TableBody/RowActionsCell/RowActionsCell.jsx b/src/components/Table/TableBody/RowActionsCell/RowActionsCell.jsx index 8401b4f2ba..5a4d4c7af5 100644 --- a/src/components/Table/TableBody/RowActionsCell/RowActionsCell.jsx +++ b/src/components/Table/TableBody/RowActionsCell/RowActionsCell.jsx @@ -5,7 +5,6 @@ import { DataTable, OverflowMenu, OverflowMenuItem, - Icon, Loading, } from 'carbon-components-react'; import styled from 'styled-components'; @@ -15,6 +14,7 @@ import omit from 'lodash/omit'; import { settings } from '../../../../constants/Settings'; import { RowActionPropTypes, RowActionErrorPropTypes } from '../../TablePropTypes'; import { COLORS } from '../../../../styles/styles'; +import icons from '../../../../utils/bundledIcons'; import RowActionsError from './RowActionsError'; @@ -252,7 +252,9 @@ class RowActionsCell extends React.Component { action.renderIcon ? ( {typeof action.renderIcon === 'string' ? ( - + React.createElement(icons[action.renderIcon], { + 'aria-label': action.labelText, + }) ) : ( )} diff --git a/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx b/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx index 5c68e0096a..1155daa1a4 100644 --- a/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx +++ b/src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx @@ -329,7 +329,6 @@ class FilterHeaderRow extends Component { title={clearFilterText} > - {/* */} ) : null} diff --git a/src/components/Table/TablePropTypes.js b/src/components/Table/TablePropTypes.js index c3361cbf0d..a2f43a50ef 100644 --- a/src/components/Table/TablePropTypes.js +++ b/src/components/Table/TablePropTypes.js @@ -1,6 +1,7 @@ import PropTypes from 'prop-types'; import deprecate from '../../internal/deprecate'; +import { bundledIconNames } from '../../utils/bundledIcons'; export const RowActionPropTypes = PropTypes.arrayOf( PropTypes.shape({ @@ -14,7 +15,7 @@ export const RowActionPropTypes = PropTypes.arrayOf( viewBox: PropTypes.string.isRequired, svgData: PropTypes.object.isRequired, }), - PropTypes.string, + PropTypes.oneOf(bundledIconNames), PropTypes.node, PropTypes.object, PropTypes.func, diff --git a/src/components/TableCard/TableCard.jsx b/src/components/TableCard/TableCard.jsx index ec71f8cf93..7515bd4da8 100644 --- a/src/components/TableCard/TableCard.jsx +++ b/src/components/TableCard/TableCard.jsx @@ -1,5 +1,5 @@ import React, { useMemo, useCallback } from 'react'; -import { OverflowMenu, OverflowMenuItem, Icon, Link } from 'carbon-components-react'; +import { OverflowMenu, OverflowMenuItem, Link } from 'carbon-components-react'; import styled from 'styled-components'; import moment from 'moment'; import isNil from 'lodash/isNil'; @@ -22,6 +22,7 @@ import { formatNumberWithPrecision, getVariables, } from '../../utils/cardUtilityFunctions'; +import icons from '../../utils/bundledIcons'; import ThresholdIcon from './ThresholdIcon'; @@ -330,19 +331,21 @@ const TableCard = ({ const renderActionCell = cellItem => { const actionList = JSON.parse(cellItem.value); return actionList && actionList.length === 1 ? ( - { - evt.preventDefault(); - evt.stopPropagation(); - onCardAction(id, 'TABLE_CARD_ROW_ACTION', { - rowId: cellItem.rowId, - actionId: actionList[0].id, - }); - }} - icon={actionList[0].icon} - description={actionList[0].label} - /> + React.createElement( + typeof actionList[0].icon === 'string' ? icons[actionList[0].icon] : actionList.icon, + { + className: `${iotPrefix}--table-card--action-icon`, + onClick: evt => { + evt.preventDefault(); + evt.stopPropagation(); + onCardAction(id, 'TABLE_CARD_ROW_ACTION', { + rowId: cellItem.rowId, + actionId: actionList[0].id, + }); + }, + 'aria-label': actionList[0].label, + } + ) ) : actionList && actionList.length > 1 ? ( { ); wrapper - .find('Icon') - .find({ icon: { name: 'icon--edit' } }) + .find('.iot--table-card--action-icon') .first() .simulate('click'); expect(onCardAction.mock.calls).toHaveLength(1); diff --git a/src/components/TableCard/__snapshots__/TableCard.story.storyshot b/src/components/TableCard/__snapshots__/TableCard.story.storyshot index c36abeb415..22a7f7dae5 100644 --- a/src/components/TableCard/__snapshots__/TableCard.story.storyshot +++ b/src/components/TableCard/__snapshots__/TableCard.story.storyshot @@ -24573,18 +24573,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -24669,18 +24674,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -24765,18 +24775,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -24861,18 +24876,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -24957,18 +24977,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -25053,18 +25078,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -25149,18 +25179,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -25245,18 +25280,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -25341,18 +25381,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + @@ -25437,18 +25482,23 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table - - open - + diff --git a/src/components/ValueCard/Attribute.jsx b/src/components/ValueCard/Attribute.jsx index 580ece9545..75c959f8d1 100644 --- a/src/components/ValueCard/Attribute.jsx +++ b/src/components/ValueCard/Attribute.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import isNil from 'lodash/isNil'; -import { Icon } from 'carbon-components-react'; +import { CaretUp16, CaretDown16 } from '@carbon/icons-react'; import withSize from 'react-sizeme'; import classNames from 'classnames'; @@ -10,7 +10,6 @@ import { CARD_LAYOUTS, CARD_SIZES } from '../../constants/LayoutConstants'; import { settings } from '../../constants/Settings'; import { getUpdatedCardSize } from '../../utils/cardUtilityFunctions'; import CardIcon from '../ImageCard/CardIcon'; -import icons from '../../utils/bundledIcons'; import ValueRenderer from './ValueRenderer'; import UnitRenderer from './UnitRenderer'; @@ -28,10 +27,6 @@ const StyledAttribute = styled.div` : 'width: 50%'}; `; -const TrendIcon = styled(Icon)` - margin-right: 0.25rem; -`; - const ThresholdIcon = styled(CardIcon)` ${props => props.color && @@ -210,9 +205,9 @@ const Attribute = ({ isMini={isMini} > {secondaryValue.trend && secondaryValue.trend === 'up' ? ( - + ) : secondaryValue.trend === 'down' ? ( - + ) : null} {!isMini && secondaryValue.value} diff --git a/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot b/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot index 36bee09076..979532b16e 100644 --- a/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot +++ b/src/components/ValueCard/__snapshots__/ValueCard.story.storyshot @@ -3573,20 +3573,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Value > - - > 80 - @@ -3648,20 +3647,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Value > - - > 80 - @@ -3723,20 +3721,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Value > - - > 80 - @@ -4126,7 +4123,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Value className="iot--value-card__attribute-threshold-icon-container" > - - > 5 - + @@ -5496,20 +5497,19 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Value > - - = Unhealthy - diff --git a/src/components/ValueCard/_attribute.scss b/src/components/ValueCard/_attribute.scss index 9971d0f9b4..e9f99e2347 100644 --- a/src/components/ValueCard/_attribute.scss +++ b/src/components/ValueCard/_attribute.scss @@ -13,9 +13,9 @@ } .#{$iot-prefix}--value-card__attribute-threshold-icon-container { - width: 1rem; - height: 1rem; - margin: 0 0 0.5rem 0.5rem; + width: $spacing-05; + height: $spacing-05; + margin: 0 0 $spacing-03 $spacing-03; } .#{$iot-prefix}--value-card__attribute-threshold-icon-container--mini { @@ -25,3 +25,7 @@ .#{$iot-prefix}--value-card__attribute-threshold-icon-container--wrappable { margin-left: 0; } + +.#{$iot-prefix}--value-card__attribute_trend-icon { + margin-right: $spacing-02; +} diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap index 288895dcf1..83f5667ce4 100644 --- a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap +++ b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap @@ -655,7 +655,22 @@ Map { "type": "shape", }, Object { - "type": "string", + "args": Array [ + Array [ + "caretUp", + "caretDown", + "edit", + "close", + "checkmark", + "warning", + "arrowUp", + "arrowDown", + "user", + "info", + "help", + ], + ], + "type": "oneOf", }, Object { "type": "node", @@ -2019,7 +2034,22 @@ Map { "type": "shape", }, Object { - "type": "string", + "args": Array [ + Array [ + "caretUp", + "caretDown", + "edit", + "close", + "checkmark", + "warning", + "arrowUp", + "arrowDown", + "user", + "info", + "help", + ], + ], + "type": "oneOf", }, Object { "type": "node", diff --git a/src/utils/bundledIcons.js b/src/utils/bundledIcons.js index 18e80c0d22..1b24019457 100644 --- a/src/utils/bundledIcons.js +++ b/src/utils/bundledIcons.js @@ -1,16 +1,16 @@ import { - iconCaretDown, - iconCaretUp, - iconEdit, - iconCloseSolid, - iconCheckmarkSolid, - iconWarningSolid, - iconArrowDown, - iconArrowUp, - iconHeaderUser, - iconInfo, - iconHelp, -} from 'carbon-icons'; + CaretDown16, + CaretUp16, + Edit16, + CloseFilled16, + CheckmarkFilled16, + WarningAltFilled16, + ArrowDown16, + ArrowUp16, + User16, + Information16, + Help16, +} from '@carbon/icons-react'; export const bundledIconNames = [ 'caretUp', @@ -27,15 +27,15 @@ export const bundledIconNames = [ ]; export default { - caretUp: iconCaretUp, - caretDown: iconCaretDown, - edit: iconEdit, - close: iconCloseSolid, - checkmark: iconCheckmarkSolid, - warning: iconWarningSolid, - arrowUp: iconArrowUp, - arrowDown: iconArrowDown, - user: iconHeaderUser, - info: iconInfo, - help: iconHelp, + caretUp: CaretUp16, + caretDown: CaretDown16, + edit: Edit16, + close: CloseFilled16, + checkmark: CheckmarkFilled16, + warning: WarningAltFilled16, + arrowUp: ArrowUp16, + arrowDown: ArrowDown16, + user: User16, + info: Information16, + help: Help16, }; diff --git a/src/utils/sample.jsx b/src/utils/sample.jsx index eff5ee4ba5..0aa0c41993 100644 --- a/src/utils/sample.jsx +++ b/src/utils/sample.jsx @@ -1,6 +1,5 @@ import React from 'react'; import moment from 'moment'; -import { iconEdit } from 'carbon-icons'; export const chartData = { events: [ @@ -2501,7 +2500,7 @@ export const actions1 = [ { id: 'openTicket', labelText: 'Open Ticket' }, ]; -export const actions2 = [{ id: 'open', label: 'open', icon: iconEdit }]; +export const actions2 = [{ id: 'open', label: 'open', icon: 'edit' }]; export const tableColumns = [ { diff --git a/yarn.lock b/yarn.lock index 006044d9d5..1a99b595b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2345,11 +2345,6 @@ dependencies: "@carbon/icon-helpers" "^10.7.0" -"@carbon/icons@10.9.3": - version "10.9.3" - resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-10.9.3.tgz#1e6f9cf705251964fa948f047bfe70f38c1312f2" - integrity sha512-BMgK8OYq/yh2h5RpfrzzMNoNkX6Nul0nfYEQX8OfLqhiRCcA3Dx1SEqfm7dQj1Cz7ndQdfqp3DT+xDHTNIodoQ== - "@carbon/import-once@^10.3.0": version "10.3.0" resolved "https://registry.yarnpkg.com/@carbon/import-once/-/import-once-10.3.0.tgz#58617da4efb6d7a11352d8e6b7209da1d39f364d" @@ -6118,9 +6113,10 @@ carbon-components@10.10.3: lodash.debounce "^4.0.8" warning "^3.0.0" -carbon-icons@7.0.7: +carbon-icons@^7.0.7: version "7.0.7" resolved "https://registry.yarnpkg.com/carbon-icons/-/carbon-icons-7.0.7.tgz#ebafe3e9fa25df973796a8eca06d8a7c501cc610" + integrity sha512-3vgkdXJRgCViCrH3fLUdyAXo0I8wmohO6QETv7vWFx6yc7s+SirWFBSFL38zUx4MHtR8iTxIlLEzkeU6FlFtXg== cardinal@^2.1.1: version "2.1.1"