Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[IndexTable] Update examples and documentation for condensed prop #11203

Merged
merged 3 commits into from
Nov 22, 2023
Merged

[IndexTable] Update examples and documentation for condensed prop #11203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df36dd8
chore: update stories
kyledurand Nov 16, 2023
ef7a8f1
chore: update IndexTable documentation for when to hide bulk actions
kyledurand Nov 21, 2023
bf18735
remove funky padding from example
kyledurand Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/calm-colts-melt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@shopify/polaris': patch
'polaris.shopify.com': patch
---

Updated IndexTable documentation for when to hide bulk actions
100 changes: 65 additions & 35 deletions polaris-react/src/components/IndexTable/IndexTable.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import type {
IndexTableRowProps,
} from '@shopify/polaris';
import {
useBreakpoints,
InlineStack,
LegacyCard,
EmptySearchResult,
Expand Down Expand Up @@ -107,6 +108,7 @@ export function Default() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flush story looks broken when condensed. Table Cells don't have proper paddings.
image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is how the flush prop is supposed to work. It's not pretty in this example but it shows what the prop does

resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -326,6 +328,7 @@ export function Flush() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -637,6 +640,7 @@ export function WithDisabledRows() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={selectableCustomers.length}
selectedItemsCount={
Expand Down Expand Up @@ -731,6 +735,7 @@ export function WithSubduedRows() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -807,6 +812,7 @@ export function WithEmptyState() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -938,6 +944,7 @@ export function WithBulkActions() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -1096,6 +1103,7 @@ export function WithMultiplePromotedBulkActions() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -1203,41 +1211,36 @@ export function WithBulkActionsAndSelectionAcrossPages() {
);

return (
<div
style={{
padding: 'var(--p-space-400) var(--p-space-400) var(--p-space-1000)',
}}
>
<LegacyCard>
<IndexTable
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
hasMoreItems
bulkActions={bulkActions}
promotedBulkActions={promotedBulkActions}
headings={[
{title: 'Name'},
{title: 'Location'},
{
alignment: 'end',
id: 'order-count',
title: 'Order count',
},
{
alignment: 'end',
id: 'amount-spent',
title: 'Amount spent',
},
]}
>
{rowMarkup}
</IndexTable>
</LegacyCard>
</div>
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
}
onSelectionChange={handleSelectionChange}
hasMoreItems
bulkActions={bulkActions}
promotedBulkActions={promotedBulkActions}
headings={[
{title: 'Name'},
{title: 'Location'},
{
alignment: 'end',
id: 'order-count',
title: 'Order count',
},
{
alignment: 'end',
id: 'amount-spent',
title: 'Amount spent',
},
]}
>
{rowMarkup}
</IndexTable>
</LegacyCard>
);
}

Expand Down Expand Up @@ -1323,6 +1326,7 @@ export function WithLoadingState() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -1525,6 +1529,7 @@ export function WithFiltering() {
primaryAction={primaryAction}
/>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -1738,6 +1743,7 @@ export function WithRowStatus() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IndexTable cuts the content when condensed:
image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The index table is side scrollable, this is intentional vs allowing content wrapping

resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -1890,6 +1896,7 @@ export function WithStickyLastColumn() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -2009,6 +2016,7 @@ export function WithRowNavigationLink() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -2124,6 +2132,7 @@ export function WithClickableButtonColumn() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -2225,6 +2234,7 @@ export function WithoutCheckboxes() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
headings={[
Expand Down Expand Up @@ -2333,6 +2343,7 @@ export function WithTonesWithoutCheckboxes() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
headings={[
Expand Down Expand Up @@ -2553,6 +2564,7 @@ export function WithAllOfItsElements() {
primaryAction={primaryAction}
/>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -2750,6 +2762,7 @@ export function WithSortableHeadings() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={rows.length}
selectedItemsCount={
Expand Down Expand Up @@ -2936,6 +2949,7 @@ export function WithSortableCustomHeadings() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={rows.length}
selectedItemsCount={
Expand Down Expand Up @@ -3061,6 +3075,7 @@ export function WithCustomTooltips() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -3178,6 +3193,7 @@ export function WithHeadingTooltips() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -3359,6 +3375,7 @@ export function WithZebraStriping() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -3560,6 +3577,7 @@ export function WithZebraStripingAndRowStatus() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -3704,6 +3722,7 @@ export function WithZebraStripingAndStickyLastColumn() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -3786,6 +3805,7 @@ export function WithZebraStripingAndWithoutCheckboxes() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
headings={[
Expand Down Expand Up @@ -4248,6 +4268,7 @@ export function WithSubHeaders() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -4344,6 +4365,7 @@ export function WithPagination() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={customers.length}
selectedItemsCount={
Expand Down Expand Up @@ -4570,6 +4592,7 @@ export function WithSubHeadersNonSelectable() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -4761,6 +4784,7 @@ export function WithNestedRows() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -5029,6 +5053,7 @@ export function WithNestedRowsStickyLastColumn() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -5222,6 +5247,7 @@ export function WithNestedRowsNonSelectable() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -5428,6 +5454,7 @@ export function WithNestedRowsWithThumbnails() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -5634,6 +5661,7 @@ export function WithNestedRowsWithThumbnailsNonSelectable() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -5842,6 +5870,7 @@ export function WithNestedRowsWithThumbnailsOneCellSelectable() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down Expand Up @@ -6048,6 +6077,7 @@ export function WithNestedRowsWithThumbnailsOneCellNonSelectable() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
onSelectionChange={handleSelectionChange}
selectedItemsCount={
allResourcesSelected ? 'All' : selectedResources.length
Expand Down
2 changes: 2 additions & 0 deletions polaris.shopify.com/content/components/tables/index-table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,8 @@ Index tables should:
Index tables can optionally:

- Provide bulk actions for tasks that are often applied to many list items at once. For example, merchants may want to add the same tag to a large number of products.
- Hide bulk actions on small screens using the `condensed` prop. We only recommend hiding bulk actions on screens smaller than 490px using our `breakpoints-sm` value: `condensed={useBreakpoints().smDown}`.
- Hiding bulk actions means a merchant can’t select multiple items at once, so it should only be used when the bulk actions are not essential to the merchant’s workflow.

---

Expand Down
2 changes: 2 additions & 0 deletions polaris.shopify.com/pages/examples/index-table-default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from '@shopify/polaris';
import React from 'react';
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
Expand Down Expand Up @@ -74,6 +75,7 @@ function SimpleIndexTableExample() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={orders.length}
selectedItemsCount={
Expand Down
2 changes: 2 additions & 0 deletions ...s.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
useIndexResourceState,
Text,
Badge,
useBreakpoints,
} from '@shopify/polaris';
import React from 'react';
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
Expand Down Expand Up @@ -103,6 +104,7 @@ function IndexTableWithBulkActionsAndSelectionAcrossPagesExample() {
return (
<LegacyCard>
<IndexTable
condensed={useBreakpoints().smDown}
resourceName={resourceName}
itemCount={orders.length}
selectedItemsCount={
Expand Down
Loading