Replace styled-components with bulma helpers (#1783)

Use Bulma helpers whenever possible instead of custom styled components.
This pull request replaces primarily color definitions, spacing and flex instructions.

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

@@ -37,20 +37,8 @@ type Props = {
   errorMessage: string;
 };
 
-const StyledLevel = styled(Level)`
-  align-items: stretch;
-  margin-bottom: 1rem !important; // same margin as field
-`;
-
 const FullWidthInputField = styled(InputField)`
   width: 100%;
-  margin-right: 1.5rem;
-`;
-
-const StyledField = styled.div.attrs(() => ({
-  className: "field"
-}))`
-  align-self: flex-end;
 `;
 
 const AddEntryToTableField: FC<Props> = ({
@@ -60,7 +48,7 @@ const AddEntryToTableField: FC<Props> = ({
   fieldLabel,
   helpText,
   validateEntry,
-  errorMessage
+  errorMessage,
 }) => {
   const [entryToAdd, setEntryToAdd] = useState("");
 
@@ -89,9 +77,11 @@ const AddEntryToTableField: FC<Props> = ({
   };
 
   return (
-    <StyledLevel
+    <Level
+      className="is-align-items-stretch mb-4"
       children={
         <FullWidthInputField
+          className="mr-5"
           label={fieldLabel}
           errorMessage={errorMessage}
           onChange={handleAddEntryChange}
@@ -103,13 +93,13 @@ const AddEntryToTableField: FC<Props> = ({
         />
       }
       right={
-        <StyledField>
+        <div className="field is-align-self-flex-end">
           <AddButton
             label={buttonLabel}
             action={addButtonClicked}
             disabled={disabled || entryToAdd === "" || !isValid()}
           />
-        </StyledField>
+        </div>
       }
     />
   );

scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.stories.tsx

@@ -21,37 +21,31 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
-import styled from "styled-components";
-import { storiesOf } from "@storybook/react";
 import React from "react";
-import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 import { MemoryRouter } from "react-router-dom";
-
-const Spacing = styled.div`
-  padding: 2em;
-`;
+import { storiesOf } from "@storybook/react";
+import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 
 storiesOf("Forms|AddKeyValueEntryToTableField", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
-    <Spacing>
+    <div className="m-6">
       <AddKeyValueEntryToTableField
         keyFieldLabel="Key"
         valueFieldLabel="Value"
-        buttonLabel="Add to table"
-        addEntry={(key, value) => {console.log(key, value)}}
+        buttonLabel="Add to Table"
+        addEntry={() => null}
       />
-    </Spacing>
+    </div>
   ))
   .add("Disabled", () => (
-    <Spacing>
+    <div className="m-6">
       <AddKeyValueEntryToTableField
         keyFieldLabel="Key"
         valueFieldLabel="Value"
-        buttonLabel="Add to table"
-        addEntry={() => {}}
+        buttonLabel="Add to Table"
+        addEntry={() => null}
         disabled={true}
       />
-    </Spacing>
+    </div>
   ));

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

@@ -21,7 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, useState } from "react";
 import styled from "styled-components";
 import InputField from "./InputField";
@@ -39,13 +38,7 @@ type Props = {
   validateEntry?: (p: string) => boolean;
 };
 
-const InputLevel = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledInputField = styled(InputField)`
-  margin-right: 1.5rem;
+const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
@@ -62,7 +55,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry
+  addEntry,
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");
@@ -77,13 +70,14 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
 
   const add = () => {
     addEntry(key, value);
-    setKey("")
+    setKey("");
     setValue("");
-  }
+  };
 
   return (
-    <InputLevel>
-      <StyledInputField
+    <div className="is-flex is-justify-content-space-between">
+      <FullWidthInputField
+        className="mr-5"
         label={keyFieldLabel}
         errorMessage={errorMessage}
         onChange={setKey}
@@ -93,7 +87,8 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         disabled={disabled}
         helpText={keyHelpText}
       />
-      <StyledInputField
+      <FullWidthInputField
+        className="mr-5"
         label={valueFieldLabel}
         errorMessage={errorMessage}
         onChange={setValue}
@@ -108,7 +103,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
         action={add}
         disabled={disabled || !key || !value || !isValid(key) || !isValid(value)}
       />
-    </InputLevel>
+    </div>
   );
 };
 

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

@@ -42,7 +42,6 @@ type Props = {
 
 const FullWidthAutocomplete = styled(Autocomplete)`
   width: 100%;
-  margin-right: 1.5rem;
 `;
 
 const AutocompleteAddEntryToTableField: FC<Props> = ({
@@ -79,6 +78,7 @@ const AutocompleteAddEntryToTableField: FC<Props> = ({
     <Level
       children={
         <FullWidthAutocomplete
+          className="mr-5"
           label={fieldLabel}
           loadSuggestions={loadSuggestions}
           valueSelected={handleAddEntryChange}

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

@@ -22,18 +22,9 @@
  * SOFTWARE.
  */
 import React, { ChangeEvent, FC, FocusEvent } from "react";
-import { Help } from "../index";
-import styled from "styled-components";
-import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 import classNames from "classnames";
-
-const StyledRadio = styled.label`
-  margin-right: 0.5em;
-`;
-
-const InlineFieldset = styled.fieldset`
-  display: inline-block;
-`;
+import { Help } from "../index";
+import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 
 type BaseProps = {
   label?: string;
@@ -47,7 +38,12 @@ type BaseProps = {
   readOnly?: boolean;
 };
 
-const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name, defaultChecked, readOnly, ...props }) => {
+const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
+  name,
+  defaultChecked,
+  readOnly,
+  ...props
+}) => {
   const renderHelp = () => {
     const helpText = props.helpText;
     if (helpText) {
@@ -76,13 +72,13 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
   };
 
   return (
-    <InlineFieldset disabled={readOnly}>
+    <fieldset className="is-inline-block" disabled={readOnly}>
       {/*
         we have to ignore the next line,
         because jsx label does not the custom disabled attribute
         but bulma does.
         // @ts-ignore */}
-      <StyledRadio className={classNames("radio", props.className)} disabled={props.disabled}>
+      <label className={classNames("radio", "mr-2", props.className)} disabled={props.disabled}>
         <input
           type="radio"
           name={name}
@@ -96,8 +92,8 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({ name
         />{" "}
         {props.label}
         {renderHelp()}
-      </StyledRadio>
-    </InlineFieldset>
+      </label>
+    </fieldset>
   );
 };