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
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 |