Transformations: UX updates (#23574)

packages/grafana-data/src/types/theme.ts

@@ -78,6 +78,7 @@ export interface GrafanaThemeCommons {
     formLabelMargin: string;
     formValidationMessagePadding: string;
     formValidationMessageMargin: string;
+    inlineFormMargin: string;
   };
   border: {
     radius: {

packages/grafana-ui/src/components/IconButton/IconButton.tsx

@@ -48,7 +48,7 @@ IconButton.displayName = 'IconButton';
 function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
   switch (surface) {
     case 'body':
-      return theme.isLight ? theme.palette.gray95 : theme.palette.gray10;
+      return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
     case 'panel':
       return theme.isLight ? theme.palette.gray6 : theme.palette.gray15;
     case 'header':

packages/grafana-ui/src/components/Layout/Layout.tsx

@@ -36,13 +36,22 @@ export const Layout: React.FC<LayoutProps> = ({
   return (
     <div className={styles.layout}>
       {React.Children.map(children, (child, index) => {
-        return <div className={styles.buttonWrapper}>{child}</div>;
+        return (
+          <div className={styles.buttonWrapper} key={index}>
+            {child}
+          </div>
+        );
       })}
     </div>
   );
 };
 
-export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({ children, spacing, justify, align }) => (
+export const HorizontalGroup: React.FC<Omit<LayoutProps, 'orientation'>> = ({
+  children,
+  spacing,
+  justify,
+  align = 'center',
+}) => (
   <Layout spacing={spacing} justify={justify} orientation={Orientation.Horizontal} align={align}>
     {children}
   </Layout>
@@ -72,6 +81,9 @@ const getStyles = stylesFactory(
       buttonWrapper: css`
         margin-bottom: ${orientation === Orientation.Horizontal ? 0 : theme.spacing[spacing]};
         margin-right: ${orientation === Orientation.Horizontal ? theme.spacing[spacing] : 0};
+        display: flex;
+        align-items: ${align};
+        height: 100%;
 
         &:last-child {
           margin-bottom: 0;

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap

@@ -208,6 +208,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formValidationMessageMargin": "4px 0 0 0",
                   "formValidationMessagePadding": "4px 8px",
                   "gutter": "30px",
+                  "inlineFormMargin": "4px",
                   "insetSquishMd": "4px 8px",
                   "lg": "24px",
                   "md": "16px",
@@ -522,6 +523,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formValidationMessageMargin": "4px 0 0 0",
                   "formValidationMessagePadding": "4px 8px",
                   "gutter": "30px",
+                  "inlineFormMargin": "4px",
                   "insetSquishMd": "4px 8px",
                   "lg": "24px",
                   "md": "16px",

packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx

@@ -12,9 +12,8 @@ import {
   TransformerUIProps,
 } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
-import { Button } from '../Button/Button';
-import { VerticalGroup } from '../Layout/Layout';
 import { Input } from '../Input/Input';
+import { IconButton } from '../IconButton/IconButton';
 
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
 
@@ -73,29 +72,27 @@ const OrganizeFieldsTransformerEditor: React.FC<OrganizeFieldsTransformerEditorP
   );
 
   return (
-    <VerticalGroup>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="sortable-fields-transformer" direction="vertical">
-          {provided => (
-            <div ref={provided.innerRef} {...provided.droppableProps}>
-              {orderedFieldNames.map((fieldName, index) => {
-                return (
-                  <DraggableFieldName
-                    fieldName={fieldName}
-                    index={index}
-                    onToggleVisibility={onToggleVisibility}
-                    onRenameField={onRenameField}
-                    visible={!excludeByName[fieldName]}
-                    key={fieldName}
-                  />
-                );
-              })}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </VerticalGroup>
+    <DragDropContext onDragEnd={onDragEnd}>
+      <Droppable droppableId="sortable-fields-transformer" direction="vertical">
+        {provided => (
+          <div ref={provided.innerRef} {...provided.droppableProps}>
+            {orderedFieldNames.map((fieldName, index) => {
+              return (
+                <DraggableFieldName
+                  fieldName={fieldName}
+                  index={index}
+                  onToggleVisibility={onToggleVisibility}
+                  onRenameField={onRenameField}
+                  visible={!excludeByName[fieldName]}
+                  key={fieldName}
+                />
+              );
+            })}
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };
 
@@ -121,24 +118,25 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
     <Draggable draggableId={fieldName} index={index}>
       {provided => (
         <div
-          className={styles.container}
+          className="gf-form-inline"
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
         >
-          <div className={styles.left}>
-            <i className={cx('fa fa-ellipsis-v', styles.draggable)} />
-            <Button
-              className={styles.toggle}
-              variant="link"
-              size="md"
-              icon={visible ? 'eye' : 'eye-slash'}
-              onClick={() => onToggleVisibility(fieldName, visible)}
-            />
-            <span className={styles.name}>{fieldName}</span>
-          </div>
-          <div className={styles.right}>
+          <div className="gf-form gf-form--grow">
+            <div className="gf-form-label gf-form-label--justify-left width-30">
+              <i className={cx('fa fa-ellipsis-v', styles.draggable)} />
+              <IconButton
+                className={styles.toggle}
+                size="md"
+                name={visible ? 'eye' : 'eye-slash'}
+                surface="header"
+                onClick={() => onToggleVisibility(fieldName, visible)}
+              />
+              <span className={styles.name}>{fieldName}</span>
+            </div>
             <Input
+              className="flex-grow-1"
               placeholder={`Rename ${fieldName}`}
               onChange={event => onRenameField(fieldName, event.currentTarget.value)}
             />
@@ -150,28 +148,17 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({
 };
 
 const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
-  container: css`
-    display: flex;
-    align-items: center;
-    margin-top: 8px;
-  `,
-  left: css`
-    width: 35%;
-    padding: 0 8px;
-    border-radius: 3px;
-    background-color: ${theme.colors.bg2};
-  `,
-  right: css`
-    width: 65%;
-    margin-left: 8px;
-  `,
   toggle: css`
-    padding: 5px;
-    margin: 0 5px;
+    margin: 0 8px;
+    color: ${theme.colors.textWeak};
   `,
   draggable: css`
+    padding: 0 ${theme.spacing.xs};
     font-size: ${theme.typography.size.md};
     opacity: 0.4;
+    &:hover {
+      color: ${theme.colors.textStrong};
+    }
   `,
   name: css`
     font-size: ${theme.typography.size.sm};

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -352,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: ${theme.palette.blue77};
+$switch-slider-on-bg: ${theme.palette.blue95};
 $switch-slider-shadow: 0 0 3px black;
 
 //Checkbox

packages/grafana-ui/src/themes/default.ts

@@ -102,6 +102,7 @@ const theme: GrafanaThemeCommons = {
     formLabelMargin: `0 0 ${SPACING_BASE / 2 + 'px'} 0`,
     formValidationMessagePadding: '4px 8px',
     formValidationMessageMargin: '4px 0 0 0',
+    inlineFormMargin: '4px',
   },
   border: {
     radius: {

packages/grafana-ui/src/themes/light.ts

@@ -36,7 +36,7 @@ const basicColors = {
 const backgrounds = {
   bg1: basicColors.white,
   bg2: basicColors.gray97,
-  bg3: basicColors.gray95,
+  bg3: basicColors.gray90,
   dashboardBg: basicColors.gray98,
   bgBlue1: basicColors.blue80,
   bgBlue2: basicColors.blue77,