-
Notifications
You must be signed in to change notification settings - Fork 2
DEP_Changelog (deprecated)
This page has been deprecated and is maintained only as an archive. Please visit the Releases page for the most recent updates.
- Rails template markup examples added for elements:
- Live stream wrapper
- Table
- Card
- Added a base Markdown template for new Pull Requests
- Corrected hidden content bug in Panels with iOS
- Revised default icon font-size to use
1em
instead of1rem
- Consolidated
sage-btn--danger
element intosage-btn
- New Billboard Object
- Rails template markup examples added for elements:
- Radio
- Switch
- Label
- Form input
- Form textarea
- Loader
- Danger button
- Updated the panel object to having both a header and a footer
- Fixed error and refactored
banner.js
- New Banner object for global announcements (see Alert entry below)
- Skip to content link
- New modifiers for buttons:
sage-btn--small
andsage-btn--link
- 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
- Vertical alignment options with grid
- Show/hide individual columns with grid
- Pagination Object
- 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
- Sage docs favicon 🍃
- Table element base styles
- 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
- Revised JS structure for modules
- Page Heading Object
- 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
- Labels Object
- Card Object
- Description Element
- Live stream header, footer, wrapper, and video grid
- 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
- Live User Control object
- Live Profile Card object
- Text area styles
- 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
- Live Avatar object
- Live Active Microphone icon object 🎤
- Tooltips 💬
- Added switch error states
- 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
Browsersync, Stylelint, and our revamped documentation structure is now up and running!
- 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
- Guidelines documentation moved to Sage Github wiki
- 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
Tokens and elements have been updated to match revised designs.
- 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 the768px
"medium" breakpoint (default) -
.sage-col--sm-<column number>
for the545px
"small" breakpoint -
.sage-col--lg-<column number>
for the992px
"large" breakpoint
-
-
-
xmp
elements in code block examples
- 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
Added some key components and also built out the way the system handles helper classes
- 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
Minor change to the way that images are handled in the system.
- Support for panel image max width
- White background callout in reset
- Global image max width removed and should be applied at the component level
This version of Sage is all about developer productivity. We have added a number of generators that make contributing to Sage fast and uniform
- 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
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.
- Panel Component
- Ability to preview elements and components in different window
- Links to Github and Changelog
- New Sage Branding
- 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
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.
- Basic Code Conventions
- Basic Accessibility
- Browser Support
- Basic Product Language
- Tokens
- Colors
- Typography
- Containers
- Grid
- Basic Buttons
- Messages
- Basic Layout Modules
Thanks for using Sage!
Welcome
Conventions
Processes and Reference