diff --git a/pages/expandable-section/permutations.page.tsx b/pages/expandable-section/permutations.page.tsx index bcda05ef7ed..8551316a1d6 100644 --- a/pages/expandable-section/permutations.page.tsx +++ b/pages/expandable-section/permutations.page.tsx @@ -149,6 +149,20 @@ const permutations = createPermutations([ headerActions: [], 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 */ diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap index 14c9e0b3cca..2fcc95e1821 100644 --- a/src/__tests__/__snapshots__/documenter.test.ts.snap +++ b/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.", diff --git a/src/expandable-section/expandable-section-header.tsx b/src/expandable-section/expandable-section-header.tsx index 0726e2330e4..1964ad8d4de 100644 --- a/src/expandable-section/expandable-section-header.tsx +++ b/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 { @@ -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 ( diff --git a/src/expandable-section/interfaces.ts b/src/expandable-section/interfaces.ts index 33ed4f2bbcc..70f501720fa 100644 --- a/src/expandable-section/interfaces.ts +++ b/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. */ diff --git a/src/expandable-section/internal.tsx b/src/expandable-section/internal.tsx index e13b289c8e0..1da20595c28 100644 --- a/src/expandable-section/internal.tsx +++ b/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} /> } diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss index 534d9f619fb..d3374eb1963 100644 --- a/src/expandable-section/styles.scss +++ b/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; } } diff --git a/src/expandable-section/utils.ts b/src/expandable-section/utils.ts index 82487c2400c..4667ee5d52b 100644 --- a/src/expandable-section/utils.ts +++ b/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); +}