chore(top-app-bar): deprecate render props (#915)

BREAKING CHANGE: Top App Bar render props removed

Author: mgr34

packages/top-app-bar/README.md

@@ -84,17 +84,6 @@ scrollTarget | React.RefObject | Sets scroll target to different DOM node (defau
 tag | String | Customizes the `TopAppBar` HTML tag.  (default: `<header>`)
 > NOTES: As per design guidelines, prominent and dense variants should not be used with short or short collapsed. Additionally, dense variants should only be used on desktop. Additionally short top-app-bars should be used with no more than 1 action item.
 
-#### Deprecated TopAppBar Props
-
-The following props are deprecated since v0.11.0 and are scheduled for removal in v0.13.0.
-They will still render as expected until v0.13.0, but will output a warning to the console.
-
-Prop Name | Type | Description
---- | --- | ---
-actionItems | Array | Accepts an array of elements that should be rendered to the opposite side of the title. Note that a single action item should also be passed as an array.
-navigationIcon | Element | Appears adjacent to the title. This acts as the main action of the Top App Bar.
-title | String | The Title of the Top App Bar.
-
 ### TopAppBarRow
 Prop Name | Type | Description
 --- | --- | ---

packages/top-app-bar/index.tsx

@@ -39,16 +39,7 @@ export type MDCTopAppBarFoundationTypes =
   | MDCTopAppBarFoundation
   | MDCShortTopAppBarFoundation;
 
-/**
- * @deprecated since 0.11.0. Will be deleted in 0.13.0
- */
-interface DeprecatedProps {
-  actionItems?: React.ReactElement<any>[];
-  navigationIcon?: React.ReactElement<any>;
-  title?: string;
-}
-
-export interface TopAppBarProps<T> extends React.HTMLProps<T>, DeprecatedProps {
+export interface TopAppBarProps<T> extends React.HTMLProps<T> {
   className?: string;
   dense?: boolean;
   fixed?: boolean;
@@ -162,19 +153,6 @@ class TopAppBar<
     this.foundation.init();
   };
 
-  /**
-   * @deprecated since 0.11.0. Will be deleted in 0.13.0
-   */
-  addClassesToElement /* istanbul ignore next */(
-    classes: string,
-    element: React.ReactElement<any>
-  ) {
-    const updatedProps = {
-      className: classnames(classes, element.props.className),
-    };
-    return React.cloneElement(element, updatedProps);
-  }
-
   getMergedStyles = () => {
     const {style} = this.state;
     return Object.assign({}, style, this.props.style);
@@ -266,41 +244,10 @@ class TopAppBar<
       prominent,
       scrollTarget,
       tag: Tag,
-      actionItems,
-      navigationIcon,
-      title,
       ...otherProps
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
 
-    /**
-     * @deprecated since 0.11.0. Will be deleted in 0.13.0
-     */
-    /* istanbul ignore if */
-    if (actionItems || navigationIcon || title) {
-      // TODO(mgr34): remove all deprecated statements and istanbul ignore's for v0.13.0
-      const warning =
-        'actionItems, navigationIcon, and title  are deprecated  ' +
-        'since v0.11.0 and will be removed in v0.13.0. Please refer to ' +
-        'https://github.com/material-components/material-components-web-react' +
-        '/blob/master/packages/top-app-bar/README.md';
-      console.warn(warning);
-      return (
-        // @ts-ignore Tag does not have any construct https://github.com/Microsoft/TypeScript/issues/28892
-        <Tag
-          {...otherProps}
-          className={this.classes}
-          style={this.getMergedStyles()}
-          ref={this.topAppBarElement}
-        >
-          <div className='mdc-top-app-bar__row'>
-            {this.renderTitleAndNavigationSection()}
-            {this.renderActionItems()}
-          </div>
-        </Tag>
-      );
-    }
-
     return (
       // @ts-ignore Tag does not have any construct https://github.com/Microsoft/TypeScript/issues/28892
       <Tag
@@ -313,59 +260,6 @@ class TopAppBar<
       </Tag>
     );
   }
-
-  /**
-   * @deprecated since 0.11.0. Will be deleted in 0.13.0
-   */
-  renderTitleAndNavigationSection /* istanbul ignore next */() {
-    const {title} = this.props;
-    const classes =
-      'mdc-top-app-bar__section mdc-top-app-bar__section--align-start';
-    return (
-      <section className={classes}>
-        {this.renderNavigationIcon()}
-        <span className='mdc-top-app-bar__title'>{title}</span>
-      </section>
-    );
-  }
-
-  /**
-   * @deprecated since 0.11.0. Will be deleted in 0.13.0
-   */
-  renderNavigationIcon /* istanbul ignore next */() {
-    const {navigationIcon} = this.props;
-    if (!navigationIcon) {
-      return;
-    }
-    return this.addClassesToElement(
-      'mdc-top-app-bar__navigation-icon',
-      navigationIcon
-    );
-  }
-
-  /**
-   * @deprecated since 0.11.0. Will be deleted in 0.13.0
-   */
-  renderActionItems /* istanbul ignore next */() {
-    const {actionItems} = this.props;
-    if (!actionItems) {
-      return;
-    }
-    return (
-      <section
-        className='mdc-top-app-bar__section mdc-top-app-bar__section--align-end'
-        role='toolbar'
-      >
-        {actionItems.map((item, key) => {
-          const elementWithClasses = this.addClassesToElement(
-            'mdc-top-app-bar__action-item',
-            item
-          );
-          return React.cloneElement(elementWithClasses, {key});
-        })}
-      </section>
-    );
-  }
 }
 
 export default TopAppBar;