@structuralists/scaffolding 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structuralists/scaffolding",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "./index.ts",
   "types": "./index.ts",
   "exports": {

package/src/components/Overlays/Tooltip/Tooltip.stories.tsx

@@ -39,3 +39,53 @@ export const Placements: Story = {
     </div>
   ),
 };
+
+const LONG_LABEL =
+  'This is a very long tooltip label that would, without a max-width and ' +
+  'viewport clamp, render as a single off-screen line and overflow the right ' +
+  'edge of the viewport — instead it now wraps and stays on-screen.';
+
+export const LongLabel: Story = {
+  // Override the meta decorator: the triggers position themselves against
+  // the viewport edges with `position: fixed`, so the meta's 80px padding
+  // would just hide which trigger is being tested.
+  decorators: [(Story) => <Story />],
+  render: () => (
+    <>
+      {/* Each trigger is pinned flush to a viewport edge AND uses a
+       *  placement that points its tip toward the same edge — the worst
+       *  case for the clamp. Without the fix, every one of these would
+       *  render at least partly off-screen. */}
+      <div style={{ position: 'fixed', top: 0, left: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="top">
+          <Button>top-left · placement=top</Button>
+        </Tooltip>
+      </div>
+      <div style={{ position: 'fixed', top: 0, right: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="top">
+          <Button>top-right · placement=top</Button>
+        </Tooltip>
+      </div>
+      <div style={{ position: 'fixed', bottom: 0, left: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="bottom">
+          <Button>bottom-left · placement=bottom</Button>
+        </Tooltip>
+      </div>
+      <div style={{ position: 'fixed', bottom: 0, right: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="bottom">
+          <Button>bottom-right · placement=bottom</Button>
+        </Tooltip>
+      </div>
+      <div style={{ position: 'fixed', top: '50%', left: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="left">
+          <Button>flush left · placement=left</Button>
+        </Tooltip>
+      </div>
+      <div style={{ position: 'fixed', top: '50%', right: 0 }}>
+        <Tooltip label={LONG_LABEL} placement="right">
+          <Button>flush right · placement=right</Button>
+        </Tooltip>
+      </div>
+    </>
+  ),
+};

package/src/components/Overlays/Tooltip/index.tsx

@@ -11,6 +11,7 @@ import styles from './styles.module.css';
 
 const ENTER_DELAY_MS = 400;
 const GAP = 4;
+const VIEWPORT_MARGIN = 8;
 
 type Position = { top: number; left: number };
 
@@ -19,28 +20,36 @@ const computePosition = (
   tip: DOMRect,
   placement: TooltipPlacement,
 ): Position => {
+  let top: number;
+  let left: number;
   switch (placement) {
     case 'top':
-      return {
-        top: host.top - tip.height - GAP,
-        left: host.left + (host.width - tip.width) / 2,
-      };
+      top = host.top - tip.height - GAP;
+      left = host.left + (host.width - tip.width) / 2;
+      break;
     case 'bottom':
-      return {
-        top: host.bottom + GAP,
-        left: host.left + (host.width - tip.width) / 2,
-      };
+      top = host.bottom + GAP;
+      left = host.left + (host.width - tip.width) / 2;
+      break;
     case 'left':
-      return {
-        top: host.top + (host.height - tip.height) / 2,
-        left: host.left - tip.width - GAP,
-      };
+      top = host.top + (host.height - tip.height) / 2;
+      left = host.left - tip.width - GAP;
+      break;
     case 'right':
-      return {
-        top: host.top + (host.height - tip.height) / 2,
-        left: host.right + GAP,
-      };
+      top = host.top + (host.height - tip.height) / 2;
+      left = host.right + GAP;
+      break;
   }
+
+  // Clamp into the viewport so a long label near an edge doesn't render
+  // off-screen. The tip's max-width (see styles) keeps it narrower than
+  // the viewport, so the clamp always has room on both sides.
+  const maxLeft = window.innerWidth - tip.width - VIEWPORT_MARGIN;
+  const maxTop = window.innerHeight - tip.height - VIEWPORT_MARGIN;
+  return {
+    top: Math.max(VIEWPORT_MARGIN, Math.min(top, maxTop)),
+    left: Math.max(VIEWPORT_MARGIN, Math.min(left, maxLeft)),
+  };
 };
 
 export const Tooltip = (props: TooltipProps) => {

package/src/components/Overlays/Tooltip/styles.module.css

@@ -21,5 +21,9 @@
   font-size: var(--ui-text-small);
   line-height: 1.2;
   border-radius: var(--ui-radius);
-  white-space: nowrap;
+  /* Cap at a readable measure and never wider than the viewport (with the
+   * same margin the JS clamp uses), so long labels wrap onto multiple lines
+   * instead of rendering as one off-screen strip. */
+  max-width: min(280px, calc(100vw - 16px));
+  overflow-wrap: break-word;
 }