chore(components): remove deprecated components (#1606)

* chore(components): remove deprecated components Refs carbon-design-system/carbon#1501. * chore(test): move describeBreakingChangesXFeatures() to setup * chore: some cleanup * chore: resolve merge conflict
carbon-design-system · Feb 21, 2019 · 64f81a5 · 64f81a5
1 parent 7323f86
commit 64f81a5
Show file tree

Hide file tree

Showing 31 changed files with 232 additions and 186 deletions.
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -5,6 +5,8 @@ const TerserPlugin = require('terser-webpack-plugin');
 const useExperimentalFeatures =
   process.env.CARBON_USE_EXPERIMENTAL_FEATURES === 'true';
 
+const useBreakingChanges = process.env.CARBON_USE_BREAKING_CHANGES === 'true';
+
 const useExternalCss =
   process.env.CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS === 'true';
 
@@ -13,6 +15,7 @@ const useStyleSourceMap =
 
 const replaceTable = {
   componentsX: useExperimentalFeatures,
+  breakingChangesX: useBreakingChanges,
 };
 
 const styleLoaders = [
@@ -41,6 +44,7 @@ const styleLoaders = [
       data: `
         $feature-flags: (
           components-x: ${useExperimentalFeatures},
+          breaking-changes-x: ${useBreakingChanges},
           grid: ${useExperimentalFeatures},
           ui-shell: true,
         );

diff --git a/README.md b/README.md
@@ -52,10 +52,10 @@ We recommend the use of [React Storybook](https://github.com/storybooks/react-st
 
 1. (Optional) Set environment variables:
 
-   - `true` to `CARBON_USE_EXPERIMENTAL_FEATURES` environment variable to test some of the experimental features:
+   - `true` to `CARBON_USE_BREAKING_CHANGES` environment variable to test some of the breaking changes for the next release:
 
      ```
-     $ export CARBON_USE_EXPERIMENTAL_FEATURES=true
+     $ export CARBON_USE_BREAKING_CHANGES=true
      ```
 
    - `true` to `CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS` environment variable to use external CSS, making style source link usable in DOM inspector:

diff --git a/config/jest/setup.js b/config/jest/setup.js
@@ -4,8 +4,20 @@ jest.unmock('promise');
 jest.unmock('whatwg-fetch');
 jest.unmock('object-assign');
 
+import { breakingChangesX } from '../../src/internal/FeatureFlags';
+
 global.__DEV__ = true;
 
+global.describeBreakingChangesXFeatures = (name, callback) => {
+  if (!breakingChangesX) {
+    describe(name, callback);
+  } else {
+    describe(name, () => {
+      it('dummy', () => {});
+    });
+  }
+};
+
 require('../polyfills');
 
 const enzyme = require.requireActual('enzyme');

diff --git a/package.json b/package.json
@@ -110,7 +110,8 @@
       "jasmine": true
     },
     "globals": {
-      "__DEV__": true
+      "__DEV__": true,
+      "describeBreakingChangesXFeatures": true
     },
     "settings": {
       "jsdoc": {

diff --git a/src/components/Dropdown/Dropdown-story.js b/src/components/Dropdown/Dropdown-story.js
@@ -10,6 +10,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 import {
   withKnobs,
@@ -77,49 +78,51 @@ const props = {
   }),
 };
 
-storiesOf('Dropdown', module)
-  .addDecorator(withKnobs)
-  .addDecorator(story => <div style={{ minWidth: '20em' }}>{story()}</div>)
-  .add(
-    'Default',
-    () => {
-      const dropdownItemProps = props.dropdownItem();
-      return (
-        <Dropdown {...props.dropdown()}>
-          <DropdownItem
-            itemText="Option 1"
-            value="option1"
-            {...dropdownItemProps}
-          />
-          <DropdownItem
-            itemText="Option 2"
-            value="option2"
-            {...dropdownItemProps}
-          />
-          <DropdownItem
-            itemText="Option 3"
-            value="option3"
-            {...dropdownItemProps}
-          />
-          <DropdownItem
-            itemText="Option 4"
-            value="option4"
-            {...dropdownItemProps}
-          />
-          <DropdownItem
-            itemText="Option 5"
-            value="option5"
-            {...dropdownItemProps}
-          />
-        </Dropdown>
-      );
-    },
-    {
-      info: {
-        text: `
-            The Dropdown component is used for navigating or filtering existing content.
-            Create Dropdown Item components for each option in the dropdown menu.
-          `,
+if (!breakingChangesX) {
+  storiesOf('Dropdown', module)
+    .addDecorator(withKnobs)
+    .addDecorator(story => <div style={{ minWidth: '20em' }}>{story()}</div>)
+    .add(
+      'Default',
+      () => {
+        const dropdownItemProps = props.dropdownItem();
+        return (
+          <Dropdown {...props.dropdown()}>
+            <DropdownItem
+              itemText="Option 1"
+              value="option1"
+              {...dropdownItemProps}
+            />
+            <DropdownItem
+              itemText="Option 2"
+              value="option2"
+              {...dropdownItemProps}
+            />
+            <DropdownItem
+              itemText="Option 3"
+              value="option3"
+              {...dropdownItemProps}
+            />
+            <DropdownItem
+              itemText="Option 4"
+              value="option4"
+              {...dropdownItemProps}
+            />
+            <DropdownItem
+              itemText="Option 5"
+              value="option5"
+              {...dropdownItemProps}
+            />
+          </Dropdown>
+        );
       },
-    }
-  );
+      {
+        info: {
+          text: `
+              The Dropdown component is used for navigating or filtering existing content.
+              Create Dropdown Item components for each option in the dropdown menu.
+            `,
+        },
+      }
+    );
+}
diff --git a/src/components/Dropdown/Dropdown-test.js b/src/components/Dropdown/Dropdown-test.js
@@ -13,7 +13,7 @@ import Icon from '../Icon';
 import ClickListener from '../../internal/ClickListener';
 import { shallow, mount } from 'enzyme';
 
-describe('Dropdown', () => {
+describeBreakingChangesXFeatures('Dropdown', () => {
   describe('Renders as expected', () => {
     const wrapper = shallow(
       <Dropdown className="extra-class" defaultText="Choose something.." />

diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.js
@@ -11,14 +11,15 @@ import classNames from 'classnames';
 import warning from 'warning';
 import { iconCaretDown } from 'carbon-icons';
 import { settings } from 'carbon-components';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 import ClickListener from '../../internal/ClickListener';
 import Icon from '../Icon';
 
 const { prefix } = settings;
 
 let didWarnAboutDeprecation = false;
 
-export default class Dropdown extends PureComponent {
+class Dropdown extends PureComponent {
   static propTypes = {
     /**
      * Specify a label to be read by screen readers on the container node
@@ -267,3 +268,5 @@ export default class Dropdown extends PureComponent {
     return dropdown;
   }
 }
+
+export default (!breakingChangesX ? Dropdown : null);
diff --git a/src/components/DropdownItem/DropdownItem-test.js b/src/components/DropdownItem/DropdownItem-test.js
@@ -9,7 +9,7 @@ import React from 'react';
 import DropdownItem from '../DropdownItem';
 import { mount } from 'enzyme';
 
-describe('DropdownItem', () => {
+describeBreakingChangesXFeatures('DropdownItem', () => {
   describe('Renders as expected', () => {
     const wrapper = mount(
       <DropdownItem className="extra-class" itemText="test" value="test" />

diff --git a/src/components/DropdownItem/DropdownItem.js b/src/components/DropdownItem/DropdownItem.js
@@ -10,6 +10,7 @@ import React from 'react';
 import classNames from 'classnames';
 import warning from 'warning';
 import { settings } from 'carbon-components';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
@@ -123,4 +124,4 @@ DropdownItem.defaultProps = {
   selected: false,
 };
 
-export default DropdownItem;
+export default (!breakingChangesX ? DropdownItem : null);
diff --git a/src/components/Pagination/Pagination-story.js b/src/components/Pagination/Pagination-story.js
@@ -8,6 +8,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 import {
   withKnobs,
@@ -46,7 +47,7 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-storiesOf('Pagination', module)
+const story = storiesOf('Pagination', module)
   .addDecorator(withKnobs)
   .addDecorator(story => <div style={{ width: '800px' }}>{story()}</div>)
   .add('v2', () => <PaginationV2 {...props()} />, {
@@ -55,27 +56,31 @@ storiesOf('Pagination', module)
             V2 version of the Pagination
           `,
     },
-  })
-  .add('v1', () => <Pagination {...props()} />, {
-    info: {
-      text: `
+  });
+
+if (!breakingChangesX) {
+  story
+    .add('v1', () => <Pagination {...props()} />, {
+      info: {
+        text: `
             The pagination component is used to paginate through items.
           `,
-    },
-  })
-  .add(
-    'multipe pagination components',
-    () => {
-      return (
-        <div>
-          <Pagination {...props()} />
-          <Pagination {...props()} />
-        </div>
-      );
-    },
-    {
-      info: {
-        text: `Showcasing unique ids for each pagination component`,
       },
-    }
-  );
+    })
+    .add(
+      'multipe pagination components',
+      () => {
+        return (
+          <div>
+            <Pagination {...props()} />
+            <Pagination {...props()} />
+          </div>
+        );
+      },
+      {
+        info: {
+          text: `Showcasing unique ids for each pagination component`,
+        },
+      }
+    );
+}
diff --git a/src/components/Pagination/Pagination-test.js b/src/components/Pagination/Pagination-test.js
@@ -15,7 +15,7 @@ import { shallow, mount } from 'enzyme';
 
 jest.useFakeTimers();
 
-describe('Pagination', () => {
+describeBreakingChangesXFeatures('Pagination', () => {
   describe('renders as expected', () => {
     const pagination = shallow(
       <Pagination className="extra-class" pageSizes={[5, 10]} totalItems={50} />

diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
@@ -12,6 +12,7 @@ import debounce from 'lodash.debounce';
 import warning from 'warning';
 import { iconChevronLeft, iconChevronRight } from 'carbon-icons';
 import { settings } from 'carbon-components';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 import Icon from '../Icon';
 import Select from '../Select';
 import SelectItem from '../SelectItem';
@@ -22,7 +23,7 @@ const { prefix } = settings;
 
 let didWarnAboutDeprecation = false;
 
-export default class Pagination extends Component {
+class Pagination extends Component {
   static propTypes = {
     /**
      * The description for the backward icon.
@@ -373,3 +374,5 @@ export default class Pagination extends Component {
     );
   }
 }
+
+export default (!breakingChangesX ? Pagination : null);