Changelog (deprecated)

This page has been deprecated and is maintained only as an archive. Please visit the Releases page for the most recent updates.

Sage release notes

0.14.0

Added

• Rails template markup examples added for elements:
  • Live stream wrapper
  • Table
  • Card
• Added a base Markdown template for new Pull Requests

Updated/Fixed

• Corrected hidden content bug in Panels with iOS
• Revised default icon font-size to use 1em instead of 1rem
• Consolidated sage-btn--danger element into sage-btn

0.13.0

Added

• New Billboard Object
• Rails template markup examples added for elements:
  • Radio
  • Switch
  • Label
  • Form input
  • Form textarea
  • Loader
  • Danger button

Updated/Fixed

• Updated the panel object to having both a header and a footer
• Fixed error and refactored banner.js

0.12.0

Added

• New Banner object for global announcements (see Alert entry below)
• Skip to content link
• New modifiers for buttons: sage-btn--small and sage-btn--link

Updated/Fixed

• Alignment and spacing on the pagination object
• "Banner" for in-page, user-driven actions renamed to Alert
• Revised documentation structure with semantic elements
• Links in sidebar rearranged to reflect updated URLs
• sage-input error messaging & minor refactor to allow simpleform hints
• sage-switch error messaging
• Button margins removed

0.11.0

Added

• Vertical alignment options with grid
• Show/hide individual columns with grid
• Pagination Object

Updated/Fixed

• Grid documentation updated: examples and guide
• Updated Avatars to consolidate scaling into the tiling modifier
• Patched stray margin in radio and checkbox elements due to specificity conflict in main app styles

0.10.0

Added

• Sage docs favicon 🍃
• Table element base styles

Updated/Fixed

• Updated package-lock.json to address subdependency issue
• Corrected horizontal overflow on code status table and status key
• Properties tables updated to use new styles
• Stylelint fixes and flattened CSS selector structure
• Updated icon font source files
• Updates Color specs structure and fixes responsive issues
• Refactoring and improvements to live stream features
• Accessibility improvements to icon specs
  • Made avatars scalable and more accessible
  • Made avatar fallbacks for video tile grids

0.9.0

Added

• Revised JS structure for modules
• Page Heading Object

Updated/Fixed

• Changed the font size of the description title
• Changed the Form Section To an h3 vs h4
• Bug fix to live option menu
• Refactor sidebar and overlay JS modules

0.8.1

Added

• Labels Object
• Card Object
• Description Element
• Live stream header, footer, wrapper, and video grid

Updated/Fixed

• Updated Code Status view
• Mobile style fixes for input fields and textareas
• Mobile style fixes for radio buttons and switches
• Mobile style fixes for loader/absolutely positioned examples
• Updated node dependencies
• Revised styles applied to input fields and textareas
• Revised button sizing to match updated input field and textarea styling

0.7.1

Added

• Live User Control object
• Live Profile Card object
• Text area styles

Updated/Fixed

• Live Active Microphone adjustments
• Live Avatar object adjustments
• Type spec implementation fixed throughout the repo
• Added white to color palette
• Viewport meta tag added
• Corrected broken variable reference in textarea styles
• Refactored rem values to use conversion function
• Refactored tooltip styles and variable naming

0.6.1

Added

• Live Avatar object
• Live Active Microphone icon object 🎤
• Tooltips 💬
• Added switch error states

Updated/Fixed

• JS Load Path
• Styled text form inputs with floating labels
• Type system 🔠
• Icons ✏️
• Code examples that overflow the width of the container apply a gradient fade 💇‍♂
• Fixed switch focus state outline
• Added in gems as dependencies so no need to reference in parent apps.
• Moved Precompile of assets into gem

0.5.1

Browsersync, Stylelint, and our revamped documentation structure is now up and running!

Added

• Code Status table added, displaying overview of Element and Object completion
• Browsersync configuration: live reloading for changes to markup, styles, and JavaScript
• Stylelint configuration and linting. Linting is performed sitewide during server startup, and updated in-editor as changes are made.
• z-index design token
• Loader and spinner elements

Removed

• Guidelines documentation moved to Sage Github wiki

Updated

• Sidebar menu structure revised to display expanded items in current grouping — child links in other groups are hidden from view
• "Components" and "Modules" are now renamed to a singular group as "Objects"
• Quick Links structure and styling overhauled
• "Introduction" link added to sidebar
• Grid updated with fallback style for .sage-col class
• Various accessibility and HTML validation additions and fixes
• Sidebar menu on mobile displays above page, no longer pushes content aside

---

0.4.1

Tokens and elements have been updated to match revised designs.

Added

• Autoprefixer added to build process
• Smooth scrolling anchor links (for browsers that support scroll-behavior: smooth)
• Added new xxl-min breakpoint for extra-extra-large screens > 1440px
• Added 2 sage-container sizes:
  • xs: 760px
  • lg: 1440px
• New grid classes based on breakpoints:
  • .sage--col-<column number> is now deprecated in favor of the following:
    • .sage-col--md-<column number> for the 768px "medium" breakpoint (default)
    • .sage-col--sm-<column number> for the 545px "small" breakpoint
    • .sage-col--lg-<column number> for the 992px "large" breakpoint

Removed

• xmp elements in code block examples

Updated

• Font files locally hosted
• Color palette matched to revised hex values
• Typography
  • Font sizes, line-heights, and letter-spacing matched to spec
  • Documentation spec readout in table format
• Underscores displayed in element/component/module names hidden in documentation
• Button updates:
  • Primary, secondary, and default styles revised
  • :hover, :focus and :active states
• Checkboxes, radio buttons, and switches:
  • :hover, :focus, and :active states
• Various updates to documentation examples and descriptions

---

0.3.1

Added some key components and also built out the way the system handles helper classes

Added

• Tabs Component
• Form Section Component
• Added helper links to the side of each page to quickly jump to the section of the page that you are looking for
• Added A generator to be able to automatically add helper classes to the system

---

0.2.2

Minor change to the way that images are handled in the system.

Added

• Support for panel image max width

Removed

• White background callout in reset
• Global image max width removed and should be applied at the component level

---

0.2.1

This version of Sage is all about developer productivity. We have added a number of generators that make contributing to Sage fast and uniform

Added

• Generate Token: rails g sage_token TOKEN_NAME
• Generate Element: rails g sage_element ELEMENT_NAME
• Generate Component: rails g sage_component COMPONENT_NAME
• Generate Module: rails g sage_module MODULE_NAME
• Generate Page: rails g sage_page PAGE_NAME
• Sage Icon Font
• Responsive Toggle For Sidebar

---

0.1.1

First version of Sage with the final branding and color scheme. Moving forward changes will be more adding to the system and less changing the core tokens.

Added

• Panel Component
• Ability to preview elements and components in different window
• Links to Github and Changelog
• New Sage Branding

Updated

• Moved Assistant to the top of page
• Changed both stage and sidebar to be light grey color
• Updated all colors in the system
• Removed 4 shades of color from each of the different colors

---

0.0.1

The Initial release of the Sage Design System. This is just the groundwork being set to ensure that we have solid foundations to the system.

Added

• Basic Code Conventions
• Basic Accessibility
• Browser Support
• Basic Product Language
• Tokens
• Colors
• Typography
• Containers
• Grid
• Basic Buttons
• Messages
• Basic Layout Modules