Enhancements
- Migrate from Node Sass to Dart Sass
Fixes
- Fixed issue related with use math.div for division in Sass
New
- Dialog - Dialog doc site page added in Components
Enhancements
- Feedback Messages - Add styles for
<a>
and <p>
tags.
- Brushes - All Spirit Doodle and Watermark assets have been added to brush sprites, but not yet documented on this doc site.
Fixes
New
Enhancements
- Doc Site Navigation - Now persistently visibile across all pages
- Home Page - New homepage design including navigation and layout changes
- Icon Only Button - Code - styles updated along with updates to button macro to allow for enhancements to icon only button - including
aria-label
and title
- Long Form Text
- Sizes Section added - defines classes used to output variants of font size
- Code Reference added - table defining alignment and sizing classes that can be used with long form text
Fixes
- Home Page - Fix hero wave svg appearing broken on IE11
- Long Form Text -
.spirit-body-text-s
, .spirit-body-text-m
, and .spirit-body-text-l
classes (for text size) added to long form text in doc site. References to .spirit-body-s
, .spirit-body-m
, and .spirit-body-l
were removed
- Long Form Text Classes - Code -
spirit-body-text-s
, spirit-body-text-m
, and spirit-body-text-l
classes (for text size) added to long form text in codebase. spirit-body-s
, spirit-body-m
, and spirit-body-l
were incorrectly being used
- Please note: both long form text classes mentioned here are enabled for this release, but
spirit-body-
classes will be deprecated in the next major release
- Form Checkbox Icon - Code - Checkbox icons updated to be white over blue when selected to match original designs for better contrast and usability
- Doc Site General - Long form text class was written incorrectly as
.long-form-text
instead of .spirit-long-form-text
Enhancements
- Button - Update font weight of buttons text to
$spirit-font-weight-semibold
for better layout componsitions
- Form - Update font weight of input and text-area elements to
$spirit-font-weight-regular
for better form consistency.
Fixes
- Form - Fixed issue with checkbox icons not being accessible when in selected state.
New
- Home Page - Home Page doc site page added. This update includes hamburger navigation and layout updates, general doc site style updates, and content updates.
- Card - Card doc site page added in Components
- List - List doc site page added in Components
- Page Shell - Page Shell doc site page added in Components
- Depth - Depth doc site page added in Visual Style
- Image Ratio - Token variables added for default image size ratios
- Image - Code - Image macro and sink page added to library for consistent image markup output and styles when
object-fit
is used. Macro now used in card and list components
- Form Input with Button - Code - Library sink page and styles added along with updates to form field group macro to allow for form input with a button
- Password Input with Toggle - Code - Library sink page and styles added along with updates to form input macro to allow for password input with toggle
Enhancements
- Card - Update image output and styles using new Image macro in library for enhanced consistency and xbrowser fixes
- Card - Update images and text used for card demo purposes for better quality and to match existing JDRF.org content
- List - Update image output and styles using new Image macro in library for enhanced consistency and xbrowser fixes
- Long Form Text - Alignment classes and styles added
- Forms - Refine form grid to use maintain 16px gutters across all breakpoints
- Icons - Add JDRF icon to icon library
- Getting Started for Designers - Content and links updated
- Form Legend - Style - Override default browser styles in reset
- Spirit Button - Style - When in Long Form Text, remove default browser margin in library sink page
Fixes
- Icons - Update provided svg icons to all use paths instead of strokes for cross browser compatibility and more reliable styling and output
Enhancements
- Form - Using npm package inputmask, added the ability to add date and phone input masks
- Long Form Text - Modified margin & padding to refine the design for small screens
- Icons - added
more-vertical
, log-in
, log-out
, list-ordered
icons
Fixes
- Long Form Text - fix style bug when
.spirit-button
contained within long form text when also within .spirit-context--brand
container where button text was unreadable and the same as the background
- Forms - fix checkbox and radio buttons not checking in some browsers
Deprecated
- Tile - removed from system
New
- Home Page - Home Page doc site page added. This update includes hamburger navigation and layout updates, general doc site style updates, and content updates.
- Card - Card doc site page added in Components
- List - List doc site page added in Components
- Page Shell - Page Shell doc site page added in Components
- Depth - Depth doc site page added in Visual Style
- Image Ratio - Token variables added for default image size ratios
- Image - Code - Image macro and sink page added to library for consistent image markup output and styles when
object-fit
is used. Macro now used in card and list components
- Form Input with Button - Code - Library sink page and styles added along with updates to form field group macro to allow for form input with a button
- Password Input with Toggle - Code - Library sink page and styles added along with updates to form input macro to allow for password input with toggle
Fixes
- Card Grid - fix ie11 rendering of cards (xbrowser)
- Container - fix style bug on wave background padding
New
- Home Page - Home Page doc site page added. This update includes hamburger navigation and layout updates, general doc site style updates, and content updates.
- Card - Card doc site page added in Components
- List - List doc site page added in Components
- Page Shell - Page Shell doc site page added in Components
- Depth - Depth doc site page added in Visual Style
- Image Ratio - Token variables added for default image size ratios
- Image - Code - Image macro and sink page added to library for consistent image markup output and styles when
object-fit
is used. Macro now used in card and list components
- Form Input with Button - Code - Library sink page and styles added along with updates to form field group macro to allow for form input with a button
- Password Input with Toggle - Code - Library sink page and styles added along with updates to form input macro to allow for password input with toggle
Enhancements
New
Enhancements
- Icons
- Typography - simplified font loading
- Long Form Text - modified heading spacing
New
- Color Tokens, Sketch, and documentation
- Icons Code, Sketch, and documentation
- Space Tokens, Sketch, and documentation
- Buttons Code, Sketch, and documentation
- Cards - Code and Sketch
- Containers - Code and Sketch
- Forms - Code and Sketch
- Feedback Messages - Code and Sketch
- Grids - Code and Sketch
- Links - Code and Sketch
- Lists - Code and Sketch
- Long Form Text - Code and Sketch
- Tiles - Code and Sketch
- Vertical Navigation - Code and Sketch
- Elevation - Tokens
- Typography - Tokens