From 240fa43dbbb3c0f2e35d4f8d48556ad063b835aa Mon Sep 17 00:00:00 2001 From: Gethin Webster Date: Tue, 3 Sep 2024 10:43:27 +0200 Subject: [PATCH] feat: Allow removing paddings from expandable section --- .../expandable-section/permutations.page.tsx | 14 ++++++++++ .../__snapshots__/documenter.test.ts.snap | 6 ++++ .../expandable-section-header.tsx | 16 +++++++++-- src/expandable-section/interfaces.ts | 5 ++++ src/expandable-section/internal.tsx | 2 ++ src/expandable-section/styles.scss | 28 +++++++++++-------- src/expandable-section/utils.ts | 4 +++ src/side-navigation/parts.tsx | 1 + 8 files changed, 62 insertions(+), 14 deletions(-) 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..e3fb1d96cf5 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 the component's default padding is removed. This only works with \`default\` and \`footer\` variants.", + "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..6a0076a5744 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 the component's default padding is removed. This only works with `default` and `footer` variants. + */ + 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..6605dc6f10a 100644 --- a/src/expandable-section/styles.scss +++ b/src/expandable-section/styles.scss @@ -67,6 +67,9 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{ &-footer { border-block: awsui.$border-divider-section-width solid transparent; border-inline: awsui.$border-divider-section-width solid transparent; + &.with-padding { + padding-block: awsui.$space-scaled-xxs; + } } &-navigation { // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together @@ -95,26 +98,26 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{ } &-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 +146,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..c43b16d3a05 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'].includes(variant); +} diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx index ae15477164d..e8015877a28 100644 --- a/src/side-navigation/parts.tsx +++ b/src/side-navigation/parts.tsx @@ -293,6 +293,7 @@ function Section({ definition, activeHref, fireFollow, fireChange, variant }: Se variant === 'section-group' && styles['section--no-ident'], isVisualRefresh && styles.refresh )} + disablePaddings={true} headerText={definition.text} >