@wix/design-system

## Feature Examples ### Size - description: Control the size of primary and secondary actions displayed in a table cell with the <code>size</code> prop. Component supports 2 sizes:<li><code>medium</code> - use in all common cases</li><li><code>small</code> - use for dense tables</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell size="medium" primaryAction={{ text: 'Medium', }} /> ), }, ]} /> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell size="small" primaryAction={{ text: 'Small', }} /> ), }, ]} /> </StorybookComponents.Stack>; ``` ### Primary action - description: Define a main action of a cell with the <code>primaryAction</code> prop. Action will be revealed on table row hover only. - example: ```jsx <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={{ text: 'Primary Action', }} /> ), }, ]} />; ``` ### Primary action visibility - description: Control the appearance of a primary action with the <code>visibility</code> prop. It supports 2 options:<li><code>onHover</code> (default) - button is only visible when the mouse hovers over item.</li><li><code>always</code> - button is always visible and appears as a secondary button.</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={{ text: 'On Hover', visibility: 'onHover', }} /> ), }, ]} /> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={{ text: 'Always', visibility: 'always', }} /> ), }, ]} /> </StorybookComponents.Stack>; ``` ### Primary action icon affix - description: Give more context to the primary action by adding an icon affix. It can be added to 2 locations:<li><code>prefixIcon</code> - use to add a descriptive icon in front of a label</li><li><code>suffixIcon</code> - use to add a directional icon at the end of a label</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={{ text: 'Add Members', prefixIcon: <Icons.UserAdd />, }} /> ), }, ]} /> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={{ text: 'View', suffixIcon: <Icons.ChevronRight />, }} /> ), }, ]} /> </StorybookComponents.Stack>; ``` ### Secondary actions - description: Define an array of additional actions for each row with the <code>secondaryActions</code> prop. Icon and text label are required to be specified. Actions will be listed in a popover menu.Add the label for an icon button that opens up a popover menu using <code>moreActionsTooltipText</code>. Recommended label text: 'More actions'. It will be shown in a tooltip on hover or focus. - example: ```jsx <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell secondaryActions={[ { text: 'Star', icon: <Icons.FavoriteSmall />, onClick: () => {}, }, { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Print', icon: <Icons.PrintSmall />, onClick: () => {}, }, ]} moreActionsTooltipText="More actions" /> ), }, ]} />; ``` ### Number of visible secondary actions - description: Display a selected number of secondary actions as icon buttons with the <code>numOfVisibleSecondaryActions</code> prop. By default actions will be revealed on hover only. To display the icons all the time use the <code>alwaysShowSecondaryActions</code> prop. - example: ```jsx () => { const secondaryActions = [ { text: 'Star', icon: <Icons.Favorite />, onClick: () => {}, }, { text: 'Download', icon: <Icons.DownloadImport />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Print', icon: <Icons.PrintSmall />, onClick: () => {}, }, ]; return ( <StorybookComponents.Stack flexDirection="column"> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell secondaryActions={secondaryActions} numOfVisibleSecondaryActions={2} /> ), }, ]} /> <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell secondaryActions={secondaryActions} numOfVisibleSecondaryActions={2} alwaysShowSecondaryActions /> ), }, ]} /> </StorybookComponents.Stack> ); }; ``` ### Divider - description: Add a separating line to group related actions or distinguish destructive actions from the rest. Do it in a popover menu by rendering <code>divider</code> as a separate action in the <code>secondaryActions</code> array. - example: ```jsx () => { const secondaryActions = [ { text: 'Star', icon: <Icons.FavoriteSmall />, onClick: () => {}, }, { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { divider: true, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]; return ( <TableListItem onClick={() => {}} options={[ { value: <TableActionCell secondaryActions={secondaryActions} />, }, ]} /> ); }; ``` ### Disabled - description: Disable all interactions for primary or secondary actions with the <code>disabled</code> prop. Use it to highlight unavailable functions.Always provide an explanation for the user why actions cannot be accessed. Use <code>disabledDescription</code> prop to show a descriptive message in a tooltip.Note: at the moment description can be added to visible secondary actions only. - example: ```jsx () => { const primaryAction = { text: 'Edit', disabled: true, }; const secondaryActions = [ { text: 'Star', icon: <Icons.Star />, onClick: () => {}, disabled: true, disabledDescription: 'Message that explains why user cannot access this action', }, { text: 'Download', icon: <Icons.Download />, onClick: () => {}, disabled: true, disabledDescription: 'Message that explains why user cannot access this action', }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, disabled: true, }, { text: 'Print', icon: <Icons.PrintSmall />, onClick: () => {}, disabled: true, }, ]; return ( <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell primaryAction={primaryAction} secondaryActions={secondaryActions} numOfVisibleSecondaryActions={2} /> ), }, ]} /> ); }; ``` ### Popover menu - description: Customize the appearance of secondary actions popover menu with <code>popoverMenuProps</code>.Check <code><PopoverMenu/></code> API for a full list of available properties. - example: ```jsx () => { const secondaryActions = [ { text: 'Mark as favorite', icon: <Icons.FavoriteSmall />, onClick: () => {}, }, { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { divider: true, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]; return ( <TableListItem onClick={() => {}} options={[ { value: ( <TableActionCell popoverMenuProps={{ placement: 'bottom', showArrow: false, textSize: 'small', maxWidth: '90px', ellipsis: true, }} secondaryActions={secondaryActions} /> ), }, ]} /> ); }; ``` ## Common Use Case Examples ### Row actions - description: Use table action cell to display row actions in the last column of a data table. - example: ```jsx () => { const records = [ { name: `Light grey hoodie`, SKU: '00224239', price: '$59.00', inventory: 'In stock', }, { name: `Black watch`, SKU: '00352464', price: '$229.00', inventory: 'In stock', }, { name: 'Reading glasses', SKU: '00486430', price: '$69.00', inventory: 'In stock', }, { name: 'Leather shoes', SKU: '00515642', price: '$129.00', inventory: 'Out of stock', }, ]; const columns = [ { title: 'Name', render: row => row.name }, { title: 'SKU', render: row => row.SKU }, { title: 'Inventory', render: row => row.inventory }, { title: 'Price', render: row => row.price }, { render: () => ( <TableActionCell onClick={() => {}} primaryAction={{ text: 'Edit', }} secondaryActions={[ { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} /> ), }, ]; return ( <Card> <Table data={records} columns={columns} onRowClick={() => {}}> <TableToolbar> <TableToolbar.Title>Products</TableToolbar.Title> </TableToolbar> <Table.Content /> </Table> </Card> ); }; ``` ### Groups - description: Use dividers to group large lists of actions in a secondary actions menu. - example: ```jsx () => { const data = [ { imageSrc: 'TravelExample1.jpg', title: 'Weekend by the Lake Como', subtitle: 'Jun 1, 2020 • Matthew W.', translations: 'English, Lithuanian', }, { imageSrc: 'TravelExample2.jpg', title: 'Top 10 Restaurants in London Chinatown', subtitle: 'Jun 1, 2020 • Matthew W.', translations: 'English', }, { imageSrc: 'TravelExample7.jpg', title: 'Bucket List: Indonesia', subtitle: 'Jun 1, 2020 • Matthew W.', translations: 'English', }, ]; const [activeSearch, setActiveSearch] = React.useState(''); const [filteredData, setFilteredData] = React.useState(data); const renderDescription = (title, subtitle) => ( <Box direction="vertical" verticalAlign="middle"> <Text size="medium" weight="normal"> {title} </Text> <Text size="tiny" secondary> {subtitle} </Text> </Box> ); const records = filteredData.map( ({ imageSrc, title, subtitle, translations }) => ({ image: <Image width="90px" height="60px" src={imageSrc} />, name: ( <Box direction="vertical" verticalAlign="middle"> <Text size="medium" weight="normal"> {title} </Text> <Text size="tiny" secondary> {subtitle} </Text> </Box> ), translations, }), ); const findFilteredData = activeSearch => { setFilteredData( data.filter(({ title, subtitle, translations }) => { const searchData = [title, subtitle, translations] .join(' ') .toLowerCase(); const searchQuery = activeSearch.trim().toLowerCase(); if (searchQuery && searchData.indexOf(searchQuery) === -1) { return false; } return true; }), ); setActiveSearch(activeSearch); }; const columns = [ { title: '', width: '90px', render: row => row.image }, { title: 'Name', width: '40%', render: row => row.name }, { title: 'Translations', render: row => row.translations }, { render: () => ( <TableActionCell onClick={() => {}} popoverMenuProps={{ maxWidth: 'max-content', }} secondaryActions={[ { text: 'View post', icon: <Icons.VisibleSmall />, onClick: () => {}, }, { text: 'Share post', icon: <Icons.ShareSmall />, onClick: () => {}, }, { text: 'View post report', icon: <Icons.StatisticsSmall />, onClick: () => {}, }, { divider: true, }, { text: 'Add to a subscription plan', icon: <Icons.PaymentSmall />, onClick: () => {}, }, { text: 'Translate post', icon: <Icons.LanguagesSmall />, onClick: () => {}, }, { text: 'Change language', icon: <Icons.ReplaceSmall />, onClick: () => {}, }, { divider: true, }, { text: 'Duplicate post', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Revert to draft', icon: <Icons.RefreshSmall />, onClick: () => {}, }, { text: 'Move to trash', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} /> ), }, ]; return ( <Card> <Table data={records} columns={columns}> <TableToolbar> <TableToolbar.ItemGroup> <TableToolbar.Item> <Text size="small" secondary> 3 posts </Text> </TableToolbar.Item> </TableToolbar.ItemGroup> <TableToolbar.ItemGroup> <TableToolbar.Item> <Search size="small" value={activeSearch} onChange={event => findFilteredData(event.target.value)} /> </TableToolbar.Item> </TableToolbar.ItemGroup> </TableToolbar> <Table.Content /> </Table> </Card> ); }; ```