Merge pull request #3913 from LiteFarmOrg/LF-5028-refactor-input-to-use-input-base-label-and-adjust-label-styles-2

LF-5028 Refactor <Input /> to use <InputBaseLabel /> and adjust Optional styles

Author: Duncan-Brain

packages/webapp/public/locales/en/common.json

@@ -66,7 +66,7 @@
   "NOT_SURE": "Not sure",
   "NOTES": "Notes",
   "OK": "OK",
-  "OPTIONAL": "(optional)",
+  "OPTIONAL": "Optional",
   "OR": "or",
   "ORGANIC": "Organic",
   "OTHER": "Other",

packages/webapp/public/locales/en/translation.json

@@ -1917,6 +1917,9 @@
     "WRONG_BROWSER": "LiteFarm is not optimized for this browser.",
     "WRONG_BROWSER_BOTTOM": "Please login using Chrome."
   },
+  "SIMPLE_BADGE": {
+    "PRIVATE": "Private"
+  },
   "SLIDE_MENU": {
     "CROPS": "Crops",
     "DOCUMENTS": "Documents",

packages/webapp/src/components/Form/Input/index.tsx

@@ -26,7 +26,8 @@ import clsx from 'clsx';
 import i18n from '../../../locales/i18n';
 import styles from './input.module.scss';
 import { mergeRefs } from '../utils';
-import { Error, Info, Label, TextWithExternalLink } from '../../Typography';
+import { Error, Info, TextWithExternalLink } from '../../Typography';
+import InputBaseLabel from '../InputBase/InputBaseLabel';
 import { Cross } from '../../Icons';
 import {
   MdVisibility,
@@ -37,8 +38,6 @@ import {
 import { ReactComponent as SearchIcon } from '../../../assets/images/search.svg';
 import { ReactComponent as SearchClearIcon } from '../../../assets/images/search-close.svg';
 import TextButton from '../Button/TextButton';
-import { ReactComponent as Leaf } from '../../../assets/images/signUp/leaf.svg';
-import Infoi from '../../Tooltip/Infoi';
 import useElementWidth from '../../hooks/useElementWidth';
 
 interface InputClasses {
@@ -195,45 +194,35 @@ const Input = ({
       style={(style || classes.container) && { ...style, ...classes.container }}
     >
       {(label || toolTipContent || icon) && (
-        <div className={styles.labelContainer}>
-          <Label style={{ position: 'absolute', bottom: 0 }}>
-            {label}
-            {optional && (
-              <Label sm className={styles.sm} style={{ marginLeft: '4px' }}>
-                {t('common:OPTIONAL')}
-              </Label>
-            )}
-            {hasLeaf && <Leaf className={styles.leaf} />}
-          </Label>
-          {toolTipContent && (
-            <div className={styles.tooltipIconContainer}>
-              <Infoi content={toolTipContent} />
-            </div>
-          )}
-          {icon && <span className={styles.icon}>{icon}</span>}
-        </div>
-      )}
-      {isPassword &&
-        !showError &&
-        (showPassword ? (
-          <MdVisibility
-            aria-label="hide-password"
-            className={styles.visibilityIcon}
-            onClick={setVisibility}
-          />
-        ) : (
-          <MdVisibilityOff
-            aria-label="show-password"
-            className={styles.visibilityIcon}
-            onClick={setVisibility}
-          />
-        ))}
-      {currency && (
-        <div ref={currencyRef} className={styles.currency}>
-          {currency}
-        </div>
+        <InputBaseLabel
+          label={label}
+          optional={optional}
+          hasLeaf={hasLeaf}
+          toolTipContent={toolTipContent}
+          icon={icon}
+        />
       )}
       <div className={styles.inputWrapper}>
+        {isPassword &&
+          !showError &&
+          (showPassword ? (
+            <MdVisibility
+              aria-label="hide-password"
+              className={styles.visibilityIcon}
+              onClick={setVisibility}
+            />
+          ) : (
+            <MdVisibilityOff
+              aria-label="show-password"
+              className={styles.visibilityIcon}
+              onClick={setVisibility}
+            />
+          ))}
+        {currency && (
+          <div ref={currencyRef} className={styles.currency}>
+            {currency}
+          </div>
+        )}
         {unit && <div className={styles.unit}>{unit}</div>}
         {showError && !unit && showCross && (
           <Cross
@@ -310,12 +299,13 @@ const Input = ({
           </div>
         )}
         {isSearchBar && input?.current?.value && (
-          <TextButton onClick={onClear}>
+          <TextButton onClick={onClear} className={styles.searchClearButton}>
             <SearchClearIcon className={styles.searchClearIcon} />
           </TextButton>
         )}
+        {isSearchBar && <SearchIcon className={styles.searchIcon} />}
       </div>
-      {isSearchBar && <SearchIcon className={styles.searchIcon} />}
+
       {info && !showError && <Info style={classes.info}>{info}</Info>}
       {showError ? (
         <Error data-cy="error" style={classes.errors}>

packages/webapp/src/components/Form/Input/input.module.scss

@@ -1,5 +1,20 @@
 @import '@assets/mixin.scss';
 
+.container {
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  position: relative;
+  min-width: 0;
+}
+
+.inputWrapper {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .input {
   width: 100%;
   border: 1px solid var(--grey400);
@@ -52,14 +67,6 @@ input:focus::placeholder {
   flex-grow: 1;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-  position: relative;
-  min-width: 0;
-}
-
 .inputError {
   border-color: var(--error);
 }
@@ -69,34 +76,23 @@ input:focus::placeholder {
   border-color: var(--inputActive);
 }
 
-.icon {
-  position: absolute;
-  right: 0;
-  top: -8px;
-  color: var(--iconDefault);
-}
-
-.icon > * {
-  cursor: pointer;
-}
-.sm {
-  margin-left: 8px;
-}
-
 .searchIcon {
   width: 22px;
   height: 22px;
   position: absolute;
   left: 11px;
-  top: 13px;
+}
+
+.searchClearButton {
+  display: inline-flex;
+  align-items: center;
 }
 
 .searchClearIcon {
   width: 17px;
   height: 17px;
   position: absolute;
   right: 12px;
-  top: 15px;
 }
 
 .searchBar {
@@ -105,43 +101,27 @@ input:focus::placeholder {
 
 .visibilityIcon {
   position: absolute;
-  right: 0;
-  transform: translate(-8px, 32px);
+  right: 8px;
   font-size: 22px;
   color: var(--iconDefault);
   cursor: pointer;
   z-index: 1;
 }
 
-.labelContainer {
-  display: flex;
-  justify-content: space-between;
-  min-height: 20px;
-  position: relative;
-}
-
 .unit {
   font-size: 16px;
-  line-height: 20px;
   color: var(--labels);
-  font-style: normal;
-  font-weight: normal;
   @include fontFamily();
   position: absolute;
-  right: 0;
-  transform: translate(-8px, 14px);
+  right: 8px;
 }
 
 .currency {
   font-size: 16px;
-  line-height: 20px;
   color: var(--labels);
-  font-style: normal;
-  font-weight: normal;
   @include fontFamily();
   position: absolute;
-  left: 0;
-  transform: translate(8px, 34px);
+  left: 8px;
   z-index: 1; // otherwise hidden behind the disabled background color
 }
 
@@ -156,12 +136,6 @@ input:focus::placeholder {
   justify-content: flex-end;
 }
 
-/* Wrapper for Input + stepper buttons */
-.inputWrapper {
-  position: relative;
-  width: 100%;
-}
-
 .stepper {
   display: flex;
   flex-flow: column nowrap;
@@ -199,7 +173,6 @@ input:focus::placeholder {
 .clearIcon {
   position: absolute;
   right: 17px;
-  top: -5px;
   cursor: pointer;
   z-index: 1;
 

packages/webapp/src/components/Form/InputAutoSize/index.jsx

@@ -32,16 +32,11 @@ export default function InputAutoSize({
       style={(style || classes.container) && { ...style, ...classes.container }}
     >
       {label && (
-        <Label>
-          {label}
-          {optional && (
-            <Label sm className={styles.sm} style={{ marginLeft: '4px' }}>
-              {t('common:OPTIONAL')}
-            </Label>
-          )}
-        </Label>
+        <div className={styles.labelContainer}>
+          <Label>{label}</Label>
+          {optional && <Label sm>{t('common:OPTIONAL')}</Label>}
+        </div>
       )}
-
       <TextareaAutosize
         maxRows={maxRows}
         minRows={minRows}

packages/webapp/src/components/Form/InputAutoSize/styles.module.scss

@@ -22,8 +22,16 @@
   position: relative;
 }
 
-.sm {
-  margin-left: 8px;
+.labelContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 4px;
+
+  h5,
+  span {
+    margin-bottom: 0;
+  }
 }
 
 .inputError {
@@ -40,4 +48,3 @@
   color: var(--grey600);
   border-color: var(--inputDefault);
 }
-

packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx

@@ -13,12 +13,13 @@
  *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
  */
 
+import { useTranslation } from 'react-i18next';
+import { ReactNode } from 'react';
+import clsx from 'clsx';
 import Infoi from '../../../Tooltip/Infoi';
 import { ReactComponent as Leaf } from '../../../../assets/images/signUp/leaf.svg';
 import { Label } from '../../../Typography';
 import styles from './styles.module.scss';
-import { useTranslation } from 'react-i18next';
-import { ReactNode } from 'react';
 
 export type InputBaseLabelProps = {
   label?: string;
@@ -27,28 +28,25 @@ export type InputBaseLabelProps = {
   toolTipContent?: string;
   icon?: ReactNode;
   labelStyles?: React.CSSProperties;
+  leftJustified?: boolean;
 };
 
 export default function InputBaseLabel(props: InputBaseLabelProps) {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.labelContainer}>
+    <div className={clsx(styles.labelContainer, props.leftJustified && styles.leftJustified)}>
       <Label style={props.labelStyles}>
         {props.label}
-        {props.optional && (
-          <Label sm className={styles.sm}>
-            {t('common:OPTIONAL')}
-          </Label>
-        )}
         {props.hasLeaf && <Leaf className={styles.leaf} />}
       </Label>
-      {props.toolTipContent && (
-        <div className={styles.tooltipIconContainer}>
-          <Infoi content={props.toolTipContent} />
-        </div>
-      )}
-      {props.icon && <span className={styles.icon}>{props.icon}</span>}
+      <div className={styles.rightContent}>
+        {props.toolTipContent && (
+          <Infoi content={props.toolTipContent} className={styles.tooltipIcon} />
+        )}
+        {props.icon && <span className={styles.icon}>{props.icon}</span>}
+        {props.optional && <Label sm>{t('common:OPTIONAL')}</Label>}
+      </div>
     </div>
   );
 }