fix controls styles

elastic · Sep 8, 2024 · 52c3375 · 52c3375
1 parent 9a187df
commit 52c3375
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
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
@@ -16,7 +16,7 @@
     .controlPanel--label {
       @include euiTextTruncate;
       padding: 0;
-      height: $euiButtonHeightSmall;
+      height: 100%;
     }
   }
 
@@ -38,3 +38,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 !important; // to-do remove !important when new controls are merged
+  }
+}
+
+.controlFrame__formControlLayout.controlFrame__formControlLayout--view.timeSlider {
+  .euiFormControlLayout__prepend {
+    padding-inline-start: 0 !important; // to-do remove !important when new controls are merged
+  }
+}
+
+.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine.controlFrame__formControlLayout--edit {
+  .euiFormControlLayout__prepend {
+    padding-inline-end: 0 !important; // to-do remove !important when new controls are merged
+  }
+}
+
+.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine:not(.controlFrame__formControlLayout--edit) {
+  .euiFormControlLayout__prepend {
+    padding-inline: 0 !important; // to-do remove !important when new controls are merged
+  }
+}
+
+.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--twoLine).controlFrame__formControlLayout--edit {
+  .euiFormControlLayout__prepend {
+    padding-inline-start: $euiSizeXS * 0.5 !important; // skinny icon, to-do remove !important when new controls are merged
+  }
+}
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
@@ -33,6 +33,7 @@ import { ControlPanelProps, DefaultControlApi } from '../../controls/types';
 import { ControlError } from './control_error';
 
 import './control_panel.scss';
+import { A } from '@storybook/components';
 
 const DragHandle = ({
   isEditable,
@@ -55,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,
@@ -112,6 +111,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))) {
@@ -161,7 +161,10 @@ 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