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

) (#377) * Use EuiSmallButton * Use EuiSmallButtonIcon * Use EuiSmallButtonEmpty * Use EuiCompressedFormRow * Use EuiCompressedField* * Use EuiCompressedSelect and EuiCompressedSuperSelect * Use EuiCompressedRadio and EuiCompressedRadioGroup * Use EuiCompressedComboBox * Undo unnecessary EuiSmallButton* uses * Update snapshots and tests * Fix pre-existing linting errors --------- (cherry picked from commit f3b678d) Signed-off-by: Miki <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Aug 19, 2024 · 56172fb · 56172fb
1 parent 5eca71b
commit 56172fb
Show file tree

Hide file tree

Showing 39 changed files with 528 additions and 525 deletions.
diff --git a/common/utils/toast_helper.tsx b/common/utils/toast_helper.tsx
@@ -4,6 +4,7 @@
  */
 
 import {
+  EuiSmallButton,
   EuiButton,
   EuiCodeBlock,
   EuiModal,
@@ -61,7 +62,7 @@ const loadErrorModal = (errorDetailsMessage: string) => {
           </EuiCodeBlock>
         </EuiModalBody>
         <EuiModalFooter>
-          <EuiButton onClick={() => modal.close()}>Close</EuiButton>
+          <EuiSmallButton onClick={() => modal.close()}>Close</EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     )

diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap
diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonIcon,
   EuiCallOut,
   EuiComboBoxOptionOption,
@@ -1132,9 +1132,9 @@ export class Main extends React.Component<MainProps, MainState> {
                 <EuiSpacer />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
+                <EuiSmallButton href={link} target="_blank" iconType="popout" iconSide="right">
                   {linkTitle}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
             <EuiPageContentBody>

diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCodeBlock,
   EuiCodeEditor,
   EuiComboBoxOptionOption,
@@ -91,9 +91,9 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             </EuiModalBody>
 
             <EuiModalFooter>
-              <EuiButton onClick={closeModal} fill>
+              <EuiSmallButton onClick={closeModal} fill>
                 Close
-              </EuiButton>
+              </EuiSmallButton>
             </EuiModalFooter>
           </EuiModal>
         </EuiOverlayMask>
@@ -125,19 +125,16 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">
-          <EuiFlexItem
-            className="sql-editor-buttons"
-            grow={false}
-          >
-            <EuiButton
+          <EuiFlexItem className="sql-editor-buttons" grow={false}>
+            <EuiSmallButton
               fill={true}
               data-test-subj="pplRunButton"
               className="sql-editor-button"
               isLoading={this.props.asyncLoading}
               onClick={() => this.props.onRun(this.props.pplQuery)}
             >
               {this.props.asyncLoading ? 'Running' : 'Run'}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
@@ -146,26 +143,30 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
               this.props.onClear();
             }}
           >
-            <EuiButton className="sql-editor-button"  data-test-subj="pplClearButton" isDisabled={this.props.asyncLoading}>
+            <EuiSmallButton
+              className="sql-editor-button"
+              data-test-subj="pplClearButton"
+              isDisabled={this.props.asyncLoading}
+            >
               Clear
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           {this.props.selectedDatasource &&
           this.props.selectedDatasource[0].label === 'OpenSearch' ? (
             <EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
-              <EuiButton
+              <EuiSmallButton
                 className="sql-editor-button"
                 onClick={showModal}
                 isDisabled={this.props.asyncLoading}
               >
                 Explain
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           ) : (
             <EuiFlexItem grow={false} onClick={() => this.props.updatePPLQueries(SAMPLE_PPL_QUERY)}>
-              <EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
+              <EuiSmallButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
                 Sample Query
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>

diff --git a/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap b/public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
@@ -138,7 +138,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -157,7 +157,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -176,7 +176,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -333,7 +333,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -352,7 +352,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -371,7 +371,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -528,7 +528,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -547,7 +547,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -566,7 +566,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -723,7 +723,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -742,7 +742,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -761,7 +761,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span
@@ -921,7 +921,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
           data-test-subj="pplRunButton"
           type="button"
         >
@@ -940,7 +940,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           data-test-subj="pplClearButton"
           type="button"
         >
@@ -959,7 +959,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary sql-editor-button"
+          class="euiButton euiButton--primary euiButton--small sql-editor-button"
           type="button"
         >
           <span

diff --git a/public/components/QueryResults/QueryResults.tsx b/public/components/QueryResults/QueryResults.tsx
@@ -10,7 +10,7 @@ import { SortableProperties, SortableProperty } from '@elastic/eui/lib/services'
 import {
   Comparators,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiComboBoxOptionOption,
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -317,7 +317,7 @@ export class QueryResults extends React.Component<QueryResultsProps, QueryResult
             <EuiFlexItem grow={false}>
               {this.props.queryResults.length > 0 &&
                 (this.props.isResultFullScreen ? (
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType="cross"
                     color="text"
                     id="exit-fullscreen-button"

diff --git a/public/components/QueryResults/QueryResultsBody.tsx b/public/components/QueryResults/QueryResultsBody.tsx
@@ -9,8 +9,9 @@ import { SortableProperties } from '@elastic/eui/lib/services';
 // @ts-ignore
 import {
   Comparators,
+  EuiSmallButton,
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCodeEditor,
   EuiComboBoxOptionOption,
   EuiContextMenu,
@@ -190,9 +191,9 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButton onClick={closeModal} fill>
+            <EuiSmallButton onClick={closeModal} fill>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
@@ -404,7 +405,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
 
   addExpandingNodeIcon(node: Node, expandedRowMap: ItemIdToExpandedRowMap) {
     return (
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         style={{ marginLeft: -4 }}
         onClick={() => this.toggleNodeData(node, expandedRowMap)}
         aria-label={
@@ -426,7 +427,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
       return;
     }
     return (
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         onClick={() => this.updateExpandedRowMap(node, expandedRowMap)}
         aria-label={
           expandedRowMap[node.parent!.nodeId] &&