diff --git a/packages/react-core/src/components/Toolbar/Toolbar.tsx b/packages/react-core/src/components/Toolbar/Toolbar.tsx index 941f08ce187..f7badeec6d7 100644 --- a/packages/react-core/src/components/Toolbar/Toolbar.tsx +++ b/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 { /** Optional callback for clearing all filters in the toolbar */ @@ -38,7 +37,6 @@ interface FilterInfo { export class Toolbar extends React.Component { private chipGroupContentRef = React.createRef(); - static hasWarnBeta = false; private staticFilterInfo = {}; constructor(props: ToolbarProps) { super(props); @@ -67,11 +65,6 @@ export class Toolbar extends React.Component { 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 { clearAllFilters, clearFiltersButtonText, collapseListedFiltersBreakpoint, - isExpanded, + isExpanded: isExpandedProp, toggleIsExpanded, className, children, @@ -107,6 +100,7 @@ export class Toolbar extends React.Component { const { isManagedToggleExpanded } = this.state; const isToggleManaged = this.isToggleManaged(); + const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp; const numberOfFilters = this.getNumberOfFilters(); const showClearFiltersButton = numberOfFilters > 0; @@ -114,28 +108,20 @@ export class Toolbar extends React.Component {
- {React.Children.map(children, (child: any) => { - if (React.isValidElement(child)) { - return React.cloneElement(child, { - clearAllFilters, - clearFiltersButtonText, - showClearFiltersButton, - isExpanded: isToggleManaged ? isManagedToggleExpanded : isExpanded, - toolbarId: id - }); - } else { - return child; - } - })} + {children} { ...props } = this.props; - const expandableContentId = `${toolbarId}-expandable-content-${ToolbarContent.currentId++}`; - return (
- + {({ + clearAllFilters: clearAllFiltersContext, + clearFiltersButtonText: clearFiltersButtonContext, + showClearFiltersButton: showClearFiltersButtonContext, + toolbarId: toolbarIdContext + }) => { + const expandableContentId = `${toolbarId || + toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`; + return ( + +
{children}
+ + + ); }} - > -
{children}
- - +
); } diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx index f47e248f604..86a7a54b2b1 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx @@ -12,14 +12,19 @@ interface ToolbarContextProps { chipGroupContentRef: RefObject; updateNumberFilters: (categoryName: string, numberOfFilters: number) => void; numberOfFilters: number; + clearAllFilters?: () => void; + clearFiltersButtonText?: string; + showClearFiltersButton?: boolean; + toolbarId?: string; } -export const ToolbarContext = React.createContext>({ +export const ToolbarContext = React.createContext({ isExpanded: false, toggleIsExpanded: () => {}, chipGroupContentRef: null, updateNumberFilters: () => {}, - numberOfFilters: 0 + numberOfFilters: 0, + clearAllFilters: () => {} }); interface ToolbarContentContextProps { @@ -28,7 +33,7 @@ interface ToolbarContentContextProps { chipContainerRef: RefObject; } -export const ToolbarContentContext = React.createContext>({ +export const ToolbarContentContext = React.createContext({ expandableContentRef: null, expandableContentId: '', chipContainerRef: null diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap index 3740930e0af..41362db75e0 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/Toolbar.test.tsx.snap +++ b/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], } } > -
+
ReactNode
- -
-
- ReactNode -
-
- - + + +
`; diff --git a/packages/react-core/src/components/Toolbar/examples/DataToolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md similarity index 98% rename from packages/react-core/src/components/Toolbar/examples/DataToolbar.md rename to packages/react-core/src/components/Toolbar/examples/Toolbar.md index 110424aefc9..f1ca1c03c2f 100644 --- a/packages/react-core/src/components/Toolbar/examples/DataToolbar.md +++ b/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 {firstRowItems} -
+ {secondRowItems} ; } diff --git a/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap b/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap index 92367f6481d..3e41109a592 100644 --- a/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap +++ b/packages/react-topology/src/components/TopologyControlBar/__snapshots__/TopologyControlBar.test.tsx.snap @@ -85,9 +85,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = `
- +
- +
- +
- +