From 072c29c5c822fead23857f442a9f56cd904c98da Mon Sep 17 00:00:00 2001
From: Joshua Li <joshuali925@gmail.com>
Date: Mon, 19 Aug 2024 16:38:54 -0700
Subject: [PATCH] [2.x] Use smaller and compressed varients of buttons and form
 components (#261)

* Use smaller and compressed varients of buttons and form components (#250)

Signed-off-by: Miki <miki@amazon.com>

* Change to small button for incontext insight

Signed-off-by: Joshua Li <joshuali925@gmail.com>

---------

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Miki <miki@amazon.com>
---
 public/components/chat_experimental_badge.tsx |  4 ++--
 .../components/chat_window_header_title.tsx   |  4 ++--
 .../edit_conversation_name_modal.tsx          |  4 ++--
 public/components/incontext_insight/index.tsx | 24 ++++++++++---------
 public/components/invite_message.tsx          |  6 ++---
 .../notebook/notebook_name_modal.tsx          | 22 ++++++++---------
 public/tabs/chat/chat_page_content.tsx        |  6 ++---
 public/tabs/chat/messages/message_bubble.tsx  | 12 +++++-----
 public/tabs/history/chat_history_list.tsx     |  6 ++---
 public/tabs/history/chat_history_page.tsx     |  4 ++--
 .../tabs/history/chat_history_search_list.tsx |  4 ++--
 11 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/public/components/chat_experimental_badge.tsx b/public/components/chat_experimental_badge.tsx
index 82e8871f..398420a4 100644
--- a/public/components/chat_experimental_badge.tsx
+++ b/public/components/chat_experimental_badge.tsx
@@ -6,7 +6,7 @@
 import React, { useState } from 'react';
 import {
   EuiPopover,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiTitle,
   EuiHorizontalRule,
   EuiText,
@@ -32,7 +32,7 @@ export const ChatExperimentalBadge = ({ onClick }: ChatExperimentalBadgeProps) =
     <EuiPopover
       isOpen={visible}
       button={
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           color="text"
           iconType="beaker"
           onClick={handleIconClick}
diff --git a/public/components/chat_window_header_title.tsx b/public/components/chat_window_header_title.tsx
index 316f4bf8..7516ddc4 100644
--- a/public/components/chat_window_header_title.tsx
+++ b/public/components/chat_window_header_title.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -125,7 +125,7 @@ export const ChatWindowHeaderTitle = React.memo(() => {
           <EuiPopover
             id="conversationTitle"
             button={
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={onButtonClick}
                 aria-label="toggle chat context menu"
                 color="text"
diff --git a/public/components/edit_conversation_name_modal.tsx b/public/components/edit_conversation_name_modal.tsx
index e52d0ef7..8c207f23 100644
--- a/public/components/edit_conversation_name_modal.tsx
+++ b/public/components/edit_conversation_name_modal.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { EuiConfirmModal, EuiFieldText, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiConfirmModal, EuiCompressedFieldText, EuiSpacer, EuiText } from '@elastic/eui';
 import { useCore } from '../contexts/core_context';
 import { usePatchConversation } from '../hooks';
 
@@ -65,7 +65,7 @@ export const EditConversationNameModal = ({
         <p>Please enter a new name for your conversation.</p>
       </EuiText>
       <EuiSpacer size="xs" />
-      <EuiFieldText
+      <EuiCompressedFieldText
         inputRef={titleInputRef}
         defaultValue={defaultTitle}
         aria-label="Conversation name input"
diff --git a/public/components/incontext_insight/index.tsx b/public/components/incontext_insight/index.tsx
index 736d17df..33dcd59a 100644
--- a/public/components/incontext_insight/index.tsx
+++ b/public/components/incontext_insight/index.tsx
@@ -8,11 +8,11 @@ import './index.scss';
 import { i18n } from '@osd/i18n';
 import {
   EuiWrappingPopover,
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopoverTitle,
   EuiText,
   EuiPopoverFooter,
@@ -23,7 +23,7 @@ import {
   EuiPanel,
   keys,
   EuiIcon,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import React, { Children, isValidElement, useEffect, useRef, useState } from 'react';
 import { IncontextInsight as IncontextInsightInput } from '../../types';
@@ -175,7 +175,9 @@ export const IncontextInsight = ({ children }: IncontextInsightProps) => {
   );
 
   const GeneratePopoverBody: React.FC<{}> = ({}) => (
-    <EuiButton onClick={() => toasts.addDanger('To be implemented...')}>Generate summary</EuiButton>
+    <EuiSmallButton onClick={() => toasts.addDanger('To be implemented...')}>
+      Generate summary
+    </EuiSmallButton>
   );
 
   const SummaryPopoverBody: React.FC<{ incontextInsight: IncontextInsightInput }> = ({
@@ -198,19 +200,19 @@ export const IncontextInsight = ({ children }: IncontextInsightProps) => {
   const ChatPopoverBody: React.FC<{}> = ({}) => (
     <EuiFlexGroup>
       <EuiFlexItem grow={6}>
-        <EuiFormRow>
-          <EuiFieldText placeholder="Ask a question" />
-        </EuiFormRow>
+        <EuiCompressedFormRow>
+          <EuiCompressedFieldText placeholder="Ask a question" />
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton
+        <EuiSmallButton
           fill
           iconType="returnKey"
           iconSide="right"
           onClick={() => toasts.addDanger('To be implemented...')}
         >
           Go
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
@@ -293,7 +295,7 @@ export const IncontextInsight = ({ children }: IncontextInsightProps) => {
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <div>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   title={i18n.translate('assistantDashboards.incontextInsight.closeAssistant', {
                     defaultMessage: 'Close assistant popover',
                   })}
diff --git a/public/components/invite_message.tsx b/public/components/invite_message.tsx
index 55258e2d..dc619045 100644
--- a/public/components/invite_message.tsx
+++ b/public/components/invite_message.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import React from 'react';
 
 export const InviteMessage: React.FC = () => {
@@ -28,9 +28,9 @@ export const InviteMessage: React.FC = () => {
         </>
       }
       actions={
-        <EuiButton color="primary" fill href={mailtoLink}>
+        <EuiSmallButton color="primary" fill href={mailtoLink}>
           Request invite
-        </EuiButton>
+        </EuiSmallButton>
       }
     />
   );
diff --git a/public/components/notebook/notebook_name_modal.tsx b/public/components/notebook/notebook_name_modal.tsx
index 6977af73..6a62c122 100644
--- a/public/components/notebook/notebook_name_modal.tsx
+++ b/public/components/notebook/notebook_name_modal.tsx
@@ -4,15 +4,15 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiLink,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiModalHeaderTitle,
 } from '@elastic/eui';
 import React, { useState, useCallback } from 'react';
@@ -71,20 +71,20 @@ export const NotebookNameModal = ({ onClose, saveChat }: NotebookNameModalProps)
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiFormRow label="Please enter a name for your notebook.">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Please enter a name for your notebook.">
+            <EuiCompressedFieldText
               value={name}
               onChange={(e) => setName(e.target.value)}
               aria-label="Notebook name input"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onClose} data-test-subj="cancelSaveToNotebookButton">
+          <EuiSmallButtonEmpty onClick={onClose} data-test-subj="cancelSaveToNotebookButton">
             Cancel
-          </EuiButtonEmpty>
-          <EuiButton
+          </EuiSmallButtonEmpty>
+          <EuiSmallButton
             type="submit"
             fill
             isLoading={loading}
@@ -93,7 +93,7 @@ export const NotebookNameModal = ({ onClose, saveChat }: NotebookNameModalProps)
             data-test-subj="confirmSaveToNotebookButton"
           >
             Confirm name
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </>
diff --git a/public/tabs/chat/chat_page_content.tsx b/public/tabs/chat/chat_page_content.tsx
index 89f518cc..253a52da 100644
--- a/public/tabs/chat/chat_page_content.tsx
+++ b/public/tabs/chat/chat_page_content.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -69,14 +69,14 @@ export const ChatPageContent: React.FC<ChatPageContentProps> = React.memo((props
           body={props.messagesLoadingError.message}
           titleSize="l"
           actions={
-            <EuiButton
+            <EuiSmallButton
               className="llm-chat-error-refresh-button"
               fill
               iconType="refresh"
               onClick={props.onRefresh}
             >
               Refresh
-            </EuiButton>
+            </EuiSmallButton>
           }
         />
       </>
diff --git a/public/tabs/chat/messages/message_bubble.tsx b/public/tabs/chat/messages/message_bubble.tsx
index 3ffaca74..25a67f8f 100644
--- a/public/tabs/chat/messages/message_bubble.tsx
+++ b/public/tabs/chat/messages/message_bubble.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiAvatar,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCopy,
   EuiFlexGroup,
   EuiFlexItem,
@@ -184,7 +184,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                   <EuiFlexItem grow={false}>
                     <EuiCopy textToCopy={props.message.content ?? ''}>
                       {(copy) => (
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="copy message"
                           title="copy message"
                           onClick={copy}
@@ -197,7 +197,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                 )}
                 {props.showRegenerate && props.interaction?.interaction_id ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="regenerate message"
                       onClick={() => props.onRegenerate?.(props.interaction?.interaction_id || '')}
                       title="regenerate message"
@@ -211,7 +211,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                   <>
                     {feedbackResult !== false ? (
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="feedback thumbs up"
                           color={feedbackResult === true ? 'primary' : 'text'}
                           iconType="thumbsUp"
@@ -221,7 +221,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                     ) : null}
                     {feedbackResult !== true ? (
                       <EuiFlexItem grow={false}>
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="feedback thumbs down"
                           color={feedbackResult === false ? 'primary' : 'text'}
                           iconType="thumbsDown"
@@ -233,7 +233,7 @@ export const MessageBubble: React.FC<MessageBubbleProps> = React.memo((props) =>
                 )}
                 {props.message.interactionId ? (
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="How was this generated?"
                       data-test-subj={`trace-icon-${props.message.interactionId}`}
                       onClick={() => {
diff --git a/public/tabs/history/chat_history_list.tsx b/public/tabs/history/chat_history_list.tsx
index 40b52d2a..db1e4477 100644
--- a/public/tabs/history/chat_history_list.tsx
+++ b/public/tabs/history/chat_history_list.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback } from 'react';
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -75,7 +75,7 @@ export const ChatHistoryListItem = ({
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="s" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={handleEditClick}
                 iconType="pencil"
                 aria-label="Edit conversation name"
@@ -83,7 +83,7 @@ export const ChatHistoryListItem = ({
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={handleDeleteClick}
                 iconType="trash"
                 color="danger"
diff --git a/public/tabs/history/chat_history_page.tsx b/public/tabs/history/chat_history_page.tsx
index 92b175c8..a8a2af49 100644
--- a/public/tabs/history/chat_history_page.tsx
+++ b/public/tabs/history/chat_history_page.tsx
@@ -12,7 +12,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
@@ -148,7 +148,7 @@ export const ChatHistoryPage: React.FC<ChatHistoryPageProps> = React.memo((props
             {flyoutFullScreen ? (
               <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="full screen back"
                     iconType="cross"
                     onClick={handleBack}
diff --git a/public/tabs/history/chat_history_search_list.tsx b/public/tabs/history/chat_history_search_list.tsx
index 569e5146..0520539c 100644
--- a/public/tabs/history/chat_history_search_list.tsx
+++ b/public/tabs/history/chat_history_search_list.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFieldSearchProps,
   EuiPanel,
   EuiSpacer,
@@ -81,7 +81,7 @@ export const ChatHistorySearchList = ({
   );
   return (
     <>
-      <EuiFieldSearch
+      <EuiCompressedFieldSearch
         placeholder="Search by conversation name"
         value={search}
         onChange={onSearchChange}