@flytedan/flytebot-design-system 0.49.0 → 0.49.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.49.0",
+  "version": "0.49.2",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -1163,6 +1163,10 @@
   place-items: center;
   width: 18px;
   height: 18px;
+  /* MP-282: fixed at 18×18 on purpose (a real hit target) — never one of the flex items a
+     squeezed .fd-tag shrinks to make room for a long label (see .fd-filterbar .fd-tag-label
+     below), so it stays visible and clickable at any chip width. */
+  flex: none;
   border-radius: var(--r-full);
   background: var(--border);
   color: var(--text-2);
@@ -1610,7 +1614,7 @@
 .fd-soon-cone-mark i {
   font-size: 11px;
 }
-/* z-index is set inline by ComingSoon.tsx via useOverlayLayer (see Popover.tsx). */
+/* z-index is set inline by ComingSoon.tsx via useLayerZIndex (kits/layerStack.tsx). */
 .fd-soon-hovercard {
   transform: none;
   box-shadow: 0 18px 48px rgba(11, 13, 17, 0.26);
@@ -2482,7 +2486,7 @@
 }
 
 /* ============ Overlays ============ */
-/* z-index is set inline by Modal.tsx/Drawer.tsx via useOverlayLayer (see Popover.tsx). */
+/* z-index is set inline by Modal.tsx/Drawer.tsx via useLayerZIndex (kits/layerStack.tsx). */
 .fd-scrim {
   position: fixed;
   inset: 0;
@@ -2617,7 +2621,7 @@
   border-top: 1px solid var(--border);
   background: var(--surface-2);
 }
-/* z-index is set inline by Drawer.tsx (and its scrim's) via useOverlayLayer (see Popover.tsx). */
+/* z-index is set inline by Drawer.tsx (and its scrim's) via useLayerZIndex (kits/layerStack.tsx). */
 .fd-drawer {
   position: fixed;
   top: 0;
@@ -2642,7 +2646,7 @@
 /* Portaled to document.body and placed by Tooltip.tsx (fixed, anchored geometry), so no
    overflow: hidden ancestor of the trigger can clip it. Short labels stay on one line
    (max-content); a sentence wraps at a readable measure instead of running off-screen.
-   z-index is set inline by Tooltip.tsx via useOverlayLayer (see Popover.tsx). */
+   z-index is set inline by Tooltip.tsx via useLayerZIndex (kits/layerStack.tsx). */
 .fd-tooltip {
   position: fixed;
   width: max-content;
@@ -2782,7 +2786,7 @@
   position: relative;
 }
 .fd-pop {
-  /* z-index is set inline by Popover.tsx via useOverlayLayer (see Popover.tsx). */
+  /* z-index is set inline by Popover.tsx via useLayerZIndex (kits/layerStack.tsx). */
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
@@ -2979,6 +2983,59 @@
      matter (found opening three fields' chips on a 375px viewport). */
   max-width: 100%;
 }
+/* MP-282: seen live at 375px — a chip whose value is long (a full campaign name) painted
+   637px wide inside a 297px-wide bar instead of respecting it, because .fd-tag is `flex:
+   none; white-space: nowrap; max-width: none` with nothing to clamp it, and the ONLY thing
+   that then hid the overflow was the page's own ancestor .fd-card `overflow: hidden` —
+   which silently clipped the chip's × remove control right along with the label.
+   Scoped to FilterBar's own chips, not `.fd-tag`/`.fd-tag-label` themselves: "never wider
+   than this row" is FilterBar's rule, not Tag's. Tag is also used by RoadmapTimeline (a
+   milestone label) and ApiSpecBrowser (an HTTP method, a module name, a screen path) —
+   short, already-bounded-by-their-own-layout content where this bug was never observed and
+   a forced max-width + ellipsis would only truncate text that fits today for no reason.
+
+   A `max-width: 100%` on `.fd-tag` ALONE does nothing here — tried first, and it left the
+   chip at its full 633px (proven by this card's own failing-first browser test): the actual
+   flex item .fd-filterbar-chip wraps `.fd-tag` in for select/multiSelect/range/date's chip
+   (the extra <span> FilterBar.tsx keeps around so React preserves one stable DOM node across
+   the editing/non-editing transition — see FilterBar.tsx's own comment on it) has `width:
+   auto` (shrink-to-fit) with a default `min-width: auto`, which for non-wrapping text (`.fd-
+   tag`'s inherited `white-space: nowrap`) equals the label's full intrinsic width — so the
+   flex algorithm's shrink never actually engages, `.fd-filterbar-chip` sizes itself to fit
+   the (unclamped) content, and a percentage `max-width` on the button THEN resolves against
+   that same content-derived size: a circular dependency (CSS2.1 §10.2's "if the containing
+   block's width depends on this element's width... the resulting layout is undefined"),
+   which real browsers resolve by ignoring the percentage rather than clamping anything.
+   `min-width: 0` on the actual flex item is what breaks the cycle: it lets the shrink
+   algorithm bring `.fd-filterbar-chip` down to whatever room is actually left in the row —
+   a value the flex layout itself computes from `.fd-filterbar`'s own (non-circular, genuinely
+   definite once its own ancestor has a real width) size — and ONLY once that ancestor box has
+   a real, non-content-derived width does `.fd-tag`'s `max-width: 100%` below have anything
+   sound to resolve against. */
+.fd-filterbar-chip {
+  min-width: 0;
+}
+.fd-filterbar .fd-tag {
+  max-width: 100%;
+  min-width: 0;
+}
+/* Tag.tsx always wraps its children in this span (see Tag.tsx's own MP-282 comment) so
+   there is something block-level (flex items are blockified, .fd-tag is inline-flex) to
+   hang `text-overflow: ellipsis` off. Unscoped, this rule would do nothing: no width is
+   ever constrained on a bare .fd-tag-label outside FilterBar, so there is nothing for
+   `white-space: nowrap` (inherited from .fd-tag either way) to need to ellipsise — a Tag
+   used anywhere else keeps exactly its current look. `min-width: 0` is the same override
+   as above, needed a second time because this label is itself a flex item of .fd-tag. The
+   full text stays as this span's actual text content regardless of the visual ellipsis —
+   that's what keeps the button's accessible name (computed from content, not from what's
+   painted) the whole value; Tag's `title` prop (FilterBar passes the same full value)
+   covers the hover-tooltip half of that same requirement. */
+.fd-filterbar .fd-tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
 /* The text field's own inline "chip that is also an input" — its editing state reuses
    .fd-tag's box but swaps in the selected/brand treatment .fd-tag[aria-pressed] already
    defines elsewhere, and the raw <input> inside is stripped of its own chrome so it reads
@@ -7176,7 +7233,7 @@ button.fd-erow-metric:focus-visible {
   border: 1.5px solid var(--surface);
   animation: fd-badge-pop 260ms var(--ease) both;
 }
-/* z-index is set inline by ModeSwitch.tsx via useOverlayLayer (see Popover.tsx). */
+/* z-index is set inline by ModeSwitch.tsx via useInlinePanel, from useLayerZIndex (kits/layerStack.tsx). */
 .fd-mode-pop {
   position: absolute;
   top: calc(100% + 8px);