Add ButtonGroup concept + Soon pill on button + implement in timeline (#551)

* Add ButtonGroup concept

* Add soon pill

* Fix incorrect wrapping behavior

* Implement button group in timeline

front/src/modules/comments/components/comment-thread/CommentThreadCreateButton.tsx

@@ -0,0 +1,40 @@
+import { useTheme } from '@emotion/react';
+
+import { Button } from '@/ui/components/buttons/Button';
+import { ButtonGroup } from '@/ui/components/buttons/ButtonGroup';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/icons/index';
+
+type CommentThreadCreateButtonProps = {
+  onNoteClick?: () => void;
+  onTaskClick?: () => void;
+  onActivityClick?: () => void;
+};
+
+export function CommentThreadCreateButton({
+  onNoteClick,
+  onTaskClick,
+  onActivityClick,
+}: CommentThreadCreateButtonProps) {
+  const theme = useTheme();
+  return (
+    <ButtonGroup variant="secondary">
+      <Button
+        icon={<IconNotes size={theme.icon.size.sm} />}
+        title="Note"
+        onClick={onNoteClick}
+      />
+      <Button
+        icon={<IconCheckbox size={theme.icon.size.sm} />}
+        title="Task"
+        soon={true}
+        onClick={onTaskClick}
+      />
+      <Button
+        icon={<IconTimelineEvent size={theme.icon.size.sm} />}
+        title="Activity"
+        soon={true}
+        onClick={onActivityClick}
+      />
+    </ButtonGroup>
+  );
+}