fix: DIA-1435: [FE, cust-Comet] Some errors on Prompt task list are not displayed gracefully on UI

web/libs/ui/src/lib/Tooltip/Tooltip.module.scss

@@ -18,6 +18,9 @@
   pointer-events: none;
   background-color: var(--color-neutral-inverted-background);
   border-radius: 3px;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  max-width: 250px;
 
   &::before {
     left: 50%;

web/libs/ui/src/lib/Tooltip/Tooltip.tsx

@@ -27,10 +27,24 @@ export type TooltipProps = PropsWithChildren<{
   children: React.ReactNode;
   interactive?: boolean;
   theme?: "light" | "dark";
+  className?: string;
 }>;
 
 const TooltipInner = forwardRef(
-  ({ title, children, alignment, defaultVisible, disabled, style, interactive, theme = "dark" }: TooltipProps, ref) => {
+  (
+    {
+      title,
+      children,
+      alignment,
+      defaultVisible,
+      disabled,
+      style,
+      interactive,
+      theme = "dark",
+      className,
+    }: TooltipProps,
+    ref,
+  ) => {
     const triggerElement = useRef<any>();
     const tooltipElement = useRef<HTMLDivElement>();
     const hideTimeoutRef = useRef<NodeJS.Timeout>();
@@ -101,10 +115,15 @@ const TooltipInner = forwardRef(
         injected ? (
           <div
             ref={(el: any) => setRef(tooltipElement, el)}
-            className={clsx(styles.tooltip, visibilityClasses, {
-              [styles[`tooltip_align_${align}`]]: true,
-              [styles.tooltip_theme_light]: theme === "light",
-            })}
+            className={clsx(
+              styles.tooltip,
+              visibilityClasses,
+              {
+                [styles[`tooltip_align_${align}`]]: true,
+                [styles.tooltip_theme_light]: theme === "light",
+              },
+              className,
+            )}
             style={{
               ...offset,
               ...style,

web/libs/ui/src/lib/Tooltip/tooltip.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip } from "./Tooltip";
+import { Button } from "../button/button";
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  title: "UI/Tooltip",
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Primary: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex items-center gap-tight">
+        <Tooltip {...props} title="Example of a tooltip">
+          <Button>hover over me</Button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const WithLongText: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex items-center gap-tight">
+        <Tooltip {...props} title="This is a tooltip with a very looooong long long text that goes past the size.">
+          <Button>hover over me</Button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const WithLongTextString: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex items-center gap-tight">
+        <Tooltip {...props} title="Thisisatooltipwithaverylooooonglonglongtextthatgoespastthesize.">
+          <Button>hover over me</Button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex items-center gap-tight">
+        <Tooltip
+          {...props}
+          title={
+            <div>
+              <button type="button" onClick={() => alert("hello there")}>
+                click me
+              </button>
+            </div>
+          }
+          interactive
+        >
+          <Button>hover over me</Button>
+        </Tooltip>
+      </div>
+    );
+  },
+};

web/libs/ui/src/lib/button/button.module.scss

@@ -15,38 +15,20 @@
   --emboss-shadow: inset 0 1px 0 rgb(var(--white-raw) / 10%), inset 0 -1px 0 rgb(var(--black-raw) / 10%);
   --emboss-shadow-active: inset 0 -1px 0 rgb(var(--white-raw) / 5%), inset 0 1px 0 rgb(var(--black-raw) / 10%);
 
-  @apply text-label-medium font-medium;
-
-  box-shadow: var(--emboss-shadow);
-  background-color: var(--background-color);
-  background-image: var(--background-image);
-  border-color: var(--border-color);
-  color: var(--text-color);
-  text-align: center;
-
-
-  & > span {
-    @apply inline-flex flex-1 whitespace-pre items-center px-tight;
-  }
-
-  svg {
-    @apply h-6 inline-block aspect-square;
-  }
-
   & > span:not(:has(text)):has(svg:only-child) {
     @apply h-full w-full p-0 aspect-square;
   }
 
-  &:hover {
-    background-color: var(--background-color-hover);
-    border-color: var(--border-color-hover);
+  & > em {
+    @apply inline-flex;
+
+    & > svg {
+      @apply h-full aspect-square;
+    }
   }
 
   &:active {
     --emboss-shadow: var(--emboss-shadow-active);
-
-    background-color: var(--background-color-active);
-    border-color: var(--border-color-hover);
   }
 
   &:focus {
@@ -153,11 +135,11 @@
 
 .variant-neutral-interted {
   --background-color: var(--color-neutral-inverted-surface);
-  --border-color: var(--color-neutral-inverted-border-bold);
+  --border-color: var(--color-neutral-inverted-border);
   --text-color: var(--color-neutral-inverted-content);
   --background-color-hover: var(--color-neutral-inverted-surface-hover);
   --background-color-active: var(--color-neutral-inverted-surface-active);
-  --focus-outline: var(--color-neutral-inverted-focus-outline);
+  --focus-outline: var(--color-primary-focus-outline);
   --background-color-hover-outline: var(--color-neutral-inverted-emphasis-subtle);
   --background-color-active-outline: var(--color-neutral-inverted-emphasis);
   --border-outline: var(--color-neutral-inverted-border);
@@ -171,7 +153,7 @@
 .look-outlined {
   &:not(:disabled),
   &.waiting {
-    --background-color: transparent;
+    --background-color: var(--color-neutral-background);
     --border-color: var(--border-outline);
     --text-color: var(--text-outline);
     --background-color-hover: var(--background-color-hover-outline);
@@ -214,47 +196,55 @@
       border-color: var(--border-color-hover);
     }
   }
+
+  &:disabled:not(.waiting),
+  &:disabled:not(.waiting):hover,
+  &:disabled:not(.waiting):focus,
+  &:disabled:not(.waiting):active {
+    --background-color-hover: transparent;
+    --background-color-active: transparent;
+    --border-color-hover: transparent;
+    --background-color: transparent;
+    --border-color: transparent;
+  }
 }
 
 /// SIZES
 
 .size-medium {
-  @apply p-tight text-label-medium h-[40px];
+  @apply p-tight text-label-medium h-1000;
 
   & > span {
     @apply px-tight gap-tight;
   }
 
-  & > svg {
-    @apply h-6;
+  & > em {
+    @apply gap-tight h-600 min-w-600;
   }
 }
 
 .size-small {
-  @apply p-tighter text-label-small h-[32px];
+  @apply p-tighter text-label-small h-800;
+
 
   & > span {
     @apply px-tighter gap-tighter;
   }
 
-  & > svg {
-    @apply h-4;
+  & > em {
+    @apply gap-tighter h-400 min-w-400;
   }
 }
 
 .size-smaller {
-  @apply p-tightest text-label-smaller h-[24px];
+  @apply p-tightest text-label-smaller h-600;
 
   & > span {
     @apply px-tightest gap-tightest;
   }
 
-  & > svg, & > span > svg {
-    @apply h-4;
-  }
-
-  & > svg {
-    @apply w-4;
+  & > em {
+    @apply gap-tighter h-400 min-w-400;
   }
 }
 
@@ -320,3 +310,29 @@
     @apply justify-end;
   }
 }
+
+.button-group {
+  @apply flex gap-tight;
+
+  &.button-group-collapsed {
+    @apply gap-0;
+
+  button:not(:first-child) {
+    border-left: none;
+  }
+
+    button:first-child:not(:only-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    button:last-child:not(:only-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    button:not(:first-child, :last-child) {
+      border-radius: 0;
+    }
+  }
+}

web/libs/ui/src/lib/button/button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Button, buttonVariant } from "./button";
-import { IconAnnotationGroundTruth } from "@humansignal/icons";
+import { IconAnnotationGroundTruth, IconCrossAlt } from "@humansignal/icons";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -62,6 +62,24 @@ export const WithAlignment: Story = {
   },
 };
 
+export const WithSize: Story = {
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex items-center gap-tight">
+        <Button {...props} size="medium" className="w-48" leading={<IconAnnotationGroundTruth />}>
+          Medium
+        </Button>
+        <Button {...props} size="small" className="w-48" leading={<IconAnnotationGroundTruth />}>
+          Small
+        </Button>
+        <Button {...props} size="smaller" className="w-48" leading={<IconAnnotationGroundTruth />}>
+          Smaller
+        </Button>
+      </div>
+    );
+  },
+};
+
 export const WithIcon: Story = {
   render: ({ children, ...props }) => {
     return (
@@ -119,12 +137,40 @@ export const WithComplexChildren: Story = {
   },
 };
 
+export const WithExtra: Story = {
+  args: {
+    children: "Button with an",
+    align: "default",
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <Button
+        {...props}
+        trailing={
+          <>
+            <span className="max-h-6 px-tight rounded-4 bg-primary-surface-hover">extra badge</span>
+            <IconAnnotationGroundTruth />
+          </>
+        }
+      >
+        {children}
+      </Button>
+    );
+  },
+};
+
 export const IconButton: Story = {
   render: ({ children: _, ...props }) => {
     return (
-      <Button {...props}>
-        <IconAnnotationGroundTruth />
-      </Button>
+      <div className="flex gap-4">
+        <Button {...props}>
+          <IconAnnotationGroundTruth />
+        </Button>
+
+        <Button {...props}>
+          <IconCrossAlt />
+        </Button>
+      </div>
     );
   },
 };
@@ -142,3 +188,23 @@ export const StyledLink: Story = {
     );
   },
 };
+
+export const WithSecondaryAction = {
+  args: {
+    children: "Link with button style",
+  },
+  render({ children, ...props }) {
+    return (
+      // biome-ignore lint: We don't need a real link here
+      <Button
+        {...props}
+        waiting={props.waiting ?? true}
+        waitingClickable
+        onClick={() => alert("First action")}
+        secondaryOnClick={() => alert("Second action")}
+      >
+        <span className="flex-1 px-tight">{children}</span>
+      </Button>
+    );
+  },
+};