first commit

common/resources/client/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger-icon.tsx

@@ -0,0 +1,6 @@
+import {createSvgIcon} from '@common/icons/create-svg-icon';
+
+export const InfoDialogTriggerIcon = createSvgIcon(
+  <path d="M9 8a1 1 0 0 0-1-1H5.5a1 1 0 1 0 0 2H7v4a1 1 0 0 0 2 0zM4 0h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm4 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />,
+  'InfoDialogTrigger'
+);

common/resources/client/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger.tsx

@@ -0,0 +1,41 @@
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {InfoDialogTriggerIcon} from '@common/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger-icon';
+import {Dialog, DialogSize} from '@common/ui/overlays/dialog/dialog';
+import {DialogHeader} from '@common/ui/overlays/dialog/dialog-header';
+import {DialogBody} from '@common/ui/overlays/dialog/dialog-body';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import React, {ReactNode} from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  title?: ReactNode;
+  body: ReactNode;
+  dialogSize?: DialogSize;
+  className?: string;
+}
+export function InfoDialogTrigger({
+  title,
+  body,
+  dialogSize = 'sm',
+  className,
+}: Props) {
+  return (
+    <DialogTrigger type="popover" triggerOnHover>
+      <IconButton
+        className={clsx('ml-4 text-muted opacity-70', className)}
+        iconSize="xs"
+        size="2xs"
+      >
+        <InfoDialogTriggerIcon viewBox="0 0 16 16" />
+      </IconButton>
+      <Dialog size={dialogSize}>
+        {title && (
+          <DialogHeader padding="px-18 pt-12" size="md" hideDismissButton>
+            {title}
+          </DialogHeader>
+        )}
+        <DialogBody>{body}</DialogBody>
+      </Dialog>
+    </DialogTrigger>
+  );
+}