🐛 Fix button shrink in some embed setup

baptisteArno · Oct 8, 2024 · f51258a · f51258a
1 parent 72e64ae
commit f51258a
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 33 deletions.
diff --git a/packages/deprecated/bot-engine/package.json b/packages/deprecated/bot-engine/package.json
@@ -1,7 +1,7 @@
 {
   "name": "bot-engine",
   "private": true,
-  "license": "AGPL-3.0-or-later",
+  "license": "FSL-1.1-ALv2",
   "version": "0.1.0",
   "type": "module",
   "scripts": {

diff --git a/packages/deprecated/typebot-js/package.json b/packages/deprecated/typebot-js/package.json
@@ -3,7 +3,7 @@
   "version": "2.2.17",
   "main": "dist/index.js",
   "unpkg": "dist/index.global.js",
-  "license": "AGPL-3.0-or-later",
+  "license": "FSL-1.1-ALv2",
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",

diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Javascript library to display typebots on your website",
-  "license": "AGPL-3.0-or-later",
+  "license": "FSL-1.1-ALv2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/embeds/js/src/components/Button.tsx b/packages/embeds/js/src/components/Button.tsx
@@ -1,31 +1,35 @@
+import clsx from "clsx";
 import { type JSX, Show, children, splitProps } from "solid-js";
 import { Spinner } from "./Spinner";
 
-type Props = {
+export type ButtonProps = {
   variant?: "primary" | "secondary";
-  children: JSX.Element;
   isDisabled?: boolean;
   isLoading?: boolean;
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+} & Pick<
+  JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+  "class" | "children" | "type" | "on:click"
+>;
 
-export const Button = (props: Props) => {
+export const Button = (props: ButtonProps) => {
   const childrenReturn = children(() => props.children);
-  const [local, buttonProps] = splitProps(props, ["disabled", "class"]);
+  const [local, buttonProps] = splitProps(props, [
+    "variant",
+    "isDisabled",
+    "isLoading",
+  ]);
 
   return (
     <button
       {...buttonProps}
-      disabled={props.isDisabled || props.isLoading}
-      class={
-        "py-2 px-4 font-semibold focus:outline-none filter hover:brightness-90 active:brightness-75 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 flex justify-center" +
-        (props.variant === "secondary"
-          ? " secondary-button"
-          : " typebot-button") +
-        " " +
-        local.class
-      }
+      disabled={local.isDisabled || local.isLoading}
+      class={clsx(
+        "py-2 px-4 font-semibold focus:outline-none filter hover:brightness-90 active:brightness-75 disabled:opacity-50 disabled:cursor-not-allowed disabled:brightness-100 flex justify-center flex-shrink-0",
+        local.variant === "secondary" ? " secondary-button" : " typebot-button",
+        buttonProps.class,
+      )}
     >
-      <Show when={!props.isLoading} fallback={<Spinner />}>
+      <Show when={!local.isLoading} fallback={<Spinner />}>
         {childrenReturn()}
       </Show>
     </button>

diff --git a/packages/embeds/js/src/components/SendButton.tsx b/packages/embeds/js/src/components/SendButton.tsx
@@ -1,28 +1,32 @@
 import { isMobile } from "@/utils/isMobileSignal";
 import { isEmpty } from "@typebot.io/lib/utils";
 import clsx from "clsx";
-import { type JSX, Match, Switch, splitProps } from "solid-js";
-import { Button } from "./Button";
+import { Match, Switch, splitProps } from "solid-js";
+import { Button, type ButtonProps } from "./Button";
 import { SendIcon } from "./icons/SendIcon";
 
 type SendButtonProps = {
   isDisabled?: boolean;
   isLoading?: boolean;
   disableIcon?: boolean;
-  class?: string;
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+} & ButtonProps;
 
 export const SendButton = (props: SendButtonProps) => {
-  const [local, others] = splitProps(props, ["disableIcon"]);
+  const [local, buttonProps] = splitProps(props, [
+    "isDisabled",
+    "isLoading",
+    "disableIcon",
+  ]);
+
   const showIcon =
     (isMobile() && !local.disableIcon) ||
-    !props.children ||
-    (typeof props.children === "string" && isEmpty(props.children));
+    !buttonProps.children ||
+    (typeof buttonProps.children === "string" && isEmpty(buttonProps.children));
   return (
     <Button
+      {...buttonProps}
       type="submit"
-      {...others}
-      class={clsx("flex items-center", props.class)}
+      class={clsx(buttonProps.class, "flex items-center")}
       aria-label={showIcon ? "Send" : undefined}
     >
       <Switch>

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.3.18",
-  "license": "AGPL-3.0-or-later",
+  "version": "0.3.19",
+  "license": "FSL-1.1-ALv2",
   "description": "Convenient library to display typebots on your Next.js website",
   "type": "module",
   "main": "./dist/index.js",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Convenient library to display typebots on your React app",
-  "license": "AGPL-3.0-or-later",
+  "license": "FSL-1.1-ALv2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

diff --git a/packages/embeds/wordpress/package.json b/packages/embeds/wordpress/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "repository": "https://github.com/baptisteArno/typebot.io",
   "author": "baptisteArno",
-  "license": "AGPL-3.0-or-later",
+  "license": "FSL-1.1-ALv2",
   "scripts": {
     "deploy": "bun copy && bun commit",
     "copy": "svn copy ./trunk ./tags/4.0.0",