Clean up progress indicator implementation: JS & styling #36

sergei-maertens · 2021-07-14T11:06:01Z

The sass does weird things because it's based on the card component and on mobile spacing is different. It's also very contextual w/r to the font-size.

The combination of position: sticky + flexbox + having the expanded progress indicator overlay the rest of the page is challenging.

Additional input:

Refactor involved React components
Clean up SCSS & address known bugs

The text was updated successfully, but these errors were encountered:

sergei-maertens · 2023-06-20T19:42:05Z

Note that this may potentially be a breaking change due to the ProgressIndicatorDisplay component API

sergei-maertens · 2023-06-22T10:29:39Z

The LinkOrSpan component that we now use should use the UtrechtLink placeholder variant: https://nl-design-system.github.io/utrecht/storybook/?path=/story/css-link-placeholder--placeholder

Additionally, the utrecht-link--of-active now sets styles that are not scoped to .openforms-theme, these need to be scoped or get a proper design token. Font-weight & margin are affected. The focus state also has similar issues.

joeribekker · 2023-10-02T08:39:47Z

Refinement: Sergei says we need to toss out the old implementation and get something new and shiny. We should look at NLDS for existing components or inspiration.

@vaszig

Co-authored-by: @vaszig

Rather than having the progress indicator component inherit the card component styles, it shares the implementation details with it but uses its own component namespace in the design tokens. Implemented in a backwards compatible manner to point to existing design tokens, but you can specify more specific ones if you'd like so.

* Use flexbox and gap for spacing between caption and link list in progress indicator * Hide the mobile header/toggle button on desktop * Manage spacing between list items with gap rather than margins

This now uses a flexbox approach for the content, while using the normal document flow as much as possible to fit the element inside its container element(s). The story is updated so that it's clear how overflowing content is handled. Padding is removed from the parent element and moved into the button element, so that it is more touch-device friendly. Tapping anywhere on the header now toggles it between open/closed state. Finally, most of these appearance aspects are now parametrized through design tokens.

When scrolling the main content, the progress indicator should stay in view.

This is quite involved as there are some styling edge cases to consider: * form title that overflows and is truncated with ellipsis - if you're not careful, this can cause a horizontal scrollbar * form title that is long and the main content being scrollable - this can also cause a small horizontal scrollbar due to the ellipsis situation * the progress indicator content itself should be scrollable, independent from the main content * possibly there is an external header/footer that may take up some vertical space, which limits the amount of vertical space available for our progress indicator The implementation now passes a ref to the button element in React, which allows us to calculate the height of the button (our 'menu' bar) AND its offset to the top of the page, in case there is another external UI element taking space. We then allocate a maximum block size (= vertical space) as the dynamic viewport block (100dvb, dynamic taking into account the address bar that can dissapear on actual mobile devices) minues the vertical/block spacing reserved for the button and possible third party content. When scrolling down, our button may overlay the third party content (due to the position: sticky) and this frees up a little bit of space below the progress indicator - this is deliberate. Users are allowed to interact with buttons below it and simplifies us having to track more things in React.

On mobile, apply some padding to push the language buttons down.

Add new, update existing and remove obsolete design tokens related to the progress indicator styling. This includes some bigger changes to the app component as well.

The fixed steps being added don't need to be falsy, they need to not be added at all.

The explicit z-index creates a stacking context which puts it on top of the date picker in appointments. Not specifying the z-index seems to work equally well.

Add new, update existing and remove obsolete design tokens related to the progress indicator styling. This includes some bigger changes to the app component as well.

Something went wrong with the previous version of design tokens, so I've redone them. Even the git reflog couldn't help :(

On request we can bring it back, but currently it doesn't seem that anyone makes use of this mechanism.

The overview should be navigable once all the preceding steps are completed, rather than always rendering a placeholder.

sergei-maertens mentioned this issue Jul 15, 2021

Conditional progress indicator + mobile styling #35

Merged

sergei-maertens added this to the SDK 1.5.0 milestone Jun 20, 2023

sergei-maertens added the NL Design System label Jun 22, 2023

sergei-maertens modified the milestones: SDK 1.5.0, SDK 1.6.0 Aug 22, 2023

joeribekker added the owner: utrecht label Sep 4, 2023

joeribekker added this to Development Sep 4, 2023

github-project-automation bot moved this to Todo in Development Sep 4, 2023

joeribekker assigned vaszig Oct 2, 2023

vaszig moved this from Todo to In Progress in Development Oct 6, 2023

vaszig moved this from In Progress to Todo in Development Oct 9, 2023

vaszig moved this from Todo to In Progress in Development Oct 9, 2023

vaszig moved this from In Progress to Todo in Development Oct 10, 2023

vaszig moved this from Todo to In Progress in Development Oct 30, 2023

sergei-maertens modified the milestones: SDK 2.0, SDK 2.1 Nov 6, 2023

vaszig added a commit that referenced this issue Nov 7, 2023

[#36] Added new progress indicator for desktop

93fdfe6

vaszig mentioned this issue Nov 7, 2023

[#36] Refactor Progress Indicator #589

Merged

vaszig added a commit that referenced this issue Nov 8, 2023

[#36] Added new progress indicator for desktop

1f4b5fb

vaszig added a commit that referenced this issue Nov 8, 2023

[#36] Fixed current step active

8d86893

vaszig added a commit that referenced this issue Nov 8, 2023

[#36] Removed unused variables

e7c2a47

vaszig added a commit that referenced this issue Nov 8, 2023

[#36] Added new progress indicator

2517720

vaszig added a commit that referenced this issue Nov 8, 2023

[#36] Added new progress indicator

7bfe632

vaszig added a commit that referenced this issue Nov 10, 2023

[#36] Added new progress indicator

e354b4b

vaszig added a commit that referenced this issue Nov 10, 2023

[#36] Refactored appointments

2fa0f88

vaszig added a commit that referenced this issue Nov 10, 2023

[#36] Removed old progress indicator

b8ce0e2

vaszig added a commit that referenced this issue Nov 10, 2023

[#36] Removed unused import

df3591f

sergei-maertens added a commit that referenced this issue Nov 24, 2023

♿ [#36] Use (hidden) caption as description for nav element

c27cd60

Co-authored-by: @vaszig

sergei-maertens added a commit that referenced this issue Nov 24, 2023

♻️ [#36] Reset markup and styles for progress indicator entirely

10970de

sergei-maertens added a commit that referenced this issue Nov 24, 2023

🐛 [#36] Fix excluding steps mechanism

84cab8a

sergei-maertens added a commit that referenced this issue Nov 24, 2023

♻️ [#36] Ensure that progress indicator is sticky on desktop

3b31fbb

When scrolling the main content, the progress indicator should stay in view.

sergei-maertens added a commit that referenced this issue Nov 24, 2023

⚗️ [#36] Height of progress indicator

a4c02a8

sergei-maertens added a commit that referenced this issue Nov 27, 2023

♻️ [#36] Tweak spacing of language buttons

c79d856

On mobile, apply some padding to push the language buttons down.

sergei-maertens mentioned this issue Nov 27, 2023

Rework the app/progress indicator markup and styling #603

Merged

sergei-maertens added a commit that referenced this issue Nov 27, 2023

♻️ [#36] Update/clean up design tokens

58e1229

sergei-maertens added a commit that referenced this issue Nov 27, 2023

📝 [#36] Clean up FormDisplay usage and document upgrade instructions

9f96dc2

sergei-maertens mentioned this issue Nov 27, 2023

Delete obsolete link styles open-formulieren/open-forms#3633

Merged

sergei-maertens added a commit that referenced this issue Nov 27, 2023

♻️ [#36] Restore ability to set vertical space above main content

8bf751e

sergei-maertens reopened this Nov 27, 2023

github-project-automation bot moved this from Implemented to In Progress in Development Nov 27, 2023

sergei-maertens added a commit that referenced this issue Nov 27, 2023

💚 [#36] Fix incorrect test

bb3194d

The fixed steps being added don't need to be falsy, they need to not be added at all.

sergei-maertens moved this from In Progress to Implemented in Development Nov 27, 2023

sergei-maertens added a commit that referenced this issue Nov 28, 2023

💄 [#36] Remove z-index

cf27bea

The explicit z-index creates a stacking context which puts it on top of the date picker in appointments. Not specifying the z-index seems to work equally well.

sergei-maertens added a commit that referenced this issue Nov 29, 2023

👌 [#36] PR feedback

4eac0e6

Something went wrong with the previous version of design tokens, so I've redone them. Even the git reflog couldn't help :(

sergei-maertens added a commit that referenced this issue Nov 29, 2023

⚰️ [#36] We no longer have a progress indicator display component

246f90b

On request we can bring it back, but currently it doesn't seem that anyone makes use of this mechanism.

sergei-maertens added a commit that referenced this issue Nov 29, 2023

♻️ [#36] Fix the progress indicator overview/confirmation step state

1dbd964

The overview should be navigable once all the preceding steps are completed, rather than always rendering a placeholder.

sergei-maertens added a commit that referenced this issue Nov 29, 2023

⬆️ [#36] Upgrade to design tokens 0.51.0

adc91c2

sergei-maertens added a commit to open-formulieren/open-forms that referenced this issue Nov 29, 2023

⬆️ [open-formulieren/open-forms-sdk#36] Upgrade design tokens to 0.51.0

bec41d5

sergei-maertens closed this as completed in #603 Nov 29, 2023

github-project-automation bot moved this from Implemented to Done in Development Nov 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clean up progress indicator implementation: JS & styling #36

Clean up progress indicator implementation: JS & styling #36

sergei-maertens commented Jul 14, 2021 •

edited by vaszig

Loading

sergei-maertens commented Jun 20, 2023

sergei-maertens commented Jun 22, 2023

joeribekker commented Oct 2, 2023

Clean up progress indicator implementation: JS & styling #36

Clean up progress indicator implementation: JS & styling #36

Comments

sergei-maertens commented Jul 14, 2021 • edited by vaszig Loading

sergei-maertens commented Jun 20, 2023

sergei-maertens commented Jun 22, 2023

joeribekker commented Oct 2, 2023

sergei-maertens commented Jul 14, 2021 •

edited by vaszig

Loading