Design, simply elegant.
The E*TRADE Design Language is a design system that provides a seamless experience from end to end.
Download the Sketch file
Download the Inspector
React Component Documentation
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. |