Merge pull request #2515 from teamleadercrm/AdvancedCollapsible/indent

AdvancedCollapsible: children indent

CHANGELOG.md

@@ -12,12 +12,14 @@
 
 ### Dependency updates
 
-## [18.5.0] - 2023-01-03
+## [18.5.0] - 2023-01-04
 
 ### Added
 
 - `AdvancedCollapsible`: Added `defaultIsCollapsed` prop to be able to set it's state ([@BeirlaenAaron](https://github.com/BeirlaenAaron) in [#2511](https://github.com/teamleadercrm/ui/pull/2511))
 
+- `AdvancedCollapsible`: Added `indent` boolean prop ([@BeirlaenAaron](https://github.com/driesd) in [#2515](https://github.com/teamleadercrm/ui/pull/2515))
+
 ## [18.4.0] - 2023-01-02
 
 ### Added

src/components/advancedCollapsible/AdvancedCollapsible.tsx

@@ -16,6 +16,7 @@ export type AllowedAdvancedCollapsibleColor = Exclude<
 export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
   color?: AllowedAdvancedCollapsibleColor;
   children: ReactNode;
+  indent?: boolean;
   title: string;
   size?: AllowedAdvancedCollapsibleSize;
   defaultIsCollapsed?: boolean;
@@ -24,6 +25,7 @@ export interface AdvancedCollapsibleProps extends Omit<BoxProps, 'size'> {
 const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({
   children,
   color = 'teal',
+  indent = true,
   size = 'medium',
   title,
   defaultIsCollapsed = true,
@@ -49,7 +51,7 @@ const AdvancedCollapsible: GenericComponent<AdvancedCollapsibleProps> = ({
         </TitleElement>
       </Box>
       {!collapsed && (
-        <Box className={theme['children']} marginTop={2}>
+        <Box {...(indent && { className: theme['children-indent'] })} marginTop={2}>
           {children}
         </Box>
       )}

src/components/advancedCollapsible/theme.css

@@ -2,6 +2,6 @@
   cursor: pointer;
 }
 
-.children {
+.children-indent {
   padding-left: 20px;
 }