Release versione v.4.0.0

What's Changed

This release is an effort to migrate the full kit into Typescript, a Storybook update and documentation rewrite.
It has been an incredible effort with the following numbers:

• 16 different contributors and the community contributed to this release
• more than 1000+ files changed
• and 70000+ lines changed (with a net sum of 6000+ lines removed).
• and a huge success for the Hacktoberfest month

Important changes

• Minimal React version required by the kit has bumped to v.16.8.0 . Check your project version before upgrade to v.4.0.0 .
• New types for design-react-kit: the codebase has been entirely rewritten in TS and types are completely difference from 3.x .
• Pager component:
  • size prop has been removed. To restore the previous behaviour use the className prop with the appropriate class.
  • the PagerList has been removed and its content has been merged into the Pager component. Use the props listTag, listClassName in the Pager component.
• Carousel component has been removed with all its relative sub-components.
  • To keep on using the previous component, it is possible to import Carousel from the reactstrap (8.x) package.
• Hero component has changed.
  • new looks is more in line with the Bootstrap Italia guidelines.
  • Check the new documentation page for the Hero component for the new component implementation details.
  • To keep on using the previous component, it is possible to import Jumbotron from the reactstrap (8.x) package.
• Dimmer component changed behaviour.
  • className is not applied any more to the wrapper node.
  • To keep the previous behaviour, set the wrapperClassName prop to true on the component.
• DimmerButton component changed behaviour.
  • The dark prop has a default value of true.
  • To keep the preevious behaviour set the dark prop to false.
• Icon component changed behaviour.
  • icons are now loaded in a lazy way.
  • new preload API provided for the SSR and testing scenarios.
• Progress component changed behaviour.
  • className is not applied any more to the wrapper node.
  • To keep the previous behaviour, set the wrapperClassName prop to true on the component.
• Section component changed behaviour.
  • className is not applied any more to the wrapper node.
  • To keep the previous behaviour, set the wrapperClassName prop to true on the component.

New components

• Select component.
• Toolbar component.
• TimeInput component.
• Megamenu component.
• New component used for the image list layouts: GridList, GridRow, GridItem, GridItemText, GridItemTextWrapper, ResponsiveImage.
• New notification system provided (with test and documentation).

New features for existing components

• Accordion:
  • new background and iconLeft props added.
• BottomNavItem:
  • new url and onLinkClick props added.
  • link prop deprecated.
• Breadcrumb:
  • dark prop for the dark theme added.
• Dimmer:
  • new wrapperClassName prop added.
• Fontloader:
  • new fonts prop added to let load extra fonts other than the ones from the kit.
• Input:
  • new wrapperClassName prop added, replacing the wrapperClass prop (now deprecated).
• Icon:
  • the component can now load external images via url.
• Modal:
  • new withIcon, withLinkList and popConfirm props added for various modal formats.
• ModalHeader:
  • new icon prop added to show an icon at the title level.
• Pager:
  • new total, listTag, listClassName props added.
• Progress:
  • new wrapperClassName prop added.
• Section:
  • new color, wrapperClassName props added.
  • new color values neutral and muted are now deprecated.
• Spinner:
  • new label prop added.
• SkipLinkItem:
  • new focusable prop added for specific scenarios where focus might not be desiderable.
• StepperHeaderElement:
  • new mobile value added to the variant prop.
  • Previous steppers-index value has been deprecated.
  • New appendIcon, prependIcon props added, respectively replacing the now deprecated icon/iconName props.
• TimelinePin:
  • new iconName prop, replacing the icon prop now deprecated.

New Contributors

Thanks to all these new contributors:

• @luco5826 made their first contribution in #700
• @ewedlund made their first contribution in #707
• @ftonato made their first contribution in #741
• @nidble made their first contribution in #743
• @foysalit made their first contribution in #749
• @dependabot made their first contribution in #719
• @edoardolincetto made their first contribution in #750
• @toptalo made their first contribution in #758
• @mrkrash made their first contribution in #762
• @mendaomn made their first contribution in #768
• @va-deem made their first contribution in #781

Full Changelog: 3.3.3...4.0.0

Design React Kit in production? Let us know!

We’re open to any feedback and ready to hear your story of putting Design React Kit in production. In case you’re interested, please reach us on Developers Italia slack or in any way you want.