Now you can use Designsystemet regardless of framework
@digdir/designsystemet-web package is now released
You can now use Designsystemet - regardless of technology, in both new and old projects!
With the launch of the @digdir/designsystemet-web package, it has finally become possible to get all the benefits of Designsystemet without having to commit to React as a technology choice. This means both greater freedom and room for experimentation and innovation in new products, but also that older applications can benefit from Designsystemet without major rewrites.
All functionality is written in isolation, so you and your team can both choose what you want to use and not, or gradually adopt Designsystemet without the need for one big rewrite period.
For those of you using the @digdir/designsystemet-react package, there are no breaking changes; everything works as before, but under the hood, it is now built on the web package.
And not only that, the web package can be used independently of the CSS package, so you can build your own button components, and still take advantage of Designsystemet's functionality.
What's included?
The web package ensures that all interactivity and automated universal design that was previously done by the React package is now available to everyone. Much of Designsystemet is already solved with pure web-standard HTML and CSS, while other interactions require a little extra javascript.
<ds-breadcrumbs>- used by Breadcrumbs<ds-error-summary>- used by Error Summary<ds-field>- used by Field<ds-pagination>- used by Pagination<ds-suggestion>- used by Suggestion<ds-tabs>- used by Tabsdata-toggle-group- used by ToggleGroupdata-tooltip- used by Tooltipdata-clickdelegatefor- used by Table and Cardpopover- used by Popover, Dropdowncommand- aka. Invokers Command API used by Dialog and Popover
Why not web components for everything?
Designsystemet emphasizes using web standards. Introducing web components for everything would mean that we lose built-in flexibility and accessibility that pure HTML gives us for free, in addition to worse performance with dependency on Javascript. Modern CSS with class and attribute selectors will in many cases provide better flexibility and performance.
Read more about why we have chosen not to create web components for all components in Designsystemet in this blog post.
Documentation
We are in the process of updating the documentation on designsystemet.no, but in the meantime, you can find temporary documentation for @digdir/designsystemet-web in the README on Github.
Feedback
We are very interested in hearing from you as a user! If you discover any issues or have suggestions for improvements, you can create an issue in our GitHub repository or on Slack.
Contributors