Skip to content

Commit

Permalink
remove useListSelection, update stories as discussed
Browse files Browse the repository at this point in the history
  • Loading branch information
@george-cz
george-cz committed Mar 27, 2024
1 parent 1ad70a4 commit 56d9936
Show file tree
Hide file tree
Showing 12 changed files with 167 additions and 381 deletions.
46 changes: 23 additions & 23 deletions packages/react-components/react-list-preview/docs/MIGRATION.md
View file
Expand Up @@ -174,29 +174,29 @@ We recommend using a component like `Persona` where possible, or creating a cust

#### ListItem

| v0 ListItem | v9 ListItem |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `accessibility` | N/A |
| `as` | `as` |
| `className` | `className` |
| `content` | N/A - use children |
| `contentMedia` | N/A - use children |
| `debug` | N/A |
| `design` | N/A |
| `endMedia` | N/A - use children |
| `header` | N/A - use children |
| `headerMedia` | N/A - use children |
| `important` | N/A |
| `index` | N/A |
| `media` | N/A - use children |
| `navigable` | N/A - use `tabIndex={0}` or `navigable` on the `List` |
| `onClick` | `onAction` |
| `ref` | ref |
| `selectable` | N/A - use `List` property `selectionMode` for uncontrolled selection, or use `useListSelection` hook to control the state |
| `selected` | N/A - the selection state takes care of this automatically |
| `styles` | N/A - use `className` for any slot |
| `truncateContent` | N/A - the `List` is not concerned about it's content |
| `truncateHeader` | N/A - the `List` is not concerned about it's content |
| v0 ListItem | v9 ListItem |
| ----------------- | ------------------------------------------------------------------------------------- |
| `accessibility` | N/A |
| `as` | `as` |
| `className` | `className` |
| `content` | N/A - use children |
| `contentMedia` | N/A - use children |
| `debug` | N/A |
| `design` | N/A |
| `endMedia` | N/A - use children |
| `header` | N/A - use children |
| `headerMedia` | N/A - use children |
| `important` | N/A |
| `index` | N/A |
| `media` | N/A - use children |
| `navigable` | N/A - use `tabIndex={0}` or `navigable` on the `List` |
| `onClick` | `onAction` |
| `ref` | ref |
| `selectable` | N/A - use `List` props like `selectionMode`, `selectedItems` and `onSelectionChange` |
| `selected` | N/A - use `selectedItems` (or tracked internally when `defaultSelectedItems` is used) |
| `styles` | N/A - use `className` for any slot |
| `truncateContent` | N/A - the `List` is not concerned about it's content |
| `truncateHeader` | N/A - the `List` is not concerned about it's content |

#### Other

Expand Down
4 changes: 0 additions & 4 deletions packages/react-components/react-list-preview/etc/react-list-preview.api.md
View file
Expand Up @@ -13,7 +13,6 @@ import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import { SelectionHookParams } from '@fluentui/react-utilities';
import { SelectionItemId } from '@fluentui/react-utilities';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
Expand Down Expand Up @@ -81,9 +80,6 @@ export const useListItem_unstable: (props: ListItemProps, ref: React_2.Ref<HTMLL
// @public
export const useListItemStyles_unstable: (state: ListItemState) => ListItemState;

// @public (undocumented)
export function useListSelection(options?: SelectionHookParams): ListSelectionState;

// @public
export const useListStyles_unstable: (state: ListState) => ListState;

Expand Down
2 changes: 0 additions & 2 deletions packages/react-components/react-list-preview/src/index.ts
View file
Expand Up @@ -9,5 +9,3 @@ export {
useListItem_unstable,
} from './ListItem';
export type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';

export { useListSelection } from './hooks';
115 changes: 0 additions & 115 deletions ...t-components/react-list-preview/stories/List/ListSelectionControlledWithState.stories.tsx
View file

This file was deleted.

41 changes: 20 additions & 21 deletions ...ct-components/react-list-preview/stories/List/MultipleActionsDifferentPrimary.stories.tsx
View file
Expand Up @@ -67,22 +67,25 @@ const useStyles = makeStyles({
secondaryAction: { ...shorthands.gridArea('secondary_action') },
});

const CardExample = (props: { title: string; value: string; selected?: boolean }) => {
const CustomListItem = (props: { title: string; value: string; selected?: boolean }) => {
const listItemStyles = useListItemRootStyles();
const styles = useStyles();
const { value } = props;

// This will be triggered by user pressing Enter or clicking on the list item
const onAction = React.useCallback(event => {
// This prevents the change in selection on click/Enter
event.preventDefault();
alert(`Triggered custom action!`);
}, []);

return (
<ListItem
value={props.value}
className={mergeClasses(listItemStyles, styles.listItem)}
checkmark={{ className: styles.checkmark }}
aria-label={value}
onAction={e => {
// Prevent the default behavior - toggling the selection
e.preventDefault();
alert('Primary action triggered!');
}}
onAction={onAction}
>
<div role="gridcell" className={styles.preview}>
<img className={styles.image} src={`https://picsum.photos/seed/${value}/300/130/`} alt="Presentation Preview" />
Expand All @@ -97,7 +100,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
aria-label="Install"
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Installing!');
}}
>
Expand All @@ -110,7 +112,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<Button
onClick={e => {
e.preventDefault();
e.stopPropagation();
}}
appearance="transparent"
icon={<MoreHorizontal20Regular />}
Expand All @@ -123,7 +124,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -132,7 +132,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -141,7 +140,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -163,19 +161,20 @@ export const MultipleActionsDifferentPrimary = (props: Partial<ListProps>) => {
return (
<List
className={classes.list}
selectionMode="multiselect"
navigationMode="composite"
selectionMode="multiselect"
selectedItems={selectedItems}
onSelectionChange={(e, data) => setSelectedItems(data.selectedItems)}
>
<CardExample title="Example List Item" value="card-1" selected={selectedItems.includes('card-1')} />
<CardExample title="Example List Item" value="card-2" selected={selectedItems.includes('card-2')} />
<CardExample title="Example List Item" value="card-3" selected={selectedItems.includes('card-3')} />
<CardExample title="Example List Item" value="card-4" selected={selectedItems.includes('card-4')} />
<CardExample title="Example List Item" value="card-5" selected={selectedItems.includes('card-5')} />
<CardExample title="Example List Item" value="card-6" selected={selectedItems.includes('card-6')} />
<CardExample title="Example List Item" value="card-7" selected={selectedItems.includes('card-7')} />
<CardExample title="Example List Item" value="card-8" selected={selectedItems.includes('card-8')} />
<CardExample title="Example List Item" value="card-9" selected={selectedItems.includes('card-9')} />
<CustomListItem title="Example List Item" value="card-1" selected={selectedItems.includes('card-1')} />
<CustomListItem title="Example List Item" value="card-2" selected={selectedItems.includes('card-2')} />
<CustomListItem title="Example List Item" value="card-3" selected={selectedItems.includes('card-3')} />
<CustomListItem title="Example List Item" value="card-4" selected={selectedItems.includes('card-4')} />
<CustomListItem title="Example List Item" value="card-5" selected={selectedItems.includes('card-5')} />
<CustomListItem title="Example List Item" value="card-6" selected={selectedItems.includes('card-6')} />
<CustomListItem title="Example List Item" value="card-7" selected={selectedItems.includes('card-7')} />
<CustomListItem title="Example List Item" value="card-8" selected={selectedItems.includes('card-8')} />
<CustomListItem title="Example List Item" value="card-9" selected={selectedItems.includes('card-9')} />
</List>
);
};
Expand Down
30 changes: 13 additions & 17 deletions ...ges/react-components/react-list-preview/stories/List/MultipleActionsSelection.stories.tsx
View file
Expand Up @@ -67,7 +67,7 @@ const useStyles = makeStyles({
secondaryAction: { ...shorthands.gridArea('secondary_action') },
});

const CardExample = (props: { title: string; value: string; selected?: boolean }) => {
const CustomListItem = (props: { title: string; value: string; selected?: boolean }) => {
const listItemStyles = useListItemRootStyles();
const styles = useStyles();
const { value } = props;
Expand All @@ -92,7 +92,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
aria-label="Install"
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Installing!');
}}
>
Expand All @@ -105,7 +104,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<Button
onClick={e => {
e.preventDefault();
e.stopPropagation();
}}
appearance="transparent"
icon={<MoreHorizontal20Regular />}
Expand All @@ -118,7 +116,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -127,7 +124,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -136,7 +132,6 @@ const CardExample = (props: { title: string; value: string; selected?: boolean }
<MenuItem
onClick={e => {
e.preventDefault();
e.stopPropagation();
alert('Clicked menu item');
}}
>
Expand All @@ -157,20 +152,21 @@ export const MultipleActionsSelection = (props: Partial<ListProps>) => {

return (
<List
selectionMode="multiselect"
navigationMode="composite"
className={classes.list}
navigationMode="composite"
selectionMode="multiselect"
selectedItems={selectedItems}
onSelectionChange={(e, data) => setSelectedItems(data.selectedItems)}
>
<CardExample title="Example List Item" value="card-1" selected={selectedItems.includes('card-1')} />
<CardExample title="Example List Item" value="card-2" selected={selectedItems.includes('card-2')} />
<CardExample title="Example List Item" value="card-3" selected={selectedItems.includes('card-3')} />
<CardExample title="Example List Item" value="card-4" selected={selectedItems.includes('card-4')} />
<CardExample title="Example List Item" value="card-5" selected={selectedItems.includes('card-5')} />
<CardExample title="Example List Item" value="card-6" selected={selectedItems.includes('card-6')} />
<CardExample title="Example List Item" value="card-7" selected={selectedItems.includes('card-7')} />
<CardExample title="Example List Item" value="card-8" selected={selectedItems.includes('card-8')} />
<CardExample title="Example List Item" value="card-9" selected={selectedItems.includes('card-9')} />
<CustomListItem title="Example List Item" value="card-1" selected={selectedItems.includes('card-1')} />
<CustomListItem title="Example List Item" value="card-2" selected={selectedItems.includes('card-2')} />
<CustomListItem title="Example List Item" value="card-3" selected={selectedItems.includes('card-3')} />
<CustomListItem title="Example List Item" value="card-4" selected={selectedItems.includes('card-4')} />
<CustomListItem title="Example List Item" value="card-5" selected={selectedItems.includes('card-5')} />
<CustomListItem title="Example List Item" value="card-6" selected={selectedItems.includes('card-6')} />
<CustomListItem title="Example List Item" value="card-7" selected={selectedItems.includes('card-7')} />
<CustomListItem title="Example List Item" value="card-8" selected={selectedItems.includes('card-8')} />
<CustomListItem title="Example List Item" value="card-9" selected={selectedItems.includes('card-9')} />
</List>
);
};
Expand Down

0 comments on commit 56d9936

Please sign in to comment.