@patternfly/react-core 6.0.0-alpha.11 → 6.0.0-alpha.13

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.10","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.12","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.10","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.12","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.10","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.12","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.13",
   "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",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "325ae0434cbad9fe482fd586aafaf3235ca254f7"
+  "gitHead": "e6f09685eb6c15fefc55ed24c64cafc4213d7902"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -239,7 +239,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
             <AngleRightIcon aria-hidden />
           </span>
         )}
-        <span className={css(`${styles.expandableSection}__toggle-text`)}>{toggleContent || computedToggleText}</span>
+        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
       </button>
     );
 

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -68,7 +68,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
           <AngleRightIcon aria-hidden />
         </span>
       )}
-      <span className={css(`${styles.expandableSection}__toggle-text`)}>{children}</span>
+      <span className={css(styles.expandableSectionToggleText)}>{children}</span>
     </button>
   </div>
 );

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -37,11 +37,15 @@ When passing the `isDetached` property into `<ExpandableSection>`, you must also
 
 ### Disclosure variation
 
+You can pass in the `displaySize="lg"` property for a disclosure variation styling.
+
 ```ts file="ExpandableSectionDisclosure.tsx"
 
 ```
 
-### Indented
+### Indented expandable content
+
+You can indent the expandable content by passing in the `isIndented` property. This will not affect the expandable toggle.
 
 ```ts file="ExpandableSectionIndented.tsx"
 

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -1,21 +1,34 @@
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
+import React, { FormEvent } from 'react';
+import { ExpandableSection, Checkbox } from '@patternfly/react-core';
 
 export const ExpandableSectionIndented: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = React.useState(true);
+  const [isDisplayLgChecked, setIsDisplayLgChecked] = React.useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
+  const onDisplaySizeCheck = (_event: FormEvent<HTMLInputElement>, checked: boolean) => setIsDisplayLgChecked(checked);
+
   return (
-    <ExpandableSection
-      toggleText={isExpanded ? 'Show less' : 'Show more'}
-      onToggle={onToggle}
-      isExpanded={isExpanded}
-      isIndented
-    >
-      This content is visible only when the component is expanded.
-    </ExpandableSection>
+    <>
+      <Checkbox
+        id="displaySize-checkbox"
+        isChecked={isDisplayLgChecked}
+        label='displaySize="lg"'
+        onChange={onDisplaySizeCheck}
+      />
+      <br />
+      <ExpandableSection
+        toggleText={isExpanded ? 'Show less' : 'Show more'}
+        onToggle={onToggle}
+        isExpanded={isExpanded}
+        isIndented
+        displaySize={isDisplayLgChecked ? 'lg' : 'default'}
+      >
+        This content is visible only when the component is expanded.
+      </ExpandableSection>
+    </>
   );
 };

package/src/components/Panel/Panel.tsx

@@ -8,7 +8,7 @@ export interface PanelProps extends React.HTMLProps<HTMLDivElement> {
   /** Class to add to outer div */
   className?: string;
   /** Adds panel variant styles */
-  variant?: 'raised' | 'bordered';
+  variant?: 'raised' | 'bordered' | 'secondary';
   /** Flag to add scrollable styling to the panel */
   isScrollable?: boolean;
   /** @hide Forwarded ref */
@@ -26,8 +26,7 @@ const PanelBase: React.FunctionComponent<PanelProps> = ({
   <div
     className={css(
       styles.panel,
-      variant === 'raised' && styles.modifiers.raised,
-      variant === 'bordered' && styles.modifiers.bordered,
+      variant && styles.modifiers[variant],
       isScrollable && styles.modifiers.scrollable,
       className
     )}

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

@@ -46,6 +46,11 @@ test(`Renders with class name ${styles.modifiers.bordered} when variant is borde
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.bordered);
 });
 
+test(`Renders with class name ${styles.modifiers.secondary} when variant is secondary`, () => {
+  render(<Panel variant="secondary">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.secondary);
+});
+
 test(`Renders with class name ${styles.modifiers.scrollable} when isScrollable is true`, () => {
   render(<Panel isScrollable>Test</Panel>);
   expect(screen.getByText('Test')).toHaveClass(styles.modifiers.scrollable);

package/src/components/Panel/examples/Panel.md

@@ -116,6 +116,21 @@ const BorderedPanel = () => (
 );
 ```
 
+### Secondary variant
+
+```js
+import React from 'react';
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+const PanelSecondaryVariant = () => (
+  <Panel variant="secondary">
+    <PanelMain>
+      <PanelMainBody>Main content</PanelMainBody>
+    </PanelMain>
+  </Panel>
+);
+```
+
 ### Scrollable
 
 ```js