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,27 +54,29 @@ class AddEntryToTableField extends React.Component<Props, State> {
   render() {
     const { disabled, buttonLabel, fieldLabel, errorMessage, helpText } = this.props;
     return (
-      <>
+      <StyledLevel
-        <InputField
+        children={
-          label={fieldLabel}
+          <StyledInputField
-          errorMessage={errorMessage}
+            label={fieldLabel}
-          onChange={this.handleAddEntryChange}
+            errorMessage={errorMessage}
-          validationError={!this.isValid()}
+            onChange={this.handleAddEntryChange}
-          value={this.state.entryToAdd}
+            validationError={!this.isValid()}
-          onReturnPressed={this.appendEntry}
+            value={this.state.entryToAdd}
-          disabled={disabled}
+            onReturnPressed={this.appendEntry}
-          helpText={helpText}
+            disabled={disabled}
-        />
+            helpText={helpText}
-        <Level
+          />
-          right={
+        }
+        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,20 +47,26 @@ class AutocompleteAddEntryToTableField extends React.Component<Props, State> {
 
     const { selectedValue } = this.state;
     return (
-      <div className="field">
+      <Level
-        <Autocomplete
+        children={
-          label={fieldLabel}
+          <StyledAutocomplete
-          loadSuggestions={loadSuggestions}
+            label={fieldLabel}
-          valueSelected={this.handleAddEntryChange}
+            loadSuggestions={loadSuggestions}
-          helpText={helpText}
+            valueSelected={this.handleAddEntryChange}
-          value={selectedValue}
+            helpText={helpText}
-          placeholder={placeholder}
+            value={selectedValue}
-          loadingMessage={loadingMessage}
+            placeholder={placeholder}
-          noOptionsMessage={noOptionsMessage}
+            loadingMessage={loadingMessage}
-          creatable={true}
+            noOptionsMessage={noOptionsMessage}
-        />
+            creatable={true}
-        <Level right={<AddButton label={buttonLabel} action={this.addButtonClicked} disabled={disabled} />} />
+          />
-      </div>
+        }
+        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>
     );