feat(toolbar): add hasNoPadding prop and test (#11648)

Author: sg00dwin

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

@@ -57,6 +57,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   ouiaSafe?: boolean;
   /** Background color variant of the toolbar */
   colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
+  /** Flag indicating the toolbar padding is removed */
+  hasNoPadding?: boolean;
 }
 
 export interface ToolbarState {
@@ -78,6 +80,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
   staticFilterInfo = {};
+  hasNoPadding = false;
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
@@ -128,6 +131,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
 
   renderToolbar = (randomId: string) => {
     const {
+      hasNoPadding,
       clearAllFilters,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
@@ -159,6 +163,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
           <div
             className={css(
               styles.toolbar,
+              hasNoPadding && styles.modifiers.noPadding,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,

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

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
@@ -42,6 +43,34 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  it(`should render toolbar without ${styles.modifiers.noPadding} by default`, () => {
+    render(
+      <Toolbar data-testid="toolbar">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+  });
+
+  it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-no-padding" hasNoPadding>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-no-padding')).toHaveClass(styles.modifiers.noPadding);
+  });
+
   it('should render with custom label content', () => {
     const items = (
       <Fragment>

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

@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-2"
+    data-ouia-component-id="OUIA-Generated-Toolbar-4"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"