fix(container): Prevent overflowing content

cloudscape-design · Aug 3, 2022 · c6d158c · c6d158c
1 parent 39d3fc1
commit c6d158c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 17 deletions.
diff --git a/pages/container/simple.page.tsx b/pages/container/simple.page.tsx
@@ -97,6 +97,17 @@ export default function SimpleContainers() {
               tortor, mollis vitae molestie sed, malesuada.
             </Container>
           </div>
+          <Container
+            disableContentPaddings={true}
+            disableHeaderPaddings={true}
+            header={<div style={{ background: 'rgba(255, 0, 0, 0.1)', width: '100%' }}>Header Area</div>}
+            footer="Footer"
+          >
+            <div style={{ background: 'rgba(0, 0, 255, 0.1)', width: '100%' }}>Content Area</div>
+          </Container>
+          <Container disableContentPaddings={true}>
+            <div style={{ background: 'rgba(0, 0, 255, 0.1)', width: '100%' }}>Content Area</div>
+          </Container>
         </SpaceBetween>
       </ScreenshotArea>
     </article>

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -11,28 +11,28 @@
   @include styles.styles-reset;
   display: block;
   word-wrap: break-word;
-  &.variant {
-    &-default,
-    &-stacked {
-      @include shared.borders-and-shadows;
-      background-color: awsui.$color-background-container-content;
-    }
-    &-stacked:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &-stacked + &-stacked {
-      @include shared.divider;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      box-shadow: awsui.$shadow-container-stacked;
-    }
+
+  &.variant-default,
+  &.variant-stacked {
+    @include shared.borders-and-shadows;
+    background-color: awsui.$color-background-container-content;
+  }
+
+  &.variant-stacked:not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &.variant-stacked + &.variant-stacked {
+    @include shared.divider;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    box-shadow: awsui.$shadow-container-stacked;
   }
 }
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-radius: awsui.$border-container-radius;
   // sticky positioning may be disabled (on mobile or if browser does not support it),
   // but some markup still requires a new stacking context
   &-sticky-disabled {
@@ -96,6 +96,31 @@ the default white background of the container component.
   }
 }
 
+/*
+ * Applies border-radius constraint from parent to children with `overflow:auto`
+ * to prevent content exceeding the parent container if border-radius is not 0.
+ * Stacked containers mirror the parent behavior by having border-radius set to 0.
+ */
+.root.header,
+.root.content:first-child {
+  border-top-left-radius: awsui.$border-container-radius;
+  border-top-right-radius: awsui.$border-container-radius;
+  overflow: auto;
+}
+
+.root.header:last-child,
+.root.content:last-child {
+  border-bottom-left-radius: awsui.$border-container-radius;
+  border-bottom-right-radius: awsui.$border-container-radius;
+  overflow: auto;
+}
+
+.root.variant-stacked + .root.variant-stacked > .header,
+.root.variant-stacked + .root.variant-stacked > .content:first-child {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .footer {
   &.with-paddings {
     padding: shared.$footer-padding;