fix: Container flex styles (#603)

cloudscape-design · Dec 30, 2022 · d121374 · d121374
1 parent bf862c9
commit d121374
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/pages/container/fit-height.page.tsx b/pages/container/fit-height.page.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useState } from 'react';
+import { Checkbox } from '~components';
 import ColumnLayout from '~components/column-layout';
 import Container from '~components/container';
 import Grid from '~components/grid';
@@ -9,26 +10,26 @@ import Link from '~components/link';
 import ScreenshotArea from '../utils/screenshot-area';
 import styles from './fit-height.scss';
 
-function SmallContainer() {
+function SmallContainer({ fitHeight }: { fitHeight: boolean }) {
   return (
-    <Container fitHeight={true} header={<Header>Short</Header>} footer="footer">
+    <Container fitHeight={fitHeight} header={<Header>Short</Header>} footer="footer">
       <p>One line of text</p>
     </Container>
   );
 }
 
-function MediumContainer() {
+function MediumContainer({ fitHeight }: { fitHeight: boolean }) {
   return (
-    <Container fitHeight={true} header={<Header>Mid size</Header>} footer="footer">
+    <Container fitHeight={fitHeight} header={<Header>Mid size</Header>} footer="footer">
       <p>Content placeholder</p>
       <div style={{ height: 100 }} className={styles.placeholder}></div>
     </Container>
   );
 }
 
-function LargeContainer() {
+function LargeContainer({ fitHeight }: { fitHeight: boolean }) {
   return (
-    <Container fitHeight={true} header={<Header>Large</Header>} footer="footer">
+    <Container fitHeight={fitHeight} header={<Header>Large</Header>} footer="footer">
       <p>
         This container overflows available space. <Link href="#">Learn more</Link>.
       </p>
@@ -38,31 +39,36 @@ function LargeContainer() {
 }
 
 export default function () {
+  const [fitHeight, setFitHeight] = useState(true);
+
   return (
     <article>
       <h1>Fit height property demo</h1>
+      <Checkbox checked={fitHeight} onChange={event => setFitHeight(event.detail.checked)}>
+        Fit height
+      </Checkbox>
       <ScreenshotArea>
         <h2>Inside display:grid</h2>
         <div className={styles.grid}>
-          <SmallContainer />
-          <MediumContainer />
-          <LargeContainer />
+          <SmallContainer fitHeight={fitHeight} />
+          <MediumContainer fitHeight={fitHeight} />
+          <LargeContainer fitHeight={fitHeight} />
         </div>
         <h2>Inside column layout</h2>
         <ColumnLayout columns={3}>
-          <SmallContainer />
-          <MediumContainer />
-          <LargeContainer />
+          <SmallContainer fitHeight={fitHeight} />
+          <MediumContainer fitHeight={fitHeight} />
+          <LargeContainer fitHeight={fitHeight} />
         </ColumnLayout>
         <h2>Inside grid</h2>
         <Grid gridDefinition={[{ colspan: 6 }, { colspan: 3 }, { colspan: 3 }]}>
-          <SmallContainer />
-          <MediumContainer />
-          <LargeContainer />
+          <SmallContainer fitHeight={fitHeight} />
+          <MediumContainer fitHeight={fitHeight} />
+          <LargeContainer fitHeight={fitHeight} />
         </Grid>
         <h2>Container inside height limit</h2>
         <div className={styles.heightLimit}>
-          <LargeContainer />
+          <LargeContainer fitHeight={fitHeight} />
         </div>
       </ScreenshotArea>
     </article>

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -9,11 +9,12 @@
 
 .root {
   @include styles.styles-reset;
+  display: flex;
+  flex-flow: column nowrap;
   word-wrap: break-word;
 
   &-fit-height {
-    display: flex;
-    flex-direction: column;
+    flex-flow: column;
     overflow: hidden;
     height: 100%;
   }
@@ -40,6 +41,8 @@
 }
 
 .header {
+  flex: 0 0 auto;
+
   background-color: awsui.$color-background-container-header;
   border-top-left-radius: awsui.$border-radius-container;
   border-top-right-radius: awsui.$border-radius-container;
@@ -130,10 +133,13 @@ the default white background of the container component.
 }
 
 .content {
+  flex: 1 0 auto;
+
   .root-fit-height > & {
     flex: 1;
     overflow: auto;
   }
+
   &.with-paddings {
     padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
 
@@ -144,6 +150,8 @@ the default white background of the container component.
 }
 
 .footer {
+  flex: 0 0 auto;
+
   &.with-paddings {
     padding: shared.$footer-padding;
   }