forms are fun

src/components/atoms/Button.module.css

@@ -46,7 +46,7 @@
 .button:disabled {
   cursor: not-allowed;
   pointer-events: none;
-  opacity: 0.5;
+  background: var(--brand-grey-lighter);
 }
 
 .primary,

src/components/atoms/Input/InputGroup.module.css

@@ -1,31 +1,43 @@
-.inputGroup {
+.inputGroup input {
-  width: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
-  @media screen and (min-width: $break-point--small) {
+.inputGroup button {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-top: -1px;
+  width: 100%;
+}
+
+.inputGroup button:hover,
+.inputGroup button:focus,
+.inputGroup input:focus + button:hover,
+.inputGroup input:focus + button:focus {
+  background: var(--brand-gradient);
+  transform: none;
+  box-shadow: none;
+}
+
+@media screen and (min-width: 30rem) {
+  .inputGroup {
     display: flex;
   }
-}
+
-.inputGroup > input {
+  .inputGroup input {
-  @media screen and (min-width: $break-point--small) {
+    border-bottom-left-radius: var(--border-radius);
-    width: 75%;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
-.inputGroup > button {
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: -120%;
 
-  @media screen and (min-width: $break-point--small) {
+  .inputGroup button {
-    position: relative;
+    border-top-right-radius: var(--border-radius);
-    bottom: auto;
-    width: 25%;
-    height: 100%;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    box-shadow: none;
+    margin-top: 0;
+    margin-left: -1px;
+    width: fit-content;
+    min-width: 20%;
   }
 }
 

src/components/atoms/Input/InputGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import styles from './InputGroup.module.css'
 
-const InputGroup = ({ children }: { children: any }) => (
+const InputGroup = ({ children }: { children: ReactNode }): ReactElement => (
   <div className={styles.inputGroup}>{children}</div>
 )
 

src/components/molecules/FilesInput/Input.module.css

@@ -0,0 +1,3 @@
+.input {
+  composes: input from '../../atoms/Input/InputElement.module.css';
+}

src/components/molecules/FilesInput/Input.tsx

@@ -5,22 +5,22 @@ import { useField } from 'formik'
 import Loader from '../../atoms/Loader'
 import InputElement from '../../atoms/Input/InputElement'
 import { InputProps } from '../../atoms/Input'
+import styles from './Input.module.css'
+import InputGroup from '../../atoms/Input/InputGroup'
 
-export default function FileInput(
+export default function FileInput({
-  {
   handleButtonClick,
-    isLoading
+  isLoading,
+  ...props
 }: {
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
-  },
+}): ReactElement {
-  props: InputProps
+  const [field, meta] = useField(props as InputProps)
-): ReactElement {
-  const [field, meta] = useField(props)
 
   return (
-    <>
+    <InputGroup>
-      <InputElement {...field} {...props} type="url" />
+      <input className={styles.input} {...props} type="url" />
 
       <Button
         size="small"
@@ -28,11 +28,11 @@ export default function FileInput(
         disabled={
           !field.value ||
           // weird static page build fix so is-url-superb won't error
-          isUrl(typeof field.value === 'string' ? field.value : '')
+          !isUrl(typeof field.value === 'string' ? field.value : '')
         }
       >
         {isLoading ? <Loader /> : 'Add File'}
       </Button>
-    </>
+    </InputGroup>
   )
 }

src/components/molecules/SearchBar.module.css

@@ -2,52 +2,10 @@
   margin-bottom: var(--spacer);
 }
 
-.inputGroup > div {
+.form > div > div {
   margin: 0;
 }
 
-.inputGroup label {
+.form label {
   display: none;
 }
-
-.inputGroup input {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.inputGroup button {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  margin-top: -1px;
-  width: 100%;
-}
-
-.inputGroup button:hover,
-.inputGroup button:focus,
-.inputGroup input:focus + button:hover,
-.inputGroup input:focus + button:focus {
-  background: var(--brand-gradient);
-  transform: none;
-  box-shadow: none;
-}
-
-@media screen and (min-width: 30rem) {
-  .inputGroup {
-    display: flex;
-  }
-
-  .inputGroup input {
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .inputGroup button {
-    border-top-right-radius: var(--border-radius);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-top: 0;
-    margin-left: -1px;
-    width: auto;
-  }
-}

src/components/molecules/SearchBar.tsx

@@ -4,6 +4,7 @@ import styles from './SearchBar.module.css'
 import Loader from '../atoms/Loader'
 import Button from '../atoms/Button'
 import Input from '../atoms/Input'
+import InputGroup from '../atoms/Input/InputGroup'
 
 export default function SearchBar({
   placeholder,
@@ -35,7 +36,7 @@ export default function SearchBar({
 
   return (
     <form className={styles.form}>
-      <div className={styles.inputGroup}>
+      <InputGroup>
         <Input
           type="search"
           name="search"
@@ -47,7 +48,7 @@ export default function SearchBar({
         <Button onClick={(e: FormEvent<HTMLButtonElement>) => startSearch(e)}>
           {searchStarted ? <Loader /> : 'Search'}
         </Button>
-      </div>
+      </InputGroup>
 
       {filters && <fieldset className={styles.filters}>Type, Price</fieldset>}
     </form>