test

apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleMultiSelect.stories.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridRow,
+} from '@fluentui/react-table';
+import { withStoryWrightSteps } from '../../utilities';
+import { columns, items, type Item } from './utils';
+
+export default {
+  title: 'DataGridConverged - subtle multi select',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .hover('.fui-DataGridHeader > .fui-DataGridRow')
+          .snapshot('hover header row')
+          .hover('.fui-DataGridBody > .fui-DataGridRow')
+          .snapshot('hover row')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof DataGrid>;
+
+export const Default = () => {
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      sortable
+      selectionMode="multiselect"
+      subtleSelection
+      // eslint-disable-next-line react/jsx-no-bind
+      getRowId={(item: Item) => item.file.label}
+      focusMode="composite"
+      style={{ minWidth: '550px' }}
+    >
+      <DataGridHeader>
+        <DataGridRow selectionCell={{ checkboxIndicator: { 'aria-label': 'Select all rows' } }}>
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ checkboxIndicator: { 'aria-label': 'Select row' } }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
+Default.storyName = 'default';

apps/vr-tests-react-components/src/stories/DataGrid/DataGridSubtleSingleSelect.stories.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { Meta } from '@storybook/react';
+import { Steps } from 'storywright';
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridRow,
+} from '@fluentui/react-table';
+import { withStoryWrightSteps } from '../../utilities';
+import { columns, items, type Item } from './utils';
+
+export default {
+  title: 'DataGridConverged - subtle single select',
+
+  decorators: [
+    story =>
+      withStoryWrightSteps({
+        story,
+        steps: new Steps()
+          .hover('.fui-DataGridHeader > .fui-DataGridRow')
+          .snapshot('hover header row')
+          .hover('.fui-DataGridBody > .fui-DataGridRow')
+          .snapshot('hover row')
+          .end(),
+      }),
+  ],
+} satisfies Meta<typeof DataGrid>;
+
+export const Default = () => {
+  return (
+    <DataGrid
+      items={items}
+      columns={columns}
+      sortable
+      selectionMode="single"
+      subtleSelection
+      // eslint-disable-next-line react/jsx-no-bind
+      getRowId={(item: Item) => item.file.label}
+      focusMode="composite"
+      style={{ minWidth: '550px' }}
+    >
+      <DataGridHeader>
+        <DataGridRow selectionCell={{ checkboxIndicator: { 'aria-label': 'Select all rows' } }}>
+          {({ renderHeaderCell }) => <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>}
+        </DataGridRow>
+      </DataGridHeader>
+      <DataGridBody<Item>>
+        {({ item, rowId }) => (
+          <DataGridRow<Item> key={rowId} selectionCell={{ checkboxIndicator: { 'aria-label': 'Select row' } }}>
+            {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
+          </DataGridRow>
+        )}
+      </DataGridBody>
+    </DataGrid>
+  );
+};
+Default.storyName = 'default';

apps/vr-tests-react-components/src/stories/DataGrid/utils.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { PresenceBadgeStatus } from '@fluentui/react-badge';
+import { createTableColumn, TableColumnDefinition } from '@fluentui/react-table';
+import {
+  DocumentPdfRegular,
+  DocumentRegular,
+  EditRegular,
+  FolderRegular,
+  OpenRegular,
+  PeopleRegular,
+  VideoRegular,
+} from '@fluentui/react-icons';
+import { TableCellLayout } from '@fluentui/react-table';
+import { Avatar } from '@fluentui/react-avatar';
+
+type FileCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type LastUpdatedCell = {
+  label: string;
+  timestamp: number;
+};
+
+type LastUpdateCell = {
+  label: string;
+  icon: JSX.Element;
+};
+
+type AuthorCell = {
+  label: string;
+  status: PresenceBadgeStatus;
+};
+
+export type Item = {
+  file: FileCell;
+  author: AuthorCell;
+  lastUpdated: LastUpdatedCell;
+  lastUpdate: LastUpdateCell;
+};
+
+export const items: Item[] = [
+  {
+    file: { label: 'Meeting notes', icon: <DocumentRegular /> },
+    author: { label: 'Max Mustermann', status: 'available' },
+    lastUpdated: { label: '7h ago', timestamp: 3 },
+    lastUpdate: {
+      label: 'You edited this',
+      icon: <EditRegular />,
+    },
+  },
+  {
+    file: { label: 'Thursday presentation', icon: <FolderRegular /> },
+    author: { label: 'Erika Mustermann', status: 'busy' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Training recording', icon: <VideoRegular /> },
+    author: { label: 'John Doe', status: 'away' },
+    lastUpdated: { label: 'Yesterday at 1:45 PM', timestamp: 2 },
+    lastUpdate: {
+      label: 'You recently opened this',
+      icon: <OpenRegular />,
+    },
+  },
+  {
+    file: { label: 'Purchase order', icon: <DocumentPdfRegular /> },
+    author: { label: 'Jane Doe', status: 'offline' },
+    lastUpdated: { label: 'Tue at 9:30 AM', timestamp: 1 },
+    lastUpdate: {
+      label: 'You shared this in a Teams chat',
+      icon: <PeopleRegular />,
+    },
+  },
+];
+
+export const columns: TableColumnDefinition<Item>[] = [
+  createTableColumn<Item>({
+    columnId: 'file',
+    compare: (a, b) => {
+      return a.file.label.localeCompare(b.file.label);
+    },
+    renderHeaderCell: () => {
+      return 'File';
+    },
+    renderCell: item => {
+      return <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'author',
+    compare: (a, b) => {
+      return a.author.label.localeCompare(b.author.label);
+    },
+    renderHeaderCell: () => {
+      return 'Author';
+    },
+    renderCell: item => {
+      return (
+        <TableCellLayout
+          media={
+            <Avatar aria-label={item.author.label} name={item.author.label} badge={{ status: item.author.status }} />
+          }
+        >
+          {item.author.label}
+        </TableCellLayout>
+      );
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdated',
+    compare: (a, b) => {
+      return a.lastUpdated.timestamp - b.lastUpdated.timestamp;
+    },
+    renderHeaderCell: () => {
+      return 'Last updated';
+    },
+
+    renderCell: item => {
+      return item.lastUpdated.label;
+    },
+  }),
+  createTableColumn<Item>({
+    columnId: 'lastUpdate',
+    compare: (a, b) => {
+      return a.lastUpdate.label.localeCompare(b.lastUpdate.label);
+    },
+    renderHeaderCell: () => {
+      return 'Last update';
+    },
+    renderCell: item => {
+      return <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>;
+    },
+  }),
+];