Merge branch 'master' into node-12

carbon-design-system · Jun 2, 2020 · f0537ec · f0537ec
2 parents fa2eec9 + d93e73b
commit f0537ec
Show file tree

Hide file tree

Showing 29 changed files with 826 additions and 752 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: <Add /> },
+      { id: 'add', labelText: 'Add', icon: <Add20 /> },
       { id: 'custom', labelText: 'Custom', customActionComponent: <CustomIcon /> },
     ]}
     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: <Add20 /> },
         ]}
         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: <Add20 /> },
             ]}
             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: <Add20 /> },
             ]}
             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: <Add20 /> },
         ]}
         cards={cardValues}
         onDashboardAction={onClick}

diff --git 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' ? (
-                  <Icon
-                    key={`icon-${action.id}`}
-                    icon={icons[action.icon]}
-                    description={action.labelText}
-                  />
+                  React.createElement(icons[action.icon], {
+                    'aria-label': action.labelText,
+                    key: `icon-${action.id}`,
+                  })
                 ) : React.isValidElement(action.icon) ? (
                   action.icon
                 ) : (
-                  <Icon
-                    key={`icon-${action.id}`}
-                    icon={action.icon}
-                    description={action.labelText}
-                  />
+                  <action.icon aria-label={action.labelText} key={`icon-${action.id}`} />
                 )}
               </div>
             ) : (