Release Notes
beta

October release (2019.10.18)
Bitbucket design-language repo Added Credit Card icon to illustrative iconography.
Bitbucket design-language repo Added styles for Chat button/Help (pill) button.
Formatting etrade.design Added chat button guidance.
All etrade.design Updated shared component for code snippets.
All etrade.design Updated shared component for sections and page header.
All etrade.design Updated shared component for IFrame.
Bitbucket design-language-react repo Refactored tabs component, including adding sub-menu.
Bitbucket design-language-react repo Added Design Language, (including fonts and bootstrap) to Project Scaffold.
October release (2019.10.4)
All etrade.design Created a shared react iframe component for the etrade.design responsive toggle.
All etrade.design Created a shared react code snippet component for the etrade.design code snippets examples.
All etrade.design Update eslint on etrade.design to match E*TRADE's react linting standards.
Footer etrade.design Update missing content on the etrade.design footer page.
Bitbucket design-language repo Cleaned up the design-language repo and removed the unused Jumpshare script.
Bitbucket design-language repo Bug fix in IE 11, where the universal message was mis-aligned.
Bitbucket design-language-react repo Add a target prop to button component.
Bitbucket design-language-react repo Refactor Tag component to match updated markup and styles.
September 20th release (2019.9.20)
Bitbucket Styles Right to Left support for input groups
Bitbucket Styles Updated the universal message CTA with small button
Bitbucket Styles Added new helper class create vertical lines on tables
Bitbucket Styles Automation of styles final release process
Colors etrade.design Added class names to the color swatches
Tabs react.etrade.design Added skeleton loading state
Card react.etrade.design Added skeleton loading state
Table react.etrade.design Added skeleton loading state
Slider react.etrade.design Added slider component
September 6th release (2019.9.6)
Footer etrade.design Footer page restructured
Bitbucket Styles Universal messages A11y-compliant
Bitbucket Styles Updated visual style of tags. Also added dismissible tag.
Form Elements etrade.design Error state to radios and checkboxes updated
Bitbucket Styles Right to Left support on progress bar and blockquote
Bitbucket Styles Trade dropdown alignment updated
Bitbucket Styles Focus ring added to close buttons on modals
Bitbucket Styles Automation of Publishing styles to NPM
August 23rd release (2019.8.23)
Bitbucket Styles Added skeleton loading styles for paragraphs of text
Bitbucket Styles Improved Datepicker accessibility by adding focus rings to interactive elements in chart
Bitbucket Styles Removed of "Not Allowed" cursor
Bitbucket Styles Ensured that tooltips display with correct font
Bitbucket Styles Visual overhaul of tag component
Bitbucket Styles Addition of styles to visually replicate our inline list in places where a semantic list is inappropriate
Bitbucket Styles Slight visual update to dropdown buttons slightly rounding bottom corners of menu
Bitbucket Styles Improved right-to-left language support for Universal messages
Bitbucket Styles Added a red outlined error state to radios and checkboxes
Bitbucket Styles Added illustrative icons for checkmark, cheque deposit, checquebook, stop payment, screen share, and message center
Bitbucket Styles Removed explicitly set color for sortable table headers, instead allowing them in inherit a font color
Bitbucket Styles Set height of non-segmented progress bar to match height of segmented progress bar
Bitbucket Styles Gave medium gray color its own variable seperate from the border color variable so that one may be updated without affecting the other
Flyouts etrade.design Added a type="button" attribute to flyout examples and snippets to help prevent accidental form submissions
Iconography etrade.design Added new illustrative icons to documentation
Button react.etrade.design Added an onFocus prop to the button component
Table react.etrade.design Added an hAlign prop to the TableSort component
Datepicker datepicker.etrade.design Added an error prop to datepicker
Datepicker datepicker.etrade.design Added an aria-hidden="true" to icons in datepicker
August 15th release (2019.8.15)
PageFooter react.etrade.design Update misspelling of "guarantee" in PageFooter component
Button react.etrade.design Updated button on click handler to allow parameters and event itself to be passed to on click functions
August 9th release (2019.8.9)
Bitbucket Styles Text Input with error left border doesn't animate on focus
Bitbucket Styles Centered anchor tags with .btn.btn-link classes vertically
Bitbucket Styles Added an automatically sized flex column variant
Bitbucket Styles Added publish automation script for npm
Bitbucket Styles Improved right-to-left support for definition lists, radios, checkboxes, inline and piped lists, push/pull columns, and focused text fields
All etrade.design Updated https config on etrade.design
July 26th (2019.7.26)
Spinners etrade.design Added the spinner overlay component to the Spinner page
Typography etrade.design Added usage rule for the helper class .text-truncate
Colors etrade.design Updated the sass variable name for $background-accent-color-1
Text fields etrade.design Fixed the social security text fields example
Bitbucket Styles letter spacing on .btn is now 0
Bitbucket Styles We added class name of .prototype and .prototype-retroactive to test font stack unification
Bitbucket Styles We update our EditorConfig file to align better with our lint rules
Bitbucket Styles Updated our repo to node 10.13 to better align with other projects
Bitbucket Styles Made improvements to our automated publishing workflow
July 12th release (2019.7.12)
Table with total row etrade.design We added a example of a table with a total row on etrade.design
Footer etrade.design Refactored some presentational css in the footer-page.scss
Stacked tables javascript snippet etrade.design On the stacked table example, we removed the the jQuery javascript example and replace with a vanilla javacript example
Spacing etrade.design We refactored the Breakpoint specific spacing class examples, and eliminated some extra space
Bitbucket Styles We improved the accessibility on the Auto-suggest menu
Bitbucket Styles We now have a Skeleton loading class
Bitbucket Styles We refactored the _scaffolding.scss
Bitbucket Styles We removed the border on table responsive for extra small screen sizes
Bitbucket Styles We updated the Datepicker error state styles to align better to the Design Language
Bitbucket Styles We remove font color from the universal-message text. This will allow the text to inherit the color
Bitbucket Styles We fixed a bug in Safari where the focus ring on icons was being cutoff
Bitbucket Styles We refactored the css on the column centered flexbox component
Bitbucket Styles We fix a bug where nav-tabs-center were not centered
June 27th (2019.6.27)
Bitbucket Styles Added Git hook that runs sasslint, and only commits if sasslint passes
Bitbucket Styles Updated the Social Media Footer Icons to be more accessible
Bitbucket Styles The column centered mixin now uses flexbox
Bitbucket Styles Updated datepicker styles to better align with latest Design Language updates.
All etrade.design Updated node/npm to better align with other projects
All etrade.design Update hotlink protect
Flyouts etrade.design In IE11 we fixed the flyout hover and click events
All etrade.design Added Design Language React to etrade.design
React React Added interactive props to the React card component
Flyout React Added the contentCls prop to the React flyout component
Spinner React Created a new spinner overlay component
Tables React Added accessibility to the TableSort component
All React Polyfill needed for IE11
Bitbucket React Charts Initial D3 Line Chart
June 14th release (2019.6.14)
Bitbucket git repo Styles Material icons now have a xxs size (20px)
Bitbucket git repo Styles Repo refactor: removed most grunt task in favor of npm
Bitbucket git repo Styles Repo refactor: remove material icons as dependency
Bitbucket git repo Styles Add the flex grow option to the flex columns
Bitbucket git repo Styles Updated browser font rendering to align with Graphik
Bitbucket git repo Styles Updated the spinner so IE browser show purple instead of green
Bitbucket git repo Styles Added the table caption bottom helper class .caption-bottom
Bitbucket git repo Styles Updated the color of the dropdown to align with our new purple
Tabs etrade.design Add clearer guidance on etrade.design for our responsive overflow tab
Mobile device etrade.design Fix a scroll issue with the etrade.design mobile menu
May 31st realease (2019.5.31)
Bitbucket Styles We added a minified CSS file to improve load performance.
Bitbucket Styles The `accent-color-` variable is now available to use globally.
Bitbucket Styles We now have breakpoint specific screen-reader-only helper classes. These classes are used to visually hide elements, while still leaving them accessible to screen readers. The new classes are .sr-only-sm, .sr-only-md, and .sr-only-lg.
Bitbucket Styles On the stacked tables, the padding below the labels has been removed.
Bitbucket Styles We updated swipe-able cards. There was a bug on Firefox that prevented the swipe from scrolling smoothly.
Bitbucket Styles We updated the universal messages CTA. The CTA now aligns to the right no matter how much copy there is. It also fixes alignment issues when using the a tag instead of the button tag.
Layout Documentation (etrade.design) We update guidance on the Grid Breakpoints Mixins to match the current Design Language standard.
Tables Documentation (etrade.design) We now have documentation on Table Captions usage.
Form elements Documentation (etrade.design) We now have documentation on Fieldset usage.
Colors Documentation (etrade.design) We added the .body-text-color helper class to the colors page.
Toasts Documentation (etrade.design) Fixed a bug with the Toasts and File Upload where the click event was disabled.
Colors Documentation (etrade.design) Updated the colors to match the latest updates in the Design Language styles. $label-color is now #444444 and $body-text-color is now #242424. We removed the $header-text-color, since that and $body-text-color are both the same.
Changelog Documentation (etrade.design) We added Deep-linking to the changelog. This will allow us to search the log faster.
May 17th release (2019.5.17)
Bitbucket Styles

Inline textfield (updated).

The update improves accessibility and look of the focus state.

Bitbucket Styles

nav-tabs-centered (bug fix).

This solves an issue at our extra small breakpoints where the active tab was not showing up correctly.

Bitbucket Styles

Universal messages (new).

We now have transparent/inline universal messages universal-message-transparent

Bitbucket Styles

Auto-suggest/Auto-complete (new).

We now have auto-suggest/auto-complete styles for search.

Bitbucket Styles

Datepicker (update).

The icon in date picker select text field is now purple.

Bitbucket Styles

The b and the strong tags (update).

The font-weight was set to 600 for better readability.

Bitbucket Styles

Body text (update).

We updated the body text to #242424 for better readability.

Bitbucket Styles

Stacked tables (update).

The data points on the extra-small breakpoint are now left align.

Bitbucket Styles

Flex grid [experimental] (update).

a. Updated the order. "first" and "last" are not valid properties.

Text fields etrade.design

Text fields (update).

The left aligned icon is now purple.

Colors etrade.design

Colors (new).

A new color was added $background-accent-color. #f1ecff.

Formatting etrade.design

Formatting (update).

The CTA patterns were update to be more accurate.

Formatting etrade.design

Formatting (new)

Added guidance for formatting a phone number.

Formatting etrade.design

Formatting (update).

We created a functional example of the expand-collapse component.

Buttons etrade.design

Buttons (update).

The buttons page variations section was updated to be clearer.

React React

Auto-suggest/Auto-complete (new).

We now have auto-suggest/auto-complete component for search.

React React

TableSort (new).

We now have a button (.th-sort) that controls the sort order of a table column.

May 5th release (2019.5.3)
Snackbar etrade.edesign, Styles, React We added the Snackbar to our React component and styles as well as adding usage guidelines and examples on etrade.edesign.
Typography etrade.edesign Updates to the typography page. Add more helper classes and clarified text colors.
Footer etrade.edesign Updated the footer examples to use our granular text helper classes (.text-body instead of .text-disclaimer).
All sections etrade.design the chat bot was removed from etrade.design
Buttons etrade.design Added visual clarification to the small and extra small buttons. The extra small button was move into the button variation sections.
Toasts etrade.edesign Fixed a bug where the images on the static toast messages were not show up on some browsers.
Cards etrade.edesign Fixed a bug where the “cards with images” example showed the image incorrectly.
Bitbucket Styles We removed margin-bottom from `.list-inline`, this will improve alignment with other inline elements.
Bitbucket Styles As part of our migration to the Graphik font stack, the font EtradeFort was removed from the repo.
Bitbucket Styles Updated the Graphik letter spacing (kerning) on our larger heading styles.
Bitbucket Styles Updated .btn-link to inherit font-weight if doesn't have the .btn class.
Bitbucket Styles We have updated our table hover color.
Bitbucket Styles The shaky button animation is now available to use. Adding the class name .btn-error will trigger the “shaky” animation.
Bitbucket Styles We now have styling for the caption tag. This is useful in giving context to tables.
Bitbucket Styles We now have styles for the legend tag. Useful in giving more context to forms.
Bitbucket Styles We added a button for tables - .th-sort - that can be used to sort a table and indicate if a column is ascending or descending.
Bitbucket Styles Updated the table body content to be normal weight.
Bitbucket Styles We have added some functionality to our experimental flex row enhancements. We can now use justify-content on a row, add background or chart colors.
Bitbucket Styles Updated the table body content to be normal weight.
Bitbucket Styles Add !important to the new text helper classes.
Bitbucket Styles Fixed an issue where the large modal was too big on small breakpoint, causing the modal to drop out of view.
Bitbucket Styles Updated the “Material icons within links” so they no longer have their colors and focus-rings set globally.
React React The nested dropdown button is now availabe as a React component.
April 18th release (2019.4.18)
Spacing etrade.design For our smaller breakpoints, we've documented our breakpoint specific vertical offset style.
Error etrade.design We have updated the errors patterns page. It now has examples of specific error, a server error/data unavailable, toast, and form error patterns
Error animation etrade.design An animated shaky button error state has also been add to our errors pattern page. Add the class .btn-error to trigger the animation.
Search patterns etrade.design Fixes an issue on etrade.design where the auto complete in search patterns was not displaying
Buttons etrade.design Documentation update to the split button and xs button.
Tables etrade.design Add toggles to table stacked documentation
Typeography Styles Add more granular typography helper classes. .text-body, .text-header. We also updated the color on the .text-disclaimer class.
Form dropdown Styles Fix a bug on iOS where text was wrapping on the select element.
Buttons Styles Fix bug where .btn-link was defaulting to center alignment. The button link now inherits alignment.
Universal messages Styles Update to the universal message info icon to utilize Design Language .accent-color-2 (a different shade of blue).
Modals Styles Fixes a bug on the modal close button. Where the close button was offset if modal was conatin inside of a .card class.
Snackbar Styles Updated Snackbar to have a wider variety of buttons styles.
- NPM Setup workflow to publish and consume the Design Language on NPM. @etrade/design-language
April 5th release (2019.4.5)
Universal Messaging Styles Add Transparent and Inline Universal Messages
Buttons and Links Styles Add Nested Dropdown Button
Universal Messaging Styles Fix Universal Message icon position
Tabs Styles Center Icons in all Tabs
Tables Styles Fix Checkbox alignment in Table Stacked
All sections Documentation Add more padding to code examples
March 28th release (2019.3.28)
Bitbucket Styles Bug fix for deprecations warning. Fixes issue with text input with icons, where text and icon overlap.
March, 22nd release (2019.3.22)
Bitbucket Styles ** Graphik now replaces ETradeFort as the default font **
Bitbucket Styles Updates to Filter. Added a hover state, display cursor pointer on hover and update the visual style (light purple filled background)
Bitbucket Styles An experimental version of flex grid was added.
Bitbucket Styles Fix to the small tag where is was inheriting the wrong size.
Bitbucket Styles Buttons now use link-color instead of brand-purple. Also updated the hover color states to use color-mix mixin instead of the hex values
Bitbucket Styles Update to the deprecations warnings
Bitbucket Styles Updated illustrative icons svg to include new bounding box.
Bitbucket Styles Updated relative sizes of calculator and money-envelope icons. Also fixed extra padding on Clock Illustrative icon.
Bitbucket Styles Added new nested dropdown button.
Bitbucket Styles Fix to split button. It can now can be used without sizing.
Bitbucket Styles Fix to the modal-footer where two buttons caused alignment issues.
Interactive States Documentation Added documentation for interactive state (hover, active, focus, etc.)
Iconography Documentation Accessibility update to the materical icons. Set to aria-hidden="true"
Modals Documentation Fixed minor error with the code snippet on the Modals page.
Footer Documentation Added the update "Equal Housing Lender" logo.
Menu Documentation Fixed an issue with active state not showing up on menu items.
Documentation Documentation Updated the documentation to now use hidden vs the deprecated hide
Documentation Documentation Updates to our server build pack.
Documentation Documentation Updates to our Colors, Copy, Iconography, Layout, and Spacing pages. Modernized the structure of the page.
Iconography Documentation Illustrative icons now have updated bounding boxes.
Iconography Documentation Updates to the System icons (icon-fonts). Update relative sizes of calculator icon and money-envelope icon so they match better
Documentation Documentation Updates to the sticky menu scroll position.
- Toolkit Add snackbar component to the Toolkit (DSM)
Flyout React Refactor of the flyout component
- React Added risk meter styles to the Design Language
March, 8th release (2019.3.8)
Bitbucket Styles Accessibility updates - added a border to all focus states
Bitbucket Styles Updates to the global print styles
Bitbucket Styles Updated the tfoot to 13px on tables
Bitbucket Styles Added in Risk Meter styles to the Design Language
Bitbucket Styles Added Swipeable cards on mobile to the Design Language
Bitbucket Styles Updates to the README on Design Language
Bitbucket Styles Accessibility updates - icons in text inputs become purple
Bitbucket Styles Fix sticky header z-index
Bitbucket Styles Add smooth scroll (inertia) to responsive tables on iOS
Bitbucket Styles Updates to the Playground in the Design Language
Search Patterns Documentation Added a Search pattern page to etrade.design
Incremental Loading Documentation Added an Incremental load page to etrade.design
Formatting Documentation Updates to the Formatting page on etrade.design
- Documentation Improve deploy process for etrade.design
- Documentation Updated the way we present snippet on etrade.design
February 22th Release (2019.2.22)
Universal messaging Documentation Documented new CTA pattern.
Cards Documentation Updated documentation to reflect latest change to cards.
Flyouts Documentation Change flyouts/popovers to use button instead of anchor.
Flyouts Documentation Fixed a firefox issue where the click event doesn]'t display dialog.
Minimal navigation Documentation Removed text-muted from links. Now links display the proper purple.
Iconography Documentation Removed "dark" examples.
Tags Documentation Refactored and removed "dark" from tags page
Tabs Documentation Refactored tabs page
Footer Styles Fixes missing letters on the equal housing lender logo.
Bitbucket repo Styles Text classes - fixes line height reset not applying.
Bitbucket repo Styles Universal messaging - fix line height (too tall) on header of universal message.
Bitbucket repo Styles Universal messaging - add CTA pattern
Bitbucket repo Styles Contrast updates - tables, labels, checkboxes, and radio buttons font color is changing to ensure a more contrasted.
Bitbucket repo Styles Iconography - added new icons. Basket, Health Care, Balance, and Money Envelope.
Bitbucket repo Styles Refactor of the .list-inline and .list-pipe to use margin instead of padding.
Bitbucket repo Styles Expand collapse - fix button and icons from inheriting from the parent expand collapse styles.
Bitbucket repo Styles Buttons - split button should be available as small table/trade button only
Bitbucket repo Styles Buttons - create .btn-xs to mimic split button size
Bitbucket repo React Deprecate UncontrolledDropdown
February 9th Release (2019.2.9)
Text Fields Styles Fix to text input fields with only one input group
Tables Styles Update table striping
Universal messaging Styles Universal message h4 now increases in size at the smallest breakpoint
Bitbucket Styles Add sticky header css to styles
Bitbucket Styles $border-color updated to #e4e4e4
Bitbucket Styles Remove border-radius from cards
Bitbucket Styles Add Graphik for testing
Tabs Styles Add new tabs variations
Pagination Styles Updates to pagination documentation
Colors Styles Add copy classname to colors page
Storybook React React: deprecate secondary card style
Storybook React React: update to the expand collapse component
Storybook React React: add progress bar
Storybook React React: add minimal navigation
February 1st Release
Tabs Styles Fix issues with Tab updates as released on 2019.1.25
Tabs Styles Add Tab Enhancement .nav-tabs-no-overflow
January 25th Release (2019.1.25)
Footer Documentation Clean up markup in the footer legal text.
Text input Documentation Add usage for text fields with icons. They do not support illustrative icons.
Buttons Documentation Large mobile button size is specced as 49px on the buttons page, should be 45px
Formatting Documentation Replaced the replay icon on the real time quotes example to the refresh icon on the formatting page.
Toolkit Color update: Change green ui to purple in DSM
Bitbucket Styles Color update: All UI using $brand-green will switch to new purple
Bitbucket Styles Color update: Create accent CLASSES based on current $variables
Cards Documentation Color update: Accent colors on the documentation cards page - replace chart classes with accent classes
Bitbucket Styles Nav tabs: Add a feature tab variation to tabs
Bitbucket Styles Nav tabs: Active tab text in tabs should be purple color
Bitbucket Styles Nav tabs: Nav tabs should support multiple lines of content, filling available width
Bitbucket Styles Tables: Table row needs a vertical-align:top helper class to handle form error states
Bitbucket Styles Tables: Enhance table-stacked to support any content in headers
Bitbucket Styles Minimal navigation: Link + icon pair on minimal navigation should be link color, not grey
Bitbucket Styles Cards: Change card border color to $border-color
Bitbucket Styles Cards: Deprecate secondary card style
Bitbucket Styles Toggles: Toggles with inline variation are not toggleable when clicking on the toggle
Bitbucket Styles Text: Refactor text helper classes to create a text-small class
Bitbucket Styles Text: Small label should be 13px on mobile
Bitbucket Styles Lists: Remove padding-bottom from list-inline
Bitbucket Styles Sticky header: Custom CSS for sticky/stacked header
Storybook React Library Expand collapse: Correct markup in Expand Collapse component
Bitbucket Styles Expand collapse: Fix the collapse div on the expand-collapse from shifting during animation
Storybook React Library Text input: Update TextInput type field
Bitbucket Styles Repo inhancements: Add grunt-babel @babel/core to package.json
January 15th Release (2019.1.15)
Storybook React Library Add VerticalOffset component
Storybook React Library Add ExpandCollapse component
Storybook React Library Add sticky header to Table component
Storybook React Library Add ClassNameDecorator component
Storybook React Library Add mousenter and mouseout events to Button component
January 11th Release (2019.01.11)
Bitbucket Styles New helper class for localization - Right to Left support
Bitbucket Styles Add Instagram icon to styles
Cards Styles Cards with an image (not a background) stretch in IE 11
Bitbucket Styles _list.scss is imported twice in design language
Expand collapse Styles Added an expand collapse helper class
December 17th Release
Deffinition lists Styles Fixes an issue with definition list were the dd did not render correctly
December 14th Release
Colors Styles New primary purple (Donatello Purple) sass value ($primary-color)
Colors Styles The $link-color will switch to new $primary-purple
Colors Styles The chart color 1 is now our new $primary-purple. $chart-color-2 replaces chart-color-7. Other chart colors move down 1.
Colors Styles Create $dark-background-color (plum) sass value to be used as colors for UI
Colors Styles Create a new "Accent Colors" section on the colors page on etrade.design
Styles Bitbucket Text field updates to form elements
Styles Bitbucket New blockquote styles added
Styles Bitbucket Restore "text-disclaimer" style
November 30th Release
Bitbucket Styles Fix to the table footer (tfoot) which adjusts spacing and adds text-bold
Buttons and links Styles Fix outline around btn-link
Bitbucket Styles Removed Ruby as a dependency of design language
Tabs Styles Update tabs (nav-tabs) with transparent border gradient
Tabs Styles Update tabs with a .nav-list-center helper class
Definition lists Styles Fix for a definition list alignment issue, where text was overflowing
November 15th Release
Form elements Styles bug fix for text field with icon group left pushes text when in focus
Toggles Styles update to toggle making it more readable
Form elements Styles add transparent background on inline dropdowns and update to disabled state
Datepicker Styles added Datepicker page
November 12th Release
Tabs Styles nav-tabs-border fix
Buttons and links styles fix to the dropdown-right helper class - removes padding right
November 6th Release
Universal message Styles Fix for universal message icons not rendering properly
Button and links Styles Add new helper class .dropdown-right for .dropdown and .btn-group
Cards Styles Fix for cards with an image (not a background) stretch in IE 11
Definition list Styles Create .definition-list-condensed
Bitbucket print.scss Print page has unwanted border boxing for certain spans
package.json Styles Namespace CSS as both edesign and design in build process
October 30th Release
Storybook React library Datepicker React component
October 8th Release
Buttons Styles Fixed button sizes not working
September 28th Release
Storybook React library Added inline props to Dropdown component
Storybook React library Added ToggleButton component
Storybook React library Added Error component
Storybook React library Stacked prop added to Table component
Storybook React library Title prop added to Button component
Storybook React library Lodash dependency refactor
September 27th Release
Pagination Styles Pagination component added
Tables Styles Stacked table component
Buttons/Links Styles Fixed an issue where anchor links were not inheriting font weight
Tables Styles Fixed an issue where the hover state on tables was not working properly
Definition Lists Styles Fixed an issue where empty definition list items caused mis-alignments
Buttons/Links Styles Fixed an bug in which button links were not resizing on breakpoints as expected
Tables Styles Added styling for table footers
August 23rd Release
Storybook React library Flyout component added
Storybook React library FileUpload component added
Storybook React library Custom className bug fixed in TableCell component
August 17th Release
Storybook React library Segmented Progress Bar component added
Storybook React library Dropdown component prop updates
Storybook React library TextInput component prop updates
Storybook React library Automated component creator added
July 27th Release
Storybook React library Modal component added
Storybook React library Spinner component added
Storybook React library Toast component added
June 29th Release
Storybook React library Universal Message component added
Storybook React library Text field component added
Storybook React library Text area component added
Storybook React library Text field prefix and suffix support
Storybook React library Text field with icons support
Buttons/Links Styles Fixed sizing of small button
Cards Styles Fixed dismissible compact card
June 26th Release
Storybook React library Hotfix to remove error messages for Button component href and "inline-link" Buttons
Design Language Inspector Browser extension Add ability to preview / inject latest Design Language in page
Design Language Inspector Browser extension Add Wireframe Mode
June 15th Release
Typography Styles DEPRECATION NOTICE: iOS and Android font stacks have been removed. They will revert back to the customer type stack sizing.
Typography styles Customer typography updated to Fort font family.
Typography styles Updated font stacks to medium font weights for headers
Typography styles Added responsive text alignment helper classes
Typography styles Updated font stacks to medium font weights for headers
Definition Lists Styles Column support for definition lists
Tags Styles Fixed tags overflowing on mobile and wrapping text
Toggles Styles Toggles component added
Spacing Styles Fixed vertical offset XXXL using wrong spacing
Cards Styles Fixed compact cards with images
Typography Styles Added line height reset helper class
Sliders Styles Updated slider's initial value to reflect change to new link color
Toasts Styles Toasts can live outside of the toast container
Buttons and Links Styles Updated disabled treatment for primary and primary outline buttons
Buttons and Links Styles Dropdown buttons now support buttons stlyed as links dropdowns
Form elements Styles Inline dropdowns show an arrow indicating it will invoke a dropdown menu
Design Language Inspector Browser extension Improve Design Language version detection
Design Language Inspector Browser extension Improve extention update feature
June 11th Release
Tables Styles Helper class to address nested rows
Storybook React Library Column centered component
Storybook React Library Iconography component
Storybook React Library Table component
May 22nd Release
Design Language NPM Package npm Updated Design Language npm package to reflect latest release
Storybook React library Updated Design Language React package to reflect latest release
Design Language Inspector Browser extension Improve vertical-offset overlay to mimic design specs
Design Language Inspector Browser extension Add update notification when new versions are available
May 17th Release
Storybook React library Buttons/Links added
Storybook React library Cards added
Storybook React library Dropdowns added
Buttons/Links styles Link color changed to purple
Definition Lists styles Updated definition list to reflect visual enhancements
Cards styles Card accent colors now allow for brand green and brand purple
Cards styles Card full width buttons match intended designs
Colors styles Fixed error state showing wrong negative red color
Buttons/Links styles Button updates to remove Bootstrap as a dependency
March 15th Release
Form Elements styles Bug fix: IE dropdown bug - missing arrow
Filters styles New component: filters
Iconography styles New illustrative icons: chat, transaction, school, search, drop-pin, video-laptop, smartphone-landscape
Cards styles New to cards: full width button added to footer
Cards styles New to cards: added accent variation
Styles styles Deprecated: removed deprecated code in buttons, tabs, iconography, and global typography
Errors styles New to errors: new error patterns
Form elements styles Updated focus states for inputs
Grid styles New to the grid: addition of a min-width
Styles styles Enhancement: zip assets added
Styles styles Optimization: build files, dependencies, xeon updates
Typography styles New to list: change to padding
Footer documentation Update: removed tm from logo
Flyouts documentation Bug fix: popovers only one visible at a time
Browser Targeting documentation Addition: documentation on targeting browsers
February 22th Release
Home documentation LTS/Latest switcher in the navigation
Form elements styles Dropdowns have a white background
Universal messaging styles fixed overlapping line height on mobile success message
Modals documentation fixed modal buttons not displaying properly
Iconography toolkit info icon added to the craft library
Cards styles fixed cards focus state on clickable cards
Form elements styles fixed radio button centering to text and responsive radio button
Form elements documentation fixed snippets for checkboxes and radio buttons
Tables styles fixed button alignment in table
Typography styles deprecating mobile font stacks
Cards styles deprecating card alignment in favor for card group alignment
Styles styles removed padding on horizontal rule element
Styles styles removed forced background color on dark elements
February 8th Release
Code Guidelines documentation SCSS Code guidelines page available for reference
Form Elements styles Textfield with icon bugfixes. New HTML structure required.
Cards styles Compact card variation available
Cards styles Cards have non-breaking markup enhancements including footers sticking to the bottom of the card
Flyouts styles Flyouts fixed on documentation
Tables styles Tables added
Tags styles Tags component added
January 17th Release
Icons Styles Updated IRA Selector icon, deprecated and moved to compass
Footer styles Fixed footer quick links unordered list
Typography styles Updated customer font stack line heights
Typography styles Updated prospect font stack line heights
Slider styles Slider enhancements
Scaffold styles Unordered list styling
January 11th Release
Icons styles and documentation Added new IRA Selector icon
Form Elements styles Fixed disabled state of dropdowns
Sliders styles Added new variation for value to follow slider thumb
Errors styles Fixed .has-error helper class for universal error states
Bitbucket Repo styles Improved IE targeted mixins
Definition Lists styles and documentation Added definition lists component for non-data/numberic heavy data
February 1st Release
Tabs styles Fix issues with Tab updates as released on 2019.1.25
Tabs styles Add Tab Enhancement .nav-tabs-no-overflow
December 14th Release
Iconography Toolkit Calendar icon added to craft
Buttons and Links Documentation Buttons and links overflowing on mobile fixed
Typography Documentation Typography type styles fixed
Form Elements Documentation Form elements text fields on mobile fixed
Form Elements Documentation Form elements radio buttons/checkboxes updated to reflect enhancements
Modals Documentation Modal page enhancements
Segmented Progress Bar Documentation Segmented progress bar page enhancements
Toats Documentation Toasts on mobile fixed
Footer Documenttion Footer disclaimer logos display properly on mobile
Layout Styles 5 column grid system
Form Elements Styles Textfields with icons
Code Styles Versioning for deprecation increased, this removes secondary buttons entirely. You must update any references to secondary buttons to our primary buttons.
Flyouts Styles Shadows added to flyouts
Flyouts Styles Flyouts deprecated, renamed to popovers
Flyouts Styles Popover sizes deprecated
Flyouts Styles Tooltips are styled as popovers
Form Elements Styles Fixed inline radios additional padding
Buttons and Links Styles Fixed disabled links clickable
Form Elements Styles Fixed inline dropdown not inheriting font sizes
Buttons and Links Styles Fixed button in active state shows gray border
Layout Styles Code enhancements to the centered columns
Typography Styles iOS and Android typography updated to reflect new headings
Code Styles Added support to gruntfile to prepare for LTS and Latest builds of the Design Language
Toasts Styles Fixed toasts not sticking to the left of the page
Minimal Navigation Styles Added minimal navigation pattern
Form Elements Styles Fixed checkboxes are not vertically centered to text
Iconography Styles Fixed material icons not inheriting font size
Flyouts Styles Deprecated dismissible flyout/popover
Buttons and Links Styles Fixed button in active state shows gray border on hover IE only
Toasts Styles Fixed toast icon spacing
Form Elements Styles Fixed select dropdown text not vertically centered on IE
Code Styles Fixed IE JavaScript issues on the playground
Buttons and Links Styles Fixed split dropdown button alignment on IE
Form Elements Styles Read only attribute on inputs style as disabled
Form Elements Styles Fixed dropdown arrow alignment
Form Elements Styles Fixed dropdown alignment on mobile
Form Elements Styles Fixed radio button text not centered in IE
Footer Styles Fixed footer top margin causing undesirable behavior
Form Elements Styles Fixed input text and placeholders vertically centered in IE
Slider Styles Slider component added (beta)
Copy Usage Documentation Copy usage guidelines page
November 14th Release
Icons styles Fixed date icon in illustrative iconography
Icons styles Fixed calculator icon in illustrative iconography
November 9th Release
Icons styles Added date icon to illustrative icons
Icons styles Added calculator icon to illustrative icons
All documentation Added In Page Anchor Links
All documentation Refactored Javascript Files
Bitbucket styles Updated Gruntfile to prepare for Design Language versioning
October 19th Release
Toasts styles IE 11 Toast container fix
October 5th Release
Cards styles Card component added
Buttons and Links styles Mobile scaffold update - larger elements on mobile breakpoint
Form Elements styles Inline dropdown component added
Footer styles Footer update
September 28th Release
Tabs styles Tab updates
Footer styles Footer pattern added
Colors styles Chart indicator colors added
September 7th Release
Buttons and Links styles Removed visited link states
Typography styles Updated bold disclaimer text on iOS/Android
Iconography styles Icon sizing helper for both Illustrative Icons and Material Icons
Segmented Progress Bar styles Segmented progress bar can be partially filled by percentage
August 31th Release
Bitbucket Repo styles Fixed postinstall in deploy process
August 24th Release
Colors styles Updated chart colors
Form Elements styles Fixed dropdown buttons
Iconography styles Fixed iconography font file reference
Bitbucket Repo styles Dark theme updates
Bitbucket Repo styles Build improvements
Form Elements styles Fixed dark dropdown bug on Windows and Firefox
Invision App toolkit Added progress bars
Colors documentation Updated colors page
August 17th Release
Bitbucket Repo styles Mobile container gutter is now corrected
Bitbucket Repo styles Icon sizes fixed
Bitbucket Repo styles Icons updated to use a webfont
Bitbucket Repo styles iOS font sizes corrected
Bitbucket Repo styles Release process documented in repository
Bitbucket Repo styles Select dropdown's dark variation disabled state fixed
Bitbucket Repo styles Dropdown button menu styled
Bitbucket Repo styles Updated Xeon build file
Bitbucket Repo styles Checkbox label font size corrected
Bitbucket Repo styles Tabs with border Safari bug fixed, tabs distribute evenly, underline on mobile adjusted, animations enhanced
Bitbucket Repo styles Positive and negative text color helper classes
July 20th Release
Bitbucket Repo styles Container on mobile fix
Bitbucket Repo styles Updated iOS font sizes
Bitbucket Repo styles Disabled select dropdown dark variation
Bitbucket Repo styles Dropdown menu
Bitbucket Repo styles Dark buttons
Toasts documentation Toast page redesign
Iconography documentation Searchable iconography
Colors documentation Copy snippet on colors page fixed
Toolkit toolkit Mobile scaffolding updates- checkboxes, buttons, radios, form fields and dropdowns are now larger on mobile
Login toolkit Mobile scaffolding updates are now reflected in Craft
July 13th Release
Buttons and Links toolkit Links for dark backgrounds
Form Elements toolkit Checkbox in a checked and disabled state has been updated
File Upload toolkit File upload component added
Bitbucket Repo styles Beta dark components
Buttons and Links toolkit Added button dropdown menu style
Colors styles Added positive and negative colors for dark variations
Toasts styles Toast notifications now support multiple lines
Iconography documentation Iconography hover state updated
Buttons and Links documentatin Deprecation of secondary buttons has been noted
Documentation documentation Font stack choice is remembered throughout your browsing experience
Colors documentation Color page has an updated hover experience
Buttons and Links documentation .btn-block is explained in detail as it has become a vital part of our Design Langauge
July 6th Release
Typography styles Large and small labels fix
Buttons and Links styles Deprecating secondary button
Progress Bar styles Progress bars
Global documentation Spacing between headers
File Upload documentation Drag and drop page with snippet and functionality
Resources documentation Renamed Downloads to Resources
Universal Messaging documentation Universal messaging font for prospect fix
Iconography documentation Iconography copying
Spacing documentation Spacing explanation moved
Tabs documentation Tabs page redesign
Global documentation Copy snippets to clipboard
Iconography documentation Iconography hover animation
Layout documentation Layout page fixes
Spacing documentation Added vertical offset clear to spacing
Sketch Toolkit documentation Sketch toolkit URL update
Global documentation Font stack switcher only switches fonts for components
Global documentation Sticky font switcher on component pages
June 22nd Release
Buttons and Links styles Fixed button dropdown
Styles styles Minified CSS
Typography styles Typography line height code cleanup
Spacing styles Vertical Offset Clear variation
Typography styles Customer small label
Typography styles Customer large label
Typography styles Fixed subhead color
Flyout styles Flyouts font fix
Styles styles SASSLint indentation turned to a warning
Login documentation Login for downloads
Sketch Utilities documentation Craft Library page
Release notes documentation Release notes on homepage reduced
Home documentation Join us on Slack removed [RIP Slack]
June 15th Release
Styles styles Tabs have an inverse variation (for use on dark backgrounds)
Tabs styles New tabs animation
Segmented Progress styles Segmented progress bar half active state fixes
Styles styles Dropdown buttons
Styles styles File upload beta
Typography styles Customer font stack updates
Styles styles Visual regression testing beta
Styles styles Typography code cleanup
layout documentation Layout page fixes
Buttons and Links documentation Buttons page mobile fixes
Form Elements documentation Textarea element renders properly, snippet fix
Buttons and Links documentation Dropdown buttons fixes
Home Page documentation ETrade Fort download
Site Wide documentation Navigation fixes on Safari
Iconography documentation Iconography page
Spacing documentation Spacing page
Typography documentation Typography Variable updates
Spacing documentation Typography page
Tabs documentation Added information for all tab variations
Spinners documentation Spinner snippet fixes
Centering documentation Centering helper class updates
Form Elements documentation Fixed disabled radio button not displaying properly
Flyouts documentation Flyouts page redesign
Modals documentation Modals page redesign
Form Elements documentation Form elements redesign
Buttons and Link documentation Button sizes measurements
Toolkit toolkit Craft Library beta release
Toolkit toolkit Sketch Customer template beta release
Toolkit toolkit Inverse tabs
June 1st Release
Release Notes documentation Fixed release notes dead links
Components documentation Updated font changer for components
Spacing documentation Spacing page enhancements
Color Scheme documentation Adjusted color scheme animation
Color Scheme documentation Adjusted color scheme, chart colors text colors
Modals documentation Updated modal examples
Layout documentation Enhancements to the layout page
Inspiration documentation Fixed Inspiration page loading issues
Documentation documentation Removed third party dependencies
Buttons and Links styles Button size enhancements
Buttons and Links styles Button disabled enhancements
Buttons and Links styles Button border enhancements
Universal Messaging styles Universal Message icon updates
Toolkit toolkit Alpha Craft Library Release
May 25th Release
Documentation documentation External links open in new tabs
Documentation documentation Generate Timestamp button hidden from the home page
Documentation documentation Added toast demo functionality
Documentation documentation Mobile navigation alignment
Documentation documentation Mobile navigation is now accessible
Release Notes documentation Changelog renamed to Release Notes
Documentation documentation Updated URL scheme
Inspirational documentation Added more images to the inspirational page
Color Scheme documentation Centered the copy text on the color scheme
Buttons and Links styles Fixed button border bug
Iconography styles Removed duplicate iconography
Form Elements styles Adjusted checkbox and radio button animations
Universal Messaging styles Updated universal message look and feel
May 18th Release
Toasts styles Add toasts
May 11th Release
Form Elements styles Fixed form status labels on Internet Explorer.
Form Elements styles Fixed fields not centered vertically in Internet Explorer.
Nav Tabs documentation Fixed tabs jumping to the top of the page on click.
Buttons & Links documentation Fixed Buttons and Links page layout on mobile.
Form Elements documentation Fixed form elements not rendering correctly.
Buttons & Links styles Fixed button size difference in outline variations.
Typography documentation Updated Typography interior page.
Iconography documentation Updated Iconography interior page.
Spacing documentation Updated Interior Spacing page.
Modals documentation Fixed modal rendering.
Site Wide documentation Logo in the nav is now clickable to get back home.
Site Wide documentation "Aesthetics" changed to "Foundation".
Typography styles Updated subhead line height on prospect font stack.
Spacing styles Added additional spacing option.
styles Spinner component.
Color documentation Fixed chart color scheme naming.
Layout styles Reverted .container padding on mobile
Modals styles Fix modal blur bug
Spinners styles Add spinners to the documentation
May 5th Release
Variables List documentation Added Helper Classes for reference.
Navigation documentation You can join us on slack simply by clicking the 'Join Us on Slack' link in the navigation.
Typography documentation Included font weight variables for styles as reference.
Inspiration documentation Added Mood Board to Inspirations section.
Typography styles Fixed Customer font stack.
Layout styles Added easy centering for column grid options.
Etrade Repo styles Fixed code element.
Layout styles Reverted container to use the same gutter throughout.
Form Elements styles Added Toggle element.
Segmented Progress toolkit Added partially filled segmented progress bar variation.
April 27th Release
Typography styles Fixed Android headers font
Form Elements styles Fixed misaligned checkmark
Form Elements styles Fixed glitch in radio button
Typography styles Deprecating .text-light in favor of .text-muted
Etrade Repo styles Added <code> and <pre> elements styling
Color Scheme styles Chart color updates
Layout documentation Updated layout section
Color Scheme documentation Updated chart color section
Home documentation Updated home landing page
Home documentation Updated navigation structure
April 6th Release
Typography styles Updated customer font stack
Invision Board styles Added toggles component
Layout styles Added sections
Form Elements styles Fixed label padding when using the .label class
Etrade Repo styles XEON setup guide has been updated in the README.MD file of the project
Etrade Repo styles Material Icon's font path is now respecting the $font-path variable
Layout styles Container on mobile now has a 20 pixel left and right padding.
Univresal Messaging toolkit Universal Messaging variation color update
Typography toolkit Green text helper class, .text-brand-green can be used.
March 30th Release
Typography toolkit Updated font weights and a sizes for Prospect mobile type stack
Typography toolkit Updated font weights for Prospect desktop font stack
Typography toolkit Added extra-extra large type size for Prospect
Typography toolkit Upped size of large header to 32px
Typography toolkit Larger headers for Prospect now display in Extralight weight
Typography toolkit Prospect text can now appear on navy background as white
Typography toolkit Body and Subhead now have set back styles
Typography styles Strong tag now properly styles depending on font stack
Typography styles Prospect typography updated
Tabs toolkit Updated tabs
Tabs styles Nav tabs fixed in IE 11
Segmented Progress toolkit Updated progress bar
Etrade Repo styles Added print media queries
Etrade Repo styles Removed thicker horizontal rule (deprecated, removing next release)
Form elements styles Checkbox and radio button animations
Etrade Repo styles Added Firefox media query mixin
Modals styles Modal now centers horizontally and vertically on breakpoints sm, md, and lg
Form Elements styles Select dropdown switched to an SVG image, now has a disabed arrow state
Typography styles Added Extralight font weight for prospect font stack
Typography styles Removed thin font weight from prospect font stack
Flyouts styles Added flyouts and popovers
Color Scheme toolkit Removed purple from charting colors
March 23rd Release
Buttons and Links style Remove background color from outline buttons
Universal Messaging style Universal messaging no longer requires a heading element
Typography toolkit Added mobile type styles for Prospect system
Spacing toolkit Added mobile spacing styles
Form Elemnts toolkit Documented inactive dropdown state
Iconography toolkit Added umbrella icon
Buttons and Links toolkit Removed visited link state
Form Elements toolkit Specified default bottom margins for form fields
Iconography toolkit Removed arrows from icons
Universal Message toolkit Added universal message with no headline
Invision Board toolkit Added horizontal rules
Tabs toolkit Added mobile tab convention (longer border below tabs)
changelog toolkit Switched to dates for release naming convention
Iconography styles Iconography arrows removed
Iconography styles Iconography available in white (.et-inverse)
Typography styles iOS/Android fonts adjusted
Typography styles Subhead adjusted
Typography styles Customer fonts adjusted
Modals styles Modals
Buttons and Links styles Icon/link combination color adjusted
Form Elements styles Added label class for styling
Typography styles Fixed Android font weights
Spacing styles Added universal spacing to components
Buttons and Links styles Button when link fixes
Form elements documentation Form elements error field corrected
March 15th Release
Buttons and Links style Remove background color from outline buttons
Universal Messaging style Universal messaging no longer requires a heading element
February 14th Release
- documentation Added font switcher
Buttons and Links documentation Added text links. hover, visited, active
- documentation Updated the design styles
- documentation New navigation
February 7th Release
Iconography toolkit Updated E*TRADE icons sizes
Spacing toolkit Clarified vertical spacing
Layout toolkit Corrected grid padding to reflect our design pattern
Form Elements toolkit Checkboxes have a focused state
Form Elements toolkit Textfields and dropdowns have a green focus state even when there is an error
Color Scheme toolkit Color variables have a few more minor changes
January 20th Release
Buttons and Links toolkit Added back disabled link state
Form Elements toolkit added disabled selected checkbox state
Segmented Progress toolkit added progress bars
Typography toolkit Clarified font use
January 1st Release
Typography toolkit Synchronized font stacks to have similar names across platforms
Form Elements toolkit Refined ghost text style, disabled style, border width on text fields
Layout toolkit Changed grid system to base 10
Color Scheme toolkit Refined color system, removed some colors
- toolkit Added toggles
- toolkit Added mobile radio convention
Tabs toolkit Added tabs
- toolkit Added tables
- toolkit Added time toggle
Buttons and Links toolkit Refined disabled states for buttons
Form Elements toolkit Added correct disabled and disabled selected states for radio buttons