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

[#2473] Convert main buttons to NLDS #1212

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

jiromaykin
Copy link
Contributor

@jiromaykin jiromaykin commented May 16, 2024

issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2473

This PR works with this NPM version from PR nr. 8 in our design-token package.

Buttons are complex, information-heavy little atomic components, and in the case of NLDS we don't just style Inputs and true Button tags but also < a href...> anchor tags and make them look like buttons.

Documentation on Utrecht true buttons: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css-button-appearance--docs
Documentation on Utrecht link-that-looks-like button: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button-link--docs

In future users need to be able to change the colors and fonts of OIP buttons where they are similar to NL/Utrecht/Denhaag buttons. But all our other styling like the 'textless', 'pill', 'small', and 'big' buttons (etcetera, etcetera) just have differences in spacing so that is why we are replacing the 'button' class with --oip here so we can still use all of the unique spacing values like &--icon-after.

Unique modifiers in OIP that Utrecht doesn't have:

  1. &--small,
  2. &--big,
  3. &--fullwidth,
  4. &--spaceless,
  5. &--transparent,
  6. &--open,
  7. &--bordered,
  8. &--pill,
  9. &--disabled,
  10. &--danger,
  11. &--danger-borderless ,
  12. &--error,
  13. &--primary-close,
  14. &--error-confirm,
  15. &--borderless,
  16. &__text-wrapper

@codecov-commenter
Copy link

codecov-commenter commented May 16, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.31%. Comparing base (0f9f451) to head (5a12f64).
Report is 1 commits behind head on develop.

Additional details and impacted files
@@           Coverage Diff            @@
##           develop    #1212   +/-   ##
========================================
  Coverage    94.31%   94.31%           
========================================
  Files         1066     1066           
  Lines        40063    40063           
========================================
  Hits         37785    37785           
  Misses        2278     2278           

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

@jiromaykin jiromaykin added the wip Work in progress label May 23, 2024
@alextreme alextreme added the on hold Pause working for now, continued after decisions label May 27, 2024
@jiromaykin jiromaykin removed the on hold Pause working for now, continued after decisions label Jul 11, 2024
@jiromaykin jiromaykin force-pushed the feature/2473-NLDS-buttons branch from 41a0058 to b20e35c Compare July 11, 2024 14:03
@jiromaykin jiromaykin force-pushed the feature/2473-NLDS-buttons branch from df0e373 to 5a12f64 Compare November 7, 2024 09:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wip Work in progress
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants