From 9822fed23ebdc760602de8aecedf9b50abdf03e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Mon, 16 Aug 2021 14:17:45 +0200
Subject: [PATCH] Simplify section styling

---
 .../components/Segment/SegmentInput.story.tsx |  2 +-
 .../src/components/Segment/SegmentSection.tsx | 35 ++++++++++++++-----
 .../components/GraphiteFunctionEditor.tsx     |  1 +
 .../graphite/components/MetricsSection.tsx    | 17 ++-------
 .../graphite/components/TagsSection.tsx       |  8 ++---
 5 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
index a89caff94f3..af21609e1df 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx
@@ -4,7 +4,7 @@ import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
 
 const SegmentFrame = ({ children }: any) => (
   <>
-    <SegmentSection label="Section Name">{children}</SegmentSection>
+    <SegmentSection label="Segment Name">{children}</SegmentSection>
   </>
 );
 
diff --git a/packages/grafana-ui/src/components/Segment/SegmentSection.tsx b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx
index 8a53f110953..ac031e77918 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSection.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSection.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
 import { SegmentSectionFill } from './SegmentSectionFill';
 import { SegmentSectionLabel } from './SegmentSectionLabel';
+import { useStyles2 } from '../../themes';
 
 /**
  * Horizontal section for editor components.
@@ -18,12 +21,26 @@ export const SegmentSection = ({
   children: React.ReactNode;
   // Fill the space at the end
   fill?: boolean;
-}) => (
-  <div className="gf-form-inline">
-    <div className="gf-form">
-      <SegmentSectionLabel name={label} className="width-7" />
-      {children}
-    </div>
-    {fill && <SegmentSectionFill />}
-  </div>
-);
+}) => {
+  const styles = useStyles2(getStyles);
+  return (
+    <>
+      <div className={styles.container}>
+        <div>
+          <SegmentSectionLabel name={label} className="width-7" />
+        </div>
+        {children}
+        {fill && <SegmentSectionFill />}
+      </div>
+    </>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css`
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: ${theme.spacing(0.5)};
+    align-content: flex-start;
+  `,
+});
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
index 5d9fa47ab20..fcf1b93cef3 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx
@@ -82,6 +82,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     borderRadius: theme.shape.borderRadius(),
     marginRight: theme.spacing(0.5),
     padding: `0 ${theme.spacing(1)}`,
+    height: `${theme.v1.spacing.formInputHeight}px`,
   }),
   error: css`
     border: 1px solid ${theme.colors.error.main};
diff --git a/public/app/plugins/datasource/graphite/components/MetricsSection.tsx b/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
index 9c982078a3e..34fb24160d4 100644
--- a/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/MetricsSection.tsx
@@ -2,8 +2,6 @@ import React from 'react';
 import { GraphiteSegment } from '../types';
 import { GraphiteQueryEditorState } from '../state/store';
 import { MetricSegment } from './MetricSegment';
-import { css } from '@emotion/css';
-import { useStyles2 } from '@grafana/ui';
 
 type Props = {
   segments: GraphiteSegment[];
@@ -11,22 +9,11 @@ type Props = {
 };
 
 export function MetricsSection({ segments = [], state }: Props) {
-  const styles = useStyles2(getStyles);
-
   return (
-    <div className={styles.container}>
+    <>
       {segments.map((segment, index) => {
         return <MetricSegment segment={segment} metricIndex={index} key={index} state={state} />;
       })}
-    </div>
+    </>
   );
 }
-
-function getStyles() {
-  return {
-    container: css`
-      display: flex;
-      flex-direction: row;
-    `,
-  };
-}
diff --git a/public/app/plugins/datasource/graphite/components/TagsSection.tsx b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
index 01c76735639..8fdf09313c2 100644
--- a/public/app/plugins/datasource/graphite/components/TagsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
@@ -44,7 +44,7 @@ export function TagsSection({ tags, state, addTagSegments }: Props) {
   ]);
 
   return (
-    <div className={styles.container}>
+    <>
       {tags.map((tag, index) => {
         return <TagEditor key={index} tagIndex={index} tag={tag} state={state} />;
       })}
@@ -60,16 +60,12 @@ export function TagsSection({ tags, state, addTagSegments }: Props) {
         />
       )}
       {state.paused && <PlayButton />}
-    </div>
+    </>
   );
 }
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
-      display: flex;
-      flex-direction: row;
-    `,
     button: css`
       margin-right: ${theme.spacing(0.5)};
     `,