Rename classname attribute and add attributes for input component

src/components/Dropdown/Dropdown.tsx

@@ -143,7 +143,7 @@ export function Dropdown({
 
         <Input
           ref={inputRef}
-          className="dropdown-input"
+          inputClassName="dropdown-input"
           onChange={onChange}
           onFocus={onInternalFocus}
           onBlur={onInternalBlur}

src/components/Input/Input.tsx

@@ -68,7 +68,10 @@ type Props = {
    */
   Icon?: ComponentType;
 
-  className?: string;
+  /**
+   * Apply a class to the input element
+   */
+  inputClassName?: string;
 
   /**
    * Default is text
@@ -78,6 +81,10 @@ type Props = {
   step?: string;
 
   name?: string;
+
+  min?: number;
+
+  max?: number;
 };
 
 export const Input = forwardRef<HTMLInputElement, Props>(
@@ -96,12 +103,14 @@ export const Input = forwardRef<HTMLInputElement, Props>(
       onMouseLeave,
       onClick,
       onKeyUp,
-      className,
       style,
       Icon,
       step,
       name,
+      inputClassName,
       type = "text",
+      min,
+      max,
     },
     ref
   ) => {
@@ -129,7 +138,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
             className={classnames(
               ["input"],
               ["input-icon-input", !!Icon],
-              [className || ""]
+              [inputClassName || ""]
             )}
             style={style}
             {...attributes({
@@ -144,6 +153,8 @@ export const Input = forwardRef<HTMLInputElement, Props>(
             onKeyUp={onKeyUp}
             type={type}
             step={step}
+            min={min}
+            max={max}
           />
         </div>
 

src/components/InputGroup/InputGroup.tsx

@@ -11,6 +11,14 @@ export interface CustomStyleCSS extends CSSProperties {
 type Props = {
   label: string;
 
+  /**
+   * Apply a class to the input element
+   */
+  inputClassName?: string;
+
+  /**
+   * Apply a class to the parent element
+   */
   className?: string;
 
   /**
@@ -61,14 +69,28 @@ type Props = {
    * --codex-border-color
    */
   style?: CustomStyleCSS;
+
+  name?: string;
+
+  /**
+   * Helper text to add indication about your input.
+   */
+  helper?: string;
+
+  min?: number;
+
+  max?: number;
 };
 
 export function InputGroup({
   label,
+  name,
+  helper,
   type = "text",
   style,
   group,
   className,
+  inputClassName = "",
   onChange,
   onGroupChange,
   onMouseEnter,
@@ -79,6 +101,8 @@ export function InputGroup({
   step,
   value = undefined,
   groupValue = "",
+  min,
+  max,
 }: Props) {
   return (
     <div className={`inputGroup ${className}`} style={style}>
@@ -86,13 +110,17 @@ export function InputGroup({
         <div className="inputGroup-element">
           <div className="inputGroup-inputContainer">
             <Input
-              label={label}
-              onChange={onChange}
-              className="inputGroup-input"
               id={id}
+              name={name}
+              label={label}
+              helper={helper}
+              onChange={onChange}
+              inputClassName={"inputGroup-input " + inputClassName}
               type={type}
               value={value}
               step={step}
+              min={min}
+              max={max}
               onMouseEnter={onMouseEnter}
               onMouseLeave={onMouseLeave}
               onFocus={onFocus}
@@ -107,12 +135,13 @@ export function InputGroup({
                 id=""
                 onChange={onGroupChange}
                 className="inputGroup-select"
-                defaultValue={groupValue}
+                value={groupValue}
                 options={group}
               />
             ) : (
               <div className="inputGroup-unit">{group}</div>
             )}
+            {helper && <div className="inputGroup-helper"></div>}
           </div>
         </div>
       </div>

src/components/InputGroup/inputGroup.css

@@ -7,6 +7,11 @@
   flex-grow: 1;
 }
 
+.inputGroup-helper {
+  height: 15px;
+  display: inline-block;
+}
+
 input.inputGroup-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;