Change AddEntryTo... to single-line component, add className prop to InputField and Autocomplete

scm-ui/ui-components/src/Autocomplete.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import classNames from "classnames";
 import { Async, AsyncCreatable } from "react-select";
 import { SelectValue } from "@scm-manager/ui-types";
 import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";
@@ -14,6 +15,7 @@ type Props = {
   loadingMessage: string;
   noOptionsMessage: string;
   creatable?: boolean;
+  className?: string;
 };
 
 type State = {};
@@ -53,10 +55,11 @@ class Autocomplete extends React.Component<Props, State> {
       loadingMessage,
       noOptionsMessage,
       loadSuggestions,
-      creatable
+      creatable,
+      className
     } = this.props;
     return (
-      <div className="field">
+      <div className={classNames("field", className)}>
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           {creatable ? (

scm-ui/ui-components/src/forms/AddEntryToTableField.tsx

@@ -1,7 +1,8 @@
 import React, { MouseEvent } from "react";
-import InputField from "./InputField";
+import styled from "styled-components";
 import Level from "../layout/Level";
-import { AddButton } from "../buttons";
+import InputField from "./InputField";
+import AddButton from "../buttons/AddButton";
 
 type Props = {
   addEntry: (p: string) => void;
@@ -17,6 +18,22 @@ type State = {
   entryToAdd: string;
 };
 
+const StyledLevel = styled(Level)`
+  align-items: stretch;
+  margin-bottom: 1rem !important; // same margin as field
+`;
+
+const StyledInputField = styled(InputField)`
+  width: 100%;
+  margin-right: 1.5rem;
+`;
+
+const StyledField = styled.div.attrs(props => ({
+  className: "field"
+}))`
+  align-self: flex-end;
+`;
+
 class AddEntryToTableField extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -37,8 +54,9 @@ class AddEntryToTableField extends React.Component<Props, State> {
   render() {
     const { disabled, buttonLabel, fieldLabel, errorMessage, helpText } = this.props;
     return (
-      <>
+      <StyledLevel
-        <InputField
+        children={
+          <StyledInputField
             label={fieldLabel}
             errorMessage={errorMessage}
             onChange={this.handleAddEntryChange}
@@ -48,16 +66,17 @@ class AddEntryToTableField extends React.Component<Props, State> {
             disabled={disabled}
             helpText={helpText}
           />
-        <Level
+        }
         right={
+          <StyledField>
             <AddButton
               label={buttonLabel}
               action={this.addButtonClicked}
               disabled={disabled || this.state.entryToAdd === "" || !this.isValid()}
             />
+          </StyledField>
         }
       />
-      </>
     );
   }
 

scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx

@@ -1,7 +1,8 @@
 import React, { MouseEvent } from "react";
+import styled from "styled-components";
 import { SelectValue } from "@scm-manager/ui-types";
-import Autocomplete from "../Autocomplete";
 import Level from "../layout/Level";
+import Autocomplete from "../Autocomplete";
 import AddButton from "../buttons/AddButton";
 
 type Props = {
@@ -20,6 +21,11 @@ type State = {
   selectedValue?: SelectValue;
 };
 
+const StyledAutocomplete = styled(Autocomplete)`
+  width: 100%;
+  margin-right: 1.5rem;
+`;
+
 class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -41,8 +47,9 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
 
     const { selectedValue } = this.state;
     return (
-      <div className="field">
+      <Level
-        <Autocomplete
+        children={
+          <StyledAutocomplete
             label={fieldLabel}
             loadSuggestions={loadSuggestions}
             valueSelected={this.handleAddEntryChange}
@@ -53,8 +60,13 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
             noOptionsMessage={noOptionsMessage}
             creatable={true}
           />
-        <Level right={<AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />} />
+        }
+        right={
+          <div className="field">
+            <AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />
           </div>
+        }
+      />
     );
   }
 

scm-ui/ui-components/src/forms/InputField.tsx

@@ -15,6 +15,7 @@ type Props = {
   errorMessage?: string;
   disabled?: boolean;
   helpText?: string;
+  className?: string;
 };
 
 class InputField extends React.Component<Props> {
@@ -47,11 +48,21 @@ class InputField extends React.Component<Props> {
   };
 
   render() {
-    const { type, placeholder, value, validationError, errorMessage, disabled, label, helpText } = this.props;
+    const {
+      type,
+      placeholder,
+      value,
+      validationError,
+      errorMessage,
+      disabled,
+      label,
+      helpText,
+      className
+    } = this.props;
     const errorView = validationError ? "is-danger" : "";
     const helper = validationError ? <p className="help is-danger">{errorMessage}</p> : "";
     return (
-      <div className="field">
+      <div className={classNames("field", className)}>
         <LabelWithHelpIcon label={label} helpText={helpText} />
         <div className="control">
           <input

scm-ui/ui-components/src/layout/Level.tsx

@@ -4,15 +4,22 @@ import classNames from "classnames";
 type Props = {
   className?: string;
   left?: ReactNode;
+  children?: ReactNode;
   right?: ReactNode;
 };
 
 export default class Level extends React.Component<Props> {
   render() {
-    const { className, left, right } = this.props;
+    const { className, left, children, right } = this.props;
+    let child = null;
+    if (children) {
+      child = <div className="level-item">{children}</div>;
+    }
+
     return (
       <div className={classNames("level", className)}>
         <div className="level-left">{left}</div>
+        {child}
         <div className="level-right">{right}</div>
       </div>
     );