Polish

Shopify · Oct 10, 2024 · 9e03ad2 · 9e03ad2
1 parent b6a2f47
commit 9e03ad2
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 23 deletions.
diff --git 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 : (
         <Bleed marginInlineStart={pageCount === 1 ? '400' : '0'}>
-          <Box padding="150">{paginationLabel}</Box>
+          <Box padding="150" paddingInlineStart="200">
+            {paginationLabel}
+          </Box>
         </Bleed>
       ),
     hasNext,

diff --git 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<ButtonProps['size'], 'micro' | 'medium'>;
   /** 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={
-          <Button disclosure variant="tertiary" onClick={toggleSelectAllMenu}>
+          <Button
+            disclosure
+            pressed={selectedAllMenuActive}
+            variant="tertiary"
+            onClick={toggleSelectAllMenu}
+          >
             {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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
       <div className={styles.Footer}>
         <Box
-          borderWidth="025"
+          borderBlockStartWidth="025"
           borderColor="border"
           background="bg-surface-secondary"
           paddingBlockStart="150"
@@ -721,7 +720,13 @@ function IndexTableBase({
         >
           <InlineStack align="start" blockAlign="center" gap="200" wrap={false}>
             {paginationMarkup}
-            {bulkActionsMarkup}
+            <Bleed
+              marginInlineStart={
+                pagination?.hasNext || pagination?.hasPrevious ? '0' : '200'
+              }
+            >
+              {bulkActionsMarkup}
+            </Bleed>
           </InlineStack>
         </Box>
       </div>