Support

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 image
Edit directly via Github
Figma image

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 📱

Figma image

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 image

Autocomplete of props and validation

Figma image

Description for each property

Figma image

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

On this page