@lateralus-ai/shipping-ui 2.0.0-dev.21 → 2.0.0-dev.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.21",
+  "version": "2.0.0-dev.22",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/domain/Filters/FilterPills.tsx

@@ -16,26 +16,19 @@ export type FilterPillsProps = {
 
 /**
  * Partner row for FilterDropdown — active filter pills.
- * Lives outside the dropdown DOM so callers can place it anywhere
- * (same row, new row, sticky footer, etc.).
- *
- * Multi-select chip *content* (when to show, label format) is owned by the
- * consumer; use `formatActiveFilterChipLabel` for audit-prep-style labels.
+ * Always renders the row wrapper (even when empty) so sibling filter
+ * triggers can stay pinned with `ml-auto` / flex layouts.
  */
-export const FilterPills = ({ chips, className }: FilterPillsProps) => {
-  if (chips.length === 0) return null;
-
-  return (
-    <div className={cn("flex flex-wrap items-start gap-2", className)}>
-      {chips.map((chip) => (
-        <FilteredPill
-          key={chip.key}
-          label={chip.label}
-          onRemove={chip.onRemove}
-          removeAriaLabel={chip.removeAriaLabel}
-          classNames={chip.classNames}
-        />
-      ))}
-    </div>
-  );
-};
+export const FilterPills = ({ chips, className }: FilterPillsProps) => (
+  <div className={cn("flex min-w-0 flex-wrap items-start gap-2", className)}>
+    {chips.map((chip) => (
+      <FilteredPill
+        key={chip.key}
+        label={chip.label}
+        onRemove={chip.onRemove}
+        removeAriaLabel={chip.removeAriaLabel}
+        classNames={chip.classNames}
+      />
+    ))}
+  </div>
+);

package/src/domain/Filters/FilteredPill.tsx

@@ -1,12 +1,13 @@
 import { cn } from "../../utils/cn";
 import { ClearIcon } from "../../icons";
+import { Tooltip } from "../../primitives/Tooltip";
 
 export type FilteredPillProps = {
   label: string;
   onRemove: () => void;
   removeAriaLabel?: string;
   className?: string;
-  /** Optional tone overrides (e.g. criticality-colored chips). */
+  /** Optional tone overrides. Prefer default beige unless a product needs a custom tone. */
   classNames?: {
     root?: string;
     label?: string;
@@ -16,8 +17,8 @@ export type FilteredPillProps = {
 
 /**
  * Active filter value pill — Figma Filtered (6154:149787).
- * Clear control on the left, label on the right. Partner to FilterDropdown;
- * render via FilterPills outside the dropdown DOM.
+ * Clear control on the left, label on the right. Max 300px with ellipsis;
+ * full label in a tooltip on hover.
  */
 export const FilteredPill = ({
   label,
@@ -26,31 +27,33 @@ export const FilteredPill = ({
   className,
   classNames,
 }: FilteredPillProps) => (
-  <div
-    className={cn(
-      "inline-flex min-h-9 items-center justify-center gap-2.5 rounded-full bg-background-secondary px-3 py-1",
-      classNames?.root,
-      className,
-    )}
-  >
-    <button
-      type="button"
-      onClick={onRemove}
-      aria-label={removeAriaLabel ?? `Remove ${label} filter`}
+  <Tooltip content={label} hint side="top">
+    <div
       className={cn(
-        "inline-flex size-4 shrink-0 items-center justify-center rounded-control text-display-on-light-secondary transition-colors hover:text-display-on-light-primary",
-        classNames?.remove,
+        "inline-flex max-w-[300px] min-h-9 items-center justify-center gap-2.5 rounded-full bg-background-secondary px-3 py-1",
+        classNames?.root,
+        className,
       )}
     >
-      <ClearIcon size="xs" />
-    </button>
-    <span
-      className={cn(
-        "text-caption-2-em text-display-on-light-primary whitespace-nowrap",
-        classNames?.label,
-      )}
-    >
-      {label}
-    </span>
-  </div>
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label={removeAriaLabel ?? `Remove ${label} filter`}
+        className={cn(
+          "inline-flex size-4 shrink-0 items-center justify-center rounded-control text-display-on-light-secondary transition-colors hover:text-display-on-light-primary",
+          classNames?.remove,
+        )}
+      >
+        <ClearIcon size="xs" />
+      </button>
+      <span
+        className={cn(
+          "min-w-0 truncate text-caption-2-em text-display-on-light-primary",
+          classNames?.label,
+        )}
+      >
+        {label}
+      </span>
+    </div>
+  </Tooltip>
 );