1 files changed, 38 insertions, 0 deletions
diff --git a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
new file mode 100644
index 0000000..8652dab
--- /dev/null
+++ b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
@@ -0,0 +1,38 @@
+import * as Popover from "@radix-ui/react-popover";
+import { useMemo } from "react";
+import { ButtonIcon } from "../ButtonIcon";
+import { TextIcon } from "../icons";
+import type { FontFamilyValues } from "../../element/types";
+import { t } from "../../i18n";
+import { isDefaultFont } from "./FontPicker";
+
+interface FontPickerTriggerProps {
+  selectedFontFamily: FontFamilyValues | null;
+}
+
+export const FontPickerTrigger = ({
+  selectedFontFamily,
+}: FontPickerTriggerProps) => {
+  const isTriggerActive = useMemo(
+    () => Boolean(selectedFontFamily && !isDefaultFont(selectedFontFamily)),
+    [selectedFontFamily],
+  );
+
+  return (
+    <Popover.Trigger asChild>
+      {/* Empty div as trigger so it's stretched 100% due to different button sizes */}
+      <div>
+        <ButtonIcon
+          standalone
+          icon={TextIcon}
+          title={t("labels.showFonts")}
+          className="properties-trigger"
+          testId={"font-family-show-fonts"}
+          active={isTriggerActive}
+          // no-op
+          onClick={() => {}}
+        />
+      </div>
+    </Popover.Trigger>
+  );
+};