feat: Allow removing paddings from expandable section

pages/expandable-section/permutations.page.tsx

@@ -149,6 +149,20 @@ const permutations = createPermutations<ExpandableSectionProps>([
     headerActions: [<Button variant="inline-link">Some action</Button>],
     children: ['Sample content'],
   },
+  {
+    disablePaddings: [true],
+    defaultExpanded: [false, true],
+    variant: ['default', 'footer', 'navigation', 'stacked', 'container'],
+    headerText: ['No paddings (headerText)'],
+    children: ['Sample content'],
+  },
+  {
+    disablePaddings: [true],
+    defaultExpanded: [false, true],
+    variant: ['default', 'footer', 'navigation', 'stacked', 'container'],
+    header: ['No paddings (header)'],
+    children: ['Sample content'],
+  },
 ]);
 /* eslint-enable react/jsx-key */
 

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -7199,6 +7199,12 @@ manner even if you provide a value for this property.",
       "optional": true,
       "type": "boolean",
     },
+    Object {
+      "description": "Determines whether padding around the component is removed.",
+      "name": "disablePaddings",
+      "optional": true,
+      "type": "boolean",
+    },
     Object {
       "description": "Determines whether the component is in the expanded state (that is, with content visible). The component operates in a controlled
 manner if you provide a value for this property.",

src/expandable-section/expandable-section-header.tsx

@@ -11,7 +11,12 @@ import InternalIcon from '../icon/internal';
 import { isDevelopment } from '../internal/is-development';
 import { GeneratedAnalyticsMetadataExpandableSectionExpand } from './analytics-metadata/interfaces';
 import { ExpandableSectionProps, InternalVariant } from './interfaces';
-import { variantSupportsActions, variantSupportsDescription, variantSupportsInfoLink } from './utils';
+import {
+  variantSupportsActions,
+  variantSupportsDescription,
+  variantSupportsDisabledPaddings,
+  variantSupportsInfoLink,
+} from './utils';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -54,6 +59,7 @@ interface ExpandableSectionHeaderProps extends Omit<ExpandableDefaultHeaderProps
   headerActions?: ReactNode;
   headingTagOverride?: ExpandableSectionProps.HeadingTag;
   ariaLabelledBy?: string;
+  disablePaddings?: boolean;
 }
 
 const getExpandActionAnalyticsMetadataAttribute = (expanded: boolean) => {
@@ -251,6 +257,7 @@ export const ExpandableSectionHeader = ({
   ariaControls,
   ariaLabel,
   ariaLabelledBy,
+  disablePaddings,
   onKeyUp,
   onKeyDown,
   onClick,
@@ -288,10 +295,15 @@ export const ExpandableSectionHeader = ({
     warnOnce(componentName, `The \`headerDescription\` prop is not supported for the ${variant} variant.`);
   }
 
+  if (disablePaddings && !variantSupportsDisabledPaddings(variant) && isDevelopment) {
+    warnOnce(componentName, `The \`disablePaddings\` prop is not supported for the ${variant} variant.`);
+  }
+
   const wrapperClassName = clsx(
     styles.wrapper,
     styles[`wrapper-${variant}`],
-    (expanded || alwaysShowDivider) && styles['wrapper-expanded']
+    (expanded || alwaysShowDivider) && styles['wrapper-expanded'],
+    !disablePaddings && styles['with-padding']
   );
   if (variant === 'navigation') {
     return (

src/expandable-section/interfaces.ts

@@ -56,6 +56,11 @@ export interface ExpandableSectionProps extends BaseComponentProps {
    */
   disableContentPaddings?: boolean;
 
+  /**
+   * Determines whether padding around the component is removed.
+   */
+  disablePaddings?: boolean;
+
   /**
    * Primary content displayed in the expandable section element.
    */

src/expandable-section/internal.tsx

@@ -37,6 +37,7 @@ export default function InternalExpandableSection({
   headerActions,
   headingTagOverride,
   disableContentPaddings,
+  disablePaddings,
   headerAriaLabel,
   __internalRootRef,
   __injectAnalyticsComponentMetadata,
@@ -118,6 +119,7 @@ export default function InternalExpandableSection({
           headerInfo={headerInfo}
           headerActions={headerActions}
           headingTagOverride={headingTagOverride}
+          disablePaddings={disablePaddings}
           {...triggerProps}
         />
       }

src/expandable-section/styles.scss

@@ -92,29 +92,33 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-footer {
     font-size: awsui.$font-expandable-heading-size;
     letter-spacing: awsui.$letter-spacing-heading-s;
+
+    &.with-padding {
+      padding-block: awsui.$space-scaled-xxs;
+    }
   }
 
   &-default {
-    padding-block: awsui.$space-scaled-xxs;
-    padding-inline-end: awsui.$space-xxs;
-    &.header-deprecated {
-      padding-inline-start: awsui.$space-xxs;
-    }
-    &:not(.header-deprecated) {
-      padding-inline-start: $icon-total-space-normal;
+    &.with-padding {
+      padding-inline-end: awsui.$space-xxs;
+      &.header-deprecated {
+        padding-inline-start: awsui.$space-xxs;
+      }
     }
   }
 
   &-footer {
-    padding-block: awsui.$space-scaled-xxs;
+    &.with-padding {
+      padding-inline-end: 0;
+      &.header-deprecated {
+        padding-inline-start: 0;
+      }
+    }
   }
 
   &-footer,
+  &-default,
   &-compact {
-    padding-inline-end: 0;
-    &.header-deprecated {
-      padding-inline-start: 0;
-    }
     &:not(.header-deprecated) {
       padding-inline-start: $icon-total-space-normal;
     }
@@ -143,6 +147,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-default.wrapper-expanded {
+    padding-block-end: awsui.$space-scaled-xxs;
     border-block-end-color: awsui.$color-border-divider-default;
   }
 }

src/expandable-section/utils.ts

@@ -13,3 +13,7 @@ export function variantSupportsActions(variant: InternalVariant) {
 export function variantSupportsInfoLink(variant: InternalVariant) {
   return ['container', 'compact'].includes(variant);
 }
+
+export function variantSupportsDisabledPaddings(variant: InternalVariant) {
+  return ['default', 'footer', 'navigation'].includes(variant);
+}