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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.12",
   "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": "87d0bb0109fc927bcc3cec91bf034912507caa56"
 }

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>
+    </>
   );
 };