Design, simply elegant.

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

February release (2020.2.14)
Confetti docs.etrade.design We now have usage guideline and an example for the confetti component 🎉
Repo http://react.etrade.design/ Replaced withKnobOptions with withKnob, removed unused code imports, fixed 🔧 depreciation warning for framework-specific imports.
Cards https://docs.etrade.design/ Aligned the background image on the full width card 🃏, so it now centers the image.
React library React Updated the build 🛠 script to minify and uglify component files in the es/ and lib/ directories. es_dev/ and lib_dev/ now include unminified component files for development.
AutoSuggest react.etrade.design Add a 💪 tag to the search list to highlight search keywords.
MinimalNavigation http://react.etrade.design/ Added a prop to hide or show divider on the minimal navigation.
Progress bar docs.etrade.design We have added a step 🚶 counter to the progress bar, with usage rules and an example.
Progress Bar http://react.etrade.design/ Added a new step counter react component for the progress bar, including custom labeling.
React Application Template https://bitbucket.etrade.com/projects/JST/repos/react-application-template/browse Updated linter and formatter
Radio http://react.etrade.design/ Updated the Radio button by adding a value prop and event object as second argument to the onSelect.
Buttons React Updated the react Button component by adding the "btnType" prop to the component, which enables users to set the "type" attribute on the rendered button element. Defaults to "button".
Segmented progress bar Design Language The segmented progress bar component will be deprecated and removed by June 2020. Future implementations should use the updated progress bar component.
SelectionList react.etrade.design We added the selection list component to react library.
Selection List Styles Added visuals for the new selection list component, including animation.
Skeleton Loading Styles Created a skeleton block helper class for the upcoming Skeleton react integration.
January 31st release (2020.1.31)
Interactive states etrade.design We move the interactive states under Utilities in the menu, and added a card image to the utilities landing page. The URL for the interactive states (https://etrade.design/interactive-states) remains the same, this is only a change to where in the menu it exists.
Flyout react.etrade.design We refactored the .popover sass class for Flyouts. This fixes an issue with the close button positioning.
Typography Design Language Styles We updated .label-large class to apply label coloring, negating need for .label class and updated documentation.
Tags Design Language Styles Improved right-to-left text support for tag components.
Flyouts Design Language Styles We added some additional styles to the popover arrow position, to match the design-language-react component. There are now new arrow positions for: `.top-start`, `.top-end`, `right-start`, `right-end`, `.bottom-start`, `.bottom-end`, `.left-start`, `.left-end`.