2.0.0-beta.5.1

Fixes

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

2.0.0-beta.5

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

Fixes

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

2.0.0-beta.4

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

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

General

• Removed out-of-date content

2.0.0-beta.2

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

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

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

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)

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

Update style of switch form element

1.5.5

IE 11 fix for the nav_search flex style

1.5.4

• 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

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

1.5.2

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

Components

Tooltips

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

1.5.0

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

Icons

• note-outline
• photo-outline

1.4.6

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

Icons

• info
• info-outline
• repeat
• refresh

1.4.4

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

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

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

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.

1.4.0

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

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

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

• 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

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

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

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

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

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

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

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