clean up some more class names

elastic · Oct 20, 2021 · 6bb1629 · 6bb1629
1 parent bb710b5
commit 6bb1629
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/...ation_util/public/components/controls/control_group/component/control_frame_component.tsx b/...ation_util/public/components/controls/control_group/component/control_frame_component.tsx
@@ -57,9 +57,9 @@ export const ControlFrame = ({ customPrepend, enableActions, embeddableId }: Con
 
   const floatingActions = (
     <div
-      className={classNames('controlFrame--floatingActions', {
-        'controlFrame--floatingActions-twoLine': usingTwoLineLayout,
-        'controlFrame--floatingActions-oneLine': !usingTwoLineLayout,
+      className={classNames('controlFrameFloatingActions', {
+        'controlFrameFloatingActions--twoLine': usingTwoLineLayout,
+        'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
       })}
     >
       <EuiToolTip content={ControlGroupStrings.floatingActions.getEditButtonTitle()}>

diff --git a/...n_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/...n_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -66,7 +66,7 @@ const SortableControlInner = forwardRef<
   const width = panels[embeddableId].width;
 
   const dragHandle = (
-    <button ref={dragHandleRef} {...dragHandleProps} className="controlFrame--dragHandle">
+    <button ref={dragHandleRef} {...dragHandleProps} className="controlFrame__dragHandle">
       <EuiIcon type="grabHorizontal" />
     </button>
   );
@@ -114,9 +114,9 @@ export const ControlClone = ({ draggingId }: { draggingId: string }) => {
       })}
     >
       {controlStyle === 'twoLine' ? <EuiFormLabel>{title}</EuiFormLabel> : undefined}
-      <EuiFlexGroup gutterSize="none" className={'controlFrame--draggable'}>
+      <EuiFlexGroup gutterSize="none" className={'controlFrame__draggable'}>
         <EuiFlexItem grow={false}>
-          <EuiIcon type="grabHorizontal" className="controlFrame--dragHandle" />
+          <EuiIcon type="grabHorizontal" className="controlFrame__dragHandle" />
         </EuiFlexItem>
         {controlStyle === 'oneLine' ? <EuiFlexItem>{title}</EuiFlexItem> : undefined}
       </EuiFlexGroup>

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/control_group.scss
@@ -64,7 +64,7 @@ $controlMinWidth: $euiSize * 14;
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
 
-  .controlFrame--draggable {
+  .controlFrame__draggable {
     cursor: grabbing;
     height: $euiButtonHeight;
     align-items: center;
@@ -76,14 +76,14 @@ $controlMinWidth: $euiSize * 14;
     min-width: $controlMinWidth;
   }
 
-  .controlFrame__formControlLayout, .controlFrame--draggable {
+  .controlFrame__formControlLayout, .controlFrame__draggable {
     &-clone {
       box-shadow: 0 0 0 1px $euiShadowColor,
         0 1px 6px 0 $euiShadowColor;
       cursor: grabbing !important;
     }
 
-    .controlFrame--dragHandle {
+    .controlFrame__dragHandle {
       cursor: grabbing;
     }
   }
@@ -105,7 +105,7 @@ $controlMinWidth: $euiSize * 14;
     }
 
     &:not(.controlFrame__formControlLayout-clone) {
-      .controlFrame--dragHandle {
+      .controlFrame__dragHandle {
         cursor: grab;
       }
     }
@@ -157,7 +157,7 @@ $controlMinWidth: $euiSize * 14;
     }
   }
 
-  .controlFrame--floatingActions {
+  .controlFrameFloatingActions {
     visibility: hidden;
     opacity: 0;
 
@@ -167,23 +167,23 @@ $controlMinWidth: $euiSize * 14;
     z-index: 1;
     position: absolute;
 
-    &-oneLine {
+    &--oneLine {
       right:$euiSizeXS;
       top: -$euiSizeL;
       padding: $euiSizeXS;
       border-radius: $euiBorderRadius;
       background-color: $euiColorEmptyShade;
-      box-shadow: 0 0 0 1pt $euiColorLightShade;
+      box-shadow: 0 0 0 1px $euiColorLightShade;
     }
 
-    &-twoLine {
+    &--twoLine {
       right:$euiSizeXS;
       top: -$euiSizeXS;
     }
   }
 
   &:hover {
-    .controlFrame--floatingActions {
+    .controlFrameFloatingActions {
       transition:visibility .1s, opacity .1s;
       visibility: visible;
       opacity: 1;