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

kathyavini · 2025-10-28T20:54:38Z

Description

A much more sizeable refactor than I had hoped! Since so many files were touched (although each diff should be pretty easy to understand), I'll do a more complete summary/review guide below.

Summary of changes:

Updated the <InputBaseLabel /> component to display its right-hand objects (Optional, tooltip, icon) in a flex container
- See this Storybook story for reference of all the right-hand elements side by side
Updated <Input /> to use <InputBaseLabel /> instead of duplicating styles
- Required updating the extremely brittle layout of <Input /> to follow something a lot more like <InputBase />, where all the input interior components (search icon, visibility icon, currency, etc) are flex items within the flex wrapper.
<TextArea /> didn't have the optional prop; added. Also fixed the focus style while I was in the file
Updated other uses of the optional label throughout app --> unfortunately there were a LOT of them...! 😓

To update through the application, I separated the use of Label into two categories:

Category A: Optional + other Label modifiers

Re-useable components OR individual form elements (Location Details forms) with at least one other modifier (leaf/tooltip) alongside optional

For all of these components (Unit) and forms (Greenhouse, Fence), I imported and used <ImportBaseLabel />.

Category B: Only optional modifier

Re-useable components OR individual form elements (Location Details forms) where the only label modifier was "optional".

Here the larger <InputLabelBase /> component is not necessary. Where possible I tried to harmonize the pattern with a shared stylesheet, but the core was just a very small bit of JSX + CSS

// reusable components (TextArea, Rating, InputAutoSize)
<div className={styles.labelContainer}>
  <Label>{label}</Label>
  {optional && <Label sm>{t('common:OPTIONAL')}</Label>}
</div>

// direct form elements (Location Details)
<div className={locationDetailStyles.radioLabel}> // <-- new shared stylesheet for all location details
  <Label>{t('FARM_MAP.BARN.WASH_PACK')}</Label>
  <Label sm>{t('common:OPTIONAL')}</Label>
</div>

There was exactly ONE "optional" in app I didn't touch, and that is in this view:

This one just doesn't look like a form (one radio group's label is the page title?!), and I thought the optional would look quite weird floating alone on the right side of the page.

Note: I will probably double-check with Loïc tomorrow about Radio Group label optionals in general though, and make sure they were meant to be moved 🙂

UPDATE: Loïc said all elements that don't extend across the view should have optional cuddled to the label, so I have moved it back for the radio button labels and <Rating /> (did not revert the actual changes though as the unified styles for Radio labels are an improvement, and should make it easier to refactor in the future).

Jira link: https://lite-farm.atlassian.net/browse/LF-5028

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
I have added the GNU General Public License to all new files

…ust CSS

…ails views Inconsistency with other radios through app was more annoying than inconsistency with other inputs in the same form. I did remove 4px of margin as it was just too much. However, note that other radios in app still have that massive margin from their own labels -- this I did not correct

kathyavini · 2025-10-28T21:06:21Z

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

+          hasLeaf={hasLeaf}
+          toolTipContent={toolTipContent}
+          icon={icon}
+        />


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

refactor Input to use InputBaseLabel, and

wrap all items rendered within input in .inputWrapper. This moves the password icon, currency symbol, and search icon into the .inputWrapper div for positioning

kathyavini · 2025-10-28T21:08:18Z

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

@@ -1,5 +1,20 @@
 @import '@assets/mixin.scss';

+.container {


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.

kathyavini · 2025-10-28T21:13:07Z

packages/webapp/src/components/LocationDetailLayout/AreaDetails/Greenhouse/index.jsx

+        optional={true}
+        labelStyles={{
+          marginBottom: '12px',
+          fontSize: '16px',


I'm rather bothered that the radio group labels are larger with greater margin than the other form labels in app, but there are many, many more such labels (without optional property) not touched in this PR, so I went with consistency with the other radio groups here, rather than with the other form elements. Personally I think there is room to refactor all of these, but likely not a priority.

…a, and InputAutoSize

kathyavini · 2025-10-28T22:22:33Z

packages/webapp/src/components/Form/InputBase/InputBaseLabel/styles.module.scss

-  position: relative;
-}
+  align-items: baseline;
+  margin-bottom: 4px;


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.

…adios

Duncan-Brain

Looking great! Love to see that reusability! Only really blocking on the missing translation string.

Condensed forms it does look better. But I did personally kind of like optional where it was before, on desktop it is now harder to tell what the optional applies too -- you have to follow the input across the screen haha.

Other:

Those existing location details files always make me sad to see all the duplication haha
While we are have a Litefarm label expert does it make sense to you to fix our accessibility? Specifically the clicking on the label behaviour. It works on mobile that when you click it -- it focuses the input. But not desktop.
- onLabelClick => focus input -- especially useful for desktop
- Special case Checkbox (see Add animals) => label currently toggles instead of focuses (info box is part of label and also toggles on click)
- Open question does leaf and info part of label == focus /select?

Duncan-Brain · 2025-10-29T13:34:39Z

packages/webapp/src/components/SimpleBadges/PrivateBadge/index.tsx

+  const { t } = useTranslation();
+  return (
+    <div className={styles.private}>
+      <span>{t('MARKET_DIRECTORY.INFO_FORM.PRIVATE')}</span>


I don't think this string exists yet!

HA! It was capitalized in the UI and the same string so I didn't notice 😂 Thank you!!

Edit: Oh wait, what am I talking about 😓 It's just in the form part of the translations which I have local but haven't committed. I'll put it in a more general place

packages/webapp/src/components/LocationDetailLayout/AreaDetails/Barn/index.jsx

Duncan-Brain · 2025-10-29T13:49:13Z

packages/webapp/src/stories/Rating/Rating.stories.jsx

  stars: 5,
 };
+
+export const Optional = Template.bind({});


I don't know of any optional ratings... but I am wondering if it is an exception like the signup flow radio -- it is hard to decipher on the other end of the page.

Good call! I think the cleanest way to handle would be to make it a prop on the label, and keep it on the left for any elements that don't extend across the screen. I'll do this for radios and rating... Oh, and I see this one doesn't use the component so I'll copy the non-component radios pattern.

Oh, and I just found the optional rating in app! It was in management plan:

<Rating stars={value} onRate={onChange} style={{ marginBottom: '40px' }} disabled={completed || abandoned} optional label={t('MANAGEMENT_PLAN.COMPLETE_PLAN.RATING')} />

packages/webapp/src/components/SimpleBadges/PrivateBadge/index.tsx

kathyavini · 2025-10-29T17:44:39Z

Thanks @Duncan-Brain! String and positioning should be fixed.

As for the accessibility refactor (correct use of <label>) I am starting to get a little scared, especially reading that point about checkbox 😅 The number of patterns around labels in app is staggering and horrifying.

As for the point about leaf/optional -- should be included so it's read by screen reader as well. Not sure they have any alt text set up for that yet though -- will have to investigate 😬

kathyavini added 14 commits October 28, 2025 09:01

LF-5028 Adjust Optional text -- remove parentheses and capitalize

f251a7c

LF-5028 Adjust InputBaseLabel style logic and Optional positioning

081ee1a

LF-5028 Refactor Input to use InputBaseLabel

3f62670

LF-5028 Wrap all items rendered within input in .inputWrapper and adj…

a824c48

…ust CSS

LF-5028 Add the PrivateBadge

74b72b0

LF-5028 Update <Input /> storybook

0059ef8

LF-5028 Add Optional label marker to <TextArea />

760d49d

LF-5028 Update optional placement on InputAutoSize

ec3384f

LF-5028 Adjust Rating optional label and create story

e539ba7

LF-5028 Refactor Unit to use InputBaseLabel

a0cc6d0

LF-5028 Fix the focus border colour of TextArea

5b26615

LF-5028 Cleanup stray prop

382b628

LF-5028 Update and harmonize the labels in Location details components

2d24ceb

kathyavini self-assigned this Oct 28, 2025

kathyavini requested review from a team as code owners October 28, 2025 20:54

kathyavini requested review from Duncan-Brain and removed request for a team October 28, 2025 20:54

kathyavini added the enhancement New feature or request label Oct 28, 2025

kathyavini marked this pull request as draft October 28, 2025 20:59

kathyavini commented Oct 28, 2025

View reviewed changes

LF-5028 Harmonize the logic of margins across InputBaseLabel, TextAre…

dbc1f65

…a, and InputAutoSize

kathyavini commented Oct 28, 2025

View reviewed changes

kathyavini marked this pull request as ready for review October 28, 2025 22:33

kathyavini added 2 commits October 28, 2025 16:08

LF-5028 Remove accidentally added optional flag in GREENHOUSE_TYPE

9f300e5

LF-5028 Add option for left-justified and use it in Location Detail r…

41bc217

…adios

Duncan-Brain requested changes Oct 29, 2025

View reviewed changes

kathyavini added 2 commits October 29, 2025 10:18

LF-5028 Move PRIVATE string outside of MARKET_DIRECTORY.INFO_FORM

6623730

LF-5028 Copy (and slightly reorder) .radioLabel styles into Rating

d4b703f

kathyavini requested a review from Duncan-Brain October 29, 2025 17:44

Duncan-Brain approved these changes Oct 30, 2025

View reviewed changes

Duncan-Brain added this pull request to the merge queue Oct 30, 2025

Merged via the queue into integration with commit 756c2aa Oct 30, 2025
5 checks passed

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

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

Uh oh!

Conversation

kathyavini commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of changes:

Category A: Optional + other Label modifiers

Category B: Only optional modifier

Uh oh!

kathyavini Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Duncan-Brain left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Duncan-Brain Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Duncan-Brain Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kathyavini Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kathyavini commented Oct 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kathyavini commented Oct 28, 2025 •

edited

Loading

kathyavini Oct 28, 2025 •

edited

Loading

kathyavini Oct 28, 2025 •

edited

Loading

Duncan-Brain left a comment •

edited

Loading

kathyavini Oct 29, 2025 •

edited

Loading

kathyavini Oct 29, 2025 •

edited

Loading