Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Oct 30, 2025
Merged

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

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f251a7c
LF-5028 Adjust Optional text -- remove parentheses and capitalize
kathyavini Oct 28, 2025
081ee1a
LF-5028 Adjust InputBaseLabel style logic and Optional positioning
kathyavini Oct 28, 2025
3f62670
LF-5028 Refactor Input to use InputBaseLabel
kathyavini Oct 28, 2025
a824c48
LF-5028 Wrap all items rendered within input in .inputWrapper and adj…
kathyavini Oct 28, 2025
74b72b0
LF-5028 Add the PrivateBadge
kathyavini Oct 28, 2025
0059ef8
LF-5028 Update <Input /> storybook
kathyavini Oct 28, 2025
760d49d
LF-5028 Add Optional label marker to <TextArea />
kathyavini Oct 28, 2025
ec3384f
LF-5028 Update optional placement on InputAutoSize
kathyavini Oct 28, 2025
e539ba7
LF-5028 Adjust Rating optional label and create story
kathyavini Oct 28, 2025
a0cc6d0
LF-5028 Refactor Unit to use InputBaseLabel
kathyavini Oct 28, 2025
5b26615
LF-5028 Fix the focus border colour of TextArea
kathyavini Oct 28, 2025
382b628
LF-5028 Cleanup stray prop
kathyavini Oct 28, 2025
2d24ceb
LF-5028 Update and harmonize the labels in Location details components
kathyavini Oct 28, 2025
ee73a0d
LF-5028 Revert decreasing font-size and margin of radio labels in det…
kathyavini Oct 28, 2025
dbc1f65
LF-5028 Harmonize the logic of margins across InputBaseLabel, TextAre…
kathyavini Oct 28, 2025
9f300e5
LF-5028 Remove accidentally added optional flag in GREENHOUSE_TYPE
kathyavini Oct 28, 2025
41bc217
LF-5028 Add option for left-justified and use it in Location Detail r…
kathyavini Oct 28, 2025
6623730
LF-5028 Move PRIVATE string outside of MARKET_DIRECTORY.INFO_FORM
kathyavini Oct 29, 2025
d4b703f
LF-5028 Copy (and slightly reorder) .radioLabel styles into Rating
kathyavini Oct 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/webapp/public/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
"NOT_SURE": "Not sure",
"NOTES": "Notes",
"OK": "OK",
"OPTIONAL": "(optional)",
"OPTIONAL": "Optional",
"OR": "or",
"ORGANIC": "Organic",
"OTHER": "Other",
Expand Down
74 changes: 32 additions & 42 deletions packages/webapp/src/components/Form/Input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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}
/>
Copy link
Collaborator Author

@kathyavini kathyavini Oct 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As usual, changing the wrapping divs has made a messy diff! The changes are these two commits:

)}
<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
Expand Down Expand Up @@ -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}>
Expand Down
73 changes: 23 additions & 50 deletions packages/webapp/src/components/Form/Input/input.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
@import '@assets/mixin.scss';

.container {
Copy link
Collaborator Author

@kathyavini kathyavini Oct 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change to the .container class; just put at the top of the file for easier reading. .inputWrapper was also re-positioned at the top of the file and gained these two properties:

display: flex;
align-items: center

Label styles + now unnecessary vertical positioning styles were removed.

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);
Expand Down Expand Up @@ -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);
}
Expand All @@ -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 {
Expand All @@ -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
}

Expand All @@ -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;
Expand Down Expand Up @@ -199,7 +173,6 @@ input:focus::placeholder {
.clearIcon {
position: absolute;
right: 17px;
top: -5px;
cursor: pointer;
z-index: 1;

Expand Down
13 changes: 4 additions & 9 deletions packages/webapp/src/components/Form/InputAutoSize/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
13 changes: 10 additions & 3 deletions packages/webapp/src/components/Form/InputAutoSize/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -40,4 +48,3 @@
color: var(--grey600);
border-color: var(--inputDefault);
}

18 changes: 7 additions & 11 deletions packages/webapp/src/components/Form/InputBase/InputBaseLabel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,15 @@ export default function InputBaseLabel(props: InputBaseLabelProps) {
<div className={styles.labelContainer}>
<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>
);
}
30 changes: 15 additions & 15 deletions packages/webapp/src/components/Form/InputBase/InputBaseLabel/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,32 @@
.labelContainer {
display: flex;
justify-content: space-between;
min-height: 20px;
position: relative;
}
align-items: baseline;
margin-bottom: 4px;
Copy link
Collaborator Author

@kathyavini kathyavini Oct 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My preference is to never set a margin on a component (and let the parent / layout component control spacing), but <InputBaseLabel /> has been used so many times in app relying on the 4px margin that the interior <Label /> elements provide that refactor would be a beast; so I kept it.

Here I am setting the margin on the entire label section and over-writing the margin of the two interior <Label /> components, though -- this is to make sure the other label elements like the <PrivateBadge /> get the correct margin from the <input> element as well, and that the main label and optional text don't get more. It's a finicky part of the styling, because of the margins that got set on the primitive components. Not sure it's 100% ideal.


.sm {
margin-left: 8px;
h5,
span {
margin-bottom: 0;
}
}

.leaf {
transform: translate(4px, 3px);
margin-left: 4px;
}

.tooltipIconContainer {
width: 100%;
.rightContent {
display: flex;
justify-content: flex-end;
gap: 4px;
align-items: center;
cursor: default;

.tooltipIcon {
transform: translateY(3px);
cursor: pointer;
}
}

.icon {
position: absolute;
right: 0;
top: -8px;
color: var(--iconDefault);
}

.icon > * {
cursor: pointer;
}
Loading