feat(toolbar): adds color variant (#10284)

* feat(toolbar): adds color variant * feat(toolbar): fix id * feat(toolbar): show all variants in example * feat(toolbar): rename examples * feat(toolbar): add tests
patternfly · Apr 29, 2024 · 0f321d1 · 0f321d1
1 parent d7de43a
commit 0f321d1
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/packages/react-core/src/components/Toolbar/Toolbar.tsx b/packages/react-core/src/components/Toolbar/Toolbar.tsx
@@ -8,6 +8,13 @@ import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
 import { PageContext } from '../Page/PageContext';
 
+export enum ToolbarColorVariant {
+  default = 'default',
+  primary = 'primary',
+  secondary = 'secondary',
+  noBackground = 'no-background'
+}
+
 export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Optional callback for clearing all filters in the toolbar */
   clearAllFilters?: () => void;
@@ -50,6 +57,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** Background color variant of the toolbar */
+  colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
 }
 
 export interface ToolbarState {
@@ -136,6 +145,7 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       ouiaId,
       numberOfFiltersText,
       customChipGroupContent,
+      colorVariant = ToolbarColorVariant.default,
       ...props
     } = this.props;
 
@@ -157,6 +167,9 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
               usePageInsets && styles.modifiers.pageInsets,
               isSticky && styles.modifiers.sticky,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
+              colorVariant === 'primary' && styles.modifiers.primary,
+              colorVariant === 'secondary' && styles.modifiers.secondary,
+              colorVariant === 'no-background' && styles.modifiers.noBackground,
               className
             )}
             id={randomId}

diff --git a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx
@@ -9,6 +9,7 @@ import { ToolbarContent } from '../ToolbarContent';
 import { ToolbarFilter } from '../ToolbarFilter';
 import { ToolbarGroup } from '../ToolbarGroup';
 import { Button } from '../../Button/Button';
+import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
@@ -107,4 +108,61 @@ describe('Toolbar', () => {
     expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(1);
     expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(1);
   });
+
+  it('Renders with class ${styles.modifiers.noBackground} when colorVariant="no-background"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="no-background" data-testid="Toolbar-test-no-background-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-no-background-id')).toHaveClass(styles.modifiers.noBackground);
+  });
+
+  it('Renders with class ${styles.modifiers.primary} when colorVariant="primary"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="primary" data-testid="Toolbar-test-primary-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-primary-id')).toHaveClass(styles.modifiers.primary);
+  });
+
+  it('Renders with class ${styles.modifiers.secondary} when colorVariant="secondary"', () => {
+    const items = (
+      <React.Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </React.Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" colorVariant="secondary" data-testid="Toolbar-test-secondary-id">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-secondary-id')).toHaveClass(styles.modifiers.secondary);
+  });
 });
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -112,3 +112,11 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
+
+## Background color variants
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+```ts file="./ToolbarColorVariant.tsx"
+
+```
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarColorVariant.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarColorVariant.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';
+
+export const ToolbarColorVariant: React.FunctionComponent = () => (
+  <React.Fragment>
+    No background
+    <Toolbar id="toolbar-color-variant-no-background" colorVariant={'no-background'}>
+      <ToolbarContent>
+        <ToolbarItem>
+          <SearchInput aria-label="No backtround variant example search input" />
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>
+          <Button variant="primary">Action</Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+    Primary background
+    <Toolbar id="toolbar-color-variant-primary" colorVariant={'primary'}>
+      <ToolbarContent>
+        <ToolbarItem>
+          <SearchInput aria-label="Primary background variant example search input" />
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>
+          <Button variant="primary">Action</Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+    Secondary background
+    <Toolbar id="toolbar-color-variant-secondary" colorVariant={'secondary'}>
+      <ToolbarContent>
+        <ToolbarItem>
+          <SearchInput aria-label="Secondary background variant example search input" />
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>
+          <Button variant="primary">Action</Button>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  </React.Fragment>
+);