@patternfly/react-core 6.3.1-prerelease.0 → 6.3.1-prerelease.2

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.1-prerelease.1","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.1-prerelease.1","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.1-prerelease.1","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.1-prerelease.0",
+  "version": "6.3.1-prerelease.2",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "999dd945fd4f8ec281d9015586ac773833f16217"
+  "gitHead": "8d65eb8ad40d4d01963d6c3280f48fe3cd709056"
 }

package/src/components/Label/LabelGroup.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { fillTemplate } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
@@ -205,12 +205,12 @@ class LabelGroup extends Component<LabelGroupProps, LabelGroupState> {
         <div className={css(styles.labelGroupClose)}>
           <Button
             variant="plain"
-            hasNoPadding
+            size="sm"
             aria-label={closeBtnAriaLabel}
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesCircleIcon />}
+            icon={<TimesIcon />}
           />
         </div>
       );

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
-        class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+        class="pf-v6-c-button pf-m-plain pf-m-small"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
@@ -271,11 +271,11 @@ exports[`LabelGroup label group with closable category 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 512 512"
+            viewBox="0 0 352 512"
             width="1em"
           >
             <path
-              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
             />
           </svg>
         </span>

package/src/components/Page/PageToggleButton.tsx

@@ -14,6 +14,8 @@ export interface PageToggleButtonProps extends ButtonProps {
   'aria-label'?: string;
   /** Flag indicating whether the hamburger button variation with animations should be used. */
   isHamburgerButton?: boolean;
+  /** IsHamburgerButton must be true for hamburgerVariant to be have an effect. Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
+  hamburgerVariant?: 'expand' | 'collapse';
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
@@ -23,6 +25,7 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
   id = 'nav-toggle',
   'aria-label': ariaLabel = 'Side navigation toggle',
   isHamburgerButton,
+  hamburgerVariant,
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -42,6 +45,10 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
           isHamburger={isHamburgerButton}
+          hamburgerVariant={hamburgerVariant}
+          {...(isHamburgerButton && {
+            isExpanded: sidebarOpen
+          })}
           {...props}
         >
           {!isHamburgerButton && children}

package/src/components/Page/__tests__/PageToggleButton.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import { PageToggleButton } from '../PageToggleButton';
+import { PageContextProvider } from '../PageContext';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="container">
+      <PageToggleButton />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<PageToggleButton>Test</PageToggleButton>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Throws console error when isHamburger is true and isSidebarOpen is not passed', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isHamburger aria-label="Test" />);
+
+  expect(consoleError).toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.'
+  );
+});
+
+test('Does not throw console error when isHamburger is true and isSidebarOpen is false', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isSidebarOpen={false} isHamburger aria-label="Test" />);
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});
+
+test('Does not throw console error when isHamburger is true and isSidebarOpen is true', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  render(<PageToggleButton isSidebarOpen isHamburger aria-label="Test" />);
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});
+
+// assisted by AI/Cursor
+test('Does not throw console error when isHamburger is true, isSidebarOpen is not passed, but managedIsSidebarOpen is true', () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const mockPageContext = {
+    isManagedSidebar: true,
+    onSidebarToggle: () => null,
+    isSidebarOpen: true, // managedIsSidebarOpen is true
+    width: 1024,
+    height: 768,
+    getBreakpoint: () => 'lg' as const,
+    getVerticalBreakpoint: () => 'lg' as const
+  };
+
+  render(
+    <PageContextProvider value={mockPageContext}>
+      <PageToggleButton isHamburger aria-label="Test" />
+    </PageContextProvider>
+  );
+
+  expect(consoleError).not.toHaveBeenCalledWith(
+    'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content..'
+  );
+});

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -225,7 +225,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               <button
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
-                class="pf-v6-c-button pf-m-plain pf-m-no-padding"
+                class="pf-v6-c-button pf-m-plain pf-m-small"
                 data-ouia-component-id="OUIA-Generated-Button-plain-4"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
@@ -241,11 +241,11 @@ exports[`Toolbar should render with custom label content 1`] = `
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 512 512"
+                    viewBox="0 0 352 512"
                     width="1em"
                   >
                     <path
-                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
                     />
                   </svg>
                 </span>