From df36dd84318be86194545c0e4a0c25c4a3ae88be Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Thu, 16 Nov 2023 17:43:34 -0500
Subject: [PATCH 1/3] chore: update stories

---
 .../IndexTable/IndexTable.stories.tsx         | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
index fe4832a8288..98757bb2f4d 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -6,6 +6,7 @@ import type {
   IndexTableRowProps,
 } from '@shopify/polaris';
 import {
+  useBreakpoints,
   InlineStack,
   LegacyCard,
   EmptySearchResult,
@@ -107,6 +108,7 @@ export function Default() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -326,6 +328,7 @@ export function Flush() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -637,6 +640,7 @@ export function WithDisabledRows() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={selectableCustomers.length}
         selectedItemsCount={
@@ -731,6 +735,7 @@ export function WithSubduedRows() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -807,6 +812,7 @@ export function WithEmptyState() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -938,6 +944,7 @@ export function WithBulkActions() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -1096,6 +1103,7 @@ export function WithMultiplePromotedBulkActions() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -1210,6 +1218,7 @@ export function WithBulkActionsAndSelectionAcrossPages() {
     >
       <LegacyCard>
         <IndexTable
+          condensed={useBreakpoints().smDown}
           resourceName={resourceName}
           itemCount={customers.length}
           selectedItemsCount={
@@ -1323,6 +1332,7 @@ export function WithLoadingState() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -1525,6 +1535,7 @@ export function WithFiltering() {
         primaryAction={primaryAction}
       />
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -1738,6 +1749,7 @@ export function WithRowStatus() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -1890,6 +1902,7 @@ export function WithStickyLastColumn() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -2009,6 +2022,7 @@ export function WithRowNavigationLink() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -2124,6 +2138,7 @@ export function WithClickableButtonColumn() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -2225,6 +2240,7 @@ export function WithoutCheckboxes() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         headings={[
@@ -2333,6 +2349,7 @@ export function WithTonesWithoutCheckboxes() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         headings={[
@@ -2553,6 +2570,7 @@ export function WithAllOfItsElements() {
         primaryAction={primaryAction}
       />
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -2750,6 +2768,7 @@ export function WithSortableHeadings() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={rows.length}
         selectedItemsCount={
@@ -2936,6 +2955,7 @@ export function WithSortableCustomHeadings() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={rows.length}
         selectedItemsCount={
@@ -3061,6 +3081,7 @@ export function WithCustomTooltips() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -3178,6 +3199,7 @@ export function WithHeadingTooltips() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -3359,6 +3381,7 @@ export function WithZebraStriping() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -3560,6 +3583,7 @@ export function WithZebraStripingAndRowStatus() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -3704,6 +3728,7 @@ export function WithZebraStripingAndStickyLastColumn() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -3786,6 +3811,7 @@ export function WithZebraStripingAndWithoutCheckboxes() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         headings={[
@@ -4248,6 +4274,7 @@ export function WithSubHeaders() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -4344,6 +4371,7 @@ export function WithPagination() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
@@ -4570,6 +4598,7 @@ export function WithSubHeadersNonSelectable() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -4761,6 +4790,7 @@ export function WithNestedRows() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -5029,6 +5059,7 @@ export function WithNestedRowsStickyLastColumn() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -5222,6 +5253,7 @@ export function WithNestedRowsNonSelectable() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -5428,6 +5460,7 @@ export function WithNestedRowsWithThumbnails() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -5634,6 +5667,7 @@ export function WithNestedRowsWithThumbnailsNonSelectable() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -5842,6 +5876,7 @@ export function WithNestedRowsWithThumbnailsOneCellSelectable() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
@@ -6048,6 +6083,7 @@ export function WithNestedRowsWithThumbnailsOneCellNonSelectable() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length

From ef7a8f1f62d2816e3e0f84893123ee6b6b82ec9b Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Tue, 21 Nov 2023 10:28:45 -0500
Subject: [PATCH 2/3] chore: update IndexTable documentation for when to hide
 bulk actions

---
 .changeset/calm-colts-melt.md                            | 6 ++++++
 .../content/components/tables/index-table.mdx            | 2 ++
 .../pages/examples/index-table-default.tsx               | 2 ++
 ...able-with-bulk-actions-and-selection-across-pages.tsx | 2 ++
 .../pages/examples/index-table-with-bulk-actions.tsx     | 2 ++
 .../pages/examples/index-table-with-disabled-rows.tsx    | 2 ++
 .../pages/examples/index-table-with-empty-state.tsx      | 2 ++
 .../pages/examples/index-table-with-filtering.tsx        | 2 ++
 .../pages/examples/index-table-with-loading-state.tsx    | 2 ++
 .../index-table-with-multiple-promoted-bulk-actions.tsx  | 2 ++
 .../pages/examples/index-table-with-nested-rows.tsx      | 2 ++
 .../pages/examples/index-table-with-pagination.tsx       | 2 ++
 .../examples/index-table-with-row-navigation-link.tsx    | 2 ++
 .../examples/index-table-with-sticky-last-column.tsx     | 2 ++
 .../pages/examples/index-table-with-subheaders.tsx       | 2 ++
 .../index-table-with-views-search-filter-sorting.tsx     | 2 ++
 .../pages/examples/index-table-without-checkboxes.tsx    | 9 ++++++++-
 17 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/calm-colts-melt.md

diff --git a/.changeset/calm-colts-melt.md b/.changeset/calm-colts-melt.md
new file mode 100644
index 00000000000..607baddc8ec
--- /dev/null
+++ b/.changeset/calm-colts-melt.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Updated IndexTable documentation for when to hide bulk actions
diff --git a/polaris.shopify.com/content/components/tables/index-table.mdx b/polaris.shopify.com/content/components/tables/index-table.mdx
index 80cd743e220..71c9778bcbb 100644
--- a/polaris.shopify.com/content/components/tables/index-table.mdx
+++ b/polaris.shopify.com/content/components/tables/index-table.mdx
@@ -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.
 
 ---
 
diff --git a/polaris.shopify.com/pages/examples/index-table-default.tsx b/polaris.shopify.com/pages/examples/index-table-default.tsx
index 398237e896d..287062f751f 100644
--- a/polaris.shopify.com/pages/examples/index-table-default.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-default.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -74,6 +75,7 @@ function SimpleIndexTableExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
index 44c9b4680e3..6da08ed8fa5 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions-and-selection-across-pages.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -103,6 +104,7 @@ function IndexTableWithBulkActionsAndSelectionAcrossPagesExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx
index e5eb6f234f4..1a9b39657b6 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-bulk-actions.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -95,6 +96,7 @@ function IndexTableWithBulkActionsExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx b/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
index 7c685953faa..db1d10c12b4 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-disabled-rows.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -89,6 +90,7 @@ function IndexTableWithDisabledRowsExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={selectableOrders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx b/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx
index fd9bb70e21b..c78e389b669 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-empty-state.tsx
@@ -3,6 +3,7 @@ import {
   IndexTable,
   LegacyCard,
   Text,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -54,6 +55,7 @@ function IndexTableWithCustomEmptyStateExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         emptyState={emptyStateMarkup}
diff --git a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx
index e853e4b90b3..a88d4e637a4 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-filtering.tsx
@@ -10,6 +10,7 @@ import {
   RangeSlider,
   Badge,
   IndexFiltersMode,
+  useBreakpoints,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, TabProps} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
@@ -324,6 +325,7 @@ function IndexTableWithFilteringExample() {
         setMode={setMode}
       />
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx
index 34b489c8966..98f6fa5663b 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-loading-state.tsx
@@ -9,6 +9,7 @@ import {
   ChoiceList,
   RangeSlider,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, TabProps} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
@@ -355,6 +356,7 @@ function IndexTableWithLoadingExample() {
         loading
       />
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx b/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx
index c79e06336ff..b12a484fa7b 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-multiple-promoted-bulk-actions.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -103,6 +104,7 @@ function IndexTableWithMultiplePromotedBulkActionsExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-nested-rows.tsx b/polaris.shopify.com/pages/examples/index-table-with-nested-rows.tsx
index 8bf88f620d5..9ae739ccb3b 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-nested-rows.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-nested-rows.tsx
@@ -3,6 +3,7 @@ import {
   Text,
   useIndexResourceState,
   IndexTable,
+  useBreakpoints,
 } from '@shopify/polaris';
 import type {IndexTableRowProps, IndexTableProps} from '@shopify/polaris';
 import React, {Fragment} from 'react';
@@ -214,6 +215,7 @@ export function WithNestedRowsExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
diff --git a/polaris.shopify.com/pages/examples/index-table-with-pagination.tsx b/polaris.shopify.com/pages/examples/index-table-with-pagination.tsx
index b162de459eb..9a2458ee5f0 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-pagination.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-pagination.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -74,6 +75,7 @@ function IndexTableWithPaginationExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx b/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx
index 8829f188f12..97be70ffec7 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-row-navigation-link.tsx
@@ -4,6 +4,7 @@ import {
   Link,
   useIndexResourceState,
   Text,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -72,6 +73,7 @@ function ClickThroughLinkIndexTableExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={customers.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx b/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx
index a98459c9562..d302187cf25 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-sticky-last-column.tsx
@@ -4,6 +4,7 @@ import {
   useIndexResourceState,
   Text,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -74,6 +75,7 @@ function StickyLastCellIndexTableExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx b/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx
index bc5c3e571d7..1e276b95d5a 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-subheaders.tsx
@@ -3,6 +3,7 @@ import {
   Text,
   useIndexResourceState,
   IndexTable,
+  useBreakpoints,
 } from '@shopify/polaris';
 import type {IndexTableRowProps, IndexTableProps} from '@shopify/polaris';
 import React, {Fragment} from 'react';
@@ -225,6 +226,7 @@ export function WithSubHeadersExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         onSelectionChange={handleSelectionChange}
         selectedItemsCount={
           allResourcesSelected ? 'All' : selectedResources.length
diff --git a/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx
index 9859c92ec0c..076c7d96e8f 100644
--- a/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-with-views-search-filter-sorting.tsx
@@ -9,6 +9,7 @@ import {
   ChoiceList,
   RangeSlider,
   Badge,
+  useBreakpoints,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, TabProps} from '@shopify/polaris';
 import {useState, useCallback} from 'react';
@@ -354,6 +355,7 @@ function IndexTableWithViewsSearchFilterSorting() {
         setMode={setMode}
       />
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         selectedItemsCount={
diff --git a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx b/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx
index be5b5c17fca..a534ed60004 100644
--- a/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-without-checkboxes.tsx
@@ -1,4 +1,10 @@
-import {IndexTable, LegacyCard, Text, Badge} from '@shopify/polaris';
+import {
+  IndexTable,
+  LegacyCard,
+  Text,
+  Badge,
+  useBreakpoints,
+} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -60,6 +66,7 @@ function IndexTableWithoutCheckboxesExample() {
   return (
     <LegacyCard>
       <IndexTable
+        condensed={useBreakpoints().smDown}
         resourceName={resourceName}
         itemCount={orders.length}
         headings={[

From bf187351cf1ca15b135d3097603d3f9b0c0c099f Mon Sep 17 00:00:00 2001
From: kyledurand <kyle.durand@shopify.com>
Date: Tue, 21 Nov 2023 16:30:37 -0500
Subject: [PATCH 3/3] remove funky padding from example

---
 .../IndexTable/IndexTable.stories.tsx         | 66 +++++++++----------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
index 98757bb2f4d..831c21e2ad1 100644
--- a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
+++ b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -1211,42 +1211,36 @@ export function WithBulkActionsAndSelectionAcrossPages() {
   );
 
   return (
-    <div
-      style={{
-        padding: 'var(--p-space-400) var(--p-space-400) var(--p-space-1000)',
-      }}
-    >
-      <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>
-    </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>
   );
 }