Design, simply elegant.

The E*TRADE Design Language is a design system that provides a seamless experience from end to end.

December 6th release (2019.12.6)
Full page overlay etrade.design Added guidance for the Full Page Overlay component in documentation.
Text field with more than one action design-language Text fields with more than one action will now show error messages and actions vertically aligned to one another, provided that the accompanying input is long enough for the text of all elements to fit.
Flyouts design-language Refactor Flyouts to use flexbox instead of width properties to size and position the flyout panel relative to the arrow. Refactor accounts for situations where React Flyouts were limited in width to their containing layout div.
Universal Message design-language-react Added a CTA (call to action) to the design-language-react universal message component.
Logo design-language-react Added the Etrade company logo to the design-language-react component library.
Tables design-language Add helper classes to center-align, top-align, and bottom-align table cells, rows, or the whole table.
Flyouts design-language Fixed a focus style issue on the flyouts (Chrome only).
Dropdown Button design-language-react Added an "id" prop and empty child check for the Dropdown Button.
November (2019.11.16)
Colors etrade.design Updated the Color page so the swatch is more readable in IE 11.
Spacing etrade.design Update the spacing page so it looks the same in IE 11.
Release Notes etrade.design Fixed the active link so it now shows up on the release notes page.
Charts etrade.design Move chart colors from the colors page to the chart documentation page.
All etrade.design Created a breakpoint selector for the iFrames.
All etrade.design Add CodeMirror plugin for React to be used for formatting CodeSnippet.
All etrade.design Add a React copy icon functionality to CodeSnippet
Storybooks react.etrade.design Added a text field phone number formatting input.
Storybooks react.etrade.design Refactored to the Text field, so live formatting is accessible.
Storybooks react.etrade.design Refactored the Flyout component. Added ability to open and reposition/resize based on the relationship with the browser window.
Storybooks react.etrade.design Fixed a bug where the React Universal Message was throwing an error when descendants were used.
Bitbucket Design Language Styles Fixed a bug in the grouping right border, where is was misalign on some monitors.