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
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
andobject-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 tobtn--primary
for backward compatibility. - Redesigned
btn--link
andbtn--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 onenv(safe-area-inset-top)
drawer_footer
’s bottom padding is adjusted based onenv(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
andobject-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
andnav_item_link
are deprecated, consider using a simplebtn
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.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
Gallery
- added
contain: strict
togallery_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 supportedsystem-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.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 toh1
-h6
.
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 withlist_heading
to give the list heading a filled background when used in card content.
Well
- Added
well--primary
,well--success
, andwell--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
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
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 uppage-title
has been changed topage-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 afilter
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 onform-control
.search--dark
and.search--light
were added. Use.search--dark
when the search bar is over the body background. Usesearch--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 childlist_item
s 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 friendstable-row--muted
andtable-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
andtab-bar
can be translated up withwill-shift
andis-shifted-up
classestab-bar
has a box shadow instead of a borderpage-title
is forced to a darker coloraction-toolbar
created as a bottom-fixed toolbar for selection options
Misc
section-title
is forced to the title coloru-fill-dark
fill option addedrotate
motion classes createdu-inline
andu-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 thes
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 ofcard_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
andstat--bordered-right
modifiers to create borders onstat
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 followlabel
s 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 buttonspagination_item
elements are automatically truncated based on viewport size
Search
global-search
classes follow the standard naming convention
Tables
- added the
table--stacked
andtable--stacked-horizontal
modifiers for some awesome responsive upgrades to tables
Tabs
tab_item
is a popular element, used intabbar
andtoolbar
layout elements already, so the styles were refactored to work in a standalonetabs
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 togrid_*
- 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_item
s so the selected border displays over the hairline intab-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