@patternfly/react-core 6.1.0-prerelease.14 → 6.1.0-prerelease.16

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.1.0-prerelease.13","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.1.0-prerelease.15","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.1.0-prerelease.13","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.1.0-prerelease.15","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.1.0-prerelease.13","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.1.0-prerelease.15","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.14",
+  "version": "6.1.0-prerelease.16",
   "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": "c1ab963828ff4dbd92ac3047453ef242a56c16ee"
+  "gitHead": "05350a39b7869a7ad9a55ac9dcf0239ea1ae6a4d"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -319,18 +319,15 @@ export const CalendarMonth = ({
                   onSelectToggle(isOpen);
                 }}
                 onSelect={(ev, monthNum) => {
-                  // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                  // to see the SelectOption as a child so it doesn't close the Popover.
-                  setTimeout(() => {
-                    setIsSelectOpen(false);
-                    onSelectToggle(false);
-                    const newDate = changeMonth(Number(monthNum as string));
-                    setFocusedDate(newDate);
-                    setShouldFocus(false);
-                    onMonthChange(ev, newDate);
-                  }, 0);
+                  setIsSelectOpen(false);
+                  onSelectToggle(false);
+                  const newDate = changeMonth(Number(monthNum as string));
+                  setFocusedDate(newDate);
+                  setShouldFocus(false);
+                  onMonthChange(ev, newDate);
                 }}
                 selected={monthFormatted}
+                popperProps={{ appendTo: 'inline' }}
               >
                 <SelectList>
                   {longMonths.map((longMonth, index) => (

package/src/components/LoginPage/examples/LoginPage.md

@@ -18,7 +18,7 @@ propComponents:
   ]
 ---
 
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -114,7 +114,7 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -187,7 +187,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from '../../assets/brandImgColor2.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import {
   LoginFooterItem,
   LoginForm,
@@ -115,7 +115,7 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   return (
     <LoginPage
       footerListVariants={ListVariant.inline}
-      brandImgSrc={brandImg2}
+      brandImgSrc={brandImg}
       brandImgAlt="PatternFly logo"
       backgroundImgSrc="/assets/images/pfbg-icon.svg"
       footerListItems={listItem}

package/src/components/Modal/examples/Modal.md

@@ -20,7 +20,7 @@ Basic modals give users the option to either confirm or cancel an action.
 
 To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
 
-A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
+The `<ModalBody>`, `<ModalHeader>`, and `<ModalFooter>` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.
 
 ```ts file="./ModalBasic.tsx"
 

package/src/components/Wizard/examples/Wizard.md

@@ -34,6 +34,8 @@ DrawerColorVariant,
 DrawerHead,
 DrawerActions,
 DrawerCloseButton,
+Modal,
+ModalVariant,
 Wizard,
 WizardFooter,
 WizardFooterWrapper,
@@ -46,7 +48,6 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core';
-import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';

package/src/components/Wizard/examples/WizardWithinModal.tsx

@@ -1,21 +1,18 @@
 import React from 'react';
-import { Button, Wizard, WizardStep, WizardHeader } from '@patternfly/react-core';
-import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
-export const WizardWithinModal = () => {
+export const WizardWithinModal: React.FunctionComponent = () => {
   const [isModelOpen, setIsModalOpen] = React.useState(false);
 
   return (
     <>
       <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>
 
-      <ModalDeprecated
+      <Modal
         isOpen={isModelOpen}
-        showClose={false}
         aria-label="Wizard modal"
-        hasNoBodyWrapper
         onEscapePress={() => setIsModalOpen(false)}
-        variant={ModalVariantDeprecated.medium}
+        variant={ModalVariant.medium}
       >
         <Wizard
           height={400}
@@ -43,7 +40,7 @@ export const WizardWithinModal = () => {
             Review step content
           </WizardStep>
         </Wizard>
-      </ModalDeprecated>
+      </Modal>
     </>
   );
 };

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -19,7 +19,7 @@ propComponents:
 ---
 
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import brandImg from '../assets/PF-IconLogo.svg';
 
 As the application launcher component is now deprecated, an application launcher may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.
 

package/src/demos/CustomMenus/CustomMenus.md

@@ -17,7 +17,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import brandImg from '../assets/PF-IconLogo.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -12,7 +12,7 @@ import {
   DropdownItem
 } from '@patternfly/react-core';
 import ThIcon from '@patternfly/react-icons/dist/js/icons/th-icon';
-import pfIcon from '@patternfly/react-core/src/demos/Card/pf-logo-small.svg';
+import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
 
@@ -69,7 +69,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           id="3"
           isFavorited={favorites.includes('3')}
           isExternalLink
-          icon={<img src={pfIcon} />}
+          icon={<img src={brandImg} alt="" width={25} height={25} />}
           component={(props) => <MockLink {...props} to="#router-link2" />}
         >
           Custom component with icon

package/src/demos/assets/PF-IconLogo.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Rectangle-Copy-17" fill-rule="evenodd" clip-rule="evenodd" d="M15.6522 0H40V24.3478H37.3913C25.3851 24.3478 15.6522 14.6149 15.6522 2.6087V0Z" fill="#0066CC"/>
+<path id="Path-2" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.869568L16.5217 40H34.9367C37.7331 40 40 37.7331 40 34.9367V0.869568Z" fill="url(#paint0_linear_6460_7774)"/>
+<path id="Path-2_2" fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 9.53674e-06L-3.8147e-06 23.4783V5.0633C-3.8147e-06 2.26692 2.26691 9.53674e-06 5.06329 9.53674e-06L39.1304 9.53674e-06Z" fill="url(#paint1_linear_6460_7774)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_6460_7774" x1="1613.04" y1="0.869504" x2="-337.034" y2="3251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6460_7774" x1="39.1305" y1="-1573.04" x2="-3211" y2="377.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+</defs>
+</svg>