fix(datatoolbar): finish rename in docs and fix context

packages/react-core/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarChipGroupContent } from './ToolbarChipGroupContent';
-import { ToolbarContentProps } from './ToolbarContent';
 
 export interface ToolbarProps extends React.HTMLProps<HTMLDivElement> {
   /** Optional callback for clearing all filters in the toolbar */
@@ -38,7 +37,6 @@ interface FilterInfo {
 
 export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   private chipGroupContentRef = React.createRef<HTMLDivElement>();
-  static hasWarnBeta = false;
   private staticFilterInfo = {};
   constructor(props: ToolbarProps) {
     super(props);
@@ -67,11 +65,6 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
     if (this.isToggleManaged()) {
       window.addEventListener('resize', this.closeExpandableContent);
     }
-    if (process.env.NODE_ENV !== 'production' && !Toolbar.hasWarnBeta) {
-      // eslint-disable-next-line no-console
-      console.warn('You are using a beta component (Toolbar). These api parts are subject to change in the future.');
-      Toolbar.hasWarnBeta = true;
-    }
   }
 
   componentWillUnmount() {
@@ -96,7 +89,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       clearAllFilters,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
-      isExpanded,
+      isExpanded: isExpandedProp,
       toggleIsExpanded,
       className,
       children,
@@ -107,35 +100,28 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
     const { isManagedToggleExpanded } = this.state;
 
     const isToggleManaged = this.isToggleManaged();
+    const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp;
     const numberOfFilters = this.getNumberOfFilters();
     const showClearFiltersButton = numberOfFilters > 0;
 
     return (
       <div className={css(styles.toolbar, className)} id={id} {...props}>
         <ToolbarContext.Provider
           value={{
-            isExpanded: this.isToggleManaged() ? isManagedToggleExpanded : isExpanded,
+            isExpanded,
             toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
             chipGroupContentRef: this.chipGroupContentRef,
             updateNumberFilters: this.updateNumberFilters,
-            numberOfFilters
+            numberOfFilters,
+            clearAllFilters,
+            clearFiltersButtonText,
+            showClearFiltersButton,
+            toolbarId: id
           }}
         >
-          {React.Children.map(children, (child: any) => {
-            if (React.isValidElement(child)) {
-              return React.cloneElement<ToolbarContentProps>(child, {
-                clearAllFilters,
-                clearFiltersButtonText,
-                showClearFiltersButton,
-                isExpanded: isToggleManaged ? isManagedToggleExpanded : isExpanded,
-                toolbarId: id
-              });
-            } else {
-              return child;
-            }
-          })}
+          {children}
           <ToolbarChipGroupContent
-            isExpanded={isToggleManaged ? isManagedToggleExpanded : isExpanded}
+            isExpanded={isExpanded}
             chipGroupContentRef={this.chipGroupContentRef}
             clearAllFilters={clearAllFilters}
             showClearFiltersButton={showClearFiltersButton}

packages/react-core/src/components/Toolbar/ToolbarContent.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-
-import { ToolbarBreakpointMod, ToolbarContentContext } from './ToolbarUtils';
+import { ToolbarBreakpointMod, ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { formatBreakpointMods } from '../../helpers/util';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
@@ -49,28 +48,39 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       ...props
     } = this.props;
 
-    const expandableContentId = `${toolbarId}-expandable-content-${ToolbarContent.currentId++}`;
-
     return (
       <div className={css(styles.toolbarContent, formatBreakpointMods(breakpointMods, styles), className)} {...props}>
-        <ToolbarContentContext.Provider
-          value={{
-            expandableContentRef: this.expandableContentRef,
-            expandableContentId,
-            chipContainerRef: this.chipContainerRef
+        <ToolbarContext.Consumer>
+          {({
+            clearAllFilters: clearAllFiltersContext,
+            clearFiltersButtonText: clearFiltersButtonContext,
+            showClearFiltersButton: showClearFiltersButtonContext,
+            toolbarId: toolbarIdContext
+          }) => {
+            const expandableContentId = `${toolbarId ||
+              toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+            return (
+              <ToolbarContentContext.Provider
+                value={{
+                  expandableContentRef: this.expandableContentRef,
+                  expandableContentId,
+                  chipContainerRef: this.chipContainerRef
+                }}
+              >
+                <div className={css(styles.toolbarContentSection)}>{children}</div>
+                <ToolbarExpandableContent
+                  id={expandableContentId}
+                  isExpanded={isExpanded}
+                  expandableContentRef={this.expandableContentRef}
+                  chipContainerRef={this.chipContainerRef}
+                  clearAllFilters={clearAllFilters || clearAllFiltersContext}
+                  showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
+                  clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
+                />
+              </ToolbarContentContext.Provider>
+            );
           }}
-        >
-          <div className={css(styles.toolbarContentSection)}>{children}</div>
-          <ToolbarExpandableContent
-            id={expandableContentId}
-            isExpanded={isExpanded}
-            expandableContentRef={this.expandableContentRef}
-            chipContainerRef={this.chipContainerRef}
-            clearAllFilters={clearAllFilters}
-            showClearFiltersButton={showClearFiltersButton}
-            clearFiltersButtonText={clearFiltersButtonText}
-          />
-        </ToolbarContentContext.Provider>
+        </ToolbarContext.Consumer>
       </div>
     );
   }

packages/react-core/src/components/Toolbar/ToolbarUtils.tsx

@@ -12,14 +12,19 @@ interface ToolbarContextProps {
   chipGroupContentRef: RefObject<HTMLDivElement>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
+  clearAllFilters?: () => void;
+  clearFiltersButtonText?: string;
+  showClearFiltersButton?: boolean;
+  toolbarId?: string;
 }
 
-export const ToolbarContext = React.createContext<Partial<ToolbarContextProps>>({
+export const ToolbarContext = React.createContext<ToolbarContextProps>({
   isExpanded: false,
   toggleIsExpanded: () => {},
   chipGroupContentRef: null,
   updateNumberFilters: () => {},
-  numberOfFilters: 0
+  numberOfFilters: 0,
+  clearAllFilters: () => {}
 });
 
 interface ToolbarContentContextProps {
@@ -28,7 +33,7 @@ interface ToolbarContentContextProps {
   chipContainerRef: RefObject<any>;
 }
 
-export const ToolbarContentContext = React.createContext<Partial<ToolbarContentContextProps>>({
+export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
   chipContainerRef: null

packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap

@@ -11,21 +11,18 @@ exports[`Toolbar should match snapshot (auto-generated) 1`] = `
         "chipGroupContentRef": Object {
           "current": null,
         },
+        "clearAllFilters": [Function],
+        "clearFiltersButtonText": "string",
         "isExpanded": true,
         "numberOfFilters": 0,
+        "showClearFiltersButton": false,
         "toggleIsExpanded": [Function],
+        "toolbarId": "string",
         "updateNumberFilters": [Function],
       }
     }
   >
-    <div
-      clearAllFilters={[Function]}
-      clearFiltersButtonText="string"
-      isExpanded={true}
-      key=".0"
-      showClearFiltersButton={false}
-      toolbarId="string"
-    >
+    <div>
       ReactNode
     </div>
     <ToolbarChipGroupContent

packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap

@@ -4,43 +4,8 @@ exports[`ToolbarContent should match snapshot (auto-generated) 1`] = `
 <div
   className="pf-c-toolbar__content string"
 >
-  <ContextProvider
-    value={
-      Object {
-        "chipContainerRef": Object {
-          "current": null,
-        },
-        "expandableContentId": "string-expandable-content-0",
-        "expandableContentRef": Object {
-          "current": null,
-        },
-      }
-    }
-  >
-    <div
-      className="pf-c-toolbar__content-section"
-    >
-      <div>
-        ReactNode
-      </div>
-    </div>
-    <ToolbarExpandableContent
-      chipContainerRef={
-        Object {
-          "current": null,
-        }
-      }
-      clearAllFilters={[Function]}
-      clearFiltersButtonText="string"
-      expandableContentRef={
-        Object {
-          "current": null,
-        }
-      }
-      id="string-expandable-content-0"
-      isExpanded={false}
-      showClearFiltersButton={false}
-    />
-  </ContextProvider>
+  <ContextConsumer>
+    <Component />
+  </ContextConsumer>
 </div>
 `;

packages/react-core/src/components/Toolbar/examples/DataToolbar.md → packages/react-core/src/components/Toolbar/examples/Toolbar.md

@@ -2,7 +2,7 @@
 title: 'Toolbar'
 cssPrefix: 'pf-c-toolbar'
 typescript: true
-propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarItem', 'ToolbarGroup', 'ToolbarToggleGroup', 'ToolbarFilter']
+propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarItem', 'ToolbarToggleGroup', 'ToolbarFilter']
 section: 'components'
 ---
 
@@ -45,6 +45,7 @@ class ToolbarItems extends React.Component {
 }
 
 ```
+
 ```js title=Adjusting-item-spacers
 import React from 'react';
 import { Toolbar , ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
@@ -271,7 +272,7 @@ A toggle group can be used when you want to collapse a set of items into an over
 The Toggle group can either have the toggle state managed by the consumer, or the component.
 
   - The first Toggle group example below demonstrates a component managed toggle state.
-```js title=Component-managed-toggle-groups beta
+```js title=Component-managed-toggle-groups
 import React from 'react';
 import { Toolbar , ToolbarItem, ToolbarContent, ToolbarToggleGroup, ToolbarGroup } from '@patternfly/react-core';
 import { Button, ButtonVariant, InputGroup, Select, SelectOption, TextInput } from '@patternfly/react-core';
@@ -418,7 +419,7 @@ The second Toggle group example below demonstrates a consumer managed toggle sta
 
 - Note: Although the toggle group is aware of the consumer provided breakpoint, the expandable content is not. So if the expandable content is expanded and the screen width surpasses that of the breakpoint, then the expandable content will not know that and will remain open, this case should be considered and handled by the consumer as well.
 
-```js title=Consumer-managed-toggle-groups beta
+```js title=Consumer-managed-toggle-groups
 import React from 'react';
 import { Toolbar , ToolbarItem, ToolbarContent, ToolbarToggleGroup, ToolbarGroup } from '@patternfly/react-core';
 import { Button, ButtonVariant, InputGroup, Select, SelectOption } from '@patternfly/react-core';
@@ -576,7 +577,7 @@ class ToolbarConsumerMangedToggleGroup extends React.Component {
 The ToolbarFilter component expects a consumer managed list of applied filters and a delete chip handler to be passed as props. Pass a deleteChipGroup prop to provide both a handler and visual styling to remove all chips in a group. Then the rendering of chips will be handled responsively by the Toolbar
 When filters are applied, the toolbar will expand in height to make space for a row of filter chips. Upon clearing the applied filters, the toolbar will collapse to its default height.
 
-```js title=Data-toolbar-with-filters beta
+```js title=Data-toolbar-with-filters
 import React from 'react';
 import {
     Toolbar,
@@ -822,10 +823,10 @@ class ToolbarWithFilterExample extends React.Component {
 
 There may be situations where all of the required elements simply cannot fit in a single line.
 
-```js title=Stacked-example beta
+```js title=Stacked-example
 import React from 'react';
 import { Toolbar, ToolbarContent, ToolbarToggleGroup, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
-import { Button, Select, SelectOption, Pagination, Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem } from '@patternfly/react-core';
+import { Button, Select, SelectOption, Pagination, Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem, Divider } from '@patternfly/react-core';
 import { FilterIcon, CloneIcon, SyncIcon } from '@patternfly/react-icons'
 
 class ToolbarStacked extends React.Component {
@@ -1056,7 +1057,7 @@ class ToolbarStacked extends React.Component {
 
     return <Toolbar id="toolbar-group-types">
       <ToolbarContent className='pf-m-toggle-group-container'>{firstRowItems}</ToolbarContent>
-      <hr className="pf-c-divider"/>
+      <Divider />
       <ToolbarContent>{secondRowItems}</ToolbarContent>
     </Toolbar>;
   }

packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap

@@ -85,9 +85,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
         <ToolbarContent
           breakpointMods={Array []}
           isExpanded={false}
-          key=".0"
           showClearFiltersButton={false}
-          toolbarId="pf-topology-control-bar-1"
         >
           <div
             className="pf-c-toolbar__content"
@@ -836,9 +834,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] =
         <ToolbarContent
           breakpointMods={Array []}
           isExpanded={false}
-          key=".0"
           showClearFiltersButton={false}
-          toolbarId="pf-topology-control-bar-0"
         >
           <div
             className="pf-c-toolbar__content"