feat(List): add tile view

Author: Lisa18289

packages/components/src/components/ContextMenu/lib.ts

@@ -25,7 +25,5 @@ export const getMenuItemSelectionVariant = (
 export const getCloseOverlayType = (
   selectionMode?: ContextMenuSelectionMode,
 ) => {
-  return selectionMode === "single" || selectionMode === "navigation"
-    ? "ContextMenu"
-    : undefined;
+  return selectionMode === "multiple" ? undefined : "ContextMenu";
 };

packages/components/src/components/List/List.tsx

@@ -179,6 +179,7 @@ export const List = flowComponent("List", (props) => {
                 <TunnelExit id="listSummary" />
               )}
               {listModel.viewMode === "list" && <Items />}
+              {listModel.viewMode === "tiles" && <Items tiles />}
               {listModel.viewMode === "table" && <Table />}
             </div>
             <Footer />

packages/components/src/components/List/components/Header/Header.tsx

@@ -24,6 +24,7 @@ export const Header: FC<Props> = (props) => {
     list.visibleSorting.length === 0 &&
     !list.search &&
     !list.table &&
+    !(list.itemView?.showTiles && list.itemView?.showList) &&
     !hasActionGroup
   ) {
     return null;

packages/components/src/components/List/components/Header/components/ViewModeMenu/ViewModeMenu.tsx

@@ -18,12 +18,15 @@ export const ViewModeMenu: FC = () => {
   const selectedViewMode = list.viewMode;
 
   const availableViewModes: ListViewMode[] = [];
-  if (list.itemView) {
+  if (list.itemView?.showList) {
     availableViewModes.push("list");
   }
   if (list.table) {
     availableViewModes.push("table");
   }
+  if (list.itemView?.showTiles) {
+    availableViewModes.push("tiles");
+  }
 
   if (availableViewModes.length <= 1) {
     return null;

…s/List/components/Items/Items.module.css …/List/components/Items/Items.module.scsspackages/components/src/components/List/components/Items/Items.module.css renamed to packages/components/src/components/List/components/Items/Items.module.scss packages/components/src/components/List/components/Items/Items.module.css renamed to packages/components/src/components/List/components/Items/Items.module.scss

@@ -19,4 +19,11 @@
   &[data-empty="true"] {
     border: none;
   }
+
+  &.tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    border: none;
+    gap: var(--list-item--spacing);
+  }
 }

packages/components/src/components/List/components/Items/Items.tsx

@@ -1,14 +1,20 @@
 import type { FC } from "react";
 import React from "react";
 import { useList } from "@/components/List/hooks/useList";
-import styles from "./Items.module.css";
+import styles from "./Items.module.scss";
 import clsx from "clsx";
 import * as Aria from "react-aria-components";
 import Item from "@/components/List/components/Items/components/Item/Item";
 import { EmptyView } from "@/components/List/components/EmptyView/EmptyView";
 import { FallbackItems } from "@/components/List/components/Items/components/FallbackItems/FallbackItems";
 
-export const Items: FC = () => {
+interface Props {
+  tiles?: boolean;
+}
+
+export const Items: FC<Props> = (props) => {
+  const { tiles } = props;
+
   const list = useList();
   const isLoading = list.loader.useIsLoading();
   const isInitiallyLoading = list.loader.useIsInitiallyLoading();
@@ -18,10 +24,14 @@ export const Items: FC = () => {
   }
 
   const rows = list.items.entries.map((item) => (
-    <Item key={item.id} data={item.data} id={item.id} />
+    <Item key={item.id} data={item.data} id={item.id} tiles={tiles} />
   ));
 
-  const rootClassName = clsx(styles.items, isLoading && styles.isLoading);
+  const rootClassName = clsx(
+    styles.items,
+    isLoading && styles.isLoading,
+    tiles && styles.tiles,
+  );
 
   return (
     <div aria-hidden={isInitiallyLoading} aria-busy={isLoading}>

packages/components/src/components/List/components/Items/components/Item/Item.module.scss

@@ -31,4 +31,27 @@
       background-color: var(--list-item--background-color--pressed);
     }
   }
+
+  &.tile {
+    border-color: var(--list-item--border-color);
+    border-width: var(--list-item--border-width);
+    border-style: var(--list-item--border-style);
+    border-radius: var(--list-item--corner-radius);
+
+    &:where(.hasAction) {
+      &:not(.isSelected) {
+        &:hover {
+          :global(.flow--avatar) {
+            filter: brightness(var(--image-button--brightness--hover));
+          }
+        }
+      }
+
+      &[data-pressed] {
+        :global(.flow--avatar) {
+          filter: brightness(var(--image-button--brightness--pressed));
+        }
+      }
+    }
+  }
 }

packages/components/src/components/List/components/Items/components/Item/Item.tsx

@@ -11,10 +11,11 @@ import { useGridItemProps } from "@/components/List/components/Items/components/
 interface Props extends PropsWithChildren {
   id: Key;
   data: never;
+  tiles?: boolean;
 }
 
 export const Item = (props: Props) => {
-  const { id, data } = props;
+  const { id, data, tiles } = props;
   const list = useList();
 
   const itemView = list.itemView;
@@ -37,6 +38,7 @@ export const Item = (props: Props) => {
           styles.item,
           hasAction && styles.hasAction,
           props.isSelected && styles.isSelected,
+          tiles && styles.tile,
         )
       }
       textValue={textValue}
@@ -48,10 +50,19 @@ export const Item = (props: Props) => {
   );
 };
 
-export const ItemContainer: FC<PropsWithChildren> = (props) => (
-  <Aria.GridListItem textValue="-" className={styles.item}>
-    {props.children}
-  </Aria.GridListItem>
-);
+export const ItemContainer: FC<PropsWithChildren & { tiles?: boolean }> = (
+  props,
+) => {
+  const { tiles, children } = props;
+
+  return (
+    <Aria.GridListItem
+      textValue="-"
+      className={clsx(styles.item, styles.fallbackItem, tiles && styles.tile)}
+    >
+      {children}
+    </Aria.GridListItem>
+  );
+};
 
 export default Item;

packages/components/src/components/List/components/Items/components/Item/components/SkeletonView/SkeletonView.tsx

@@ -4,14 +4,23 @@ import { Heading } from "@/components/Heading";
 import { Text } from "@/components/Text";
 import View from "@/components/List/components/Items/components/Item/components/View/View";
 import SkeletonText from "@/components/SkeletonText";
+import { useList } from "@/components/List";
+import { Skeleton } from "@/components/Skeleton";
 
-export const SkeletonView: FC = () => (
-  <View>
-    <Heading>
-      <SkeletonText width="200px" />
-    </Heading>
-    <Text>
-      <SkeletonText width="300px" />
-    </Text>
-  </View>
-);
+export const SkeletonView: FC = () => {
+  const list = useList();
+
+  const showTiles = list.viewMode === "tiles";
+
+  return (
+    <View>
+      {showTiles && <Skeleton style={{ aspectRatio: 16 / 9 }} />}
+      <Heading>
+        <SkeletonText width="200px" />
+      </Heading>
+      <Text>
+        <SkeletonText width="300px" />
+      </Text>
+    </View>
+  );
+};

packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss

@@ -4,7 +4,8 @@
   display: flex;
   padding: var(--list-item--padding);
   gap: var(--list-item--spacing);
-  align-items: start;
+  align-items: center;
+  flex-wrap: wrap;
 
   .content {
     display: flex;
@@ -24,7 +25,8 @@
       "avatar subtitle";
     grid-template-columns: auto 1fr;
 
-    &:empty {
+    &:empty,
+    .subTitle:empty {
       display: none;
     }
 
@@ -35,7 +37,7 @@
       grid-template-columns: 1fr;
     }
 
-    &:not(:has(.subTitle)) {
+    &:has(.subTitle:empty) {
       grid-template-areas: "avatar title";
 
       &:not(:has(.avatar)) {
@@ -77,4 +79,51 @@
     order: 4;
     width: 100%;
   }
+
+  &.tile {
+    padding: 0;
+
+    .action {
+      display: none;
+    }
+
+    .avatarContainer {
+      width: 100%;
+      overflow: hidden;
+      border-bottom-color: var(--list-item--border-color);
+      border-bottom-width: var(--list-item--border-width);
+      border-bottom-style: var(--list-item--border-style);
+      border-top-left-radius: var(--corner-radius--default);
+      border-top-right-radius: var(--corner-radius--default);
+      aspect-ratio: 16 / 9;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
+
+      :global(.flow--avatar--icon) {
+        width: var(--size-px--xxl);
+        height: var(--size-px--xxl);
+      }
+
+      :global(.flow--avatar--initials) {
+        font-size: var(--size-px--xxl);
+      }
+    }
+
+    .content {
+      display: flex;
+      justify-content: space-between;
+      align-items: start;
+      padding-inline: var(--list-item--spacing);
+      padding-bottom: var(--list-item--spacing);
+      width: 100%;
+    }
+
+    .topContent {
+      width: 100%;
+    }
+  }
 }