Observation form UX improvements by Rory-Sullivan · Pull Request #1079 · NWACus/avy

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!

components/form/ButtonSelectDateField.tsx

components/observations/AvalancheObservationForm.tsx

components/form/ButtonSelectDateField.tsx

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.

I didn't explain the whole thing super well at all, but I was thinking that in quickPickSelectionHandler you would be able to set isQuickPickSelected to true without doing any checks and then in onDateSelected you could do the check to see if the date that was selected also is a quick pick date.

The useMemo seems fine too. Definitely not a blocker

components/form/ButtonSelectDateField.tsx

components/form/ButtonSelectField.tsx

components/observations/AvalancheObservationForm.tsx

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.

components/form/ButtonSelectDateField.tsx

components/form/ButtonSelectField.tsx

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 · 2026-02-12T20:47:52Z

components/form/SelectField.tsx

+interface HelpText {
+  title: string;
+  contentHtml: string;
+}


Nit: This can be removed since it's in FieldLabel

Good catch, I removed this.

kevinherdez

Looks good! I tested it locally and it seems to be working great.