Fieldset: Accordion mode auto-indentation (#1156)

* Added auto-indent to Fieldset accordion mode

* Added changelog

* Updated snapshot

Author: Elliot

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED]
 
+### Changed
+
+- `Fieldset` accordion mode auto-indents elements in the inner `AccordionContent`
+
 ### Fixed
 
 - `DialogContent` with `borderBottom` prop CSS output error (no border, no flex: 8)

packages/components/src/Form/Fieldset/Fieldset.tsx

@@ -182,6 +182,13 @@ export const Fieldset = styled(FieldsetLayout)`
   ${simpleLayoutCSS}
 
   ${AccordionContent} {
+    padding-left: ${({ theme }) => {
+      const borderWidth = '1px'
+      const defaultIndicatorSize = theme.space.medium
+      const defaultIndicatorGap = theme.space.xsmall
+
+      return `calc(${borderWidth} + ${defaultIndicatorSize} + ${defaultIndicatorGap})`
+    }};
     padding-top: ${({ theme }) => theme.space.medium};
   }
 

packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap

@@ -129,6 +129,7 @@ exports[`Fieldset 1`] = `
 }
 
 .c0 .c12 {
+  padding-left: calc(1px + 1rem + 0.5rem);
   padding-top: 1rem;
 }