Clean up progress indicator implementation: JS & styling

open-formulieren / open-forms-sdk

A Javascript SDK for Open Forms

https://open-forms.readthedocs.io/en/stable/developers/sdk/index.html

Other

2 stars 6 forks source link

Clean up progress indicator implementation: JS & styling #36

Closed sergei-maertens closed 7 months ago

sergei-maertens commented 3 years ago

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:

https://github.com/open-formulieren/open-forms/issues/2139
https://github.com/open-formulieren/open-forms-sdk/pull/347#discussion_r1112925799
[x] Refactor involved React components
[x] Clean up SCSS & address known bugs

sergei-maertens commented 1 year ago

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

sergei-maertens commented 1 year ago

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 commented 9 months ago

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.