@elementor/editor-editing-panel 0.13.0 → 0.14.0

package/src/components/collapsible-section.tsx

@@ -1,25 +1,45 @@
 import * as React from 'react';
-import { useId } from 'react';
-import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, Stack } from '@elementor/ui';
+import { useState } from 'react';
+import { ChevronDownIcon } from '@elementor/icons';
+import { Button, Collapse, Stack, styled } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
-export type CollapsibleSectionProps = React.PropsWithChildren< {
-	title: React.ReactNode;
+type CollapsibleSectionProps = React.PropsWithChildren< {
+	defaultOpen?: boolean;
 } >;
 
-export const CollapsibleSection = ( { title, children }: CollapsibleSectionProps ) => {
-	const uid = useId();
-	const labelId = `label-${ uid }`;
-	const contentId = `content-${ uid }`;
+export const CollapsibleSection = ( { children, defaultOpen = false }: CollapsibleSectionProps ) => {
+	const [ open, setOpen ] = useState( defaultOpen );
+
+	const handleToggle = () => {
+		setOpen( ( prevOpen ) => ! prevOpen );
+	};
 
-	// TODO: Change to collapsible list item
 	return (
-		<Accordion disableGutters defaultExpanded>
-			<AccordionSummary aria-controls={ contentId } id={ labelId }>
-				<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>
-			</AccordionSummary>
-			<AccordionDetails id={ contentId } aria-labelledby={ labelId }>
-				<Stack gap={ 2.5 }>{ children }</Stack>
-			</AccordionDetails>
-		</Accordion>
+		<Stack sx={ { py: 0.5 } }>
+			<Button
+				fullWidth
+				size="small"
+				color="secondary"
+				variant="outlined"
+				onClick={ handleToggle }
+				endIcon={ <ChevronIcon open={ open } /> }
+			>
+				{ open ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
+			</Button>
+			<Collapse in={ open } timeout="auto">
+				{ children }
+			</Collapse>
+		</Stack>
 	);
 };
+
+// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
+const ChevronIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'open',
+} )< { open: boolean } >( ( { theme, open } ) => ( {
+	transform: open ? 'rotate(180deg)' : 'rotate(0)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );

package/src/components/settings-tab.tsx

@@ -4,7 +4,7 @@ import { SettingsControl } from '../controls/settings-control';
 import { useElementContext } from '../contexts/element-context';
 import useElementType from '../hooks/use-element-type';
 import type { Control } from '../types';
-import { CollapsibleSection } from './collapsible-section';
+import { AccordionSection } from './accordion-section';
 import { getControlByType } from '../controls/get-control-by-type';
 
 export const SettingsTab = () => {
@@ -25,7 +25,7 @@ export const SettingsTab = () => {
 
 				if ( type === 'section' ) {
 					return (
-						<CollapsibleSection key={ type + '.' + index } title={ value.label }>
+						<AccordionSection key={ type + '.' + index } title={ value.label }>
 							{ value.items?.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -34,7 +34,7 @@ export const SettingsTab = () => {
 								// TODO: Handle 2nd level sections
 								return null;
 							} ) }
-						</CollapsibleSection>
+						</AccordionSection>
 					);
 				}
 

package/src/components/style-sections/size-section.tsx

@@ -1,28 +1,33 @@
 import * as React from 'react';
-import { CollapsibleSection } from '../../components/collapsible-section';
+import { AccordionSection } from '../accordion-section';
 import { StyleControl, StyleControlProps } from '../../controls/style-control';
+import { CollapsibleSection } from '../collapsible-section';
 import { SizeControl, Unit } from '../../controls/control-types/size-control';
 import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 export const SizeSection = () => {
 	return (
-		<CollapsibleSection title={ __( 'Size', 'elementor' ) }>
+		<AccordionSection title={ __( 'Size', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
 				<Stack direction="row" gap={ 2 }>
 					<Control bind="width" label={ __( 'Width', 'elementor' ) } />
 					<Control bind="height" label={ __( 'Height', 'elementor' ) } />
 				</Stack>
-				<Stack direction="row" gap={ 2 }>
-					<Control bind="minWidth" label={ __( 'Min. Width', 'elementor' ) } />
-					<Control bind="minHeight" label={ __( 'Min. Height', 'elementor' ) } />
-				</Stack>
-				<Stack direction="row" gap={ 2 }>
-					<Control bind="maxWidth" label={ __( 'Max. Width', 'elementor' ) } />
-					<Control bind="maxHeight" label={ __( 'Max. Height', 'elementor' ) } />
-				</Stack>
+				<CollapsibleSection>
+					<Stack gap={ 1.5 } sx={ { pt: 1.5 } }>
+						<Stack direction="row" gap={ 2 }>
+							<Control bind="minWidth" label={ __( 'Min. Width', 'elementor' ) } />
+							<Control bind="minHeight" label={ __( 'Min. Height', 'elementor' ) } />
+						</Stack>
+						<Stack direction="row" gap={ 2 }>
+							<Control bind="maxWidth" label={ __( 'Max. Width', 'elementor' ) } />
+							<Control bind="maxHeight" label={ __( 'Max. Height', 'elementor' ) } />
+						</Stack>
+					</Stack>
+				</CollapsibleSection>
 			</Stack>
-		</CollapsibleSection>
+		</AccordionSection>
 	);
 };
 

package/src/components/style-sections/typography-section.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { CollapsibleSection } from '../collapsible-section';
+import { AccordionSection } from '../accordion-section';
 import { Stack } from '@elementor/ui';
 import { TextStyleControl } from '../../controls/control-types/text-style-control';
 import { __ } from '@wordpress/i18n';
 
 export const TypographySection = () => {
 	return (
-		<CollapsibleSection title={ __( 'Typography', 'elementor' ) }>
+		<AccordionSection title={ __( 'Typography', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
 				<TextStyleControl />
 			</Stack>
-		</CollapsibleSection>
+		</AccordionSection>
 	);
 };