@onewelcome/react-lib-components 0.1.2-alpha → 0.1.3-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.2-alpha",
+  "version": "0.1.3-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Form/FormGroup/FormGroup.tsx

@@ -54,7 +54,7 @@ export const FormGroup = React.forwardRef<HTMLDivElement, Props>(
           >
             {helperText && !error && (
               <FormHelperText {...helperProps} className={''} id={helperId}>
-                {helperText}
+                {(helperProps && helperProps.children) || helperText}
               </FormHelperText>
             )}
             {error && errorMessage && (

package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx

@@ -45,18 +45,19 @@ export const FormSelectorWrapper = React.forwardRef<HTMLDivElement, Props>(
         }`}
       >
         <div {...containerProps}>{children}</div>
-        {helperText && (!error || parentErrorId || !errorMessage) && (
-          <FormHelperText
-            {...helperProps}
-            ref={helperRef}
-            id={`${identifier}`}
-            className={`${classes['helper-text']} ${helperProps?.className ?? ''} ${
-              error ? classes['error'] : ''
-            }`}
-          >
-            {helperText}
-          </FormHelperText>
-        )}
+        {(helperText || (helperProps && helperProps.children)) &&
+          (!error || parentErrorId || !errorMessage) && (
+            <FormHelperText
+              {...helperProps}
+              ref={helperRef}
+              id={`${identifier}`}
+              className={`${classes['helper-text']} ${helperProps?.className ?? ''} ${
+                error ? classes['error'] : ''
+              }`}
+            >
+              {(helperProps && helperProps.children) || helperText}
+            </FormHelperText>
+          )}
         {errorMessage && !parentErrorId && error && (
           <span className={classes['error-message']}>
             <Icon className={classes['error-icon']} icon={Icons.Error} />

package/src/Form/Input/Input.module.scss

@@ -38,6 +38,7 @@
   font-family: var(--font-family);
   width: 100%;
   box-sizing: border-box;
+  padding: 0;
 
   &:focus:not(:disabled) {
     outline: none;

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -19,10 +19,15 @@ input {
 }
 
 .input-wrapper [data-icon]:before {
-  transform: translateY(5px);
+  transition: 0.2s ease-in-out;
+  transform: translateY(0px);
   font-size: 1.125rem;
 }
 
+.input-wrapper .floating-label-active [data-icon]:before {
+  transform: translateY(5px);
+}
+
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
   transform: translateY(-0.125rem);

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -54,6 +54,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
       helperText,
       helperProps,
       value,
+      className,
       error,
       onChange,
       onBlur,
@@ -90,7 +91,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
         {...rest}
         ref={ref || wrapper}
         name={name}
-        className={classes['input-wrapper']}
+        className={`${classes['input-wrapper']} ${className ?? ''}`}
         labelProps={{
           id: labelId,
           className: labelClasses.join(' '),
@@ -111,7 +112,11 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
           {...inputProps}
           prefix={hasValueOrActiveFloatingLabel ? prefix : ''}
           suffix={hasValueOrActiveFloatingLabel ? suffix : ''}
-          wrapperProps={{ className: floatingLabelActive ? classes['floating-label-active'] : '' }}
+          wrapperProps={{
+            className: `${floatingLabelActive ? classes['floating-label-active'] : ''} ${
+              inputProps?.wrapperProps?.className ?? ''
+            }`,
+          }}
           ref={(inputProps && inputProps.ref) || input}
           aria-labelledby={labelId}
           aria-describedby={error ? errorId : helperId}
@@ -132,7 +137,9 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
               ? setFloatingLabelActive(true)
               : setFloatingLabelActive(false);
           }}
-          className={floatingLabelActive ? classes['floating-label'] : ''}
+          className={`${floatingLabelActive ? classes['floating-label'] : ''} ${
+            inputProps?.className ?? ''
+          }`}
           name={name}
           error={error}
           id={name}

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -1,7 +1,7 @@
 .textarea-label {
   left: calc(
-    1.25rem + 2px
-  ); // 2px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
+    1.25rem + 1px
+  ); // 1px is for offset of the textarea border. It's relative to the parent div which doesn't have a border.
 
   &.focus {
     color: var(--color-primary);

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -7,7 +7,7 @@
   position: absolute;
   z-index: 1;
   top: 1.3125rem;
-  left: 1.25rem;
+  left: 1.35rem;
   transform-origin: left top;
   transition: all 0.2s ease-in-out;
   pointer-events: none;