feat(components): remove deprecated props

BREAKING CHANGE:
The AutoCompleteInput's `defaultSelectedItem` prop has been renamed to `initialSelectedItem` to
match Downshift's API.

alpha

src/components/AutoCompleteInput/AutoCompleteInput.js

@@ -23,10 +23,7 @@ import { includes, isString, isEmpty } from 'lodash/fp';
 import SearchInput from '../SearchInput';
 import Card from '../Card';
 import Text from '../Text';
-import {
-  childrenPropType,
-  deprecatedPropType
-} from '../../util/shared-prop-types';
+import { childrenPropType } from '../../util/shared-prop-types';
 
 const MIN_INPUT_LENGTH = 2;
 
@@ -116,8 +113,8 @@ export default class AutoCompleteInput extends Component {
      */
     onInputValueChange: PropTypes.func,
     /**
-     * A function that receives all items and the current input value
-     * and returns the filtered items.
+     * A function that receives all options and the current input value
+     * and returns the filtered options.
      */
     filterOptions: PropTypes.func,
     /**
@@ -137,29 +134,9 @@ export default class AutoCompleteInput extends Component {
      */
     defaultInputValue: PropTypes.string,
     /**
-     * Pass an item or an array of items that should be selected by default.
+     * Pass an option or an array of options that should be selected by default.
      */
-    initialSelectedItem: PropTypes.string,
-    /**
-     * @deprecated
-     */
-    showClear: deprecatedPropType(
-      PropTypes.bool,
-      [
-        'The "showClear" prop has been deprecated.',
-        `Use the "onClear" callback prop instead.`
-      ].join(' ')
-    ),
-    /**
-     * @deprecated
-     */
-    items: deprecatedPropType(
-      optionsPropType,
-      [
-        'The "items" prop has been deprecated.',
-        `Use the "options" prop instead.`
-      ].join(' ')
-    )
+    initialSelectedItem: PropTypes.string
   };
 
   static defaultProps = {
@@ -195,8 +172,7 @@ export default class AutoCompleteInput extends Component {
 
   render() {
     const {
-      items,
-      options = items,
+      options,
       onChange,
       clearOnSelect,
       onInputValueChange,
@@ -205,11 +181,10 @@ export default class AutoCompleteInput extends Component {
       defaultInputValue,
       initialSelectedItem,
       onClear,
-      showClear,
       ...inputProps
     } = this.props;
 
-    const handleClear = showClear || onClear ? this.handleClear : null;
+    const handleClear = onClear ? this.handleClear : null;
 
     return (
       <Downshift

src/components/Tag/Tag.docs.mdx

@@ -9,7 +9,6 @@ Tags enable the user to add or remove attributes to a given content, for
 example: transaction history for a given day or week.
 
 <Story id="components-tag--base" />
-
 <Props of={Tag} />
 
 ## Best practices
@@ -33,15 +32,11 @@ example: transaction history for a given day or week.
 
 <Story id="components-tag--selected" />
 
-### With icon
-
-<Story id="components-tag--with-icon" />
-
-### With prefix 
+### With prefix
 
 <Story id="components-tag--with-prefix" />
 
-### With suffix 
+### With suffix
 
 <Story id="components-tag--with-suffix" />
 

src/components/Tag/Tag.js

@@ -20,8 +20,7 @@ import { css } from '@emotion/core';
 
 import {
   eitherOrPropType,
-  childrenPropType,
-  deprecatedPropType
+  childrenPropType
 } from '../../util/shared-prop-types';
 import { textMega, shadowBorder } from '../../styles/style-helpers';
 import CloseButton from '../CloseButton';
@@ -121,42 +120,11 @@ const StyledCloseButton = styled(CloseButton)`
   ${selectedCloseButtonStyles};
 `;
 
-/*
-  The IconContainer and its styles are left as they are for backwards compatibility.
-  They should be deleted in v2.0 when we remove the icon prop.
-*/
-const iconStyles = ({ theme }) => css`
-  label: tag__icon;
-  margin-right: ${theme.spacings.bit};
-  display: inline-block;
-  width: ${theme.spacings.mega};
-  height: ${theme.spacings.mega};
-  vertical-align: middle;
-  > svg {
-    vertical-align: top;
-  }
-`;
-
-const iconSelectedStyles = ({ selected, theme }) =>
-  selected &&
-  css`
-    label: tag__icon--selected;
-    > svg {
-      fill: ${theme.colors.white};
-    }
-  `;
-
-const IconContainer = styled('span')`
-  ${iconStyles};
-  ${iconSelectedStyles};
-`;
-
 /**
  * Tag component
  */
 const Tag = ({
   children,
-  icon,
   prefix: Prefix,
   suffix: Suffix,
   onRemove,
@@ -179,11 +147,7 @@ const Tag = ({
 
   return (
     <TagElement {...{ selected, ...props }}>
-      {!onRemove && icon && (
-        <IconContainer {...{ selected }}>{icon}</IconContainer>
-      )}
-
-      {!icon && !onRemove && prefixElement}
+      {prefixElement}
 
       {children}
 
@@ -196,7 +160,7 @@ const Tag = ({
         />
       )}
 
-      {!onRemove && !icon && suffixElement}
+      {!onRemove && suffixElement}
     </TagElement>
   );
 };
@@ -206,18 +170,10 @@ Tag.propTypes = {
    * The content of the tag.
    */
   children: childrenPropType,
-  /**
-   * @deprecated
-   * An optional  tag's icon.
-   */
-  icon: deprecatedPropType(
-    eitherOrPropType('icon', 'onRemove', PropTypes.element),
-    'The icon prop has been deprecated in favour of the prefix prop.'
-  ),
   /**
    * Render prop that should render a left-aligned icon or element.
    */
-  prefix: eitherOrPropType('prefix', 'onRemove', PropTypes.func),
+  prefix: PropTypes.func,
   /**
    * Render prop that should render a right-aligned icon or element.
    */
@@ -226,7 +182,7 @@ Tag.propTypes = {
    * Renders a close button inside the tag and calls the provided function
    * when the button is clicked.
    */
-  onRemove: eitherOrPropType('icon', 'onRemove', PropTypes.func),
+  onRemove: eitherOrPropType('suffix', 'onRemove', PropTypes.func),
   /**
    * Text label for the remove icon for screen readers.
    * Important for accessibility.
@@ -240,7 +196,6 @@ Tag.propTypes = {
 
 Tag.defaultProps = {
   children: null,
-  icon: null,
   prefix: null,
   suffix: null,
   onRemove: null,

src/components/Tag/Tag.spec.js

@@ -54,7 +54,7 @@ describe('Tag', () => {
 
     it('should change the given icon color', () => {
       const component = create(
-        <Tag {...{ icon: <DummyIcon />, ...props }}>SomeTest</Tag>
+        <Tag {...{ prefix: <DummyIcon />, ...props }}>SomeTest</Tag>
       );
       expect(component).toMatchSnapshot();
     });
@@ -103,7 +103,7 @@ describe('Tag', () => {
 
   describe('when it has an icon', () => {
     const props = {
-      icon: <DummyIcon data-testid="tag-icon" />
+      prefix: <DummyIcon data-testid="tag-icon" />
     };
 
     it('should render with icon', () => {
@@ -136,7 +136,9 @@ describe('Tag', () => {
   describe('when a prefix prop is passed', () => {
     const props = {
       // eslint-disable-next-line
-      prefix: ({ className }) => <DummyIcon className={className} data-testid="tag-icon" />
+      prefix: ({ className }) => (
+        <DummyIcon className={className} data-testid="tag-icon" />
+      )
     };
 
     it('should render with a prefix', () => {
@@ -168,7 +170,9 @@ describe('Tag', () => {
   describe('when a suffix prop is passed', () => {
     const props = {
       // eslint-disable-next-line
-      suffix: ({ className }) => <DummyIcon className={className} data-testid="tag-icon" />
+      suffix: ({ className }) => (
+        <DummyIcon className={className} data-testid="tag-icon" />
+      )
     };
 
     it('should render with a suffix', () => {

src/components/Tag/Tag.story.js

@@ -34,7 +34,8 @@ export const base = () => (
   <Tag
     selected={boolean('Selected', false)}
     onRemove={boolean('Removable', false) ? action('Tag removed') : null}
-    icon={boolean('With Icon', false) ? <Icon /> : null}
+    prefix={boolean('Prefix', false) ? <Icon /> : null}
+    suffix={boolean('Suffix', false) ? <Icon /> : null}
     onClick={boolean('Clickable', false) ? action('Tag clicked') : null}
   >
     Transactions
@@ -43,12 +44,6 @@ export const base = () => (
 
 export const selected = () => <Tag selected>Transactions</Tag>;
 
-export const withIcon = () => (
-  <Tag selected icon={<Icon />}>
-    Transactions
-  </Tag>
-);
-
 export const withPrefix = () => <Tag prefix={Icon}>Transactions</Tag>;
 
 export const withSuffix = () => <Tag suffix={Icon}>Transactions</Tag>;