fix: Fixes container overflow padding

pages/container/content-overflow.page.tsx

@@ -0,0 +1,228 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useContext } from 'react';
+
+import {
+  Alert,
+  BarChart,
+  Box,
+  Checkbox,
+  ColumnLayout,
+  Container,
+  ContainerProps,
+  FormField,
+  Header,
+  KeyValuePairs,
+  Link,
+  Slider,
+  SpaceBetween,
+  Table,
+} from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import {
+  barChartInstructions,
+  commonProps as barChartCommonProps,
+  data3 as barChartData,
+} from '../mixed-line-bar-chart/common';
+import { generateItems } from '../table/generate-data';
+import { ARIA_LABELS, columnsConfig } from '../table/shared-configs';
+import ScreenshotArea from '../utils/screenshot-area';
+
+type DemoContext = React.Context<
+  AppContextType<{ hideFooters: boolean; useContentMargins: boolean; height: string; columns: string }>
+>;
+
+const instances = generateItems(10);
+
+function ContainerPlayground(props: ContainerProps) {
+  const { urlParams } = useContext(AppContext as DemoContext);
+  const blockSize = parseInt(urlParams.height ?? '') || 225;
+  return (
+    <div style={{ blockSize }}>
+      <Container {...props} fitHeight={true} footer={urlParams.hideFooters ? null : 'Footer'} />
+    </div>
+  );
+}
+
+export default function () {
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+  const columns = parseInt(urlParams.columns ?? '') || 3;
+  const blockSize = parseInt(urlParams.height ?? '') || 225;
+  return (
+    <Box margin="m">
+      <h1>Container content overflow demo</h1>
+
+      <Box margin={{ bottom: 'm' }}>
+        <SpaceBetween size="s">
+          <Checkbox
+            checked={urlParams.hideFooters ?? false}
+            onChange={event => setUrlParams({ hideFooters: event.detail.checked })}
+          >
+            Hide footers
+          </Checkbox>
+
+          <FormField label="Height">
+            <Slider
+              value={blockSize}
+              onChange={({ detail }) => setUrlParams({ height: detail.value.toString() })}
+              min={50}
+              max={700}
+            />
+          </FormField>
+
+          <FormField label="Columns">
+            <Slider
+              value={columns}
+              onChange={({ detail }) => setUrlParams({ columns: detail.value.toString() })}
+              min={1}
+              max={4}
+            />
+          </FormField>
+        </SpaceBetween>
+      </Box>
+
+      <ScreenshotArea gutters={false}>
+        <ColumnLayout columns={columns}>
+          <ContainerPlayground header={<Header headingTagOverride="h2">Text</Header>}>
+            <p>
+              Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in
+              reprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitesse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est <Link>laborum</Link>.
+            </p>
+          </ContainerPlayground>
+
+          <ContainerPlayground header={<Header headingTagOverride="h2">Service overview</Header>}>
+            <ServiceOverview />
+          </ContainerPlayground>
+
+          <ContainerPlayground header={<Header headingTagOverride="h2">Alert</Header>}>
+            <Alert statusIconAriaLabel="Info">
+              Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in
+              reprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitessereprehenderitinvoluptatevelitesse
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+              officia deserunt mollit anim id est <Link>laborum</Link>.
+            </Alert>
+          </ContainerPlayground>
+
+          <ContainerPlayground
+            header={
+              <Header
+                headingTagOverride="h2"
+                counter={`(${instances.length})`}
+                description="Uses default container paddings"
+              >
+                Instances
+              </Header>
+            }
+          >
+            <InstancesTable label="Instances 1" />
+          </ContainerPlayground>
+
+          <ContainerPlayground
+            disableContentPaddings={true}
+            header={
+              <Header
+                headingTagOverride="h2"
+                counter={`(${instances.length})`}
+                description="Uses custom content spacing"
+              >
+                Instances
+              </Header>
+            }
+          >
+            <Box padding={{ horizontal: 'l' }} margin={{ bottom: 'l' }}>
+              <InstancesTable label="Instances 2" />
+            </Box>
+          </ContainerPlayground>
+
+          <ContainerPlayground header={<Header headingTagOverride="h2">Calories</Header>}>
+            <CaloriesBarChart />
+          </ContainerPlayground>
+        </ColumnLayout>
+      </ScreenshotArea>
+    </Box>
+  );
+}
+
+function ServiceOverview() {
+  return (
+    <KeyValuePairs
+      columns={4}
+      items={[
+        {
+          label: 'Running instances',
+          value: (
+            <Link variant="awsui-value-large" href="#" ariaLabel="Running instances (14)">
+              14
+            </Link>
+          ),
+        },
+        {
+          label: 'Volumes',
+          value: (
+            <Link variant="awsui-value-large" href="#" ariaLabel="Volumes (126)">
+              126
+            </Link>
+          ),
+        },
+        {
+          label: 'Security groups',
+          value: (
+            <Link variant="awsui-value-large" href="#" ariaLabel="Security groups (116)">
+              116
+            </Link>
+          ),
+        },
+        {
+          label: 'Load balancers',
+          value: (
+            <Link variant="awsui-value-large" href="#" ariaLabel="Load balancers (28)">
+              28
+            </Link>
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+function InstancesTable({ label }: { label: string }) {
+  return (
+    <Table
+      ariaLabels={{ ...ARIA_LABELS, tableLabel: label }}
+      variant="borderless"
+      columnDefinitions={columnsConfig}
+      items={instances}
+    />
+  );
+}
+
+function CaloriesBarChart() {
+  return (
+    <BarChart
+      {...barChartCommonProps}
+      height={200}
+      fitHeight={true}
+      hideFilter={true}
+      hideLegend={true}
+      series={[
+        { title: 'Calories', type: 'bar', data: barChartData },
+        { title: 'Threshold', type: 'threshold', y: 400 },
+      ]}
+      xDomain={['Potatoes', 'Tangerines', 'Chocolate', 'Apples', 'Oranges']}
+      yDomain={[0, 700]}
+      xTitle="Food"
+      yTitle="Calories (kcal)"
+      xScaleType="categorical"
+      ariaLabel="Bar chart"
+      ariaDescription={barChartInstructions}
+    />
+  );
+}

src/__a11y__/run-a11y-tests.ts

@@ -24,19 +24,21 @@ function urlFormatter(inputUrl: string, theme: Theme, mode: Mode) {
 
 export default function runA11yTests(theme: Theme, mode: Mode, skip: string[] = []) {
   describe(`A11y checks for ${mode} ${theme}`, () => {
-    findAllPages().forEach(inputUrl => {
-      const skipPages = [
-        ...skip,
-        'theming/tokens',
-        // this page intentionally has issues to test the helper
-        'undefined-texts',
-      ];
-      const testFunction = skipPages.includes(inputUrl) ? test.skip : test;
-      const url = urlFormatter(inputUrl, theme, mode);
-      testFunction(
-        url,
-        setupTest(url, page => page.assertNoAxeViolations())
-      );
-    });
+    findAllPages()
+      .filter(url => url.includes('content-overflow'))
+      .forEach(inputUrl => {
+        const skipPages = [
+          ...skip,
+          'theming/tokens',
+          // this page intentionally has issues to test the helper
+          'undefined-texts',
+        ];
+        const testFunction = skipPages.includes(inputUrl) ? test.skip : test;
+        const url = urlFormatter(inputUrl, theme, mode);
+        testFunction(
+          url,
+          setupTest(url, page => page.assertNoAxeViolations())
+        );
+      });
   });
 }

src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -182,6 +182,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_item_zqq3x",
   ],
   "container": [
+    "awsui_content-inner_14iqq",
     "awsui_content-wrapper_14iqq",
     "awsui_content_14iqq",
     "awsui_footer_14iqq",

src/container/internal.tsx

@@ -170,7 +170,13 @@ export default function InternalContainer({
             [styles['with-paddings']]: !disableContentPaddings,
           })}
         >
-          {children}
+          <div
+            className={clsx(styles['content-inner'], {
+              [styles['with-paddings']]: !disableContentPaddings,
+            })}
+          >
+            {children}
+          </div>
         </div>
         {footer && (
           <div

src/container/styles.scss

@@ -248,7 +248,7 @@
     overflow: auto;
   }
   &.with-paddings {
-    padding-block: awsui.$space-scaled-l;
+    padding-block-start: awsui.$space-scaled-l;
     padding-inline: awsui.$space-container-horizontal;
 
     .header + & {
@@ -259,6 +259,15 @@
     }
   }
 }
+.content-inner {
+  box-sizing: border-box;
+  block-size: 100%;
+
+  &.with-paddings {
+    block-size: calc(100% - awsui.$space-scaled-l);
+    padding-block-end: awsui.$space-scaled-l;
+  }
+}
 
 .footer {
   &.with-paddings {

src/test-utils/dom/expandable-section/index.ts

@@ -26,7 +26,7 @@ export default class ExpandableSectionWrapper extends ComponentWrapper {
 
   findExpandedContent(): ElementWrapper | null {
     return this.find(
-      `:scope > .${styles['content-expanded']}, :scope > .${containerStyles['content-wrapper']} > .${containerStyles.content} > .${styles['content-expanded']}`
+      `:scope > .${styles['content-expanded']}, :scope > .${containerStyles['content-wrapper']} > .${containerStyles.content} > .${containerStyles['content-inner']} > .${styles['content-expanded']}`
     );
   }