From 05c9bbed758ca34392d0b7595f98b3ecfd28fe02 Mon Sep 17 00:00:00 2001
From: Andrea Del Rio <delrio.andre@gmail.com>
Date: Wed, 11 Sep 2024 08:31:40 -0700
Subject: [PATCH] [Controls] Fix styles (#192319)

## Summary

Closes #192229

<img width="1190" alt="Frame 547"
src="https://github.com/user-attachments/assets/ce074602-6fe0-4889-8cd8-575800d222b3">

### Changes

- Fixes padding in the `prepend` in all control types, in both modes
(i.e. `view` and `edit`) and in both label positions (i.e. `inline` and
`above`)
- Removes the empty icon in view mode introduced by #184533. After
thinking about this is some more I think this is unnecessary given the
shift in the UI that already exists for Dashboards when switching back
and forth between `View` and `Edit` Mode.
- For better control, this creates and passes custom class names to
`controlFrame__formControlLayout`.

> [!NOTE]
> We will be able to do a further clean up these styles when we are done
with [#192005](https://github.com/elastic/kibana/issues/192005).

### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../components/control_group.tsx              |  2 +-
 .../components/control_panel.scss             | 32 ++++++++++++++++++-
 .../components/control_panel.tsx              | 14 +++++---
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
index a9b23316bf83fc..f6259ddc95149c 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
@@ -96,7 +96,7 @@ export function ControlGroup({
   const ApplyButtonComponent = useMemo(() => {
     return (
       <EuiButtonIcon
-        size="m"
+        size="s"
         disabled={!hasUnappliedSelections}
         iconSize="m"
         display="fill"
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
index 4987a58275237b..6c25854aa97ccf 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
@@ -16,7 +16,7 @@
     .controlPanel--label {
       @include euiTextTruncate;
       padding: 0;
-      height: $euiButtonHeightSmall;
+      height: 100%;
     }
   }
 
@@ -39,3 +39,33 @@
 .controlFrame__dragHandle {
   line-height: 0; // Vertically center the grab handle
 }
+
+.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--edit):not(.controlFrame__formControlLayout--twoLine) {
+  .euiFormControlLayout__prepend {
+    padding-inline-start: $euiSizeS;
+  }
+}
+
+.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--edit).timeSlider {
+  .euiFormControlLayout__prepend {
+    padding-inline-start: 0;
+  }
+}
+
+.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine.controlFrame__formControlLayout--edit {
+  .euiFormControlLayout__prepend {
+    padding-inline-end: 0;
+  }
+}
+
+.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine:not(.controlFrame__formControlLayout--edit) {
+  .euiFormControlLayout__prepend {
+    padding-inline: 0;
+  }
+}
+
+.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--twoLine).controlFrame__formControlLayout--edit {
+  .euiFormControlLayout__prepend {
+    padding-inline-start: $euiSizeXS * .5; // skinny icon
+  }
+}
\ No newline at end of file
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
index 577f8d1c2682d1..cbb7bf09fdab7e 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
@@ -56,9 +56,7 @@ const DragHandle = ({
     >
       <EuiIcon type="grabHorizontal" />
     </button>
-  ) : hideEmptyDragHandle ? null : (
-    <EuiIcon size="s" type="empty" />
-  );
+  ) : null;
 
 export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlApi>({
   Component,
@@ -115,6 +113,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
     viewModeSubject
   );
   const usingTwoLineLayout = labelPosition === 'twoLine';
+  const controlType = api ? api.type : null;
 
   const [initialLoadComplete, setInitialLoadComplete] = useState(!dataLoading);
   if (!initialLoadComplete && (dataLoading === false || (api && !api.dataLoading))) {
@@ -164,7 +163,14 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
             fullWidth
             isLoading={Boolean(dataLoading)}
             compressed
-            className="controlFrame__formControlLayout"
+            className={classNames(
+              'controlFrame__formControlLayout',
+              {
+                'controlFrame__formControlLayout--twoLine': usingTwoLineLayout,
+                'controlFrame__formControlLayout--edit': isEditable,
+              },
+              `${controlType}`
+            )}
             prepend={
               <>
                 <DragHandle