Skip to content

What's new

What's new

2.0.0-beta.5.1

December 18, 2020

Fixes

  • Updated intro content for theme properties page
  • Update README.md to accurately document installation, usage, and build instructions

2.0.0-beta.5

December 15, 2020

General

  • Created site components for search and swatches
  • Refined site styles
  • Replaced external avatar profile references with standard local versions

Content

  • Consolidated content guidelines into “Grammar and Style” page
  • Included reference stack for content style guidelines

Visual language

  • Added theme properties page
  • Added typography guidelines and examples including type scale, weight, and italic

Components

  • Added theming section to select components

2.0.0-beta.4.1

November 04, 2020

Fixes

  • Added landing pages for top-level sections to coordinate with other marketing and documentation efforts

2.0.0-beta.4

November 04, 2020

General

  • Reorganized the documentation sections to better align with the design goals of the system and to efficiently consolidate like content
  • Created discrete pages for form-related elements
  • Revised example callouts to help eliminate content redundancies
  • Added page for future documentation related to Sketch libraries

Visual language

  • Updated iconography section to match what’s currently in the symbol libraries
  • Removed solid icons

Components

  • Updated examples and added inspect links for:
    • Dialog
    • Tab
    • Toast
    • Checkbox
    • Radio button
    • Switch
    • Input
    • Search
    • Pagination
    • Help launcher
    • Thumbnail

2.0.0-beta.3

October 09, 2020

General

  • Increased text size of sample assets
  • Updated typography guidelines to include official design system typefaces
  • Cleaned up component content

Components

  • Updated examples and added inspect links for:
    • Avatar
    • Badge
    • Button
    • Button group
    • Card
    • Chip
    • Date
    • Icon
    • List
    • Progress
    • Tooltip
    • Well

2.0.0-beta.2.1

September 16, 2020

General

  • Removed out-of-date content

2.0.0-beta.2

July 27, 2020

General

  • Removed HTML and CSS samples
  • Re-worded specific code implementation to more general usage and design guidelines
  • Tightened up visual examples and other styling to be more consistent
  • Added a more consistent heading structure to all documentation

2.0.0-beta.1

May 01, 2020

General

  • Created Sass architecture for improved management of site styles and repurposing of style variables
  • Created include and related styles for consistently showcasing best practice images
  • Added Jekyll plugin to allow for a right-rail table of contents on newly-updated component documentation

Components

Card

  • Reworked entire content outline to address broader design considerations such as usage, editorial guidelines, component structure, and variations
  • Replaced live code samples with image assets to allow for greater parity with what’s represented in the Sketch libraries
  • Added links to Abstract to allow for inspection of sample layouts and configurations

2.0.0-beta

January 21, 2020

This is a beta release of the updated system. We’re striving for backward compatibility in most cases but a few deviations happened.

This is based on the unpublished v2 branch of jha.design

Style

  • Introduced a new color palette that is improves contrast and accessibility
  • Things got rounder, by a lot
  • Added Inter, a high quality web font.

Components

Accordion

  • The background color was set to match the topbar-background

Avatar

  • Removed avatar--you modifier
  • Set object-fit: cover and object-position: center on .avatar img and badge
  • Added avatar--shadow modifier
  • Added avatar-stack component for showing multiple avatars in a row

Chip

  • Updated the color properties of all chips

Buttons

  • Removed btn--success style, it’s mapped to btn--primary for backward compatibility.
  • Redesigned btn--link and btn--toggle for more contrast and better focus states
  • btn--icon now shares the same border radius as other buttons

Card

  • Added card--featured modifier
  • A card’s margin-bottom will now match the gutter width of columns

Date

  • Increased contrast in color and weight

Dialogs

  • Fixed an issue with the border radius of the dialog_header

Drawer

  • drawer_header’s top padding is adjusted based on env(safe-area-inset-top)
  • drawer_footer’s bottom padding is adjusted based on env(safe-area-inset-bottom)
  • Fixed an issue with the drawer_backdrop transition

Dropdowns

  • Improved the look of the dropdown indicator shadow by using filter: drop-shadow()
  • Improved contrast of the dropdown_menu_title

Forms

  • Improved contrast of form input fields, checkboxes, and radio buttons

Help

  • Adjusted the position of the help indicator to be closer to the viewport’s edge

Lists

  • Added a focus style f or list items
  • Added a focus style for search--light inputs

Tabs

  • Added tabs--sticky modifier for medium viewport sizes
  • Added a bottom margin to tabs
  • Improved the visibility of the tab_item active state

Thumbnails

  • Set object-fit: cover and object-position: center on .thumbnail img
  • Added thumbnail--shadow modifier

Timeline

  • Improved the look of the arrow indicator shadow by using filter: drop-shadow()

Toasts

  • Removed toast--danger modifier
  • Toasts on small viewports will adjust based on env(safe-area-inset-bottom)

Layout

Build mode

  • nav_item and nav_item_link are deprecated, consider using a simple btn style

Grid

  • adjusted the container padding for large screens
  • tightened the grid gutter on small screens

Navigation

  • added new navigation styles for creating an app with a sidebar navigation

Page header

  • adjusted page header to account for env(safe-area-inset-top)

1.5.6

June 30, 2018

Update style of switch form element


1.5.5

October 19, 2017

IE 11 fix for the nav_search flex style


1.5.4

August 02, 2017
  • remove chip default background
  • add default background to gallery items (was transparent)
  • properly display if control is disabled
  • dist includes each icon svg, unbundled

1.5.3

March 08, 2017

Components

Buttons

  • fixed CSS containment to be a single value of layout

Forms

  • moved order of has-error class to more easily apply to many elements. The default and focused borders now differ in opacity
  • added contain: strict to gallery_item since they are explicitly sized

1.5.2

February 13, 2017

Graphics

Added several new SVG graphics:

  • company.svg
  • institution.svg
  • transfer.svg
  • user.svg
  • users.svg

Components

Dialogs

  • added top and bottom margins back to dialog_title to normalize it when the element is a heading, div, or anything else.

Misc

  • swapped BlinkMacSystemFont for the newly supported system-ui in Chrome. Safari continues to use -apple-system.

1.5.1

January 31, 2017

Components

Tooltips

  • v1.5.0 mistakenly omitted tooltips. But they’re back now!

1.5.0

January 30, 2017

Components

Buttons

  • Reintroduced .btn--neutral for use next to input fields that are children of .search--dark

Dialog

  • Removed contain property from .dialog_inner to allow overflow

Forms

  • Changed source order of .form-control--inline so that it can be applied to .select elements

Images

  • Included graphics for use in Banno Online

Misc

  • Removed themes
  • Removed opt-in @import feature since it’s not officially part of Sass
  • Removed fonts

1.4.7

December 22, 2016

Icons

  • note-outline
  • photo-outline

1.4.6

December 06, 2016

Icons

  • bookmark
  • bookmark-alt
  • event-available
  • event-busy
  • event-not-available

Components

Dialog

  • removed top and bottom margins from dialog_title to normalize it’s style if the class is applied to h1-h6.

1.4.5

October 06, 2016

Icons

  • info
  • info-outline
  • repeat
  • refresh

1.4.4

September 30, 2016

Components

Date

  • Introducing the date component. It’s a simple element that displays the month and day in a small card-like container. It’s most useful aligned to the left in lists.

List

  • section-heading can be combined with list_heading to give the list heading a filled background when used in card content.

Well

  • Added well--primary, well--success, and well--danger color modifiers

1.4.3

September 21, 2016

Components

Dialog

  • Created the dialog_backdrop--fill modifier to apply background images to a backdrop
  • Modified the dialog_header--profile styles to correct some visual issues in border radius and other misc items
  • Created the dialog_inner--sm modifier for dialogs that should stay small on mobile

List

  • List headings have a bottom border and increased margin-top

1.4.2

September 15, 2016

Icons

  • The swap icon has been redesigned

Components

Timeline

  • Alignment of the timeline activity type circle and the adjacent arrow have been tweaked slightly. You’re welcome.

1.4.1

September 01, 2016

Layout

  • The minimum media query for setting the max-width of .container was updated to a $viewport-lg-min

Components

  • Set the text color to white instead of 60% white

Cards

  • Created .card--summary modifier. This makes a small, left-aligned card that can have card media and content displayed in a row rather than columns.

1.4.0

July 26, 2016

Layout

  • Navigation is now a bold color instead of white by default
  • .nav is now the base navigation class to apply to headers and toolbars
    • .nav--header is the top-most header on tablet and desktop views
    • .nav--tab-bar is the footer tab-bar in mobile views and is directly below the .nav--header on table and desktop
    • .nav--toolbar is directly below the .nav--header and is an inverted color (white)
    • .nav--actions is similar to the .nav--toolbar but lives at the bottom of the page. It’s typically hidden by default and slides up into view
    • .nav_item and .nav_group place links and other components along each toolbar
    • .nav_item_link is a clickable navigation item
    • check out the docs for more examples and modifiers
  • Grid spacing has been halved
  • .viewport height has been adjusted to account for new navigation styles
  • .invert-viewport reverses the top margin to shift content up
  • page-title has been changed to page-header_title to better match component naming patterns
  • Introducing page-header_back to apply to the “back” button
  • Build-mode has been simplified to take advantage of the modular .nav elements.
  • .build-mode_panel behaves like a drawer on mobile views and is hidden by default. It can be toggled with .is-visible

Components

Accordion

  • The new accordion component is used for mobile views to condense large bodies of information that are typically presented in the sidebar of the desktop view.

App list

  • Fixed an issue with border placement

Buttons

  • Button fills have been changed. These are still controlled by variables
  • Disabled buttons look less clickable

Forms

  • .form-control fills and borders in default and focus states are changed.
  • Introducing .select to style select elements. You no longer need to wrap them in a filter element
  • Switches were made smaller but the hit-area remains the same
  • Disabled form elements look less clickable

Icons

  • Add the .icon--xs modifier
  • New icons!
    • collapse
    • expand
    • arrow-back
    • arrow-forward
    • chevron-down
    • chevron-up
    • reports
  • .search_input now depends on form-control
  • .search--dark and .search--light were added. Use .search--dark when the search bar is over the body background. Use search--light when placing search in .nav--header or .nav--tab-bar.
  • Removed unused .global-search

Tables

  • .table-row, .table-row--standout and .table-row--muted were added

Timeline

  • Some timeline styles were adjusted

Plugins

  • Added the datepicker plugin. This is used in Marketing, People, and History.
  • Removed unneeded modal styles

Misc

  • Using CSS Containment to improve CSS rendering performance
  • Enabled CSS Variables (custom properties) to be on by default. --primaryAppColor is currently the only property that is set.
  • Removed fill attributes from SVG icons
  • Updated the Sketch stickersheet

1.3.3

July 05, 2016

Components

Badges

  • normalized font weight

Buttons

  • default background fill changes on buttons, they’re decidedly brighter
  • disabled button text is even lighter

Drawer

  • introducing drawer--auto to reset the left position so that the backdrop is clickable

Forms

  • control--inline sets a control element to inline-block
  • design for indeterminate checkboxes

Help

  • added z-index so that it doesn’t get tucked behind content

Lists

  • introducing list--xs, which reduces the vertical padding on child list_items
  • list_divider added to…. divide things

Tables

  • checkboxes contained in tables are automagically adjusted to fit in the cells better
  • table-row and it’s friends table-row--muted and table-row--standout modify the appearance of table rows

Well

  • added display: block incase it wasn’t set

Grid

  • grid modifiers --tight and --no-gutter only affect their direct descendants

Navigation

  • navigation and tab-bar can be translated up with will-shift and is-shifted-up classes
  • tab-bar has a box shadow instead of a border
  • page-title is forced to a darker color
  • action-toolbar created as a bottom-fixed toolbar for selection options

Misc

  • section-title is forced to the title color
  • u-fill-dark fill option added
  • rotate motion classes created
  • u-inline and u-inline-block utility classes added
  • small spacing utilities created, like u-m-t-sm

Icons

  • delete-forever
  • delete-sweep
  • money-alt
  • restore-page
  • save
  • swap
  • tablet-android
  • tablet-ios
  • transfer-alt

1.3.2

January 27, 2016
  • Dialogs and drawers (and their backdrops) didn’t include a unit of time in their transitions when the value was 0 which caused issues in Chrome. 0 time values now include the s unit.
  • Reversed the direction of dialogs on small screens so that it translates in from the bottom. Dialogs on larger viewports continue to translate in from the top.

1.3.1

January 22, 2016

Components

Cards

  • btn-group component is now properly positioned inside of card_header

Tooltips

  • normalized font-style of tooltips

Misc

  • removed backdrop-filter property from many components due to many implementation differences between Chrome Canary and Safari
  • removed IE 9 hack to hide native dropdown arrows
  • changed .content_push overflow to a clearfix
  • added stat--bordered-left and stat--bordered-right modifiers to create borders on stat elements

1.3.0

January 06, 2016

Components

New components

  • Help launcher
  • Wells

Dialogs

  • fixed some visual defects caused by wonky IE implementations of flexbox

Forms

  • filter elements that follow labels now have the proper margin

Lists

  • added the list_item--hover modifier
  • list_item_action has a smaller minimum width

Pagination

  • pagination_item elements are more like buttons
  • pagination_item elements are automatically truncated based on viewport size
  • global-search classes follow the standard naming convention

Tables

  • added the table--stacked and table--stacked-horizontal modifiers for some awesome responsive upgrades to tables

Tabs

  • tab_item is a popular element, used in tabbar and toolbar layout elements already, so the styles were refactored to work in a standalone tabs container

Misc

  • switched from :before and :after to ::before and ::after
  • removed several uses of backdrop-filter because Chrome Canary implemented it and it just looks rough
  • found a few references to old col-* class names and converted to grid_*
  • fallback to BlinkMacSystemFont instead of Open Sans

1.2.4

December 07, 2015

Icons

  • attachment
  • check-all
  • date-range
  • devices
  • fingerprint

CSS

Removed text-align: center from th so that the .text--* alignment utility classes work. To keep table headers aligned to the left by default, thead now has text-align: center.


1.2.3

October 16, 2015

CSS

  • more tweaks to the hairline mixin. It’s in a good place now.
  • switch to updated media-query modifiers in the angular-ui plugins
  • vertically align input-group_addon elements with all the things
  • create a new stacking context for tab_items so the selected border displays over the hairline in tab-bar
  • fixed a typo in declaring the disabled button styles

1.2.2

October 13, 2015

CSS

Refactored the hairline mixin which affects these components:

  • list_item (and modifiers)
  • message
  • drawer
  • navigation

The results is more consistent appearance between platforms, browsers, and display densities as well as less CSS, overall.


1.2.1

October 15, 2015

CSS

Variables

  • added variables for opting in or out of including components in final build

Buttons

  • allow for progress-circular inside of buttons with new btn options
  • removed hardcoded opacity value for disabled buttons
  • updated .btn–toggle active color

Plugins

  • multiple growl-items now display properly
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.