input size modifiers, add large

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

@@ -240,7 +240,8 @@ input[type='range']::-moz-range-track {
 
 /* Size modifiers */
 
-.small {
+.small,
+.select.small {
   font-size: var(--font-size-small);
   height: 34px;
   padding: calc(var(--spacer) / 4);
@@ -256,9 +257,32 @@ input[type='range']::-moz-range-track {
   font-size: var(--font-size-mini);
 }
 
-.selectSmall {
+.select.small {
-  composes: small;
+  padding-right: 2rem;
-  height: 34px;
+
+  /* custom arrow */
+  background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
+  background-size: 5px 5px, 5px 5px, 2rem 3rem;
+}
+
+.large,
+.select.large {
+  font-size: var(--font-size-large);
+  height: 62px;
+  padding: calc(var(--spacer) / 1.5);
+}
+
+.large::placeholder {
+  font-size: var(--font-size-large);
+}
+
+.prefix.large,
+.postfix.large {
+  height: 62px;
+  font-size: var(--font-size-base);
+}
+
+.select.large {
   padding-right: 2rem;
 
   /* custom arrow */

src/components/atoms/Input/InputElement.tsx

@@ -5,16 +5,19 @@ import { InputProps } from '.'
 import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Datatoken from '../../molecules/FormFields/Datatoken'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 const DefaultInput = ({
-  small,
+  size,
   prefix,
   postfix,
   additionalComponent,
   ...props
 }: InputProps) => (
   <input
-    className={`${styles.input} ${small ? styles.small : null}`}
+    className={cx({ input: true, [size]: size })}
     id={props.name}
     {...props}
   />
@@ -26,7 +29,7 @@ export default function InputElement({
   name,
   prefix,
   postfix,
-  small,
+  size,
   field,
   label,
   help,
@@ -34,14 +37,12 @@ export default function InputElement({
   additionalComponent,
   ...props
 }: InputProps): ReactElement {
+  const styleClasses = cx({ select: true, [size]: size })
+
   switch (type) {
     case 'select':
       return (
-        <select
+        <select id={name} className={styleClasses} {...props}>
-          id={name}
-          className={`${styles.select} ${small && styles.selectSmall}`}
-          {...props}
-        >
           {field !== undefined && field.value === '' && (
             <option value="">---</option>
           )}
@@ -95,27 +96,23 @@ export default function InputElement({
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
           {prefix && (
-            <div className={`${styles.prefix} ${small ? styles.small : ''}`}>
+            <div className={cx({ prefix: true, [size]: size })}>{prefix}</div>
-              {prefix}
-            </div>
           )}
           <DefaultInput
             name={name}
             type={type || 'text'}
-            small={small}
+            size={size}
             {...props}
           />
           {postfix && (
-            <div className={`${styles.postfix} ${small ? styles.small : ''}`}>
+            <div className={cx({ postfix: true, [size]: size })}>{postfix}</div>
-              {postfix}
-            </div>
           )}
         </div>
       ) : (
         <DefaultInput
           name={name}
           type={type || 'text'}
-          small={small}
+          size={size}
           {...props}
         />
       )

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

@@ -24,6 +24,10 @@
     display: flex;
   }
 
+  .inputGroup > div {
+    flex: 1;
+  }
+
   .inputGroup input {
     border-bottom-left-radius: var(--border-radius);
     border-top-right-radius: 0;
@@ -37,7 +41,7 @@
     margin-top: 0;
     margin-left: -1px;
     width: fit-content;
-    min-width: 20%;
+    white-space: nowrap;
   }
 }
 

src/components/atoms/Input/index.tsx

@@ -39,7 +39,7 @@ export interface InputProps {
   postfix?: string | ReactElement
   step?: string
   defaultChecked?: boolean
-  small?: boolean
+  size?: 'small' | 'large' | 'default'
 }
 
 export default function Input(props: Partial<InputProps>): ReactElement {
@@ -49,7 +49,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
     label,
     help,
     additionalComponent,
-    small,
+    size,
     field
   } = props
 
@@ -69,7 +69,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       <Label htmlFor={name} required={required}>
         {label}
       </Label>
-      <InputElement small={small} {...field} {...props} />
+      <InputElement size={size} {...field} {...props} />
 
       {field && field.name !== 'price' && hasError && (
         <div className={styles.error}>