PUI 7.0 Release
The goals for the 7.0 release are:
- Update and consolidate Buttons and Dropdowns
- Replace Font Awesome Icons with SVGs
- Make it easier for people to use SVGs
The Big Changes
- Buttons and Dropdowns are visually redesigned
- Button and Dropdown React Components are all new, see the conversion guide below
- Iconography React component now uses SVGs instead of Font Awesome
- Deprecated Gravatars, Checked Lists, and non-React Back To Top Component
- Deprecate current spinners component. New spinners are waiting to be prioritized.
The buttons all have updated styles, and there are fewer of them.
DefaultAltButtonis removed. Use
DefaultButtoninstead. You may want to set the
altprop to true. If you still want the shadows, use box shadows
LowlightButtonis removed. It can be approximated with
flatset to true
HighlightButtonis renamed to
HighlightAltButtonis removed, just use
PrimaryButton. Marketing sites may want to use
BrandButton. Web apps are discouraged from using
There are no longer 7 dropdown components (
HighlightDropdown, etc). There is only
Dropdown component takes many React props. To recreate the old
LinkDropdown, you can use
link props set to true.
Most of the other old dropdown styles have been removed. There are basically only three launcher styles now: default, flat, and split.
- Use the
srcprop instead of the
Iconcomponent will inline SVGs instead of using Font Awesome. Many of the icons may have different names and different layout properties.
- Webpack svg-react-loader is now required for iconography. If you are using pui-react-tools, you will need to
npm installthe webpack loaders and upgrade pui-react-tools to version ^2.0.0.
- Icons no longer take the
sizeprop. Instead, they are sized at the local font size. If you want an icon with a different size, you can change the font size around that icon. For example, if you set the font size to 24px, the SVG should be 24px wide and 24px tall. You can also provide a
heightif that is more appropriate.
If you are using iconography, but not using React, it will be more difficult to use. All of the SVGs are inside of the
pui-css-iconography node module.
If you would like to use an icon, you can use the SVGs directly from the node module.
If you do not mind black icons, you can serve up the SVGs and use them inside of
If you need to color your icons, you need to copy the content of the SVG and put it directly into your html. CSS can then be used for colors.
Alerts look the same, but the css has changed from float to flexbox. If you have a multi-line alert, you may need to add an extra div directly inside of your alert wrapping your old contents. Also, the close button is no longer float: right, so it needs to be at the end of your alert html.
There are more breaking changes than usual in this release, it is possible we missed something. Please file issues on github or ask questions on the pivotal-ui slack channel.
PUI 6.0 Release
The goals for the 6.0 release are:
- Remove React Bootstrap Dependency
- This should make it much easier for teams to choose their version of React without causing dependency conflicts.
- This will also make it easier in the future to use non-Bootstrap designs.
- Add a couple new React Components
The Big Changes
- Alert: The
dismissableprop is now just a boolean. If you want a function that is called on dismissal, use the
- Modals: The
bsSizeprop has been renamed to
- React Bootstrap: Alerts, Grids, Modals and Tabs are now entirely different code paths. The goal was to replace all old functionality, but undocumented behavior may have changed.
PUI 5.0 Release
- The 5.0 release is a bump from React 14 to React 15.
- If you have no warning messages in React 14, the React 15 upgrade should be simple.
- All of the newest features in Pivotal UI are in the 4.0 release.
PUI 4.0 Release
The goals for the 4.0 release are:
- Add and improve React components as needed by teams
- Consolidate similar React components
- Consolidate some styles
- Improved CSS building
The Big Changes
typographyReact component has been removed in favor of native headers
- Header font weights default to normal
- base text color has been darkened to improve contrast
OverlayTriggernow supports manual mode and does not use React Bootstrap
triggerprop is now a string and not an array
Tooltipis all new in order to work with new
- Some components have been renamed, see conversion guide
- CSS scales, traffic lights, and fancy select have been removed
- React components are all ES6 classes for easier subclassing
- pui CSS node modules can be directly imported with Webpack loaders
pui-react-typography is no longer supported.
The headers will now be less bold. This is intended by the designers.
If your application wants headers to be bigger and bolder, add CSS in your own application.
- Look for
- Stop using the
fancy-selectCSS class, just use regular selects. If you want a fancy chooser, consider dropdowns.
- Provide a class to Input with the
inputClassNameprop instead of
- DropdownItem no longer automatically wraps content in an
atag unless an
hrefprop is provided.
- The markup generated by tooltips is different. The classes are prefixed with 'pui-', like 'pui-overlay'.
We would like to deprecate Dr Frankenstyle due to its performance issues and maintenance cost.
In PUI 4.0, you can use Webpack loaders instead.
The combination of
recreates the functionality of Dr Frankenstyle in much less time.
See the Webpack Config in React Starter.
In React Starter
NODE_ENV=production gulp assets will output a
in addition to any fonts and images needed by that CSS into