Observation form UX improvements #1079

Rory-Sullivan · 2026-01-31T20:08:33Z

This PR is currently focused on the avalanche observation form, though I expect we may want to roll some changes into the observation form as well. It addresses the following issues;

Update obs picklists to quick taps #961 and Consider changing date selection in obs form #986: I have changed some fields to have quick pick items. This includes occurrence date, trigger, aspect, and avalanche size. Occurrence date includes a button to open a native date picker for picking an arbitrary date, and trigger includes a drop down menu for picking less common triggers.

Make required fields more obvious #1043: I have added a * to required fields to indicate they are required before the form is submitted. Additionally if the form is submitted without a required field it will be highlighted in red as shown below.

Add help text to observation fields #962: I have added an information icon next to some fields. When the information icon is clicked by the user a modal window will pop up with the help text for that item. This reuses the InfoTooltip component that is is used for things like the help text on danger ratings in the observation detail view. @rustynwac you mentioned doing some design work on this item, I'm super happy to adjust this to whatever comes out of that, I just took the path of least resistance to get this functionality in there.

From a technical perspective this PR adds two new components ButtonSelectField and ButtonSelectDateField. ButtonSelectField is very similar to the SelectField component but it adds the ability to have quick select items as well as the drop down select. The main limitation to the ButtonSelectField component over SelectField is that it does not support multi-select fields. ButtonSelectDateField adds quick pick items to a date selector.

It also adjusts existing field components to improve the visibility of required fields and errors.

rustynwac · 2026-02-02T15:53:33Z

@Rory-Sullivan that looks pretty dang good!

I'm excited to play with it in Preview. I might trim a few things but excited to test first!

kevinherdez · 2026-02-02T19:27:15Z

components/form/ButtonSelectDateField.tsx

+  value: Date;
+}
+
+interface HelpText {


I would move this to AvalancheObservationForm and add an export to it. With the designs I've seen for the help text, it looks like we might be adding it to a lot of fields so that seems to be a place that makes the most sense to add it to for the best visibility and reusability. I've they get added to ObservationForm that might be an even better place for it

Actually, if you end up breaking out the title code into a new component, this should go in that component

in the future we may end help text to not just obs

I created a new component called FieldLabel this HelpText interface is now along side that new component. I think that resolves this comment?

kevinherdez · 2026-02-02T19:30:39Z

components/observations/AvalancheObservationForm.tsx

  return reverseLookup(AvalancheSize, value);
 };
+
+const avalancheSizeHelpTextHtml = String.raw`


There a filed called helpStrings.ts that contains the help strings for the tooltip used in other areas. I would add a section there called avalancheObservations and add all the help strings being used in this file under that section

kevinherdez · 2026-02-02T19:31:54Z

components/observations/AvalancheObservationForm.tsx

+                        ]}
+                        maximumDate={today}
+                        required
+                        helpText={{title: 'Occurrence date', contentHtml: 'To the best of your knowledge, when did the avalanche occur?'}}


Add to helpStrings.ts (see comment below) and wrap in <p></p> tags

kevinherdez · 2026-02-02T19:32:06Z

components/observations/AvalancheObservationForm.tsx

-                        items={Object.values(AvalancheAspect).map(aspect => ({label: FormatAvalancheAspect(aspect), value: aspect}))}
+                        quickPickItems={Object.values(AvalancheAspect).map(aspect => ({label: FormatAvalancheAspect(aspect), value: aspect}))}
+                        required
+                        helpText={{title: 'Aspect', contentHtml: 'Provide primary or average aspect of the slope where the avalanche released.'}}


Add to helpStrings.ts (see comment below) and wrap in <p></p> tags

kevinherdez · 2026-02-02T20:12:19Z

components/form/ButtonSelectDateField.tsx

+          borderWidth={1}
+          disabled={disabled}>
+          <BodyBlack>
+            <AntDesign name="calendar" />


This could be something that's more of a personal preference but I wonder if adding "Other" along with the icon would make it even clearer that this will open the calendar

kevinherdez · 2026-02-02T20:24:34Z

components/form/ButtonSelectDateField.tsx

+  // it from top margin of the HStack to stop the first row of buttons from being offset down.
+  const rowMargin = 5;
+
+  let isQuickPick = false;


I would change this to make it a State and call it something like isQuickPickSelected and have it updated in the quickPickSelectionHandlers. It makes it more clear what it's controlling and that it's updating the state of something

For this one I decided to make isQuickPickSelected a memoized value that gets updated when the field value changes. Making it a state value and trying to update that from the selection handler is a little tricky because the user is able select one of the quick pick dates from the generic date selector. Happy to discuss this more though if you have particular thoughts on it.

kevinherdez · 2026-02-02T20:40:23Z

components/form/ButtonSelectDateField.tsx

+      <HStack>
+        <BodySmBlack>
+          {label ?? name}
+          {required && ' *'}
+        </BodySmBlack>
+        {helpText && <InfoTooltip title={helpText.title} content={helpText.contentHtml} size={14} htmlStyle={{textAlign: 'left'}} />}
+      </HStack>


This HStack could be broken out into a FieldTitle component so that it isn't repeated across the components. It also could be where the HelpText interface is declared

Done. I decided to call the new component FieldLabel.

kevinherdez · 2026-02-02T20:43:15Z

components/form/ButtonSelectField.tsx

+  if (Array.isArray(field.value)) {
+    throw new Error('ButtonSelectField cannot support multiselects at this time');
+  }
+  if (otherItems) {
+    quickPickItems.forEach(item => {
+      if (otherItems.find(x => x.value === item.value)) {
+        throw new Error('ButtonSelectField quickPickItems and otherItems must be distinct lists');
+      }
+    });
+  }


Maybe not a big deal, but should these be in a useEffect so it's not checked on every render?

This code has moved to the SelectField component, but it has been wrapped in a useEffect hook.

kevinherdez · 2026-02-02T20:54:38Z

components/observations/AvalancheObservationForm.tsx

+                          {label: 'Natural', value: 'N'},
+                          {label: 'Unknown', value: 'U'},
+                          {label: 'Skier', value: 'AS'},
+                          {label: 'Snowboarder', value: 'AR'},
+                          {label: 'Snowmobile', value: 'AM'},


Instead of hard coding these we should slice and map the values like we're doing below

kevinherdez · 2026-02-02T21:08:26Z

It doesn't have to be a part of this PR, but if these changes are added to the ObservationForm we should merge SelectField and ButtonSelectField, or just remove SelectField. They're very similar so we probably don't need both of them.

kevinherdez · 2026-02-02T21:34:29Z

components/form/ButtonSelectDateField.tsx

+  useEffect(() => {
+    if (required && quickPickDates.length > 0) {
+      setValue(name, quickPickDates[0].value, {shouldValidate: true, shouldDirty: true, shouldTouch: true});
+    }
+  }, [name, required, quickPickDates, setValue]);


There needs to be a check in here to see if field.value is already set to something. If a user saves an avalanche obs and then taps on the edit icon to bring the form up again, this will override their previous selection.

kevinherdez · 2026-02-02T21:34:48Z

components/form/ButtonSelectField.tsx

+  useEffect(() => {
+    if (required && quickPickItems.length > 0) {
+      setValue(name, quickPickItems[0].value, {shouldValidate: true, shouldDirty: true, shouldTouch: true});
+    }
+  }, [name, required, quickPickItems, setValue]);


Same here about checking if a value is set already

kevinherdez · 2026-02-02T21:35:49Z

components/observations/AvalancheObservationForm.tsx

                          placeholder: 'Describe the location of the avalanche.',
                          multiline: true,
                        }}
+                        required


I found that there's a preexisting bug here that allows users to save the avalanche without setting the location field. I'll open an issue on myself to fix this once this code gets checked in

Yeah the behavior of this one is a little weird and I am not entirely sure what is going on.

- Add ButtonSelectField component for quick selects - Convert aspect and avalanche size fields to button select

- Add ButtonSelectDateField component for quick selects of dates - Convert date field to button select

Updates the format function used to display the date of an avalanche. The avalanche date field is sent from the backend without time or timezone information, so when it is converted to UTC then back to a local date it is off by one day. Renames a function that is used to convert observation start dates to a local date string to make it more generic.

…rm (NWACus#961) - Update button select component to have an optional select dropdown for cases with many items. - Update trigger field on avalanche submission form to have quick select items and dropdown select.

…us#1043)

- Add 'other' text to general date picker - Fix bug that clears date selection when there is a preset value - Memoize is quick pick selected variable

- Create new FieldLabel component - Use new component in various Field components

Move help text to helpStrings.ts file.

Update trigger quick pick items to map of schema items instead of hard coded list.

Rory-Sullivan · 2026-02-10T02:22:27Z

@kevinherdez

It doesn't have to be a part of this PR, but if these changes are added to the ObservationForm we should merge SelectField and ButtonSelectField, or just remove SelectField. They're very similar so we probably don't need both of them.

I have merged the ButtonSelectField and SelectField components into one (there's just SelectField now). Initially when I started development on the new component I was expecting it to be more unique, but after adding the drop down selector to it, it became very similar to the existing SelectField component so I entirely agree they should be one.

Rory-Sullivan · 2026-02-10T02:25:57Z

The latest commits to this update the look of required fields, as suggested on a Slack thread.

Remove '2 days ago' from quick pick date items.

Rory-Sullivan · 2026-02-10T02:37:55Z

Latest change also removes '2 days ago' from the quick pick date items per a request on Slack.

kevinherdez reviewed Feb 2, 2026

View reviewed changes

Rory-Sullivan added 9 commits February 9, 2026 14:30

Add button select fields to avalanche observation form (NWACus#961)

cda9581

- Add ButtonSelectField component for quick selects - Convert aspect and avalanche size fields to button select

Add date button selects to avalanche observation form (NWACus#961)

ee879d8

- Add ButtonSelectDateField component for quick selects of dates - Convert date field to button select

Make required fields more visible on avalanche observation form (NWAC…

719a874

…us#1043)

Add help text to fields on avalanche submission form (NWACus#962)

30b5ffe

Adds required attribute to button date selector component

d95f9da

Make location required field on avalanche observation form

6ac6ace

Update avalanche trigger quickpick items on avalanche observation form

d3674ed

Rory-Sullivan force-pushed the observation_submission_improvements branch from 96515c0 to d3674ed Compare February 9, 2026 22:42

Rory-Sullivan added 6 commits February 9, 2026 16:18

Combine ButtonSelectField and SelectField into single component

ad3562d

Rename ButtonSelectDateFieldComponent to QuickPickDateField

ad14a1a

Update QuickPickDateField

727763e

- Add 'other' text to general date picker - Fix bug that clears date selection when there is a preset value - Memoize is quick pick selected variable

Add FieldLabel component

0e5c5f1

- Create new FieldLabel component - Use new component in various Field components

Refactor avalanche observation form

edf2893

Move help text to helpStrings.ts file.

Refactor avalanche observation form

e457e28

Update trigger quick pick items to map of schema items instead of hard coded list.

Update avalanche observation form

46ae028

Remove '2 days ago' from quick pick date items.

Observation form UX improvements #1079

Are you sure you want to change the base?

Observation form UX improvements #1079

Uh oh!

Conversation

Rory-Sullivan commented Jan 31, 2026

Uh oh!

rustynwac commented Feb 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yuliadub Feb 3, 2026 • 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kevinherdez commented Feb 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Rory-Sullivan commented Feb 10, 2026

Uh oh!

Rory-Sullivan commented Feb 10, 2026

Uh oh!

Rory-Sullivan commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yuliadub Feb 3, 2026 •

edited

Loading