remove use of viewMode

Author: snowystinger

packages/@react-spectrum/s2/chromatic/CardView.stories.tsx

@@ -27,26 +27,17 @@ const meta: Meta<typeof CardView> = {
 export default meta;
 
 const cardViewStyles = style({
-  width: {
-    default: 'screen',
-    viewMode: {
-      docs: 'full'
-    }
-  },
-  height: {
-    default: 'screen',
-    viewMode: {
-      docs: 600
-    }
-  }
+  width: 'screen',
+  maxWidth: 'full',
+  height: 600
 });
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>) => {
   return (
     <CardView
       aria-label="Assets"
       {...args}
-      styles={cardViewStyles({viewMode})}
+      styles={cardViewStyles}
       renderEmptyState={() => (
         <IllustratedMessage size="L">
           <EmptyIcon />

packages/@react-spectrum/s2/stories/CardView.stories.tsx

@@ -29,18 +29,9 @@ const meta: Meta<typeof CardView> = {
 export default meta;
 
 const cardViewStyles = style({
-  width: {
-    default: 'screen',
-    viewMode: {
-      docs: 'full'
-    }
-  },
-  height: {
-    default: 'screen',
-    viewMode: {
-      docs: 600
-    }
-  }
+  width: 'screen',
+  maxWidth: 'full',
+  height: 600
 });
 
 type Item = {
@@ -101,7 +92,7 @@ function PhotoCard({item, layout}: {item: Item, layout: string}) {
   );
 }
 
-export const Example = (args: CardViewProps<any>, {viewMode}) => {
+export const Example = (args: CardViewProps<any>) => {
   let list = useAsyncList<Item, number | null>({
     async load({signal, cursor, items}) {
       let page = cursor || 1;
@@ -126,7 +117,7 @@ export const Example = (args: CardViewProps<any>, {viewMode}) => {
       {...args}
       loadingState={loadingState}
       onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
+      styles={cardViewStyles}>
       <Collection items={items} dependencies={[args.layout]}>
         {item => <PhotoCard item={item} layout={args.layout || 'grid'} />}
       </Collection>
@@ -157,12 +148,12 @@ Example.args = {
   selectionMode: 'multiple'
 };
 
-export const Empty = (args: CardViewProps<any>, {viewMode}) => {
+export const Empty = (args: CardViewProps<any>) => {
   return (
     <CardView
       aria-label="Assets"
       {...args}
-      styles={cardViewStyles({viewMode})}
+      styles={cardViewStyles}
       renderEmptyState={() => (
         <IllustratedMessage size="L">
           <EmptyIcon />
@@ -202,7 +193,7 @@ function TopicCard({topic}: {topic: Topic}) {
   );
 }
 
-export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
+export const CollectionCards = (args: CardViewProps<any>) => {
   let list = useAsyncList<Topic, number | null>({
     async load({signal, cursor}) {
       let page = cursor || 1;
@@ -224,7 +215,7 @@ export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
       {...args}
       loadingState={loadingState}
       onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
+      styles={cardViewStyles}>
       <Collection items={items}>
         {topic => <TopicCard topic={topic} />}
       </Collection>