fix(v8 DetailsList): Stories and doc update for onItemInvoked prop,…

… remove unnecessary instances (microsoft#32421) Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
ValentinaKozlova · Aug 30, 2024 · d7e2bb5 · d7e2bb5
1 parent b044f71
commit d7e2bb5
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 52 deletions.
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Advanced.Example.tsx
@@ -204,7 +204,6 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
           constrainMode={constrainMode}
           groupProps={groupProps}
           enterModalSelectionOnTouch={true}
-          onItemInvoked={this._onItemInvoked}
           onItemContextMenu={this._onItemContextMenu}
           selectionZoneProps={{
             selection: this._selection,
@@ -523,10 +522,6 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     };
   }
 
-  private _onItemInvoked = (item: IExampleItem, index: number): void => {
-    console.log('Item invoked', item, index);
-  };
-
   private _onItemContextMenu = (item: IExampleItem, index: number, ev: MouseEvent): boolean => {
     const contextualMenuProps: IContextualMenuProps = {
       target: ev.target as HTMLElement,

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Animation.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Animation.Example.tsx
@@ -87,17 +87,12 @@ export class DetailsListAnimationExample extends React.Component<{}, IDetailsLis
         ariaLabelForSelectionColumn="Toggle selection"
         ariaLabelForSelectAllCheckbox="Toggle selection for all items"
         checkButtonAriaLabel="select row"
-        onItemInvoked={this._onItemInvoked}
         enableUpdateAnimations={true}
         getCellValueKey={this._getCellValueKey}
       />
     );
   }
 
-  private _onItemInvoked = (item: IDetailsListAnimationExampleItem): void => {
-    alert(`Item invoked: ${item.name}`);
-  };
-
   private _getValueKey(item: IDetailsListAnimationExampleItem, index: number, column: IColumn): string {
     const key =
       item && column && column.fieldName ? item[column.fieldName as keyof IDetailsListAnimationExampleItem] : index;

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Basic.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Basic.Example.tsx
@@ -4,7 +4,6 @@ import { TextField, ITextFieldStyles } from '@fluentui/react/lib/TextField';
 import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from '@fluentui/react/lib/DetailsList';
 import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
-import { Text } from '@fluentui/react/lib/Text';
 
 const exampleChildClass = mergeStyles({
   display: 'block',
@@ -63,10 +62,6 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas
     return (
       <div>
         <div className={exampleChildClass}>{selectionDetails}</div>
-        <Text>
-          Note: While focusing a row, pressing enter or double clicking will execute onItemInvoked, which in this
-          example will show an alert.
-        </Text>
         <Announced message={selectionDetails} />
         <TextField
           className={exampleChildClass}
@@ -86,7 +81,6 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas
             ariaLabelForSelectionColumn="Toggle selection"
             ariaLabelForSelectAllCheckbox="Toggle selection for all items"
             checkButtonAriaLabel="select row"
-            onItemInvoked={this._onItemInvoked}
           />
         </MarqueeSelection>
       </div>
@@ -111,8 +105,4 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas
       items: text ? this._allItems.filter(i => i.name.toLowerCase().indexOf(text) > -1) : this._allItems,
     });
   };
-
-  private _onItemInvoked = (item: IDetailsListBasicExampleItem): void => {
-    alert(`Item invoked: ${item.name}`);
-  };
 }
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Compact.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Compact.Example.tsx
@@ -78,7 +78,6 @@ export class DetailsListCompactExample extends React.Component<{}, IDetailsListC
             layoutMode={DetailsListLayoutMode.justified}
             selection={this._selection}
             selectionPreservedOnEmptyClick={true}
-            onItemInvoked={this._onItemInvoked}
             ariaLabelForSelectionColumn="Toggle selection"
             ariaLabelForSelectAllCheckbox="Toggle selection for all items"
             checkButtonAriaLabel="select row"
@@ -106,8 +105,4 @@ export class DetailsListCompactExample extends React.Component<{}, IDetailsListC
       items: text ? this._allItems.filter(i => i.name.toLowerCase().indexOf(text) > -1) : this._allItems,
     });
   };
-
-  private _onItemInvoked(item: IDetailsListCompactExampleItem): void {
-    alert(`Item invoked: ${item.name}`);
-  }
 }
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.CustomColumns.Example.tsx
@@ -30,7 +30,6 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
         setKey="set"
         columns={columns}
         onRenderItemColumn={_renderItemColumn}
-        onItemInvoked={this._onItemInvoked}
         onColumnHeaderContextMenu={this._onColumnHeaderContextMenu}
         ariaLabelForSelectionColumn="Toggle selection"
         ariaLabelForSelectAllCheckbox="Toggle selection for all items"
@@ -93,10 +92,6 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
   private _onColumnHeaderContextMenu(column: IColumn | undefined, ev: React.MouseEvent<HTMLElement> | undefined): void {
     console.log(`column ${column!.key} contextmenu opened.`);
   }
-
-  private _onItemInvoked(item: any, index: number | undefined): void {
-    alert(`Item ${item.name} at index ${index} has been invoked.`);
-  }
 }
 
 function _renderItemColumn(item: IExampleItem, index: number, column: IColumn) {

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Documents.Example.tsx
@@ -6,6 +6,8 @@ import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn }
 import { MarqueeSelection } from '@fluentui/react/lib/MarqueeSelection';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { TooltipHost } from '@fluentui/react';
+import { Text } from '@fluentui/react/lib/Text';
+import { Link } from '@fluentui/react/lib/Link';
 
 const classNames = mergeStyleSets({
   fileIconHeaderIcon: {
@@ -114,6 +116,14 @@ export class DetailsListDocumentsExample extends React.Component<{}, IDetailsLis
         sortDescendingAriaLabel: 'Sorted Z to A',
         onColumnClick: this._onColumnClick,
         data: 'string',
+        onRender: (item: IDocument) => {
+          return (
+            // eslint-disable-next-line react/jsx-no-bind
+            <Link onClick={() => this._onItemInvoked(item)} underline>
+              {item.name}
+            </Link>
+          );
+        },
         isPadded: true,
       },
       {
@@ -185,6 +195,10 @@ export class DetailsListDocumentsExample extends React.Component<{}, IDetailsLis
 
     return (
       <div>
+        <Text>
+          Note: While focusing a row, pressing enter or double clicking will execute onItemInvoked, which in this
+          example will show an alert.
+        </Text>
         <div className={classNames.controlWrapper}>
           <Toggle
             label="Enable compact mode"

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.DragDrop.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.DragDrop.Example.tsx
@@ -97,7 +97,6 @@ export class DetailsListDragDropExample extends React.Component<{}, IDetailsList
             columns={columns}
             selection={this._selection}
             selectionPreservedOnEmptyClick={true}
-            onItemInvoked={this._onItemInvoked}
             onRenderItemColumn={this._onRenderItemColumn}
             dragDropEvents={this._dragDropEvents}
             columnReorderOptions={this.state.isColumnReorderEnabled ? this._getColumnReorderOptions() : undefined}
@@ -181,10 +180,6 @@ export class DetailsListDragDropExample extends React.Component<{}, IDetailsList
     };
   }
 
-  private _onItemInvoked = (item: IExampleItem): void => {
-    alert(`Item invoked: ${item.name}`);
-  };
-
   private _onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn): JSX.Element | string => {
     const key = column.key as keyof IExampleItem;
     if (key === 'name') {

diff --git a/...examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx b/...examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx
@@ -78,8 +78,6 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
   const onChangeColumnReorderEnabled = (event: React.MouseEvent<HTMLElement>, checked: boolean) =>
     setIsColumnReorderEnabled(checked);
 
-  const onItemInvoked = (item: IExampleItem) => alert(`Item invoked ${item.name}`);
-
   const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn): JSX.Element | string => {
     const key = column.key as keyof IExampleItem;
     if (key === 'name') {
@@ -364,7 +362,6 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
           columns={columns.map(x => ({ ...x, onColumnKeyDown }))}
           selection={selection}
           selectionPreservedOnEmptyClick={true}
-          onItemInvoked={onItemInvoked}
           onRenderItemColumn={onRenderItemColumn}
           dragDropEvents={dragDropEvents}
           columnReorderOptions={isColumnReorderEnabled ? getColumnReorderOptions() : undefined}

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardOverrides.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardOverrides.Example.tsx
@@ -69,10 +69,6 @@ export class DetailsListKeyboardOverridesExample extends React.Component<{}, IDe
           via keyboard, allows the arrow keys to focus different rows without selecting those rows, and allows the space
           key to toggle selected items without a modifier like the ctrl or meta key.
         </Text>
-        <Text block>
-          Note: While focusing a row, pressing enter or double clicking will execute onItemInvoked, which in this
-          example will show an alert.
-        </Text>
         <Announced message={selectionDetails} />
         <TextField
           className={exampleChildClass}
@@ -93,7 +89,6 @@ export class DetailsListKeyboardOverridesExample extends React.Component<{}, IDe
             ariaLabelForSelectionColumn="Toggle selection"
             ariaLabelForSelectAllCheckbox="Toggle selection for all items"
             checkButtonAriaLabel="select row"
-            onItemInvoked={this._onItemInvoked}
           />
         </MarqueeSelection>
       </div>
@@ -118,8 +113,4 @@ export class DetailsListKeyboardOverridesExample extends React.Component<{}, IDe
       items: text ? this._allItems.filter(i => i.name.toLowerCase().indexOf(text) > -1) : this._allItems,
     });
   };
-
-  private _onItemInvoked = (item: IDetailsListBasicExampleItem): void => {
-    alert(`Item invoked: ${item.name}`);
-  };
 }
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.ProportionalColumns.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.ProportionalColumns.Example.tsx
@@ -88,7 +88,6 @@ export class DetailsListProportionalColumnsExample extends React.Component<{}, I
         ariaLabelForSelectionColumn="Toggle selection"
         ariaLabelForSelectAllCheckbox="Toggle selection for all items"
         checkButtonAriaLabel="Row checkbox"
-        onItemInvoked={this._onItemInvoked}
         enableUpdateAnimations={true}
         getCellValueKey={this._getCellValueKey}
       />
@@ -99,10 +98,6 @@ export class DetailsListProportionalColumnsExample extends React.Component<{}, I
     alert('Custom header button invoked');
   };
 
-  private _onItemInvoked = (item: IDetailsListProportionalColumnsExampleItem): void => {
-    alert(`Item invoked: ${item.name}`);
-  };
-
   private _getValueKey(item: IDetailsListProportionalColumnsExampleItem, index: number, column: IColumn): string {
     const key =
       item && column && column.fieldName

diff --git a/packages/react-examples/src/react/DetailsList/docs/DetailsListBestPractices.md b/packages/react-examples/src/react/DetailsList/docs/DetailsListBestPractices.md
@@ -13,6 +13,8 @@
 
 In addition to creating column headers, DetailsList also allows the manual definition of row headers. In the example below, the Name column has been specified as a row header using `isRowHeader: true`. When creating a DetailsList where one column is clearly the primary label for the row, it's best to use `isRowHeader` on that column to create a better screen reader experience navigating the table. For selectable DetailsLists, specifying a row header also gives the checkboxes a better accessible label.
 
+If using `onItemInvoked` in DetailsList, be sure to add an element (such as a button or link) within the row's cell content that does the same thing, to ensure assistive tech such as voice control or screen readers can perform the action.
+
 ### Keyboard / Hotkeys
 
 DetailsList supports different selection modes with keyboard behavior differing based on the current selection mode.