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.

Sign up for GitHub

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

Jump to bottom

Remove own CSS that conflicts with NL Design System #454

Closed
5 tasks done
sergei-maertens opened this issue Jun 13, 2023 · 2 comments · Fixed by #451, #570 or open-formulieren/design-tokens#36
Closed
5 tasks done

Remove own CSS that conflicts with NL Design System #454

sergei-maertens opened this issue Jun 13, 2023 · 2 comments · Fixed by #451, #570 or open-formulieren/design-tokens#36
Assignees
@sergei-maertens
Labels
NL Design System owner: utrecht
Milestone
SDK 2.0

Comments

@sergei-maertens
Copy link
Member

sergei-maertens commented Jun 13, 2023 •
edited
Loading

@sergei-maertens sergei-maertens added this to the SDK 1.4.0 milestone Jun 13, 2023
@sergei-maertens sergei-maertens self-assigned this Jun 13, 2023
@sergei-maertens sergei-maertens mentioned this issue Jun 13, 2023
Merged
5 tasks
@sergei-maertens sergei-maertens modified the milestones: SDK 1.4.0, SDK 1.5.0 Jun 20, 2023
@sergei-maertens sergei-maertens modified the milestones: SDK 1.5.0, SDK 1.6.0 Aug 22, 2023
@sergei-maertens sergei-maertens moved this from Todo to In Progress in Development Oct 19, 2023
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
✨ [#454] Isolate edit grid item component
d36c30e 
NL DS recommends applying media queries to apply the vertical behaviour - they
are not set yet on the responsive strategy to use (container queries are also
an option but these are not widely supported enough). So, this requires us to
use their sass mixins and write some supporting CSS ourselves, which means we
unfortunately cannot yet go without any custom CSS for edit grid yet.

Additionally, our edit grid items align the buttons to the right (for ltr
documents), and there is no design token yet to control the justify-content
CSS property - this may get contributed to upstream.
@sergei-maertens sergei-maertens mentioned this issue Oct 19, 2023
Merged
3 tasks
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
♻️ [#454] Refactor ChooseProductStep to use EditGridItem component
aa6fe70
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
♻️ [#454] Refactor edit grid formio template to use utrecht button gr…
9b77ac6 
…oup CSS components
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
🔥 [#454] Remove dead CSS for edit group actions
2e80859
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
♻️ [#454] Refactor React editgrid into isolated component
9f24bc7 
* Updated the ChooseProductStep from appointments to use the component
* Add stories for with/without add button
* Centralized the markup/class names for edit grid so we can refactor
  more to NL DS components
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
♻️ [#454] Refactor edit grid items markup
0e160a1 
* use fieldset and legend for proper document outline/structure,
  improving the accessibility
* we still need custom CSS/component for the edit grid/edit grid item,
  but now the styles are properly parametrized with design tokens
  and different themes can adapt
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
♻️ [#454] Remove custom hardcoded styles for add-button
519a545 
Instead, style the edit grid to be display flex (column) and make
gap customizable.
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Oct 19, 2023
@sergei-maertens
💄 open-formulieren/open-forms-sdk#454 -- Add design tokens for editgr…
5a321c8 
…id component
@sergei-maertens sergei-maertens mentioned this issue Oct 19, 2023
Merged
sergei-maertens added a commit to open-formulieren/design-tokens that referenced this issue Oct 19, 2023
@sergei-maertens
💄 open-formulieren/open-forms-sdk#454 -- Add design tokens for editgr…
f51eda9 
…id component
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
🎨 [#454] Replace hardcoded design tokens with built theme
69d1b82 
TODO: update package.json when other PR is merged and published
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
📝 [#454] Document breaking change in design tokens
e0ee350
sergei-maertens added a commit that referenced this issue Oct 19, 2023
@sergei-maertens
🚸 [#454] Ensure role=group is only set if multiple buttons are displayed
f37a0d2
@github-project-automation github-project-automation bot moved this from In Progress to Done in Development Oct 23, 2023
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
♻️ [#454] Remove custom hardcoded styles for add-button
bd05db4 
Instead, style the edit grid to be display flex (column) and make
gap customizable.
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
🎨 [#454] Replace hardcoded design tokens with built theme
bba8c76 
TODO: update package.json when other PR is merged and published
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
📝 [#454] Document breaking change in design tokens
ec087d1
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
🚸 [#454] Ensure role=group is only set if multiple buttons are displayed
fd998f1
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
⬆️ [#454] Bump design tokens to 0.42.0
21a0a0c
sergei-maertens added a commit that referenced this issue Oct 26, 2023
@sergei-maertens
👌 [#454] PR feedback round 1
38751c4
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
✨ [#454] Isolate edit grid item component
880ef6c 
NL DS recommends applying media queries to apply the vertical behaviour - they
are not set yet on the responsive strategy to use (container queries are also
an option but these are not widely supported enough). So, this requires us to
use their sass mixins and write some supporting CSS ourselves, which means we
unfortunately cannot yet go without any custom CSS for edit grid yet.

Additionally, our edit grid items align the buttons to the right (for ltr
documents), and there is no design token yet to control the justify-content
CSS property - this may get contributed to upstream.
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Refactor ChooseProductStep to use EditGridItem component
f735fcb
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Refactor edit grid formio template to use utrecht button gr…
907f397 
…oup CSS components
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
🔥 [#454] Remove dead CSS for edit group actions
0dd09ae
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Refactor React editgrid into isolated component
838431e 
* Updated the ChooseProductStep from appointments to use the component
* Add stories for with/without add button
* Centralized the markup/class names for edit grid so we can refactor
  more to NL DS components
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Refactor edit grid items markup
4652a24 
* use fieldset and legend for proper document outline/structure,
  improving the accessibility
* we still need custom CSS/component for the edit grid/edit grid item,
  but now the styles are properly parametrized with design tokens
  and different themes can adapt
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Remove custom hardcoded styles for add-button
9368d05 
Instead, style the edit grid to be display flex (column) and make
gap customizable.
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
🎨 [#454] Replace hardcoded design tokens with built theme
fbdcfba 
TODO: update package.json when other PR is merged and published
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
📝 [#454] Document breaking change in design tokens
6c681e9
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
🚸 [#454] Ensure role=group is only set if multiple buttons are displayed
519e65c
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
👌 [#454] PR feedback round 1
bc9d4bc
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
⬆️ [#454] Bump to design tokens 0.45.0
c6be014 
This release contains the (correct) design token values for the edit
grid
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
✨ [#454] Implement edit grid react component and styles
1474ace 
This sets up the edit grid as a proper themable component using
design tokens.
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Organize button group styles in more centralized location
ed258dd
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
♻️ [#454] Refactor edit grid usage to new component/markup
5d13aff 
* Replaced the ChooseProductStep React component to use the new
  EditGrid component
* Updated the templates for formio edit grid to emit valid markup and
  make use of our edit grid component classes
sergei-maertens added a commit that referenced this issue Oct 31, 2023
@sergei-maertens
🌐 [#454] Update translations
d59125d
@github-project-automation github-project-automation bot moved this from Implemented to Done in Development Oct 31, 2023
@sergei-maertens
Copy link
Member Author

Need to check backend still, am now working on the migration

@github-project-automation github-project-automation bot moved this from Done to In Progress in Development Oct 31, 2023
@sergei-maertens
Copy link
Member Author

PR created to update the backend since the buttons were indeed broken again :)

@github-project-automation github-project-automation bot moved this from In Progress to Done in Development Oct 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sergei-maertens sergei-maertens

Labels
NL Design System owner: utrecht
Projects
Development
Archived in project
Milestone
SDK 2.0
2 participants
@joeribekker @sergei-maertens