E*TRADE Design Language

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