@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.30

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.2","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.29","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.2","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.29","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.2","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.29","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.3",
+  "version": "6.0.0-alpha.30",
   "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,18 +46,19 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.3",
-    "@patternfly/react-styles": "^6.0.0-alpha.3",
-    "@patternfly/react-tokens": "^6.0.0-alpha.3",
+    "@patternfly/react-icons": "^6.0.0-alpha.11",
+    "@patternfly/react-styles": "^6.0.0-alpha.11",
+    "@patternfly/react-tokens": "^6.0.0-alpha.11",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.28",
+    "@patternfly/patternfly": "6.0.0-alpha.69",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
+    "case-anything": "^2.1.13",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
@@ -72,5 +73,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "da36134a3effa82a166c47f5b1c2689869a0f52a"
+  "gitHead": "a0d48218e63cd489c8b59556e59989559ba8ba65"
 }

package/single-packages.config.json

@@ -1,5 +1,5 @@
 {
-    "packageName": "@patternfly/react-core",
-    "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/*/*/**/index.js"],
-    "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
-}
+  "packageName": "@patternfly/react-core",
+  "moduleGlob": ["/dist/esm/helpers/**/*.js", "/dist/esm/styles/**/index.js", "/dist/esm/*/*/**/index.js"],
+  "exclude": ["/dist/esm/helpers/Popper/thirdparty"]
+}

package/src/components/AboutModal/examples/AboutModal.md

@@ -4,8 +4,8 @@ section: components
 cssPrefix: pf-v5-c-about-modal-box
 propComponents: ['AboutModal']
 ---
-import brandImg from '../../assets/brandImg.svg';
-import bgImg from '../../assets/patternfly-orb.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
+import bgImg from '../../assets/pf-background.svg';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 ## Examples

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from '../../assets/brandImg.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -20,22 +20,22 @@ export const AboutModalBasic: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc="/assets/images/pfbg-icon.svg"
-        productName="Product Name"
+        backgroundImageSrc="/assets/images/pf-background.svg"
+        productName="name"
       >
         <TextContent>
           <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dt">CFME version</TextListItem>
             <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
             <TextListItem component="dt">Cloudforms Version</TextListItem>
             <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dt">Server name</TextListItem>
             <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dt">User name</TextListItem>
             <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dt">User role</TextListItem>
             <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dt">Browser version</TextListItem>
             <TextListItem component="dd">601.2</TextListItem>
             <TextListItem component="dt">Browser OS</TextListItem>
             <TextListItem component="dd">Mac</TextListItem>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from '../../assets/brandImg.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
@@ -21,9 +21,9 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc="/assets/images/pfbg-icon.svg"
+        backgroundImageSrc="/assets/images/pf-background.svg"
         hasNoContentContainer={true}
-        productName="Product Name"
+        productName="Product name"
       >
         <TextContent id="test1" className={spacing.pyXl}>
           <h4>About</h4>
@@ -32,17 +32,17 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         <Alert variant="info" title="Updates available" />
         <TextContent id="test2" className={spacing.pyXl}>
           <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dt">CFME version</TextListItem>
             <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dt">Cloudforms version</TextListItem>
             <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dt">Server name</TextListItem>
             <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dt">User name</TextListItem>
             <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dt">User role</TextListItem>
             <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dt">Browser version</TextListItem>
             <TextListItem component="dd">601.2</TextListItem>
             <TextListItem component="dt">Browser OS</TextListItem>
             <TextListItem component="dd">Mac</TextListItem>

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from '../../assets/brandImg.svg';
+import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -20,22 +20,22 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
-        backgroundImageSrc="/assets/images/pfbg-icon.svg"
+        backgroundImageSrc="/assets/images/pf-background.svg"
         aria-label="No product name about modal"
       >
         <TextContent>
           <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
+            <TextListItem component="dt">CFME version</TextListItem>
             <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms Version</TextListItem>
+            <TextListItem component="dt">Cloudforms version</TextListItem>
             <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server Name</TextListItem>
+            <TextListItem component="dt">Server name</TextListItem>
             <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User Name</TextListItem>
+            <TextListItem component="dt">User name</TextListItem>
             <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User Role</TextListItem>
+            <TextListItem component="dt">User role</TextListItem>
             <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser Version</TextListItem>
+            <TextListItem component="dt">Browser version</TextListItem>
             <TextListItem component="dd">601.2</TextListItem>
             <TextListItem component="dt">Browser OS</TextListItem>
             <TextListItem component="dd">Mac</TextListItem>

package/src/components/Accordion/Accordion.tsx

@@ -18,6 +18,8 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   isBordered?: boolean;
   /** Display size variant. */
   displaySize?: 'default' | 'lg';
+  /** Sets the toggle icon position for all accordion toggles. */
+  togglePosition?: 'start' | 'end';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -28,6 +30,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   asDefinitionList = true,
   isBordered = false,
   displaySize = 'default',
+  togglePosition = 'end',
   ...props
 }: AccordionProps) => {
   const AccordionList: any = asDefinitionList ? 'dl' : 'div';
@@ -36,6 +39,7 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
+        togglePosition === 'start' && styles.modifiers.toggleStart,
         displaySize === 'lg' && styles.modifiers.displayLg,
         className
       )}
@@ -46,7 +50,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       <AccordionContext.Provider
         value={{
           ContentContainer: asDefinitionList ? 'dd' : 'div',
-          ToggleContainer: asDefinitionList ? 'dt' : headingLevel
+          ToggleContainer: asDefinitionList ? 'dt' : headingLevel,
+          togglePosition
         }}
       >
         {children}

package/src/components/Accordion/AccordionContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -11,8 +11,6 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Identify the AccordionContent item  */
   id?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isHidden?: boolean;
   /** Flag to indicate Accordion content is fixed  */
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
@@ -29,7 +27,6 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   className = '',
   children = null,
   id = '',
-  isHidden = false,
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
@@ -39,16 +36,17 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
 }: AccordionContentProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const containerRef = React.useRef(null);
+  const { isExpanded } = React.useContext(AccordionItemContext);
 
   React.useEffect(() => {
-    if (containerRef?.current && isFixed && !isHidden) {
+    if (containerRef?.current && isFixed && isExpanded) {
       const { offsetHeight, scrollHeight } = containerRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
     } else if (!isFixed) {
       setHasScrollbar(false);
     }
-  }, [containerRef, isFixed, isHidden]);
+  }, [containerRef, isFixed, isExpanded]);
 
   return (
     <AccordionContext.Consumer>
@@ -58,13 +56,8 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           <Container
             ref={containerRef}
             id={id}
-            className={css(
-              styles.accordionExpandableContent,
-              isFixed && styles.modifiers.fixed,
-              !isHidden && styles.modifiers.expanded,
-              className
-            )}
-            hidden={isHidden}
+            className={css(styles.accordionExpandableContent, isFixed && styles.modifiers.fixed, className)}
+            hidden={!isExpanded}
             {...(ariaLabel && { 'aria-label': ariaLabel })}
             {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
             {...(hasScrollbar && { tabIndex: 0 })}

package/src/components/Accordion/AccordionContext.ts

@@ -3,6 +3,12 @@ import * as React from 'react';
 interface AccordionContextProps {
   ContentContainer: React.ElementType;
   ToggleContainer: React.ElementType;
+  togglePosition: 'start' | 'end';
+}
+
+interface AccordionItemContextProps {
+  isExpanded?: boolean;
 }
 
 export const AccordionContext = React.createContext<Partial<AccordionContextProps>>({});
+export const AccordionItemContext = React.createContext({} as AccordionItemContextProps);

package/src/components/Accordion/AccordionItem.tsx

@@ -1,11 +1,28 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { AccordionItemContext } from './AccordionContext';
 
 export interface AccordionItemProps {
-  /** Content rendered inside the Accordion item  */
+  /** Content rendered inside the accordion item. */
   children?: React.ReactNode;
+  /** Additional classes added to the accordion item. */
+  className?: string;
+  /** Flag to indicate whether the accordion item is expanded. */
+  isExpanded?: boolean;
 }
 
-export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({ children = null }: AccordionItemProps) => (
-  <React.Fragment>{children}</React.Fragment>
+export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({
+  children = null,
+  className,
+  isExpanded: isExpandedProp = false
+}: AccordionItemProps) => (
+  <AccordionItemContext.Provider
+    value={{
+      isExpanded: isExpandedProp
+    }}
+  >
+    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)}>{children}</div>
+  </AccordionItemContext.Provider>
 );
 AccordionItem.displayName = 'AccordionItem';

package/src/components/Accordion/AccordionToggle.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
 export interface AccordionToggleProps
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -10,8 +10,6 @@ export interface AccordionToggleProps
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */
   className?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isExpanded?: boolean;
   /** Identify the Accordion toggle number  */
   id: string;
   /** Container to override the default for toggle */
@@ -21,31 +19,41 @@ export interface AccordionToggleProps
 export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   className = '',
   id,
-  isExpanded = false,
   children = null,
   component,
   ...props
-}: AccordionToggleProps) => (
-  <AccordionContext.Consumer>
-    {({ ToggleContainer }) => {
-      const Container = component || ToggleContainer;
-      return (
-        <Container>
-          <button
-            id={id}
-            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-            aria-expanded={isExpanded}
-            type="button"
-            {...props}
-          >
-            <span className={css(styles.accordionToggleText)}>{children}</span>
-            <span className={css(styles.accordionToggleIcon)}>
-              <AngleRightIcon />
-            </span>
-          </button>
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionToggleProps) => {
+  const renderToggleIcon = () => (
+    <span className={css(styles.accordionToggleIcon)}>
+      <AngleRightIcon />
+    </span>
+  );
+
+  const { isExpanded } = React.useContext(AccordionItemContext);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ToggleContainer, togglePosition }) => {
+        const Container = component || ToggleContainer;
+        const isToggleStartPositioned = togglePosition === 'start';
+
+        return (
+          <Container>
+            <button
+              id={id}
+              className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
+              aria-expanded={isExpanded}
+              type="button"
+              {...props}
+            >
+              {isToggleStartPositioned && renderToggleIcon()}
+              <span className={css(styles.accordionToggleText)}>{children}</span>
+              {!isToggleStartPositioned && renderToggleIcon()}
+            </button>
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionToggle.displayName = 'AccordionToggle';

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

@@ -135,6 +135,18 @@ test('Renders with pf-m-display-lg when displaySize="lg"', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-display-lg');
 });
 
+test(`Renders without class ${styles.modifiers.toggleStart} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.toggleStart);
+});
+
+test(`Renders with class ${styles.modifiers.toggleStart} when togglePosition='start'`, () => {
+  render(<Accordion togglePosition="start">Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.toggleStart);
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<Accordion aria-label="this is a simple accordion" />);
   expect(asFragment()).toMatchSnapshot();