Use smaller and compressed varients of buttons and form components #2068

AMoo-Miki · 2024-08-19T16:09:39Z

Description

Replace instances of EuiButton that don't have an explicit sizing attribute to EuiSmallButton*.
Replace instances of Eui<form elements> that don't have density attributes to EuiCompressed<form elements>.

Check List

New functionality includes testing.
- All tests pass, including unit test, integration test and doctest
New functionality has been documented.
- New functionality has javadoc added
- New functionality has user manual doc added
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

derek-ho · 2024-08-19T16:32:59Z

@ps48 @mengweieric can one of you folks review this and help get it merged?

derek-ho · 2024-08-19T16:53:14Z

...nalytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx

@@ -14,7 +14,7 @@ interface EUISwitch {
 }
 export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, handleChange }) => (
  <Fragment key={`config-switch-${label}`}>
-    <EuiFormRow label={label}>
+    <EuiCompressedFormRow label={label}>
      <EuiSwitch


Should this be changed to a compressed switch?

Nah; it already has the compressed attrib.

derek-ho · 2024-08-19T16:54:50Z

...explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx

@@ -50,7 +50,7 @@ export const ConfigTreemapParentFields = ({
                    {obj.label !== '' ? obj.label : `Parent ${index + 1}`}
                  </EuiLink>
                </EuiText>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                  color="subdued"
                  iconType="cross"
                  aria-label="clear-field"


should icon size prop be removed on line 57?

No. EuiSmallButtonIcon only imposes the size prop and iconSize should be maintained.

derek-ho · 2024-08-19T16:55:00Z

...explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx

@@ -64,7 +64,7 @@ export const ConfigTreemapParentFields = ({
      <EuiSpacer size="s" />
      <EuiPanel className="panelItem_button" grow>
        <EuiText size="s">{addButtonText}</EuiText>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
          iconType="plusInCircle"
          aria-label="clear-field"
          iconSize="s"


Same comment as above

EuiSmallButtonIcon only imposes the size prop and iconSize should be maintained.

derek-ho · 2024-08-19T17:02:38Z

public/components/visualizations/charts/data_table/data_table_header.tsx

@@ -85,15 +85,15 @@ export const GridHeader = ({
        />
      </EuiFlexItem>
      <EuiFlexItem style={{ maxWidth: GRID_HEADER_COLUMN_MAX_WIDTH }}>
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
          iconSize="s"


remove icon size?

derek-ho · 2024-08-19T17:03:32Z

public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx

@@ -45,7 +45,7 @@ export function LatencyTrendCell({
              <EuiText size="s">{traceGroupName}</EuiText>
            </EuiFlexItem>
            <EuiFlexItem grow={false}>
-              <EuiButtonIcon


Import should be changed?

derek-ho

Minor comments

Signed-off-by: Miki <[email protected]>

ps48 · 2024-08-19T19:10:35Z

@AMoo-Miki Can you please update the 4 snapshots that are failing.

TackAdam · 2024-08-19T20:03:16Z

Can we wait on merging this until #2063 gets approved/merged?

opensearch-trigger-bot · 2024-08-19T22:31:56Z

The backport to 2.x failed:

The process '/usr/bin/git' failed with exit code 128

To backport manually, run these commands in your terminal:

# Navigate to the root of your repository
cd $(git rev-parse --show-toplevel)
# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add ../.worktrees/dashboards-observability/backport-2.x 2.x
# Navigate to the new working tree
pushd ../.worktrees/dashboards-observability/backport-2.x
# Create a new branch
git switch --create backport/backport-2068-to-2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick -x --mainline 1 69d12cee1b0e43869d078e30cc996e9d685e44a9
# Push it to GitHub
git push --set-upstream origin backport/backport-2068-to-2.x
# Go back to the original working tree
popd
# Delete the working tree
git worktree remove ../.worktrees/dashboards-observability/backport-2.x

Then, create a pull request where the base branch is 2.x and the compare/head branch is backport/backport-2068-to-2.x.

…pensearch-project#2068) * 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 EuiCompressedFilePicker Signed-off-by: Miki <[email protected]> * Use EuiCompressedRadio and EuiCompressedRadioGroup Signed-off-by: Miki <[email protected]> * Use EuiCompressedSwitch Signed-off-by: Miki <[email protected]> * Use EuiCompressedEuiTextArea Signed-off-by: Miki <[email protected]> * Use EuiCompressedComboBox Signed-off-by: Miki <[email protected]> * Use EuiSmallFilterButton Signed-off-by: Miki <[email protected]> * Undo unnecessary EuiSmallButton* uses Signed-off-by: Miki <[email protected]> * Use EuiCompressedSuperDatePicker Signed-off-by: Miki <[email protected]> * Fix tests and snapshots Signed-off-by: Miki <[email protected]> * Fix tests and snapshots Signed-off-by: Miki <[email protected]> --------- Signed-off-by: Miki <[email protected]> Signed-off-by: Adam Tackett <[email protected]>

…pensearch-project#2068) * 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 EuiCompressedFilePicker Signed-off-by: Miki <[email protected]> * Use EuiCompressedRadio and EuiCompressedRadioGroup Signed-off-by: Miki <[email protected]> * Use EuiCompressedSwitch Signed-off-by: Miki <[email protected]> * Use EuiCompressedEuiTextArea Signed-off-by: Miki <[email protected]> * Use EuiCompressedComboBox Signed-off-by: Miki <[email protected]> * Use EuiSmallFilterButton Signed-off-by: Miki <[email protected]> * Undo unnecessary EuiSmallButton* uses Signed-off-by: Miki <[email protected]> * Use EuiCompressedSuperDatePicker Signed-off-by: Miki <[email protected]> * Fix tests and snapshots Signed-off-by: Miki <[email protected]> * Fix tests and snapshots Signed-off-by: Miki <[email protected]> --------- cherry-picked 69d12ce Signed-off-by: Miki <[email protected]>

…2068) (#2080) * Use EuiSmallButton * Use EuiSmallButtonIcon * Use EuiSmallButtonEmpty * Use EuiCompressedFormRow * Use EuiCompressedField* * Use EuiCompressedSelect and EuiCompressedSuperSelect * Use EuiCompressedFilePicker * Use EuiCompressedRadio and EuiCompressedRadioGroup * Use EuiCompressedSwitch * Use EuiCompressedEuiTextArea * Use EuiCompressedComboBox * Use EuiSmallFilterButton * Undo unnecessary EuiSmallButton* uses * Use EuiCompressedSuperDatePicker * Fix tests and snapshots * Fix tests and snapshots --------- cherry-picked 69d12ce Signed-off-by: Miki <[email protected]>

AMoo-Miki requested review from ps48, kavithacm, derek-ho, joshuali925, dai-chen, YANG-DB, rupal-bq, mengweieric, vmmusings, Swiddis, penghuo, seankao-az, anirudha, paulstn and sumukhswamy as code owners August 19, 2024 16:09

derek-ho added backport 2.x maintenance labels Aug 19, 2024

derek-ho reviewed Aug 19, 2024

View reviewed changes

derek-ho approved these changes Aug 19, 2024

View reviewed changes

AMoo-Miki force-pushed the lnf-demo-2 branch from e292125 to 5c9af6e Compare August 19, 2024 18:15

AMoo-Miki added 5 commits August 19, 2024 11:51

Use EuiSmallButton

574c4a7

Signed-off-by: Miki <[email protected]>

Use EuiSmallButtonIcon

4d7004e

Signed-off-by: Miki <[email protected]>

Use EuiSmallButtonEmpty

1f1ed34

Signed-off-by: Miki <[email protected]>

Use EuiCompressedFormRow

24fa737

Signed-off-by: Miki <[email protected]>

Use EuiCompressedField*

4d97ea0

Signed-off-by: Miki <[email protected]>

AMoo-Miki added 11 commits August 19, 2024 11:51

Use EuiCompressedSelect and EuiCompressedSuperSelect

a4b0c33

Signed-off-by: Miki <[email protected]>

Use EuiCompressedFilePicker

f7078fe

Signed-off-by: Miki <[email protected]>

Use EuiCompressedRadio and EuiCompressedRadioGroup

0aa8144

Signed-off-by: Miki <[email protected]>

Use EuiCompressedSwitch

99d1409

Signed-off-by: Miki <[email protected]>

Use EuiCompressedEuiTextArea

4c5d490

Signed-off-by: Miki <[email protected]>

Use EuiCompressedComboBox

b96c7b3

Signed-off-by: Miki <[email protected]>

Use EuiSmallFilterButton

d99228d

Signed-off-by: Miki <[email protected]>

Undo unnecessary EuiSmallButton* uses

fab0916

Signed-off-by: Miki <[email protected]>

Use EuiCompressedSuperDatePicker

531989e

Signed-off-by: Miki <[email protected]>

Fix tests and snapshots

a1459fa

Signed-off-by: Miki <[email protected]>

Fix tests and snapshots

6dc2374

Signed-off-by: Miki <[email protected]>

AMoo-Miki force-pushed the lnf-demo-2 branch from a22a9f1 to 6dc2374 Compare August 19, 2024 18:51

mengweieric approved these changes Aug 19, 2024

View reviewed changes

ps48 approved these changes Aug 19, 2024

View reviewed changes

ps48 merged commit 69d12ce into opensearch-project:main Aug 19, 2024
9 of 18 checks passed

opensearch-trigger-bot bot added the backport-failed label Aug 19, 2024

AMoo-Miki mentioned this pull request Aug 21, 2024

[Manual backport 2.x] Use smaller and compressed varients of buttons and form components (#2068) #2080

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use smaller and compressed varients of buttons and form components #2068

Use smaller and compressed varients of buttons and form components #2068

AMoo-Miki commented Aug 19, 2024

derek-ho commented Aug 19, 2024

derek-ho Aug 19, 2024

AMoo-Miki Aug 19, 2024

derek-ho Aug 19, 2024

AMoo-Miki Aug 19, 2024

derek-ho Aug 19, 2024

AMoo-Miki Aug 19, 2024

derek-ho Aug 19, 2024

AMoo-Miki Aug 19, 2024

derek-ho Aug 19, 2024

derek-ho left a comment

ps48 commented Aug 19, 2024

TackAdam commented Aug 19, 2024

opensearch-trigger-bot bot commented Aug 19, 2024

Use smaller and compressed varients of buttons and form components #2068

Use smaller and compressed varients of buttons and form components #2068

Conversation

AMoo-Miki commented Aug 19, 2024

Description

Check List

derek-ho commented Aug 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

derek-ho left a comment

Choose a reason for hiding this comment

ps48 commented Aug 19, 2024

TackAdam commented Aug 19, 2024

opensearch-trigger-bot bot commented Aug 19, 2024