Making WaterFall cards have max height of 600px (#2770)

* trying to add max height to waterfall

* making max-height of waterfall card 100% instead of static value and fixing content section height

* removing extra estimated size set

* replacing max-height with block-height and removing extra one

* removing defunct elements from card chromatic story

* addressing review comment

Co-authored-by: Robert Snow <[email protected]>

Author: LFDanLu

packages/@adobe/spectrum-css-temp/components/card/index.css

@@ -224,9 +224,10 @@ user-provided
   }
 
   .spectrum-Card-grid {
+    block-size: 100%;
     display: grid;
     grid-template-columns: var(--spectrum-card-body-padding-left) minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto) var(--spectrum-card-body-padding-right);
-    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) 1fr var(--spectrum-card-body-padding-bottom);
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-global-dimension-size-300) minmax(var(--spectrum-actionbutton-height), auto) auto var(--spectrum-card-body-padding-bottom);
     /* absolutely position avatar relative to the preview */
     grid-template-areas:
       "preview preview preview preview    preview"
@@ -566,7 +567,7 @@ user-provided
     block-size: 100%;
     display: grid;
     grid-template-columns: minmax(0, auto) minmax(var(--spectrum-global-dimension-size-500), 1fr) minmax(0, auto);
-    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), auto) var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) 1fr;
+    grid-template-rows: minmax(var(--spectrum-card-coverphoto-height), 1fr) var(--spectrum-card-quiet-body-header-margin-top) minmax(var(--spectrum-actionbutton-height), auto) auto;
     grid-template-areas:
       "preview preview preview"
       ".       .       .      "

packages/@react-spectrum/card/chromatic/CardView.chromatic.tsx

@@ -10,10 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionMenu, Item} from '@react-spectrum/menu';
-import {Button} from '@react-spectrum/button';
 import {Card, CardView, GalleryLayout, GridLayout, WaterfallLayout} from '..';
-import {Content, Footer} from '@react-spectrum/view';
+import {Content} from '@react-spectrum/view';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Meta, Story} from '@storybook/react';
@@ -68,13 +66,6 @@ function DynamicCardView(props: SpectrumCardViewProps<object>) {
           <Heading>{item.title}</Heading>
           <Text slot="detail">PNG</Text>
           <Content>Description</Content>
-          <ActionMenu>
-            <Item>Action 1</Item>
-            <Item>Action 2</Item>
-          </ActionMenu>
-          <Footer>
-            <Button variant="primary">Something</Button>
-          </Footer>
         </Card>
       )}
     </CardView>

packages/@react-spectrum/card/src/WaterfallLayout.tsx

@@ -172,10 +172,9 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
       // TODO: also not sure about copying layout info vs mutating it. Listlayout does the below
       // but I feel that is because it actually maintained a layoutNode map cache which this doesn't have
       let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
+      newLayoutInfo.rect.height = size.height < 600 ? size.height : 600;
+      newLayoutInfo.estimatedSize = false;
       this.layoutInfos.set(key, newLayoutInfo);
-      // TODO: v2 had layoutInfo.estimatedSize = view.estimatedSize || false; but we can't do the same here?
-      layoutInfo.estimatedSize = false;
       return true;
     }