Current Release

Check out the latest release of Responsive UI, use a template to get started, and reference sample applications to start building with Responsive UI today.

Prerequisites for loading this release

• Register to access the Responsive UI packages
• Understand which Responsive UI packages to install

Release notes

• You now have read-only access to all Responsive UI source code repositories, including the web components, Angular wrappers, sample apps, and documentation.
  • You must have access to Jack Henry GitHub to view these repos. Contact the help desk if you need this access. All repos have been set up as internal, so anyone with access to Jack Henry GitHub can view them.
• All Angular components have been replaced with Angular-based wrappers around the Responsive UI web components.
  • This was an important step as it gets us down to a single codebase: the web components.
  • The Angular components now simply wrap the web components, translating between the Angular wrapper API and the web component API internally.
  • The Angular wrapper APIs have not changed during the conversion from components to wrappers.
  • This move also allowed us to get away from older technologies, including jQuery and Bootstrap.
  • IMPORTANT: Follow these one-time upgrade instructions if you’re importing the jharesponsive package today.
• All visuals were updated to more closely align with the new One Jack Henry marketing styling, including updated colors and fonts.
  • We had made these same changes to the documentation site in the previous release. The two are now in alignment.
• The default Pacific theme now includes both light and dark mode support within one theme.
  • You should bundle this theme file as your default theme in order to ensure proper light/dark mode support.
• Added a new light / dark mode selector dropdown to the right of the header component, with options for “Always use light mode”, “Always use dark mode”, and “Use device settings”.
  • If the user selects “Always use light mode” or they select “Use device settings” and their device is set to light mode, they will see the colors from the currently selected theme.
  • If the user selects “Always use dark mode” or they select “Use device settings” and their device is set to dark mode, they will see the same dark mode appearance regardless of which theme is loaded, assuming you’re bundling Pacific as your default theme. So dark mode appearance always looks the same.
  • This selector is optional, controlled by a new displayLightDarkModeSelector Boolean property in the rui-header-right component and jhaDisplayLightDarkModeSelector property in the jha-header-right Angular wrapper.
    • If you wish to force light mode for all users, hide the light/dark mode selector as described above and add the “light” CSS class to your app’s html tag.
    • If you wish to force dark mode for all users, hide the light/dark mode selector as described above and add the “dark” CSS class to your app’s html tag.
• You now no longer have to place content inside a display block.
  • The previous styling required all content to be placed within a display block, whether the page actually needed a display block or not.
  • The new styling supports content either inside or outside a display block:
    • If the page doesn’t include a display block, it displays with the content background color (pure white in light mode).
    • But if the page does include a display block, the page adopts a slightly darker background color to visually contrast with the display blocks.
  • Here’s an example of a view that does not use display blocks: https://jkhy.github.io/responsive-ui-samples-awc/#/ResponsiveTable
  • And here’s another example that does use display blocks: https://jkhy.github.io/responsive-ui-samples-awc/#/Crud
• Added more CSS variables that can be used as control points, including the function view padding, display block padding, content text size, and fixed layout gap size.
  • Our old “data dense” concept just didn’t go far enough in this area.
  • This should help products with custom spacing needs to dial in the exact spacing needed, at the app level or even at the individual view level.
  • You can test this out here: https://jkhy.github.io/responsive-ui-samples-awc/#/DataDensity
• You can now use icons from outside the Responsive UI icon library.
  • This includes both SVG-based icons and font-based icons.
  • See Icons implementation for details.
• Button corners were rounded for a more current appearance: https://jkhy.github.io/responsive-ui-samples-awc/#/Buttons
• The progress bar was slimmed down for a more current appearance: https://jkhy.github.io/responsive-ui-samples-awc/#/ProgressBar
• Modified how the nav bar displays at mobile and tablet size (screen width of 1024px or smaller).
  • Instead of pushing the content to the right, the mobile nav bar now hovers over the content while displayed.
• Added mega menu support to mobile nav.
  • Mega menu items display in a vertical list within the nav bar when expanded at mobile and tablet size (screen width of 1024px or smaller).
• All CSS variables are now prefixed with “rui-” for name spacing, to avoid conflicts with CSS variables from other libraries.
  • For example, a CSS variable previously named --line is now named --rui-line.
• Added a new isChecked property to the rui-header-dropdown-option component, for displaying a checkmark next to certain menu items (jhaIsChecked property in the jha-header-dropdown-option wrapper).
• Added new showTabByPosition(tabPosition) and showTabByLabel(tabLabel) methods to the rui-tabset web component.
• Updated the rui-breadcrumb-dropdown component to include the dropdown arrow caret within the clickable area.
• Updated the Dropdown Button component doc, Split Button component doc and Popup Button component doc to show addition of destructive/Destructive as available value for buttonStyle/jhaButtonStyle property.
• The deprecated jhaAppearance and jhaDisableAnimations properties in the jha-app Angular component have been removed as of this release.
• The expand-on-hover support that was previously in the Angular jha-nav component was omitted when we built the rui-nav web component, so that functionality is no available in the Angular wrappers, since jha-nav now wraps rui-nav.

Previous releases

You can find a list of archives of this documentation site for previous releases here.

Note that:

• Enhancements are only added to the next upcoming release that we’re working towards. Enhancements will not be added to previous releases.
• Bug fixes will be provided for previous releases that were published up to one year prior to the date of the bug report.
  • After that you’ll need to move to a more current release.
• For now, all prior releases will remain available for installation from the npm server and will not be removed.
• We’ll keep archived copies of the Responsive UI site available for the last three calendar years.