diff --git a/polaris-react/playground/OrdersPage.tsx b/polaris-react/playground/OrdersPage.tsx index 5b1cea5cbc9..d593b6290ff 100644 --- a/polaris-react/playground/OrdersPage.tsx +++ b/polaris-react/playground/OrdersPage.tsx @@ -311,19 +311,27 @@ function Table({orders}: {orders: Order[]}) { ); }; - const paginationLabel = - pageCount === 1 - ? `${totalOrderCount} orders` - : `${ + const totalCountText = `${totalOrderCount} ${ + totalOrderCount === 1 ? 'order' : 'orders' + }`; + + const rangeText = + pagedOrders.length > 1 + ? `${ pagedOrdersStartIndex + 1 - }-${pagedOrdersEndIndex} of ${totalOrderCount} orders`; + }-${pagedOrdersEndIndex} of ${totalOrderCount} orders` + : totalCountText; + + const paginationLabel = pageCount === 1 ? totalCountText : rangeText; const pagination = { type: 'table', label: selectedResources.length > 0 ? undefined : ( - {paginationLabel} + + {paginationLabel} + ), hasNext, diff --git a/polaris-react/src/components/BulkActions/BulkActions.tsx b/polaris-react/src/components/BulkActions/BulkActions.tsx index 7e06de7eba6..5f2e023ef90 100644 --- a/polaris-react/src/components/BulkActions/BulkActions.tsx +++ b/polaris-react/src/components/BulkActions/BulkActions.tsx @@ -59,7 +59,9 @@ export interface BulkActionsProps { disabled?: boolean; /** Callback when more actions button is toggled */ onMoreActionPopoverToggle?(isOpen: boolean): void; - /** The size of the buttons to render */ + /** The size of the buttons to render + * @default 'medium' + */ buttonSize?: Extract; /** Label for the bulk actions */ label?: string; @@ -94,7 +96,7 @@ export const BulkActions = ({ promotedActions, actions, disabled, - buttonSize, + buttonSize = 'medium', paginatedSelectAllAction, paginatedSelectAllText, selected, @@ -212,7 +214,12 @@ export const BulkActions = ({ active={selectedAllMenuActive} onClose={toggleSelectAllMenu} activator={ - + {i18n.translate( 'Polaris.ResourceList.BulkActions.selectAllMenu.activator', {selectedItemsCount}, diff --git a/polaris-react/src/components/Filters/Filters.module.css b/polaris-react/src/components/Filters/Filters.module.css index a014a2f69cd..1cdd02dbbfc 100644 --- a/polaris-react/src/components/Filters/Filters.module.css +++ b/polaris-react/src/components/Filters/Filters.module.css @@ -26,11 +26,7 @@ align-items: center; flex-wrap: nowrap; white-space: nowrap; - padding-inline: var(--p-space-100); - - > :first-child { - padding-left: var(--p-space-100); - } + padding-inline-end: var(--p-space-100); } .hideQueryField .FiltersInner { @@ -40,14 +36,14 @@ .SearchFieldWrapper { position: relative; - padding: var(--p-space-150) var(--p-space-100) var(--p-space-150) 0; + padding: var(--p-space-150) var(--p-space-200) var(--p-space-150) 0; &::after { content: ''; z-index: var(--p-z-index-1); position: absolute; top: 0; - right: calc(-1 * var(--p-space-300)); + right: calc((-1 * var(--p-space-100)) - 1); width: var(--p-width-200); height: 100%; pointer-events: none; @@ -102,7 +98,6 @@ border-radius: var(--p-border-radius-200); border: var(--p-color-border) dashed var(--p-border-width-025); padding: 0 var(--p-space-300) 0 var(--p-space-200); - margin-left: var(--p-space-100); height: 28px; cursor: pointer; display: flex; diff --git a/polaris-react/src/components/IndexFilters/IndexFilters.module.css b/polaris-react/src/components/IndexFilters/IndexFilters.module.css index def55786556..e4c207a7227 100644 --- a/polaris-react/src/components/IndexFilters/IndexFilters.module.css +++ b/polaris-react/src/components/IndexFilters/IndexFilters.module.css @@ -91,7 +91,7 @@ gap: var(--p-space-200); align-items: center; justify-content: end; - padding: var(--p-space-150) var(--p-space-300); + padding: var(--p-space-150) var(--p-space-200); @media (--p-breakpoints-md-down) { padding: var(--p-space-200); diff --git a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.module.css b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.module.css index 96e583940bf..a51f2fa7174 100644 --- a/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.module.css +++ b/polaris-react/src/components/IndexFilters/components/SortButton/SortButton.module.css @@ -5,7 +5,7 @@ .AppliedFilterIndicator { position: absolute; top: calc(var(--p-space-300) - var(--p-border-width-050)); - right: var(--p-space-400); + right: var(--p-space-300); background: var(--p-color-bg-fill-emphasis); border-radius: var(--p-border-radius-full); border: var(--p-border-width-025) solid var(--p-color-bg-surface); diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 141685b8afe..230b8cd3562 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -41,6 +41,7 @@ import type { TooltipOverlayProps, } from '../Tooltip'; import {InlineStack} from '../InlineStack'; +import {Bleed} from '../Bleed'; import {getTableHeadingsBySelector} from './utilities'; import {ScrollContainer, Cell, Row} from './components'; @@ -540,9 +541,7 @@ function IndexTableBase({ selected={bulkSelectState} promotedActions={promotedActions} actions={actions} - onSelectModeToggle={condensed ? handleSelectModeToggle : undefined} label={selectAllActionsLabel} - buttonSize="micro" /> ) : null; @@ -711,7 +710,7 @@ function IndexTableBase({ pagination || bulkActions ? ( {paginationMarkup} - {bulkActionsMarkup} + + {bulkActionsMarkup} +