@patternfly/react-core 6.0.0-alpha.104 → 6.0.0-alpha.106

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.0.0-alpha.103","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.0.0-alpha.105","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.0.0-alpha.103","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.0.0-alpha.105","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.0.0-alpha.103","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.0.0-alpha.105","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.104",
+  "version": "6.0.0-alpha.106",
   "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",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5ae7154791840e7ca907b851aa591e6838acefc2"
+  "gitHead": "c7a4e5f63c06a783c47b8aa7f641b39753e83043"
 }

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"
@@ -51,7 +51,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"
@@ -87,7 +87,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
     type="button"
   >
     <span
-      class="pf-v6-c-button__icon pf-m-start"
+      class="pf-v6-c-button__icon"
     >
       <svg
         aria-hidden="true"

package/src/components/Button/Button.tsx

@@ -136,6 +136,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   const Component = component as any;
   const isButtonElement = Component === 'button';
   const isInlineSpan = isInline && Component === 'span';
+  const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
 
   const preventedEvents = inoperableEvents.reduce(
     (handlers, eventToPrevent) => ({
@@ -157,6 +158,13 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
   };
 
+  const _icon = icon && (
+    <span className={css(styles.buttonIcon, children && styles.modifiers[isIconAlignedAtEnd ? 'end' : 'start'])}>
+      {icon}
+    </span>
+  );
+  const _children = children && <span className={css('pf-v6-c-button__text')}>{children}</span>;
+
   return (
     <Component
       {...props}
@@ -198,12 +206,16 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
           />
         </span>
       )}
-      {icon && (iconPosition === 'start' || iconPosition === 'left') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
-      )}
-      {children && <span className={css('pf-v6-c-button__text')}>{children}</span>}
-      {icon && (iconPosition === 'end' || iconPosition === 'right') && (
-        <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
+      {isIconAlignedAtEnd ? (
+        <>
+          {_children}
+          {_icon}
+        </>
+      ) : (
+        <>
+          {_icon}
+          {_children}
+        </>
       )}
       {countOptions && (
         <span className={css(styles.buttonCount, countOptions.className)}>

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-card__header-toggle-icon"

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -231,6 +231,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                         this.setState({ copied: true });
                       }}
                       onTooltipHidden={() => this.setState({ copied: false })}
+                      hasNoPadding
                     >
                       {this.state.copied ? clickTip : hoverTip}
                     </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -43,6 +43,8 @@ export interface ClipboardCopyButtonProps
   variant?: 'control' | 'plain';
   /** Callback when tooltip's hide transition has finished executing */
   onTooltipHidden?: () => void;
+  /** Removes padding from clipboard copy button. This is used for inline-compact variant */
+  hasNoPadding?: boolean;
 }
 
 export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonProps> = ({
@@ -58,6 +60,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   variant = 'control',
   onTooltipHidden = () => {},
   className,
+  hasNoPadding = false,
   ...props
 }: ClipboardCopyButtonProps) => {
   const triggerRef = React.createRef<HTMLButtonElement>();
@@ -78,6 +81,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
       <Button
         type="button"
         variant={variant}
+        hasNoPadding={hasNoPadding}
         onClick={onClick}
         aria-label={ariaLabel}
         className={className}

package/src/components/ClipboardCopy/__tests__/ClipboardCopyButton.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ClipboardCopyButton } from '../ClipboardCopyButton';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, children, exitDelay, entryDelay, maxWidth, position, onTooltipHidden }) => (
@@ -89,6 +90,13 @@ test('Passes variant to Button when variant is passed', () => {
   expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
 });
 
+test('Removes padding when hasNoPadding prop passed', () => {
+  render(<ClipboardCopyButton variant="plain" hasNoPadding {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.noPadding);
+});
+
 test('Calls onClick when ClipboardCopyButton is clicked', async () => {
   const user = userEvent.setup();
 

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -39,7 +39,7 @@ exports[`Matches snapshot 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`Matches snapshot 1`] = `
     type="button"
   >
     <span
-      class="pf-v6-c-button__icon pf-m-start"
+      class="pf-v6-c-button__icon"
     >
       <div
         class="pf-v6-c-clipboard-copy__toggle-icon"

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -9,7 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
     variant="inline-compact"
     additionalActions={
       <ClipboardCopyAction>
-        <Button variant="plain" aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
+        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
       </ClipboardCopyAction>
     }
   >

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`Renders to match snapshot 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

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

@@ -95,7 +95,7 @@ exports[`With popover opened 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__icon pf-m-start"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"
@@ -201,7 +201,7 @@ exports[`With popover opened 1`] = `
                   type="button"
                 >
                   <span
-                    class="pf-v6-c-button__icon pf-m-start"
+                    class="pf-v6-c-button__icon"
                   >
                     <svg
                       aria-hidden="true"

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__icon pf-m-start"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-form__field-group-toggle-icon"

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

@@ -28,7 +28,7 @@ exports[`Label editable label 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -166,7 +166,7 @@ exports[`Label label with close button 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -215,7 +215,7 @@ exports[`Label label with close button and outline variant 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

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

@@ -264,7 +264,7 @@ exports[`LabelGroup label group with closable category 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/components/LoginPage/LoginMainHeader.tsx

@@ -24,7 +24,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
   headerUtilities = null,
   ...props
 }: LoginMainHeaderProps) => (
-  <header className={css(styles.loginMainHeader, className)} {...props}>
+  <div className={css(styles.loginMainHeader, className)} {...props}>
     {title && (
       <Title headingLevel="h2" size={TitleSizes['3xl']}>
         {title}
@@ -33,6 +33,6 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
     {subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
     {headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
     {children}
-  </header>
+  </div>
 );
 LoginMainHeader.displayName = 'LoginMainHeader';

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -263,7 +263,7 @@ exports[`LoginForm LoginForm with show password 1`] = `
               type="button"
             >
               <span
-                class="pf-v6-c-button__icon pf-m-start"
+                class="pf-v6-c-button__icon"
               >
                 <svg
                   aria-hidden="true"

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`LoginMainHeader className is added to the root element 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header extra-class"
   />
 </DocumentFragment>
@@ -10,7 +10,7 @@ exports[`LoginMainHeader className is added to the root element 1`] = `
 
 exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   />
 </DocumentFragment>
@@ -18,7 +18,7 @@ exports[`LoginMainHeader renders with PatternFly Core styles 1`] = `
 
 exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
 <DocumentFragment>
-  <header
+  <div
     class="pf-v6-c-login__main-header"
   >
     <h2
@@ -34,6 +34,6 @@ exports[`LoginMainHeader title and subtitle are rendered correctly 1`] = `
     >
       Use LDAP credentials
     </p>
-  </header>
+  </div>
 </DocumentFragment>
 `;

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

@@ -24,7 +24,7 @@ exports[`check loginpage example against snapshot 1`] = `
       <main
         class="pf-v6-c-login__main"
       >
-        <header
+        <div
           class="pf-v6-c-login__main-header"
         >
           <h2
@@ -35,7 +35,7 @@ exports[`check loginpage example against snapshot 1`] = `
           >
             Log into your account
           </h2>
-        </header>
+        </div>
         <div
           class="pf-v6-c-login__main-body"
         />

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -106,7 +106,7 @@ exports[`Modal Content Test with onclose 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-button__icon pf-m-start"
+              class="pf-v6-c-button__icon"
             >
               <svg
                 aria-hidden="true"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -98,7 +98,7 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -215,7 +215,7 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -334,7 +334,7 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -453,7 +453,7 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -589,7 +589,7 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -708,7 +708,7 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -825,7 +825,7 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -944,7 +944,7 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"

package/src/components/Pagination/__tests__/Generated/__snapshots__/Navigation.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -58,7 +58,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -109,7 +109,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -141,7 +141,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"