feat: Add new expandable-section 'inline' variant (#2649)

pages/expandable-section/permutations.page.tsx

@@ -149,6 +149,14 @@ const permutations = createPermutations<ExpandableSectionProps>([
     headerActions: [<Button variant="inline-link">Some action</Button>],
     children: ['Sample content'],
   },
+  {
+    defaultExpanded: [false, true],
+    variant: ['inline'],
+    headerText: ['Inline with headerText'],
+    headerActions: [undefined, <Button variant="inline-link">Some action</Button>],
+    headerDescription: [undefined, 'Description'],
+    children: ['Sample content'],
+  },
 ]);
 /* eslint-enable react/jsx-key */
 

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

@@ -7268,7 +7268,8 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
  * \`container\` - Use this variant in a detail page alongside other containers.
  * \`navigation\` - Use this variant in the navigation panel with anchors and custom styled content.
    It doesn't have any default styles.
-* \`stacked\` - Use this variant directly adjacent to other stacked containers (such as a container, table).",
+* \`stacked\` - Use this variant directly adjacent to other stacked containers (such as a container, table).
+* \`inline\` - Use this variant in any context where you need reduced padding around the header.",
       "inlineType": Object {
         "name": "ExpandableSectionProps.Variant",
         "type": "union",
@@ -7278,6 +7279,7 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
           "container",
           "navigation",
           "stacked",
+          "inline",
         ],
       },
       "name": "variant",

src/expandable-section/__tests__/expandable-section.test.tsx

@@ -27,12 +27,17 @@ function renderExpandableSection(props: ExpandableSectionProps = {}): Expandable
 }
 
 const containerizedVariants: ExpandableSectionProps.Variant[] = ['container', 'stacked'];
-const variantsWithActions: ExpandableSectionProps.Variant[] = ['container', 'stacked', 'default'];
+const variantsWithActions: ExpandableSectionProps.Variant[] = ['container', 'stacked', 'default', 'inline'];
 
 describe('Expandable Section', () => {
-  const variantsWithDescription: ExpandableSectionProps.Variant[] = [...containerizedVariants, 'default', 'footer'];
+  const variantsWithDescription: ExpandableSectionProps.Variant[] = [
+    ...containerizedVariants,
+    'default',
+    'footer',
+    'inline',
+  ];
   const variantsWithoutDescription: ExpandableSectionProps.Variant[] = ['navigation'];
-  const nonContainerVariants: ExpandableSectionProps.Variant[] = ['default', 'footer', 'navigation'];
+  const nonContainerVariants: ExpandableSectionProps.Variant[] = ['default', 'footer', 'navigation', 'inline'];
 
   describe('variant property', () => {
     test('has one trigger button and no div=[role=button] for variant navigation', () => {
@@ -109,7 +114,7 @@ describe('Expandable Section', () => {
         });
       }
     });
-    test.each<ExpandableSectionProps.Variant>(['default', 'footer', 'container', 'navigation', 'stacked'])(
+    test.each<ExpandableSectionProps.Variant>(['default', 'footer', 'container', 'navigation', 'stacked', 'inline'])(
       'populates content slot correctly for "%s" variant',
       variant => {
         const wrapper = renderExpandableSection({
@@ -179,6 +184,18 @@ describe('Expandable Section', () => {
         });
       }
     });
+    test('header in inline variant', () => {
+      const wrapper = renderExpandableSection({
+        variant: 'inline',
+        header: 'Test header',
+      });
+      const header = wrapper.findHeader().getElement();
+      expect(header).not.toHaveTextContent('Test header');
+      expect(warnOnce).toHaveBeenCalledWith(
+        'ExpandableSection',
+        'Only `headerText` instead of `header` is supported for `inline` variant.'
+      );
+    });
   });
 
   describe('expanded property', () => {
@@ -307,7 +324,7 @@ describe('Expandable Section', () => {
             test('headerInfo', () => {
               testWarnings({ variant, headerInfo: <Link>Info</Link> });
             });
-            if (variant !== 'default') {
+            if (!variantsWithActions.includes(variant)) {
               test('headerActions', () => {
                 testWarnings({ variant, headerActions: <Button>Action</Button> });
               });

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 {
+  variantRequiresActionsDivider,
+  variantSupportsActions,
+  variantSupportsDescription,
+  variantSupportsInfoLink,
+} from './utils';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -255,7 +260,7 @@ export const ExpandableSectionHeader = ({
   onKeyDown,
   onClick,
 }: ExpandableSectionHeaderProps) => {
-  const alwaysShowDivider = variant === 'default' && headerActions;
+  const alwaysShowDivider = variantRequiresActionsDivider(variant) && headerActions;
   const icon = (
     <InternalIcon
       size={variant === 'container' ? 'medium' : 'normal'}
@@ -305,7 +310,10 @@ export const ExpandableSectionHeader = ({
     );
   }
 
-  if (headerText) {
+  if (headerText || variant === 'inline') {
+    if (!headerText && header && variant === 'inline') {
+      warnOnce(componentName, 'Only `headerText` instead of `header` is supported for `inline` variant.');
+    }
     return (
       <ExpandableHeaderTextWrapper
         className={clsx(className, wrapperClassName, expanded && styles.expanded)}

src/expandable-section/interfaces.ts

@@ -10,7 +10,7 @@ export namespace ExpandableSectionProps {
     instanceIdentifier?: string;
   }
 
-  export type Variant = 'default' | 'footer' | 'container' | 'navigation' | 'stacked';
+  export type Variant = 'default' | 'footer' | 'container' | 'navigation' | 'stacked' | 'inline';
   export interface ChangeDetail {
     expanded: boolean;
   }
@@ -47,6 +47,7 @@ export interface ExpandableSectionProps extends BaseComponentProps {
    *  * `navigation` - Use this variant in the navigation panel with anchors and custom styled content.
    *    It doesn't have any default styles.
    * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).
+   * * `inline` - Use this variant in any context where you need reduced padding around the header.
    * @visualrefresh `stacked` variant
    * */
   variant?: ExpandableSectionProps.Variant;

src/expandable-section/styles.scss

@@ -64,6 +64,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   text-align: start;
 
   &-default,
+  &-inline,
   &-footer {
     border-block: awsui.$border-divider-section-width solid transparent;
     border-inline: awsui.$border-divider-section-width solid transparent;
@@ -80,6 +81,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-default,
+  &-inline,
   &-navigation,
   &-footer,
   &-compact {
@@ -88,6 +90,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-default,
+  &-inline,
   &-navigation,
   &-footer {
     font-size: awsui.$font-expandable-heading-size;
@@ -100,9 +103,16 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     &.header-deprecated {
       padding-inline-start: awsui.$space-xxs;
     }
+  }
+  &-default,
+  &-inline {
     &:not(.header-deprecated) {
       padding-inline-start: $icon-total-space-normal;
     }
+    &.wrapper-expanded {
+      padding-block-end: awsui.$space-scaled-xxs;
+      border-block-end-color: awsui.$color-border-divider-default;
+    }
   }
 
   &-footer {
@@ -141,10 +151,6 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
     }
   }
-
-  &-default.wrapper-expanded {
-    border-block-end-color: awsui.$color-border-divider-default;
-  }
 }
 
 .header {
@@ -237,7 +243,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .content {
   display: none;
 
-  &-default {
+  &-default,
+  &-inline {
     padding-block: awsui.$space-scaled-xs;
     padding-inline: 0;
   }

src/expandable-section/utils.ts

@@ -2,14 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 import { InternalVariant } from './interfaces';
 
+const variantIsOneOf = (variant: InternalVariant, oneOf: InternalVariant[]) => oneOf.includes(variant);
+
 export function variantSupportsDescription(variant: InternalVariant) {
-  return ['container', 'default', 'footer'].includes(variant);
+  return variantIsOneOf(variant, ['container', 'default', 'footer', 'inline']);
 }
 
 export function variantSupportsActions(variant: InternalVariant) {
-  return ['container', 'compact', 'default'].includes(variant);
+  return variantIsOneOf(variant, ['container', 'compact', 'default', 'inline']);
 }
 
 export function variantSupportsInfoLink(variant: InternalVariant) {
-  return ['container', 'compact'].includes(variant);
+  return variantIsOneOf(variant, ['container', 'compact']);
+}
+
+export function variantRequiresActionsDivider(variant: InternalVariant) {
+  return variantIsOneOf(variant, ['default', 'inline']);
 }