Grafana-UI: Form elements fixes (#27858)

* Fix inline label tooltip position

* Allow resetting max-width

* Fix label alignment and props

* Fix label line height

packages/grafana-ui/src/components/Forms/Form.tsx

@@ -11,7 +11,7 @@ interface FormProps<T> extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
   onSubmit: OnSubmit<T>;
   onSubmit: OnSubmit<T>;
   children: (api: FormAPI<T>) => React.ReactNode;
   children: (api: FormAPI<T>) => React.ReactNode;
   /** Sets max-width for container. Use it instead of setting individual widths on inputs.*/
   /** Sets max-width for container. Use it instead of setting individual widths on inputs.*/
-  maxWidth?: number;
+  maxWidth?: number | 'none';
 }
 }
 
 
 export function Form<T>({
 export function Form<T>({
@@ -38,7 +38,7 @@ export function Form<T>({
   return (
   return (
     <form
     <form
       className={css`
       className={css`
-        max-width: ${maxWidth}px;
+        max-width: ${maxWidth !== 'none' ? maxWidth + 'px' : maxWidth};
         width: 100%;
         width: 100%;
       `}
       `}
       onSubmit={handleSubmit(onSubmit)}
       onSubmit={handleSubmit(onSubmit)}

packages/grafana-ui/src/components/Forms/InlineField.tsx

@@ -59,7 +59,7 @@ const getStyles = (theme: GrafanaTheme, grow?: boolean) => {
     container: css`
     container: css`
       display: flex;
       display: flex;
       flex-direction: row;
       flex-direction: row;
-      align-items: flex-start;
+      align-items: center;
       text-align: left;
       text-align: left;
       position: relative;
       position: relative;
       flex: ${grow ? 1 : 0} 0 auto;
       flex: ${grow ? 1 : 0} 0 auto;

packages/grafana-ui/src/components/Forms/InlineLabel.tsx

@@ -20,7 +20,7 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
   isInvalid?: boolean;
   isInvalid?: boolean;
 }
 }
 
 
-export const InlineLabel: FunctionComponent<Props> = ({ children, className, htmlFor, tooltip, width, ...rest }) => {
+export const InlineLabel: FunctionComponent<Props> = ({ children, className, tooltip, width, ...rest }) => {
   const theme = useTheme();
   const theme = useTheme();
   const styles = getInlineLabelStyles(theme, width);
   const styles = getInlineLabelStyles(theme, width);
 
 
@@ -48,7 +48,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
       font-size: ${theme.typography.size.sm};
       font-size: ${theme.typography.size.sm};
       background-color: ${theme.colors.bg2};
       background-color: ${theme.colors.bg2};
       height: ${theme.height.md}px;
       height: ${theme.height.md}px;
-      line-height: ${theme.height.md};
+      line-height: ${theme.height.md}px;
       margin-right: ${theme.spacing.xs};
       margin-right: ${theme.spacing.xs};
       border-radius: ${theme.border.radius.md};
       border-radius: ${theme.border.radius.md};
       border: none;
       border: none;
@@ -56,7 +56,6 @@ export const getInlineLabelStyles = (theme: GrafanaTheme, width?: number | 'auto
       color: ${theme.colors.textHeading};
       color: ${theme.colors.textHeading};
     `,
     `,
     icon: css`
     icon: css`
-      flex-grow: 0;
       color: ${theme.colors.textWeak};
       color: ${theme.colors.textWeak};
       margin-left: 10px;
       margin-left: 10px;