diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx index e5301f1ec5a..f26fb2e9114 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx @@ -9,6 +9,14 @@ export interface ToolbarContentProps extends React.HTMLProps { /** Classes applied to root element of the data toolbar content row */ className?: string; /** Visibility at various breakpoints. */ + visibility?: { + default?: 'hidden' | 'visible'; + md?: 'hidden' | 'visible'; + lg?: 'hidden' | 'visible'; + xl?: 'hidden' | 'visible'; + '2xl'?: 'hidden' | 'visible'; + }; + /** Deprecated: prop misspelled */ visiblity?: { default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; @@ -55,6 +63,7 @@ export class ToolbarContent extends React.Component { children, isExpanded, toolbarId, + visibility, visiblity, alignment, clearAllFilters, @@ -63,11 +72,19 @@ export class ToolbarContent extends React.Component { ...props } = this.props; + if (visiblity !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'The ToolbarContent visiblity prop has been deprecated. ' + + 'Please use the correctly spelled visibility prop instead.' + ); + } + return (
, /** A type modifier which modifies spacing specifically depending on the type of group */ variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group' | 'button-group'; /** Visibility at various breakpoints. */ + visibility?: { + default?: 'hidden' | 'visible'; + md?: 'hidden' | 'visible'; + lg?: 'hidden' | 'visible'; + xl?: 'hidden' | 'visible'; + '2xl'?: 'hidden' | 'visible'; + }; + /** Deprecated: prop misspelled */ visiblity?: { default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; @@ -54,13 +62,33 @@ export interface ToolbarGroupProps extends Omit, class ToolbarGroupWithRef extends React.Component { render() { - const { visiblity, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props; + const { + visibility, + visiblity, + alignment, + spacer, + spaceItems, + className, + variant, + children, + innerRef, + ...props + } = this.props; + + if (visiblity !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'The ToolbarGroup visiblity prop has been deprecated. ' + + 'Please use the correctly spelled visibility prop instead.' + ); + } + return (
{ | 'chip-group' | 'separator'; /** Visibility at various breakpoints. */ + visibility?: { + default?: 'hidden' | 'visible'; + md?: 'hidden' | 'visible'; + lg?: 'hidden' | 'visible'; + xl?: 'hidden' | 'visible'; + '2xl'?: 'hidden' | 'visible'; + }; + /** Deprecated: prop misspelled */ visiblity?: { default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; @@ -61,6 +69,7 @@ export interface ToolbarItemProps extends React.HTMLProps { export const ToolbarItem: React.FunctionComponent = ({ className, variant, + visibility, visiblity, alignment, spacer, @@ -72,6 +81,14 @@ export const ToolbarItem: React.FunctionComponent = ({ return ; } + if (visiblity !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'The ToolbarItem visiblity prop has been deprecated. ' + + 'Please use the correctly spelled visibility prop instead.' + ); + } + return (
= ({ styles.modifiers[ toCamel(variant) as 'bulkSelect' | 'overflowMenu' | 'pagination' | 'searchFilter' | 'label' | 'chipGroup' ], - formatBreakpointMods(visiblity, styles), + formatBreakpointMods(visibility || visiblity, styles), formatBreakpointMods(alignment, styles), formatBreakpointMods(spacer, styles), className diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx index ee6865a9649..4bc849662b1 100644 --- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx +++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx @@ -15,6 +15,14 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps { /** Controls when filters are shown and when the toggle button is hidden. */ breakpoint: 'md' | 'lg' | 'xl' | '2xl'; /** Visibility at various breakpoints. */ + visibility?: { + default?: 'hidden' | 'visible'; + md?: 'hidden' | 'visible'; + lg?: 'hidden' | 'visible'; + xl?: 'hidden' | 'visible'; + '2xl'?: 'hidden' | 'visible'; + }; + /** Deprecated: prop misspelled */ visiblity?: { default?: 'hidden' | 'visible'; md?: 'hidden' | 'visible'; @@ -60,6 +68,7 @@ export class ToolbarToggleGroup extends React.Component const { toggleIcon, variant, + visibility, visiblity, breakpoint, alignment, @@ -75,6 +84,14 @@ export class ToolbarToggleGroup extends React.Component console.error('ToolbarToggleGroup will not be visible without a breakpoint or toggleIcon.'); } + if (visiblity !== undefined) { + // eslint-disable-next-line no-console + console.warn( + 'The ToolbarToggleGroup visiblity prop has been deprecated. ' + + 'Please use the correctly spelled visibility prop instead.' + ); + } + return ( {({ isExpanded, toggleIsExpanded }) => ( @@ -102,7 +119,7 @@ export class ToolbarToggleGroup extends React.Component | 'showOnXl' | 'showOn_2xl' ], - formatBreakpointMods(visiblity, styles), + formatBreakpointMods(visibility || visiblity, styles), formatBreakpointMods(alignment, styles), formatBreakpointMods(spacer, styles), formatBreakpointMods(spaceItems, styles), diff --git a/packages/react-integration/demo-app-ts/src/Demos.ts b/packages/react-integration/demo-app-ts/src/Demos.ts index cb1223ad6c9..fb69ce2e636 100644 --- a/packages/react-integration/demo-app-ts/src/Demos.ts +++ b/packages/react-integration/demo-app-ts/src/Demos.ts @@ -666,6 +666,16 @@ export const Demos: DemoInterface[] = [ name: 'Toolbar Demo', componentType: Examples.ToolbarDemo }, + { + id: 'toolbar-visibility-demo', + name: 'Toolbar Visibility Demo', + componentType: Examples.ToolbarVisibilityDemo + }, + { + id: 'toolbar-visiblity-demo', + name: 'Toolbar Visiblity Demo (Deprecated)', + componentType: Examples.ToolbarVisiblityDemo + }, { id: 'tooltip-demo', name: 'Tooltip Demo', diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx new file mode 100644 index 00000000000..7507cf907b1 --- /dev/null +++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisibilityDemo.tsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core'; +import FilterIcon from '@patternfly/react-icons/dist/js/icons/filter-icon'; + +export class ToolbarVisibilityDemo extends React.Component { + static displayName = 'ToolbarVisibilityDemo'; + + render() { + const toolbarContents = ( + + ToolbarContent visibility sm + + ToolbarContent visibility md + + + ToolbarContent visibility lg + + + ToolbarContent visibility xl + + + ToolbarContent visibility 2xl + + + ); + + const toolbarGroups = ( + + ToolbarGroup visibility sm + + ToolbarGroup visibility md + + + ToolbarGroup visibility lg + + + ToolbarGroup visibility xl + + ToolbarGroup visibility 2xl + + ); + + const toolbarItems = ( + + ToolbarItem visibility sm + + ToolbarItem visibility md + + + ToolbarItem visibility lg + + + ToolbarItem visibility xl + + ToolbarItem visibility 2xl + + ); + + const toolbarToggleGroups = ( + + + + } + breakpoint="md" + visibility={{ default: 'visible', md: 'hidden' }} + > + ToolbarToggleGroup visibility sm + + + + + + } + breakpoint="lg" + visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }} + > + ToolbarToggleGroup visibility md + + + + + + } + breakpoint="xl" + visibility={{ default: 'hidden', lg: 'visible', xl: 'hidden' }} + > + ToolbarToggleGroup visibility lg + + + + + + } + breakpoint="2xl" + visibility={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }} + > + ToolbarToggleGroup visibility xl + + + + + + } + breakpoint="md" + visibility={{ default: 'hidden', '2xl': 'visible' }} + > + ToolbarToggleGroup visibility 2xl + + + + + ); + + return ( +
+ {toolbarContents} + + {toolbarGroups} + + + {toolbarItems} + + {toolbarToggleGroups} +
+ ); + } +} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx new file mode 100644 index 00000000000..eec6f36dc75 --- /dev/null +++ b/packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarVisiblityDemo.tsx @@ -0,0 +1,132 @@ +import React from 'react'; +import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem, ToolbarToggleGroup } from '@patternfly/react-core'; +import FilterIcon from '@patternfly/react-icons/dist/js/icons/filter-icon'; + +export class ToolbarVisiblityDemo extends React.Component { + static displayName = 'ToolbarVisibilityDemo'; + + render() { + const toolbarContents = ( + + ToolbarContent visiblity sm + + ToolbarContent visiblity md + + + ToolbarContent visiblity lg + + + ToolbarContent visiblity xl + + + ToolbarContent visiblity 2xl + + + ); + + const toolbarGroups = ( + + ToolbarGroup visiblity sm + + ToolbarGroup visiblity md + + + ToolbarGroup visiblity lg + + + ToolbarGroup visiblity xl + + ToolbarGroup visiblity 2xl + + ); + + const toolbarItems = ( + + ToolbarItem visiblity sm + + ToolbarItem visiblity md + + + ToolbarItem visiblity lg + + + ToolbarItem visiblity xl + + ToolbarItem visiblity 2xl + + ); + + const toolbarToggleGroups = ( + + + + } + breakpoint="md" + visiblity={{ default: 'visible', md: 'hidden' }} + > + ToolbarToggleGroup visiblity sm + + + + + + } + breakpoint="lg" + visiblity={{ default: 'hidden', md: 'visible', lg: 'hidden' }} + > + ToolbarToggleGroup visiblity md + + + + + + } + breakpoint="xl" + visiblity={{ default: 'hidden', lg: 'visible', xl: 'hidden' }} + > + ToolbarToggleGroup visiblity lg + + + + + + } + breakpoint="2xl" + visiblity={{ default: 'hidden', xl: 'visible', '2xl': 'hidden' }} + > + ToolbarToggleGroup visiblity xl + + + + + + } + breakpoint="md" + visiblity={{ default: 'hidden', '2xl': 'visible' }} + > + ToolbarToggleGroup visiblity 2xl + + + + + ); + + return ( +
+ {toolbarContents} + + {toolbarGroups} + + + {toolbarItems} + + {toolbarToggleGroups} +
+ ); + } +} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/react-integration/demo-app-ts/src/components/demos/index.ts index 06d45546041..bdb821937e5 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/index.ts +++ b/packages/react-integration/demo-app-ts/src/components/demos/index.ts @@ -33,6 +33,8 @@ export * from './ClipboardCopyDemo/ClipboardCopyExpandedDemo'; export * from './DataListDemo/DataListDemo'; export * from './DataListDemo/DataListCompactDemo'; export * from './ToolbarDemo/ToolbarDemo'; +export * from './ToolbarDemo/ToolbarVisibilityDemo'; +export * from './ToolbarDemo/ToolbarVisiblityDemo'; export * from './DividerDemo/DividerDemo'; export * from './DividerDemo/DividerInsetDemo'; export * from './DonutChartDemo/DonutBottomAlignedLegendDemo';