SWC-6915

[lakikowolfe]

Update date range picker design

• Control flow from desktop to mobile
• Style button to match designs in figma
• Update to use MUI components

Update enum range slider design

• Style apply button to match figma designs

https://sagebionetworks.jira.com/browse/SWC-6915

[lakikowolfe]

@nickgros still working on making sure the mobile flow is handled correctly. Would love to get your eyes on this early to make sure that I haven't lost any functionality in the refactor from base input to MUI DatePicker

[nickgros]

I think you could simplify the layout quite a bit, so I tried to communicate one potential path forward in these comments--it's a lot, so please reach out if you have questions!

[nickgros]

Oh and it seems like the functionality is fine just from trying it in Storybook, but I think existing tests should verify this too!

[lakikowolfe]

@nickgros really appreciate this in depth review! It's making sense after I read through it a couple times. I'll ping you for rereview once I've implemented.

[lakikowolfe]

@nickgros I'm a little stuck on how to make an update to the storybook entry. Here's what I've figured out so far:

Storybook entry:

synapse-web-monorepo/packages/synapse-react-client/src/components/widgets/query-filter/RangeFacetFilter.stories.tsx

Line 89 in df26c7f

export const SelectedDate: Story = {

Runs RangeFaceFilterUI: https://github.com/Sage-Bionetworks/synapse-web-monorepo/blob/main/packages/synapse-react-client/src/components/widgets/query-filter/RangeFacetFilterUI.tsx#L48

The Storybook entry doesn’t really seem appropriate for the DateRangePicker?

export const SelectedDate: Story = {
  args: {
    label: 'foo',
    columnType: 'DATE',
    facetResult: {
      columnMin: '0',
      columnMax: '100',
      selectedMin: '5',
      selectedMax: '95',
    },
  },
}

I’ve been playing around with these values via the storybook UI and they don’t update the values in the DateRangePicker.

I've updated the values in my local instance but it's taking forever to boot up locally and I need to log off for the day. @nickgros can you point me towards where the default storybook dates are coming from?

[nickgros]

@lakikowolfe I think you're in the right place. If you change the values in that story to dates (e.g. '2025-02-13'), then I think it will work. You might not see the change in storybook without a full refresh to the page

[nickgros]

Code changes look good, looks like tests need to be updated