feat: New share modal - "In App" tab (#6225)

Co-authored-by: Jakob Schott <154420406+jakobsitory@users.noreply.github.com>
Co-authored-by: Jakob Schott <jakob@formbricks.com>

apps/web/modules/ui/components/alert/index.tsx

@@ -10,7 +10,7 @@ import {
   InfoIcon,
 } from "lucide-react";
 import * as React from "react";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { Button, ButtonProps } from "../button";
 
 // Create a context to share variant and size with child components
@@ -71,8 +71,10 @@ const Alert = React.forwardRef<
 >(({ className, variant, size, ...props }, ref) => {
   const variantIcon = variant && variant !== "default" ? alertVariantIcons[variant] : null;
 
+  const contextValue = useMemo(() => ({ variant, size }), [variant, size]);
+
   return (
-    <AlertContext.Provider value={{ variant, size }}>
+    <AlertContext.Provider value={contextValue}>
       <div ref={ref} role="alert" className={cn(alertVariants({ variant, size }), className)} {...props}>
         {variantIcon}
         {props.children}

apps/web/modules/ui/components/dialog/index.tsx

@@ -74,7 +74,7 @@ const DialogContent = React.forwardRef<
           ref={ref}
           className={cn(
             "animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:zoom-in-90 data-[state=open]:md:slide-in-from-bottom-0 fixed z-50 flex max-h-[90dvh] w-full flex-col space-y-4 rounded-t-lg border bg-white p-4 shadow-lg sm:rounded-lg",
-            !unconstrained && "sm:overflow-hidden",
+            !unconstrained && "md:overflow-hidden",
             widthClass,
             className
           )}

apps/web/modules/ui/components/typography/index.test.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom/vitest";
 import { cleanup, render } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
-import { H1, H2, H3, H4, InlineCode, Large, Lead, List, Muted, P, Quote, Small } from "./index";
+import { H1, H2, H3, H4, InlineCode, InlineSmall, Large, Lead, List, Muted, P, Quote, Small } from "./index";
 
 describe("Typography Components", () => {
   afterEach(() => {
@@ -116,6 +116,16 @@ describe("Typography Components", () => {
     expect(codeElement?.className).toContain("font-semibold");
   });
 
+  test("renders InlineSmall correctly", () => {
+    const { container } = render(<InlineSmall>Small inline text</InlineSmall>);
+    const spanElement = container.querySelector("span");
+
+    expect(spanElement).toBeInTheDocument();
+    expect(spanElement).toHaveTextContent("Small inline text");
+    expect(spanElement?.className).toContain("text-sm");
+    expect(spanElement?.className).toContain("font-normal");
+  });
+
   test("renders List correctly", () => {
     const { container } = render(
       <List>
@@ -151,10 +161,33 @@ describe("Typography Components", () => {
     expect(h1Element).toHaveClass("text-4xl"); // Should still have default classes
   });
 
+  test("InlineSmall applies custom className correctly", () => {
+    const { container } = render(
+      <InlineSmall className="custom-inline-class">Custom small text</InlineSmall>
+    );
+    const spanElement = container.querySelector("span");
+
+    expect(spanElement).toHaveClass("custom-inline-class");
+    expect(spanElement).toHaveClass("text-sm"); // Should still have default classes
+    expect(spanElement).toHaveClass("font-normal");
+  });
+
   test("passes additional props to components", () => {
     const { container } = render(<H1 data-testid="test-heading">Test Heading</H1>);
     const h1Element = container.querySelector("h1");
 
     expect(h1Element).toHaveAttribute("data-testid", "test-heading");
   });
+
+  test("InlineSmall passes additional props correctly", () => {
+    const { container } = render(
+      <InlineSmall data-testid="test-inline-small" title="Small text tooltip">
+        Test Small
+      </InlineSmall>
+    );
+    const spanElement = container.querySelector("span");
+
+    expect(spanElement).toHaveAttribute("data-testid", "test-inline-small");
+    expect(spanElement).toHaveAttribute("title", "Small text tooltip");
+  });
 });

apps/web/modules/ui/components/typography/index.tsx

@@ -143,6 +143,17 @@ const Small = forwardRef<HTMLParagraphElement, SmallProps>((props, ref) => {
 Small.displayName = "Small";
 export { Small };
 
+const InlineSmall = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>((props, ref) => {
+  return (
+    <span {...props} ref={ref} className={cn("text-sm font-normal", props.className)}>
+      {props.children}
+    </span>
+  );
+});
+
+InlineSmall.displayName = "InlineSmall";
+export { InlineSmall };
+
 const Muted = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>((props, ref) => {
   return (
     <span {...props} ref={ref} className={cn("text-muted-foreground text-sm", props.className)}>