E*TRADE Design Language
Download the Sketch file
Download the Inspector
React Component Documentation
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 |
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 |
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 |