@patternfly/react-core 6.2.1-prerelease.2 → 6.2.1-prerelease.4

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.2.1-prerelease.1","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.2.1-prerelease.3","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.2.1-prerelease.1","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.2.1-prerelease.3","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.2.1-prerelease.1","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.2.1-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.1-prerelease.2",
+  "version": "6.2.1-prerelease.4",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.2.0",
-    "@patternfly/react-styles": "^6.2.0",
-    "@patternfly/react-tokens": "^6.2.0",
+    "@patternfly/react-icons": "^6.2.1-prerelease.0",
+    "@patternfly/react-styles": "^6.2.1-prerelease.0",
+    "@patternfly/react-tokens": "^6.2.1-prerelease.0",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "25558ac94b9f9f031dbc18cb7424c0f1666097d9"
+  "gitHead": "51f35a918102ae3dcaec8ee577cf6f2f578aea16"
 }

package/src/components/Dropdown/DropdownGroup.tsx

@@ -10,7 +10,7 @@ export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of dropdown group */
   className?: string;
   /** Label of the dropdown group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({

package/src/components/LoginPage/LoginForm.tsx

@@ -28,6 +28,8 @@ export interface LoginFormProps extends Omit<React.HTMLProps<HTMLFormElement>, '
   onChangeUsername?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   /** Flag indicating if the username is valid */
   isValidUsername?: boolean;
+  /** Flag indicating if password is required */
+  isPasswordRequired?: boolean;
   /** Label for the password input field */
   passwordLabel?: string;
   /** Value for the password */
@@ -66,6 +68,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
   usernameValue = '',
   onChangeUsername = () => undefined as any,
   isValidUsername = true,
+  isPasswordRequired = true,
   passwordLabel = 'Password',
   passwordValue = '',
   onChangePassword = () => undefined as any,
@@ -85,7 +88,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
 
   const passwordInput = (
     <TextInput
-      isRequired
+      isRequired={isPasswordRequired}
       type={passwordHidden ? 'password' : 'text'}
       id="pf-login-password-id"
       name="pf-login-password-id"
@@ -118,7 +121,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
           onChange={onChangeUsername}
         />
       </FormGroup>
-      <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
+      <FormGroup label={passwordLabel} isRequired={isPasswordRequired} fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
             <InputGroupItem isFill>{passwordInput}</InputGroupItem>

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

@@ -48,4 +48,16 @@ describe('LoginForm', () => {
     const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders LoginForm with password field required by default', () => {
+    render(<LoginForm />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).toBeRequired();
+  });
+
+  test('Renders LoginForm with password field not required when isPasswordRequired set to false', () => {
+    render(<LoginForm isPasswordRequired={false} />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).not.toBeRequired();
+  });
 });

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

@@ -31,6 +31,7 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ### Basic
 
+By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/Page/Page.tsx

@@ -22,7 +22,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
-  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
+   * will render without a sidebar.
+   */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
@@ -336,6 +338,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
+            sidebar === null && styles.modifiers.noSidebar,
             className
           )}
         >

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

@@ -353,6 +353,24 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`Does not render with class ${styles.modifiers.noSidebar} by default`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Does not render with class ${styles.modifiers.noSidebar} when sidebar prop is passed with valid content`, () => {
+    render(<Page data-testid="page" sidebar={<div>sidebar content</div>}></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Renders with class ${styles.modifiers.noSidebar} when sidebar is set to null`, () => {
+    render(<Page data-testid="page" sidebar={null}></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.noSidebar);
+  });
+
   test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
     render(<Page {...props} role="main"></Page>);
 

package/src/components/Select/SelectGroup.tsx

@@ -10,7 +10,7 @@ export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of select group */
   className?: string;
   /** Label of the select group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const SelectGroup: React.FunctionComponent<SelectGroupProps> = ({