add wrap to toolbar content

Author: mfrances17

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

@@ -16,6 +16,15 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Value to set for content wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -50,6 +59,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
+      rowWrap,
       alignItems,
       clearAllFilters,
       showClearFiltersButton,
@@ -95,6 +105,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
+                        formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
                         alignItems === 'baseline' && styles.modifiers.alignItemsBaseline

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

@@ -148,4 +148,28 @@ describe('Toolbar', () => {
 
     expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
   });
+
+  it('should render ToolbarContent with pf-m-wrap when rowWrap is set to wrap', () => {
+    render(
+      <Toolbar>
+        <ToolbarContent data-testid="toolbarcontent" rowWrap={{ default: 'wrap' }}>
+          Test
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-wrap');
+  });
+
+  it('should render ToolbarContent with pf-m-nowrap when rowWrap is set to nowrap', () => {
+    render(
+      <Toolbar>
+        <ToolbarContent data-testid="toolbarcontent" rowWrap={{ default: 'nowrap' }}>
+          Test
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbarcontent').querySelector('div')).toHaveClass('pf-m-nowrap');
+  });
 });

packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -11,12 +11,20 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
   });
-  it('should render with pf-m-wrap when rowWrap is set', () => {
+  it('should render with pf-m-wrap when rowWrap is set to wrap', () => {
     render(
       <ToolbarGroup data-testid="toolbargroup" rowWrap={{ default: 'wrap' }}>
         Test
       </ToolbarGroup>
     );
     expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-wrap');
   });
+  it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => {
+    render(
+      <ToolbarGroup data-testid="toolbargroup" rowWrap={{ default: 'nowrap' }}>
+        Test
+      </ToolbarGroup>
+    );
+    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-nowrap');
+  });
 });

packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -11,12 +11,20 @@ describe('ToolbarItem', () => {
     );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
   });
-  it('should render with pf-m-wrap when rowWrap is set', () => {
+  it('should render with pf-m-wrap when rowWrap is set to wrap', () => {
     render(
       <ToolbarItem data-testid="toolbaritem" rowWrap={{ default: 'wrap' }}>
         Test
       </ToolbarItem>
     );
     expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-wrap');
   });
+  it('should render with pf-m-nowrap when rowWrap is set to nowrap', () => {
+    render(
+      <ToolbarItem data-testid="toolbaritem" rowWrap={{ default: 'nowrap' }}>
+        Test
+      </ToolbarItem>
+    );
+    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-nowrap');
+  });
 });

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

@@ -111,11 +111,18 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 
 ```
 
-## Examples with toolbar spacers
+## Examples with spacers and wrapping
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
 Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
+### Toolbar content wrapping
+The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap.
+
+```ts file="./ToolbarContentWrap.tsx"
+
+```
+
 ### Toolbar group spacers
 
 ```ts file="./ToolbarGroupSpacers.tsx"

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';
+import { Button, SearchInput } from '@patternfly/react-core';
+
+export const ToolbarItems: React.FunctionComponent = () => {
+  const items = (
+    <React.Fragment>
+      <ToolbarItem>
+        <SearchInput aria-label="Items example search input" />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button variant="secondary">Action</Button>
+      </ToolbarItem>
+      <ToolbarItem variant="separator" />
+      <ToolbarItem>
+        <Button variant="primary">Action</Button>
+      </ToolbarItem>
+    </React.Fragment>
+  );
+
+  return (
+    <Toolbar id="toolbar-items-example">
+      <ToolbarContent rowWrap={{ default: 'nowrap' }}>{items}</ToolbarContent>
+    </Toolbar>
+  );
+};