11import * as React from 'react' ;
2- import { Button , Flex , FlexItem , Content , ContentVariants } from '@patternfly/react-core' ;
2+ import {
3+ Button ,
4+ Flex ,
5+ FlexItem ,
6+ Content ,
7+ ContentVariants ,
8+ Stack ,
9+ StackItem ,
10+ } from '@patternfly/react-core' ;
311import { AngleDownIcon , AngleRightIcon } from '@patternfly/react-icons' ;
412
513interface CollapsibleSectionProps {
@@ -26,45 +34,30 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
2634 const titleId = `${ localId } -title` ;
2735
2836 return (
29- < >
30- < Flex
31- gap = { { default : 'gapMd' } }
32- alignItems = { { default : 'alignItemsCenter' } }
33- style = {
34- ( open ?? innerOpen ) || showChildrenWhenClosed
35- ? {
36- marginBottom : 'var(--pf-t--global--spacer--md)' ,
37- }
38- : undefined
39- }
40- >
41- < FlexItem >
42- < Button
43- icon = { open ?? innerOpen ? < AngleDownIcon /> : < AngleRightIcon /> }
44- aria-labelledby = { titleId }
45- aria-expanded = { open }
46- variant = "plain"
47- style = { {
48- paddingLeft : 0 ,
49- paddingRight : 0 ,
50- fontSize :
51- titleVariant === ContentVariants . h2
52- ? 'var(--pf-t--global--icon--size--font--heading--h2)'
53- : 'var(--pf-t--global--icon--size--font--heading--h1)' , // Could use icon--size--font--[md|lg|xl] for a smaller icon
54- } }
55- onClick = { ( ) => ( setOpen ? setOpen ( ! open ) : setInnerOpen ( ( prev ) => ! prev ) ) }
56- />
57- </ FlexItem >
58- < FlexItem >
59- < Content >
60- < Content id = { titleId } component = { titleVariant } >
61- { title }
37+ < Stack hasGutter >
38+ < StackItem >
39+ < Flex gap = { { default : 'gapMd' } } alignItems = { { default : 'alignItemsCenter' } } >
40+ < FlexItem >
41+ < Button
42+ icon = { open ?? innerOpen ? < AngleDownIcon /> : < AngleRightIcon /> }
43+ aria-labelledby = { titleId }
44+ aria-expanded = { open ?? innerOpen }
45+ variant = "plain"
46+ className = "pf-v6-u-px-0"
47+ onClick = { ( ) => ( setOpen ? setOpen ( ! open ) : setInnerOpen ( ( prev ) => ! prev ) ) }
48+ />
49+ </ FlexItem >
50+ < FlexItem >
51+ < Content >
52+ < Content id = { titleId } component = { titleVariant } >
53+ { title }
54+ </ Content >
6255 </ Content >
63- </ Content >
64- </ FlexItem >
65- </ Flex >
66- { ( open ?? innerOpen ) || showChildrenWhenClosed ? children : null }
67- </ >
56+ </ FlexItem >
57+ </ Flex >
58+ </ StackItem >
59+ { ( open ?? innerOpen ) || showChildrenWhenClosed ? < StackItem > { children } </ StackItem > : null }
60+ </ Stack >
6861 ) ;
6962} ;
7063
0 commit comments