Replace second line for filters with UI from segments variant D #5022

apata · 2025-01-27T19:13:53Z

Changes

Removes the second line for filters that's shown when saved_segments feature flag is true, replacing it with the single line version from segments variant D and the multicolumned filter menu from the same.
- For users that don't have the feature flag (pretty much all of them), no visual changes are expected, except a few tiny tweaks that deal with what happens in the top bar in the overflow situation.
Refactors filter pills so their drop shadows wouldn't be cut off by overflow: hidden.
Creates non-interactive filter pill and pill list versions (in anticipation of segment modals).

Tests

Automated tests have been added

Changelog

This PR does not make a user-facing change

Documentation

This change does not need a documentation update

Dark mode

The UI has been tested both in dark and light mode

Visuals

github-actions · 2025-01-28T07:46:18Z

Preview environment👷🏼‍♀️🏗️
PR-5022

apata · 2025-01-28T07:58:43Z

assets/js/dashboard/stats/current-visitors.js

@@ -56,7 +53,10 @@ export default function CurrentVisitors({ tooltipBoundary }) {
      >
        <AppNavigationLink
          search={(prev) => ({ ...prev, period: 'realtime' })}
-          className="h-9 flex items-center ml-1 mr-auto text-xs md:text-sm font-bold text-gray-500 dark:text-gray-300"
+          className={classNames(


Final positioning in this component and some others like site switcher and date picker is now with className prop.

apata · 2025-01-28T08:10:28Z

assets/js/dashboard/nav-menu/filters-bar.tsx

+const BUFFER_RIGHT_PX = 16 - BUFFER_FOR_SHADOW_PX - PILL_X_GAP
+const BUFFER_LEFT_PX = 16 - BUFFER_FOR_SHADOW_PX
 const SEE_MORE_WIDTH_PX = 36
+const SEE_MORE_RIGHT_MARGIN_PX = BUFFER_FOR_SHADOW_PX + PILL_X_GAP
+const SEE_MORE_LEFT_MARGIN_PX = BUFFER_FOR_SHADOW_PX


The idea here is to have a constant separation equivalent to gap-x-4 (16) between pills and top bar left actions, top bar right actions.

These calculations are needed, because pills include a margin around them (BUFFER_FOR...), which if not taken into account, causes misalignment.

Width calculations include the pills and the gaps:
[pill1] [pill2] [pill3] is cut right before [pill 2] ->
[pill1]

That's why the buffers are different for left and right.

ukutaht · 2025-01-28T09:54:42Z

assets/js/dashboard/nav-menu/filter-pill.tsx

-        onClick={() => onRemoveClick()}
+    <div className={className}>
+      <div
+        style={{ margin: BUFFER_FOR_SHADOW_PX }}


Why is style property used here as opposed to a tailwind class?

I need the numeric values for calculations: I can't generate the custom classes dynamically because https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names. I could declare the string class names like BUFFER_CLASS = "m-[4px]", which TW detects properly, and then parse these class name strings to get the px values, but it's a bit more messy.

Ideally, of course, I'd not need these weird calculations, and it's probably possible to get rid of them when either
A) scrapping the partially expanded filters mode (as in designs) in favor of prod version: all shown or none shown
B) refactoring filter pills and pill lists more

ukutaht · 2025-01-28T10:03:09Z

assets/js/dashboard/nav-menu/filters-bar.tsx

+            ref={seeMoreRef}
+            dropdownContainerProps={{
+              ['title']: opened ? 'Show less' : 'Show more',
+              ['aria-controls']: 'more-filters-menu',


We already have headlessui as a dependency. Consider using the dropdown menu component over a hand-rolled dropdown to get things like aria properties for free.

Agreed with the principle overall. Alas, headlessui doesn't align with accessibility standards (tab navigation between items) and that's why I refactored datepicker out of it last year. I wanted to keep new UI aligned with datepicker, thus I kept this custom component.

Maybe we want to align with the storybook dropdown instead?

headlessui doesn't align with accessibility standards (tab navigation between items)

What standard specifically? AFAIK accessible menus should be navigable via arrows and items should have tabindex="-1" which headlessUI does https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role

You're right, MDN is clear on that! My gut feel had solidified to a standard since the last time we talked about this: #4461 (comment)

Still, the question remains which components to refactor and when. There's a few on the dashboard, but also https://plausible.io/storybook/dropdown is on tab navigation.

ukutaht · 2025-01-28T10:19:27Z

Problem: when a filter is added the page jumps vertically by a little bit, but enough to be annoying:

Cap.2025-01-28.at.12.17.07.mp4

apata changed the title ~~Replaces~~ Replaces second line for filters with UI from segments variant D Jan 27, 2025

apata changed the title ~~Replaces second line for filters with UI from segments variant D~~ Replace second line for filters with UI from segments variant D Jan 27, 2025

apata force-pushed the saved-segments/singular-bar branch from a0317c6 to 07e1127 Compare January 27, 2025 19:15

apata added the preview label Jan 28, 2025

apata commented Jan 28, 2025

View reviewed changes

apata requested a review from macobo January 28, 2025 08:18

apata changed the base branch from saved-segments/expand-segments-query-from to master January 28, 2025 09:14

Remove the second line for filters

85878b7

apata force-pushed the saved-segments/singular-bar branch from 07e1127 to 85878b7 Compare January 28, 2025 09:18

Remove extraneous class and prevent wrap

b5d7d22

apata requested review from ukutaht and removed request for macobo January 28, 2025 09:48

ukutaht reviewed Jan 28, 2025

View reviewed changes

Fix jumpyness

5cc073b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace second line for filters with UI from segments variant D #5022

Replace second line for filters with UI from segments variant D #5022

apata commented Jan 27, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025

apata Jan 28, 2025 •

edited

Loading

apata Jan 28, 2025

ukutaht Jan 28, 2025

apata Jan 28, 2025 •

edited

Loading

ukutaht Jan 28, 2025

apata Jan 28, 2025

ukutaht Jan 28, 2025

apata Jan 28, 2025

ukutaht commented Jan 28, 2025 •

edited

Loading

Replace second line for filters with UI from segments variant D #5022

Are you sure you want to change the base?

Replace second line for filters with UI from segments variant D #5022

Conversation

apata commented Jan 27, 2025 • edited Loading

Changes

Tests

Changelog

Documentation

Dark mode

Visuals

github-actions bot commented Jan 28, 2025

apata Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

apata Jan 28, 2025

Choose a reason for hiding this comment

ukutaht Jan 28, 2025

Choose a reason for hiding this comment

apata Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

ukutaht Jan 28, 2025

Choose a reason for hiding this comment

apata Jan 28, 2025

Choose a reason for hiding this comment

ukutaht Jan 28, 2025

Choose a reason for hiding this comment

apata Jan 28, 2025

Choose a reason for hiding this comment

ukutaht commented Jan 28, 2025 • edited Loading

apata commented Jan 27, 2025 •

edited

Loading

apata Jan 28, 2025 •

edited

Loading

apata Jan 28, 2025 •

edited

Loading

ukutaht commented Jan 28, 2025 •

edited

Loading