@wix/design-system

## Feature Examples ### Structure - description: Table list item organizes different sets of information into columns. It can have any number of columns, which can be added through <code>options</code>. Add any content to the column with the <code>value</code> prop. Note that column width and alignment can be controlled separately. - example: ```jsx <TableListItem options={[ { value: ( <StorybookComponents.Placeholder> Column 1 </StorybookComponents.Placeholder> ), }, { value: ( <StorybookComponents.Placeholder> Column 2 </StorybookComponents.Placeholder> ), }, { value: ( <StorybookComponents.Placeholder> Column 3 </StorybookComponents.Placeholder> ), }, { value: ( <StorybookComponents.Placeholder> Column 4 </StorybookComponents.Placeholder> ), }, ]} />; ``` ### Padding - description: Adjust vertical spacing by using <code>verticalPadding</code> and <code>horizontalPadding</code> props. It supports 6 options:<li><code>xxTiny</code></li><li><code>xTiny</code></li><li><code>tiny</code> </li><li><code>small</code> (default)</li><li><code>medium</code></li><li><code>large</code> </li>Use tiny size set for compact lists that display more items in smaller space.Small (default) is a standard list size for most common cases.While medium and large are used to emphasize a few items. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem horizontalPadding="xxTiny" verticalPadding="xxTiny" options={[{ value: <Text>xxTiny</Text> }]} /> <TableListItem horizontalPadding="xTiny" verticalPadding="xTiny" options={[{ value: <Text>xTiny</Text> }]} /> <TableListItem horizontalPadding="tiny" verticalPadding="tiny" options={[{ value: <Text>Tiny</Text> }]} /> <TableListItem horizontalPadding="small" verticalPadding="small" options={[{ value: <Text>Small (default)</Text> }]} /> <TableListItem horizontalPadding="medium" verticalPadding="medium" options={[{ value: <Text>Medium</Text> }]} /> <TableListItem horizontalPadding="large" verticalPadding="large" options={[{ value: <Text>Large</Text> }]} /> </StorybookComponents.Stack>; ``` ### Drag handle size - description: Control a drag handle size with <code>dragHandleSize</code> prop. It supports two sizes: <li><code>small</code> is used for more compact lists</li><li><code>large</code> (default) is used for tables and more spacious UI layouts</li> - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem draggable dragHandleSize="large" showDivider verticalPadding="tiny" options={[ { value: <Text size="medium">Large drag handle (default)</Text>, }, ]} /> <TableListItem draggable dragHandleSize="small" showDivider horizontalPadding="tiny" verticalPadding="xTiny" options={[ { width: 'auto' }, { value: <Text size="small">Small drag handle</Text>, }, ]} /> </StorybookComponents.Stack>; ``` ### Draggable item indication - description: Control a drag grip icon with props:<li><code>draggable</code> marks that the component can be dragged.</li><li><code>dragging</code> indicates that the component is being dragged.</li><li><code>showDragHandleOnHover</code> shows handle only on hover</li><li><code>dragDisabled</code> show that the component can't be dragged.</li>Note, drag and drop logic is not part of this component. For this solution, go to <code><NestableList/></code>. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem draggable options={[{ value: <Text>Draggable</Text> }]} /> <TableListItem draggable dragging options={[{ value: <Text>Draggable active</Text> }]} /> <TableListItem draggable showDragHandleOnHover options={[{ value: <Text>Draggable on hover</Text> }]} /> <TableListItem draggable dragDisabled options={[{ value: <Text>Draggable disabled</Text> }]} /> </StorybookComponents.Stack>; ``` ### Border - description: Control the appearance of the component using the <code>border</code> prop.Use this property to emphasize the separation between items in a list. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <TableListItem showDivider verticalPadding="tiny" options={[ { value: <Text size="small">No border (default)</Text>, }, ]} /> <TableListItem border={true} showDivider verticalPadding="tiny" options={[ { value: <Text size="small">Border</Text>, }, ]} /> </StorybookComponents.Stack>; ``` ### Expandable - description: Give an ability to make an item expandable with <code>expanded</code> prop. - example: ```jsx () => { const [isExpanded, setIsExpanded] = React.useState(false); return ( <> <TableListItem expanded={isExpanded} expandable draggable dragHandleSize="small" showDivider horizontalPadding="tiny" verticalPadding="xTiny" onClickExpand={() => setIsExpanded(!isExpanded)} options={[ { value: <Text size="small">Expandable</Text>, }, ]} /> {isExpanded && ( <StorybookComponents.Placeholder> <Box verticalAlign="middle" align="center"> <Text size="small">Content</Text> </Box> </StorybookComponents.Placeholder> )} </> ); }; ``` ### Selectable - description: Make an item selectable with the following props:<li>Use <code>checkbox</code> to enable the checkbox and show that the item can be selected.</li><li><code>checked </code>changes the checkbox's default state to selected.</li><li><code>showSelectionBorder</code> allows to turn off the blue strip indication when the item is selected</li><li><code>checkboxDisabled</code> disables the checkbox.</li><li><code>selectable</code> enables the selected state on the item</li> - example: ```jsx () => { const [checked, setChecked] = React.useState(false); return ( <StorybookComponents.Stack flexDirection="column"> <TableListItem checkbox options={[{ value: <Text>Checkbox</Text> }]} /> <TableListItem checkbox checked options={[{ value: <Text>Selected checkbox</Text> }]} /> <TableListItem checkbox showSelectionBorder={false} checked options={[{ value: <Text>Selected checkbox without border</Text> }]} /> <TableListItem checkbox checkboxDisabled options={[{ value: <Text>Disabled checkbox</Text> }]} /> <TableListItem selectable onClick={() => setChecked((prev) => !prev)} checked={checked} options={[ { value: <Text>Selectable</Text>, }, ]} /> </StorybookComponents.Stack> ); }; ``` ### Divider - description: Enable the bottom divider with <code>showDivider</code>, which visually separates the items.Note that the last item on the list shouldn't have a bottom divider. - example: ```jsx <StorybookComponents.Stack flexDirection="column"> <StorybookComponents.Stack flexDirection="column" gap={0}> <TableListItem options={[{ value: <Text>Divider off</Text> }]} /> <TableListItem options={[{ value: <Text>Divider off</Text> }]} /> <TableListItem options={[{ value: <Text>Divider off</Text> }]} /> </StorybookComponents.Stack> <StorybookComponents.Stack flexDirection="column" gap={0}> <TableListItem showDivider options={[{ value: <Text>Divider on</Text> }]} /> <TableListItem showDivider options={[{ value: <Text>Divider on</Text> }]} /> <TableListItem options={[{ value: <Text>Divider off</Text> }]} /> </StorybookComponents.Stack> </StorybookComponents.Stack>; ``` ### Column width - description: Control the width of columns with the <code>width</code> prop. It supports all CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns">grid-column-template</a> values. - example: ```jsx <TableListItem options={[ { value: ( <StorybookComponents.Placeholder> Width depends on content </StorybookComponents.Placeholder> ), width: 'max-content', }, { value: ( <StorybookComponents.Placeholder> Fills available space </StorybookComponents.Placeholder> ), width: '1fr', }, ]} />; ``` ### Column alignment - description: Align content inside of column cells using the <code>align</code> prop. It supports 3 values:<li><code>left</code> </li><li><code>center</code> </li><li><code>right</code> </li> - example: ```jsx <StorybookComponents.Stack flexDirection="column" gap={0}> <TableListItem showDivider options={[ { value: <Text>Left</Text>, align: 'left', }, { value: <Text>Center</Text>, align: 'center', }, { value: <Text>Right</Text>, align: 'right', }, ]} /> <TableListItem options={[ { value: <Text>Left with longer text</Text>, align: 'left', }, { value: <Text>Center with longer text</Text>, align: 'center', }, { value: <Text>Right with longer text</Text>, align: 'right', }, ]} /> </StorybookComponents.Stack>; ``` ### Actionable - description: Make an item actionable with the <code>onClick</code> prop. Once enabled, the item becomes interactive.The <code><TableActionCell/></code> displays main and secondary actions. - example: ```jsx <TableListItem onClick={() => {}} options={[ { value: <Text>Actionable item</Text> }, { value: ( <TableActionCell primaryAction={{ text: 'Click me', onClick: () => {}, }} /> ), align: 'right', }, ]} />; ``` ## Common Use Case Examples ### Grouped list - description: The <code>TableListItem</code> can be used to build lists that splits items into stages or categories. Use <code><TableListHeader/></code> component to display titles for different sections. - example: ```jsx <Box direction="vertical"> <TableListHeader options={[{ value: 'In review' }]} /> <TableListItem showDivider verticalPadding="tiny" onClick={() => {}} options={[ { value: <Image width="90px" height="60px" src="TravelExample1.jpg" />, width: 'auto', }, { value: ( <Box direction="vertical"> <Text weight="normal">Weekend by the Lake Como</Text> <Text size="small" secondary> Sep 23, 2022 </Text> </Box> ), }, { value: <Badge skin="warningLight">In review</Badge>, width: 'auto', }, { value: ( <TableActionCell size="small" primaryAction={{ text: 'View', skin: 'standard', onClick: () => {}, }} secondaryActions={[ { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> <TableListItem verticalPadding="tiny" onClick={() => {}} options={[ { value: <Image width="90px" height="60px" src="TravelExample2.jpg" />, width: 'auto', }, { value: ( <Box direction="vertical"> <Text weight="normal">Top 10 Restaurants in London Chinatown</Text> <Text size="small" secondary> Jun 1, 2022 </Text> </Box> ), }, { value: <Badge skin="warningLight">In review</Badge>, width: 'auto', }, { value: ( <TableActionCell size="small" primaryAction={{ text: 'View', skin: 'standard', onClick: () => {}, }} secondaryActions={[ { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> <TableListHeader options={[{ value: 'Approved' }]} /> <TableListItem showDivider verticalPadding="tiny" onClick={() => {}} options={[ { value: <Image width="90px" height="60px" src="TravelExample7.jpg" />, width: 'auto', }, { value: ( <Box direction="vertical"> <Text weight="normal">Bucket List: Indonesia</Text> <Text size="small" secondary> Apr 13, 2022 </Text> </Box> ), }, { value: <Badge skin="neutralSuccess">Approved</Badge>, width: 'auto', }, { value: ( <TableActionCell size="small" primaryAction={{ text: 'View', skin: 'standard', onClick: () => {}, }} secondaryActions={[ { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> <TableListItem showDivider verticalPadding="tiny" onClick={() => {}} options={[ { value: <Image width="90px" height="60px" src="TravelExample4.jpg" />, width: 'auto', }, { value: ( <Box direction="vertical"> <Text weight="normal">A weekend in a desert</Text> <Text size="small" secondary> May 19, 2022 </Text> </Box> ), }, { value: <Badge skin="neutralSuccess">Approved</Badge>, width: 'auto', }, { value: ( <TableActionCell size="small" primaryAction={{ text: 'View', skin: 'standard', onClick: () => {}, }} secondaryActions={[ { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> <TableListItem showDivider verticalPadding="tiny" onClick={() => {}} options={[ { value: <Image width="90px" height="60px" src="TravelExample5.jpg" />, width: 'auto', }, { value: ( <Box direction="vertical"> <Text weight="normal">Top places to visit in Portugal</Text> <Text size="small" secondary> Mar 30, 2022 </Text> </Box> ), }, { value: <Badge skin="neutralSuccess">Approved</Badge>, width: 'auto', }, { value: ( <TableActionCell size="small" primaryAction={{ text: 'View', skin: 'standard', onClick: () => {}, }} secondaryActions={[ { text: 'Download', icon: <Icons.DownloadImportSmall />, onClick: () => {}, }, { text: 'Duplicate', icon: <Icons.DuplicateSmall />, onClick: () => {}, }, { text: 'Delete', icon: <Icons.DeleteSmall />, onClick: () => {}, }, ]} numOfVisibleSecondaryActions={0} /> ), width: 'auto', }, ]} /> </Box>; ```