From 0f0b670cddef90ca8acf6d7ca63ef4017a99a8dd Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Sat, 25 Feb 2023 15:21:44 -0800
Subject: [PATCH 1/2] Add visual regression test for TilesList

---
 .../src/stories/TilesList.stories.tsx         | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 apps/vr-tests/src/stories/TilesList.stories.tsx

diff --git a/apps/vr-tests/src/stories/TilesList.stories.tsx b/apps/vr-tests/src/stories/TilesList.stories.tsx
new file mode 100644
index 00000000000000..cbedd398431923
--- /dev/null
+++ b/apps/vr-tests/src/stories/TilesList.stories.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../utilities/index';
+import {
+  ITilesGridItem,
+  ITilesGridSegment,
+  ITileSize,
+  TilesGridMode,
+  TilesList,
+} from '@fluentui/react-experiments';
+
+export interface IBasicItem {
+  color: string;
+  key: string;
+}
+
+const ITEMS: IBasicItem[] = [];
+
+for (let i = 0; i < 27; i++) {
+  ITEMS.push({
+    color: ['red', 'blue', 'green', 'yellow', 'orange', 'brown', 'purple', 'gray'][i % 8],
+    key: `item-${i}`,
+  });
+}
+
+export interface ITilesListBasicExampleState {
+  items: ITilesGridItem<IBasicItem>[];
+}
+
+export class TilesListBasicExample extends React.Component<{}, ITilesListBasicExampleState> {
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      items: ITEMS.map(
+        (item: IBasicItem): ITilesGridItem<IBasicItem> => {
+          return {
+            content: item,
+            desiredSize: { width: 100, height: 100 },
+            key: item.key,
+            onRender: renderItem,
+          };
+        },
+      ),
+    };
+  }
+
+  public render(): JSX.Element {
+    const gridSegment: ITilesGridSegment<IBasicItem> = {
+      items: this.state.items,
+      key: 'grid',
+      mode: TilesGridMode.fill,
+      minRowHeight: 100,
+      spacing: 10,
+    };
+
+    return <TilesList items={[gridSegment]} />;
+  }
+}
+
+function renderItem(item: IBasicItem, finalSize?: ITileSize): JSX.Element {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        top: '0',
+        left: '0',
+        bottom: '0',
+        right: '0',
+        backgroundColor: item.color,
+      }}
+    >
+      <span>{finalSize ? `${finalSize.width.toFixed(1)}x${finalSize.height.toFixed(1)}` : ''}</span>
+    </div>
+  );
+}
+
+storiesOf('TilesList', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story =>
+    // prettier-ignore
+    <StoryWright
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </StoryWright>,
+  )
+  .addStory('Basic', () => <TilesListBasicExample />, { includeRtl: true });

From 3f2b4dbf302d55145c76a3d73c729222326ae5f7 Mon Sep 17 00:00:00 2001
From: Thomas Michon <tmichon@microsoft.com>
Date: Fri, 3 Mar 2023 16:55:08 -0800
Subject: [PATCH 2/2] Ensure fixed-width for TilesList

---
 .../src/stories/TilesList.stories.tsx         | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/apps/vr-tests/src/stories/TilesList.stories.tsx b/apps/vr-tests/src/stories/TilesList.stories.tsx
index cbedd398431923..c51f1de94a14f7 100644
--- a/apps/vr-tests/src/stories/TilesList.stories.tsx
+++ b/apps/vr-tests/src/stories/TilesList.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Steps, StoryWright } from 'storywright';
 import { storiesOf } from '@storybook/react';
-import { TestWrapperDecorator } from '../utilities/index';
+import { TestWrapperDecoratorFixedWidth } from '../utilities/index';
 import {
   ITilesGridItem,
   ITilesGridSegment,
@@ -33,16 +33,14 @@ export class TilesListBasicExample extends React.Component<{}, ITilesListBasicEx
     super(props);
 
     this.state = {
-      items: ITEMS.map(
-        (item: IBasicItem): ITilesGridItem<IBasicItem> => {
-          return {
-            content: item,
-            desiredSize: { width: 100, height: 100 },
-            key: item.key,
-            onRender: renderItem,
-          };
-        },
-      ),
+      items: ITEMS.map((item: IBasicItem): ITilesGridItem<IBasicItem> => {
+        return {
+          content: item,
+          desiredSize: { width: 100, height: 100 },
+          key: item.key,
+          onRender: renderItem,
+        };
+      }),
     };
   }
 
@@ -80,7 +78,7 @@ function renderItem(item: IBasicItem, finalSize?: ITileSize): JSX.Element {
 }
 
 storiesOf('TilesList', module)
-  .addDecorator(TestWrapperDecorator)
+  .addDecorator(TestWrapperDecoratorFixedWidth)
   .addDecorator(story =>
     // prettier-ignore
     <StoryWright