Use smaller and compressed varients of buttons and form components (#349

) (#352) * Use EuiSmallButton Signed-off-by: Miki <[email protected]> * Use EuiSmallButtonIcon Signed-off-by: Miki <[email protected]> * Use EuiSmallButtonEmpty Signed-off-by: Miki <[email protected]> * Use EuiCompressedFormRow Signed-off-by: Miki <[email protected]> * Use EuiCompressedField* Signed-off-by: Miki <[email protected]> * Use EuiCompressedSelect and EuiCompressedSuperSelect Signed-off-by: Miki <[email protected]> * Use EuiSmallFilterButton Signed-off-by: Miki <[email protected]> --------- Signed-off-by: Miki <[email protected]> (cherry picked from commit 6c280ae) Co-authored-by: Miki <[email protected]>
opensearch-project · Aug 19, 2024 · 30813c9 · 30813c9
1 parent 5153be6
commit 30813c9
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 28 deletions.
diff --git a/public/components/common/copyable_text.tsx b/public/components/common/copyable_text.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useState, useRef } from 'react';
-import { EuiButtonIcon, copyToClipboard, EuiToolTip } from '@elastic/eui';
+import { EuiSmallButtonIcon, copyToClipboard, EuiToolTip } from '@elastic/eui';
 
 interface Props {
   text: string;
@@ -33,7 +33,7 @@ export const CopyableText = ({
     <div data-test-subj="copyable-text-div">
       {iconLeft ? null : text}
       <EuiToolTip content={isTextCopied ? copiedTooltipText : tooltipText}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           buttonRef={copyButtonRef}
           aria-label="Copy ID to clipboard"
           color="text"

diff --git a/public/components/common/options_filter/options_filter.tsx b/public/components/common/options_filter/options_filter.tsx
@@ -8,7 +8,7 @@ import {
   EuiPopover,
   EuiPopoverTitle,
   EuiFieldSearch,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiPopoverFooter,
   EuiFlexGroup,
   EuiFlexItem,
@@ -73,14 +73,14 @@ export const OptionsFilter = <T extends string | number = string>({
   return (
     <EuiPopover
       button={
-        <EuiFilterButton
+        <EuiSmallFilterButton
           iconType="arrowDown"
           onClick={handleButtonClick}
           isSelected={isPopoverOpen}
           {...(value.length > 0 ? { hasActiveFilters: true, numActiveFilters: value.length } : {})}
         >
           {name}
-        </EuiFilterButton>
+        </EuiSmallFilterButton>
       }
       isOpen={isPopoverOpen}
       closePopover={closePopover}

diff --git a/public/components/common/refresh_interval.tsx b/public/components/common/refresh_interval.tsx
@@ -5,15 +5,15 @@
 
 import {
   EuiIcon,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiPopover,
   EuiFlexGroup,
-  EuiFieldNumber,
-  EuiSelect,
-  EuiButton,
+  EuiCompressedFieldNumber,
+  EuiCompressedSelect,
+  EuiSmallButton,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 
@@ -116,14 +116,14 @@ export const RefreshInterval = ({
   }, [interval, isPaused, onRefresh, onRefreshChange]);
 
   const intervalButton = (
-    <EuiButtonEmpty
+    <EuiSmallButtonEmpty
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
       aria-label="set refresh interval"
     >
       <EuiIcon type="clock" />
-    </EuiButtonEmpty>
+    </EuiSmallButtonEmpty>
   );
 
   let errors: string[] = [];
@@ -132,7 +132,7 @@ export const RefreshInterval = ({
   }
 
   return (
-    <EuiFieldText
+    <EuiCompressedFieldText
       aria-label="current interval value"
       readOnly
       value={displayedIntervalValue}
@@ -142,7 +142,7 @@ export const RefreshInterval = ({
           isOpen={isPopoverOpen}
           closePopover={() => setIsPopoverOpen(false)}
         >
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Refresh every"
             helpText={
               errors.length > 0 ? '' : 'Enter an auto-refresh rate greater than 10 seconds.'
@@ -152,15 +152,15 @@ export const RefreshInterval = ({
           >
             <EuiFlexGroup>
               <EuiFlexItem>
-                <EuiFieldNumber
+                <EuiCompressedFieldNumber
                   aria-label="interval value input"
                   isInvalid={isInvalid}
                   value={intervalValue}
                   onChange={onIntervalValueChange}
                 />
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiSelect
+                <EuiCompressedSelect
                   aria-label="interval unit selector"
                   isInvalid={isInvalid}
                   value={intervalUnit}
@@ -169,17 +169,17 @@ export const RefreshInterval = ({
                 />
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiButton
+                <EuiSmallButton
                   aria-label={`${isPaused ? 'start' : 'stop'} refresh interval`}
                   disabled={isInvalid}
                   iconType={isPaused ? 'play' : 'stop'}
                   onClick={() => setIsPaused(!isPaused)}
                 >
                   {isPaused ? 'Start' : 'Stop'}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiPopover>
       }
     />

diff --git a/public/components/monitoring/model_deployment_table.tsx b/public/components/monitoring/model_deployment_table.tsx
@@ -11,7 +11,7 @@ import {
   Direction,
   EuiBasicTable,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiEmptyPrompt,
   EuiHealth,
   EuiSpacer,
@@ -154,7 +154,7 @@ export const ModelDeploymentTable = ({
               anchorClassName="ml-modelModelIdCell"
             >
               {(copy) => (
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Copy ID to clipboard"
                   color="text"
                   iconType="copy"
@@ -176,7 +176,7 @@ export const ModelDeploymentTable = ({
         render: (id: string, modelDeploymentItem: ModelDeploymentItem) => {
           return (
             <EuiToolTip content="View status details">
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 onClick={() => {
                   onViewDetail?.(modelDeploymentItem);
                 }}

diff --git a/public/components/monitoring/search_bar.tsx b/public/components/monitoring/search_bar.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useMemo, useCallback } from 'react';
-import { EuiFieldSearch } from '@elastic/eui';
+import { EuiCompressedFieldSearch } from '@elastic/eui';
 import { debounce } from 'lodash';
 interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -20,7 +20,7 @@ export const SearchBar = ({ onSearch, inputRef }: SearchBarProps) => {
   );
 
   return (
-    <EuiFieldSearch
+    <EuiCompressedFieldSearch
       autoFocus
       inputRef={inputRef}
       placeholder="Search by model name or ID"

diff --git a/public/components/status_filter/index.tsx b/public/components/status_filter/index.tsx
@@ -8,7 +8,7 @@ import {
   EuiPopover,
   EuiPopoverTitle,
   EuiFilterGroup,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiSelectable,
   EuiSelectableOption,
   EuiIcon,
@@ -66,7 +66,7 @@ export const StatusFilter = ({ onUpdateFilters, options, loading }: Props) => {
   );
 
   const button = (
-    <EuiFilterButton
+    <EuiSmallFilterButton
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
@@ -76,7 +76,7 @@ export const StatusFilter = ({ onUpdateFilters, options, loading }: Props) => {
       isLoading={loading}
     >
       Status
-    </EuiFilterButton>
+    </EuiSmallFilterButton>
   );
 
   return (