- Contact
- Changelog
- Credits

Changelog

Updates & Changes

New documentation

The new documentation allows faster and easier access to the documentation. Overall we are trying to provide a better experience for developers and designers.

Resources
Components
Support

Search

Full text search with shortcuts for the documentation.

Full Text Search Figma file

Full Text Search

Edit directly via Github

You can now edit the documentation directly via Github. This will create a Pull Request for you.

Component Playground

Button and other components now have a playground to test all possible properties.

Properties and variations for designers
TypeScript definitions for developers
Code examples for developers
Live preview
html code

PWA Guidelines 📱

We are now providing a set of guidelines for PWA development. The Components are now PWA (or Capacitor) ready and can provide an almost native experience. You can find them here.

Icons

Icons are now available in the documentation. For other icons we recommend to use Font Awesome.

Full TypeScript rewrite 👩‍💻

Better Developers Experience by Typescript Support.

Autoimport of the components and description Figma file

Autoimport of the components and description

Autocomplete of props and validation Figma file

Autocomplete of props and validation

Description for each property Figma file

Description for each property

Mono-Repo

Restructured to have a more dynamic mono-repo structure. For example now you can import only the packages you need. For example un/react for the react components and un/styles for the css styles.

New and updated components

Components like Accordion and Callout have been added and components like DatePicker and RadioButton have been rewritten.

Theming

You can now create custom themes and tokens. This enables the Darkmode and the use in projects that not follow the WFP Design System.

Figma integration

Figma is now the source of Truth for all tokens.

Accessibility

The overall accessibility has improved by providing the required aria attributes and tabindex for keyboard navigation.

Hook based elements

The design system now provides react hooks for better customization and and creating reusable elements.

CSS stays

CSS is still the source of truth for the design system. We are not using CSS in JS.

Backwards compatibility

The new version is not 100% backwards compatible. We are working on a migration guide.

Next: React Native support

Naming