Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor backend styles / markup to use more NL DS components #3575

Merged
merged 17 commits into from
Nov 10, 2023

Conversation

sergei-maertens
Copy link
Member

@sergei-maertens sergei-maertens commented Nov 2, 2023

Closes #3178

Depends on open-formulieren/design-tokens#42
Depends on open-formulieren/open-forms-sdk#592


How to test:

# build frontend/SDK with updated design tokens
cd /path/to/sdk
git switch refactor/3178-page-styles-to-nlds
git submodule update
yarn build:design-tokens
yarn build

# run backend with updated frontend build
cd /path/to/backend
npm i
npm run build
src/manage.py runserver

# check out a form via http://localhost:8000/some-form

Quite an extensive refactor with lots of things removed.

  • Now uses utrecht-page and utrecht-page-content
  • Now uses utrecht-page-header
  • Now uses utrecht-page-footer
  • Removed usage of openforms-layout

Due to some CSS cleanup the width on desktop has now gone from 1170px to 1200px - this is deliberate-ish to simplify the code and should not cause problems, but design tokens can of course be tweaked.

The changes should be backwards compatible - they're definitely intended to be, if you spot issues -> please report them.

TODO:

  • Set up token data migration(s)

@sergei-maertens sergei-maertens force-pushed the refactor/3178-page-styles-to-nlds branch from ebb4d4b to 59c420e Compare November 3, 2023 08:59
Copy link

codecov bot commented Nov 3, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (cd37b41) 95.97% compared to head (5027432) 95.97%.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #3575   +/-   ##
=======================================
  Coverage   95.97%   95.97%           
=======================================
  Files         680      680           
  Lines       21888    21890    +2     
  Branches     2532     2532           
=======================================
+ Hits        21006    21008    +2     
  Misses        611      611           
  Partials      271      271           
Files Coverage Δ
src/openforms/config/models.py 97.27% <100.00%> (+0.03%) ⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

* The header is now a 'global' include, the ui 'app' is being removed
* The main content container now gets styling from the utrecht-page design tokens
* Header and footer are to be replaced after the 'view' component is refactored
  out of the codebase.
They have been replaced with the NL DS utrecht-page component.

Design token mapping will take place and/or we will set up some
compatibility shims.
Couldn't find any table class names being set anywhere
…tory

Moving stuff out of the ui 'app' and simplifying the renderen HTML
for better discoverability.
The NL DS component provides in paddings around the content, so
our layout component in the backend is obsolete.

There is still a layout component in the SDK for the time being,
and the paddings of that one need tweaking so that the A11Y toolbar
and the form content properly align again.
@sergei-maertens sergei-maertens force-pushed the refactor/3178-page-styles-to-nlds branch from 5c271f7 to 171f24a Compare November 9, 2023 13:07
@sergei-maertens sergei-maertens marked this pull request as ready for review November 9, 2023 15:34
@sergei-maertens sergei-maertens merged commit abfdc1d into master Nov 10, 2023
25 checks passed
@sergei-maertens sergei-maertens deleted the refactor/3178-page-styles-to-nlds branch November 10, 2023 11:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Update/refactor backend container styles
2 participants