Variant list nudges (#6768)

* Fix invisible placeholders on variant search inputs.

Macaw Input defaults to a transparent placeholder; use InputWithPlaceholder so the sibling list and variants grid search fields show their labels.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Hide variants search bar when the product has no variants.

Wire through the existing totalCount and skip the browse toolbar for empty products, while keeping it visible during an active search so zero-hit queries can still be cleared.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Remove changeset for variant list UX tweaks.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Tighten variants empty-state spacing and header padding

Drop the empty-grid top padding and the header right-padding override so the bar matches Media, and avoid flashing the browse toolbar while totalCount is still unknown.

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mirekm

src/components/Datagrid/Datagrid.tsx

@@ -706,7 +706,7 @@ export const Datagrid = ({
                 </div>
               </>
             ) : (
-              <Box padding={6}>
+              <Box paddingX={6} paddingBottom={6}>
                 <Placeholder>
                   <span data-test-id="empty-data-grid-text">{emptyText}</span>
                 </Placeholder>

src/components/InputWithPlaceholder/InputWithPlaceholder.tsx

@@ -1,11 +1,14 @@
 import { Input as MacawInput } from "@saleor/macaw-ui-next";
+import clsx from "clsx";
 import { type ComponentProps, forwardRef } from "react";
 
 import styles from "./InputWithPlaceholder.module.css";
 
 export const InputWithPlaceholder = forwardRef<HTMLInputElement, ComponentProps<typeof MacawInput>>(
-  (props, ref) => {
-    return <MacawInput className={styles.inputWithPlaceholder} {...props} ref={ref} />;
+  ({ className, ...props }, ref) => {
+    return (
+      <MacawInput {...props} className={clsx(styles.inputWithPlaceholder, className)} ref={ref} />
+    );
   },
 );
 

src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx

@@ -1,6 +1,7 @@
 import { borderHeight, savebarHeight, topBarHeight } from "@dashboard/components/AppLayout/consts";
 import { DashboardCard } from "@dashboard/components/Card";
 import { Divider } from "@dashboard/components/Divider";
+import { InputWithPlaceholder } from "@dashboard/components/InputWithPlaceholder/InputWithPlaceholder";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { sectionNames } from "@dashboard/intl";
 import {
@@ -10,7 +11,7 @@ import {
 import { productVariantAddUrl } from "@dashboard/products/urls";
 import { closestCenter, DndContext } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { Box, Button, Input, Skeleton, Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Skeleton, Text } from "@saleor/macaw-ui-next";
 import {
   type ChangeEvent,
   type CSSProperties,
@@ -195,7 +196,7 @@ export const ProductVariantNavigation = ({
           flexShrink="0"
         >
           <Box flexGrow="1" __minWidth={0}>
-            <Input
+            <InputWithPlaceholder
               size="small"
               value={search}
               onChange={handleSearchChange}

src/products/components/ProductVariants/ProductVariants.tsx

@@ -94,6 +94,7 @@ export const ProductVariants = ({
   onVariantsNextPage,
   onVariantsPreviousPage,
   variantsRangeLabel,
+  variantsTotalCount = null,
   variantsLoading = false,
   pendingVariantDeleteCount = 0,
   variantAttributes,
@@ -448,6 +449,7 @@ export const ProductVariants = ({
         onVariantsNextPage={onVariantsNextPage}
         onVariantsPreviousPage={onVariantsPreviousPage}
         variantsRangeLabel={variantsRangeLabel}
+        variantsTotalCount={variantsTotalCount}
         onGuardUnsavedAction={guardAddedRowsThen}
         selectedCount={selectedCount}
         onDeleteSelected={handleBulkDeleteSelected}
@@ -469,6 +471,7 @@ export const ProductVariants = ({
       onVariantsNextPage,
       onVariantsPreviousPage,
       variantsRangeLabel,
+      variantsTotalCount,
       guardAddedRowsThen,
       selectedCount,
       handleBulkDeleteSelected,

src/products/components/ProductVariants/components/ProductVariantsHeader.module.css

@@ -1,18 +1,18 @@
 import { Header as DatagridHeader } from "@dashboard/components/Datagrid/components/Header";
 import { type DatagridRenderHeaderProps } from "@dashboard/components/Datagrid/Datagrid";
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
+import { InputWithPlaceholder } from "@dashboard/components/InputWithPlaceholder/InputWithPlaceholder";
 import { type VariantAttributeFragment } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { productVariantAddUrl } from "@dashboard/products/urls";
 import { productTypeUrl } from "@dashboard/productTypes/urls";
-import { Box, Button, Input, Text, Tooltip } from "@saleor/macaw-ui-next";
+import { Box, Button, Text, Tooltip } from "@saleor/macaw-ui-next";
 import { ChevronLeft, ChevronRight, CopyPlus } from "lucide-react";
 import { useCallback } from "react";
 import { defineMessages, FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 
 import messages from "../messages";
-import styles from "./ProductVariantsHeader.module.css";
 
 const localMessages = defineMessages({
   generatorRequiresConfig: {
@@ -153,6 +153,8 @@ interface ProductVariantsHeaderProps extends DatagridRenderHeaderProps {
   onVariantsNextPage?: () => void;
   onVariantsPreviousPage?: () => void;
   variantsRangeLabel?: string | null;
+  /** Absolute/filtered connection total — hide browse toolbar when 0 and not searching. */
+  variantsTotalCount?: number | null;
   onGuardUnsavedAction?: (action: () => void) => void;
   selectedCount?: number;
   onDeleteSelected?: () => void;
@@ -178,6 +180,7 @@ export const ProductVariantsHeader = ({
   onVariantsNextPage,
   onVariantsPreviousPage,
   variantsRangeLabel,
+  variantsTotalCount = null,
   onGuardUnsavedAction,
   selectedCount = 0,
   onDeleteSelected,
@@ -203,11 +206,16 @@ export const ProductVariantsHeader = ({
       })
     : intl.formatMessage(messages.title);
 
-  const showToolbar = Boolean(onVariantsSearchChange || variantsPageInfo);
+  // Search filters totalCount — keep the bar while a query is active (even at 0 hits).
+  // Hide when empty or still unknown so empty products don't flash a useless "0 of 0" bar.
+  const hasActiveSearch = Boolean(variantsSearch.trim());
+  const showToolbar =
+    Boolean(onVariantsSearchChange || variantsPageInfo) &&
+    (hasActiveSearch || (variantsTotalCount !== null && variantsTotalCount > 0));
   const runGuarded = onGuardUnsavedAction ?? ((action: () => void) => action());
 
   return (
-    <div className={styles.header}>
+    <>
       <DatagridHeader title={headerTitle}>
         <DatagridHeader.ButtonFullScreen isOpen={isFullscreenOpen} onToggle={toggleFullscreen}>
           {isFullscreenOpen ? (
@@ -244,7 +252,7 @@ export const ProductVariantsHeader = ({
         >
           {onVariantsSearchChange ? (
             <Box __maxWidth="260px" width="100%">
-              <Input
+              <InputWithPlaceholder
                 size="small"
                 value={variantsSearch}
                 onChange={event => {
@@ -325,6 +333,6 @@ export const ProductVariantsHeader = ({
           </Box>
         </Box>
       )}
-    </div>
+    </>
   );
 };