What's new

0.8.0

Documentation

• Redesigned entire site theme to better coordinate with other Digital Toolkit sites

0.7.0

Documentation

• Removed documentation for the following components due to their product-specific nature, lack of representation in the symbol libraries, and/or reliance on the CSS from jha-design:
  • Content
  • Dropdown
  • Gallery
  • Navigation build mode
  • Navigation
  • Table
  • Timeline
• Rewrote version history to more accurately reflect the evolution of the work to date and better prepare for the version 1.0.0 release of the design system
• Minor updates and fixes

Design kit

• Created Sketch symbol stickersheets for the online and mobile symbols to reduce bloat from the libraries and allow for a copy-and-paste workflow

0.6.1

Documentation

• Minor fixes

0.6.0

Documentation

• Updated icon names to match design kit symbols

0.5.1

Documentation

• Updated intro content for theme properties page

0.5.0

Documentation

• Added theme properties page
• Added typography guidelines and examples including type scale, weight, and italic
• Added theming section to select components
• Consolidated content guidelines into “Grammar and Style” page

0.4.1

Documentation

• Minor fixes

0.4.0

Documentation

• Added Abstract inspect links to provide redlines for the following components:
  • Dialog
  • Tab
  • Toast
  • Checkbox
  • Radio button
  • Switch
  • Input
  • Search
  • Pagination
  • Help launcher
  • Thumbnail
• Updated iconography

0.3.0

Documentation

• Added Abstract inspect links to provide redlines for the following components:
  • Avatar
  • Badge
  • Button
  • Button group
  • Card
  • Chip
  • Date
  • Icon
  • List
  • Progress
  • Tooltip
  • Well

0.2.1

Documentation

• Minor fixes

0.2.0

Documentation

• Minor updates and fixes

0.1.0

Documentation

• Updated card documentation
  • 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

0.0.24

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

Visual language

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

Grid

• Adjusted the container padding for large screens
• Tightened the grid gutter on small screens

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

Search

• 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)

Build mode

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

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)

0.0.23

Components

• Update style of switch form element

0.0.22

Components

• IE 11 fix for the nav_search flex style

0.0.21

Components

• Removed chip default background
• Addd default background to gallery items (was transparent)
• Properly display if control is disabled
• dist now includes each icon svg, unbundled

0.0.20

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

Gallery

• Added contain: strict to gallery_item since they are explicitly sized

0.0.19

Visual language

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

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.

0.0.18

Components

Tooltips

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

0.0.17

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

0.0.16

Visual language

Icons

• note-outline
• photo-outline

0.0.15

Visual language

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.

0.0.14

Visual language

Icons

• info
• info-outline
• repeat
• refresh

0.0.13

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

0.0.12

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

0.0.11

Visual language

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.

0.0.10

Visual language

Layout

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

Components

Search

• 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.

0.0.9

Visual language

Icons

• Add the .icon--xs modifier
• New icons!
  • collapse
  • expand
  • arrow-back
  • arrow-forward
  • chevron-down
  • chevron-up
  • reports

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

Search

• .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

Miscellaneous

• 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

0.0.8

Visual language

Grid

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

Icons

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

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

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

Miscellaneous

• 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

0.0.7

• 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.

0.0.6

Components

Cards

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

Tooltips

• Normalized font-style of tooltips

Miscellaneous

• 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

0.0.5

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

Search

• 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

Miscellaneous

• 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

0.0.4

Visual language

• 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.

Icons

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

0.0.3

Visual language

• 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

0.0.1

Visual language

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

Components

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

0.0.2

Visual language

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.