feat(toolbar): adds color variant

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

@@ -50,6 +50,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;
+  /** Color variant of the toolbar */
+  colorVariant?: 'no-background' | 'primary' | 'secondary';
 }
 
 export interface ToolbarState {
@@ -136,6 +138,7 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       ouiaId,
       numberOfFiltersText,
       customChipGroupContent,
+      colorVariant,
       ...props
     } = this.props;
 
@@ -157,6 +160,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}

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

@@ -112,3 +112,13 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
+
+### Toolbar with secondary color
+
+To change the background color of a toolbar, use the `colorVariant` property on the `<Toolbar>`.
+
+In the following example, toggle the "Secondary" checkbox to see the difference between primary and secondary variants.
+
+```ts file="./ToolbarColorVariant.tsx"
+
+```

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, Button, SearchInput, Checkbox } from '@patternfly/react-core';
+
+export const ToolbarColorVariant: React.FunctionComponent = () => {
+  const [isSecondary, setisSecondary] = React.useState(true);
+
+  return (
+    <React.Fragment>
+      <Toolbar id="toolbar-" colorVariant={isSecondary ? 'secondary' : 'primary'}>
+        <ToolbarContent>
+          <ToolbarItem>
+            <SearchInput aria-label="Items example search input" />
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="secondary">Action</Button>
+          </ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>
+            <Button variant="primary">Action</Button>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Checkbox
+        label="Secondary"
+        isChecked={isSecondary}
+        onChange={(_event, checked) => setisSecondary(checked)}
+        id="isSecondaryCheckbox"
+      />
+    </React.Fragment>
+  );
+};