Docs

Release Notes

0.12.0

Cards and Datepickers

20 September 2017

What's New

  • New components:
  • Joystick now has a complete Craft Library to make designing in Sketch faster and easier than ever!
  • We've added some analytics to Joystick so that our team can have some insight into what other teams and projects are using Joystick at EA. This is done in the form of a tracking pixel that is applied to the <html> tag as a background-image in the CSS.
  • New small select input option: .joy-select--small.

Breaking Changes

  • Several of the components that were still using the legacy /component/flavors/ architecture have been reworked. If you were referencing any of the Scss files for any of the following components, please update your references:
    • Button Groups
    • Buttons
    • Cards
    • Dropdowns
    • Forms
    • Grid System
    • Media Object
    • Modals
    • Popovers
    • Spinners
    • Tables
    • Tabs

Technical Changes

  • Replaced the #{$css-prefix} with joy- in all files to make things simpler.
  • Removed a significant amount of legacy Lightning Design System content.
  • Removed package-lock.json and yarn.lock from tracking.

0.11.0

Updated Badges + New Mixins

28 July 2017

What's new
  • Badge styles added:
    • Success
    • Warning
    • Error
    • Inverse
  • New Badge color Sass mixin for creating custom badge styles
  • New Button color Sass mixin for creating custom button styles
  • A new helper class, .joy-button--no-wrap has been added to prevent buttons from wrapping.
Breaking Changes
  • If you were previously using component styles for Badges, please update to use one of our new badge color options, or create your own custom badge style with the badge-color mixin.
Changes
  • Button wrapping
    • Previously, when the text of a button needed to wrap, the line-height was quite large and made the button look broken.
    • Button structure has been slightly reworked so that the height of a buttons - normal and small - will wrap nicely.
  • Button height for normal and small buttons now correctly renders at 36px and 24px respectively (previously 38px and 26px).

0.10.0

Alerts, Tables, and Buttons

13 July 2017

What's New
  • New component: Alerts can be used to convey contextual errors, warning, or other information to users.
    • Alerts is the first component to include Design Guidelines (look for these to start showing up on more components!)
    • Standard alerts come in 4 levels of severity, denoted by color (from most to least severe):
      • Danger
      • Warning
      • Default
      • Success
    • App-Level Alerts appear at the top of your application for system-level messages.
    • Alerts have been added to the Design Template files.
Changes
  • Updated component: Tables have been redesigned and with additional functionality.
  • Updated component: Buttons styles have been reworked.
    • Button horizontal padding reduced slightly.
    • Small buttons were are now slightly shorter (24px height).
    • New button type: Flat Buttons.
    • New button styles: Danger (red) and Success (green) button styles.
    • Better, more consistent disabled states
    • Outline hover states softened to have a less extreme transition.
    • Inverse styles simplified.
    • Block style button documentation added.
    • Sketch and PSD Design Files button styles have been updated.
  • Increased indent space for ul > ul from 1rem to 2rem.
  • Font-size variables changed:
    • $font-size-x-small: 0.6875rem (11px) - formerly 0.625rem (10px)
    • $font-size-large:: 1.25rem (20px) - formerly 1.5rem (22px)
    • $font-size-x-large:: 1.75rem (28px) - formerly 2rem (32px)
    • $font-size-xx-large:: 2.5rem (40px) - formerly 3rem (48px)
    • $font-size-xxx-large:: 3.25rem (52px) - formerly 3.75rem (60px)
Deprecated

In an effort to simplify button styles and provide more UX guidance to developers about button usage, we have deprecated several button styles in v0.10.0. These classes will continue to work until they are fully removed in v1.0.0. If you are using any of these styles, please update your markup to use an alternative style.

The following button classes are being marked as deprecated in this release:

  • .joy-button--alt
  • .joy-button--link
  • .joy-button--pill (never documented)
  • .joy-button--large
  • .joy-button--huge

Again, they will continue to work until they are fully removed in v1.0.0.

0.9.0

Layouts

2 June 2017

What's New
Design Templates
  • New Joystick Layout Patterns added to Sketch and PSD files
  • Layout Patterns added to Joystick Design Guideline PDF
  • Updated .clr color swatch files
Technical Changes
  • Upgraded NPM packages
  • Audio beep warning for Sass errors when developing locally

0.8.4

Improve Color Shade Contrast

10 May 2017

What's New
  • Color contrast between the darker and lighter shades of Joystick colors has been increased.
    • -darkest shades can be used on -lighter and -lightest backgrounds
    • -lightest shades can be used on -darker and -darkest backgrounds.
  • Color Contrast documentation has been added to the Colors utility.
  • The success and warning component styles that were revised in the 0.8.3 release have been slightly tweaked to use the new color contrasts.

0.8.3

Improve Color Accessibility

9 May 2017

What's New
  • Component styles colors have been reworked for improved color contrast, specifically for the success, warning, and error variants.
  • Badges and Boxes that use these component styles are updated
Design Templates
  • Updated Badge and Box styles to reflect new component styles.
  • Removed "EAIT Templates" from the files as they used outdated components and colors.
Technical Changes
  • Added tota11y script when running the site locally to test accessibility.
  • Sass mixin invert-text name changed to white-text

0.8.2

Responsive Grid bug fixes

4 May 2017

What's New
  • A tearsheet page to check out additional examples and demos of some components and utilities.
  • Updated breakpoints for responsive size utilities.
Bug Fix
  • Responsive size utilities (e.g. .joy-medium-size--1-of-3) now work as intended
  • Responsive order utilities (e.g. joy-small-order--3) now work as intended
Technical Changes
  • Media Query breakpoints have been converted from ems to their pixel equivalent.
    • $mq-x-small: 300px // was 18.75em
    • $mq-small: 560px // was 35em
    • $mq-medium: 768px // was 48em
    • $mq-large: 1008px // was 63em
    • $mq-x-large: 1392px // was 87em
    • $mq-xx-large: 2000px // was 125em
  • Gulp now emits a notification and a beep when a Sass error is produced

0.8.1

Joystick jQuery Support

21 March 2017

What's New
  • Support for Joystick's new extension: Joystick jQuery - which was built and contributed by Mihail Stancescu on the Game Dev Applications team in Bucharest.
  • Added documentation for using the Joystick jQuery plugin to the following components:
  • Optional .joy-modal--no-transition class added for modals if you would like for a modal to instantly appear/disappear without any transitions.
  • Updated PowerPoint and Keynote decks to match new Joystick colors.
Bug Fix
  • Fixed bug where some utilities were no longer working properly (spacing).
  • Required input states now works properly in compound forms.
Technical Changes
  • .editorconfig file added to the Joystick Design System repository.
Breaking Changes
  • Modals now require the class .joy-modal-show to be applied to the specific .joy-modal element you would like to show. This will allow for multiple modals to be in the markup of a single page.

0.8.1-beta.4

What's New
Bug Fix
  • Fixed bug where some utilities were no longer working properly (spacing).

0.8.1-beta.3

Bug Fix

0.8.1-beta.2

What's New
  • .editorconfig file added to the repository.
  • Optional .joy-modal--no-transition class added for modals if you would like for a modal to instantly appear/disappear without any transitions.
  • Updated PowerPoint and Keynote decks to match new Joystick colors.
Breaking Changes
  • Modals now require the class .joy-modal-show to be applied to the specific .joy-modal element you would like to show. This will allow for multiple modals to be in the markup of a single page.

0.8.0

New Colors

25 January 2017

What's New
  • The Joystick Color palette now has brand new color palette. The new colors are bolder and more accessible.
    • Colors has been moved from Components to Utilities
    • Simplified theming when using Joystick's Sass framework.
    • Joystick Design Template Sketch File, Photoshop File, and Design Guidelines PDF have been updated with new colors.
    • Updated range slider color helpers to use new naming convention. Old range slider color names will remain available until v1.0.0.
  • New deprecate() mixin for better future-proofing and improving backward-compatibility for future releases.
Breaking Changes
  • The following color Sass variables have been removed from Joystick:
    • $red
    • $orange
    • $yellow
    • $green
    • $teal
    • $blue
    • $royal-blue
    • $purple
    • $fuchsia
    • $pink
  • Color shades no longer use the -10 to -90 suffix naming convention e.g. $color-base-10, $color-base-20, etc.
  • Read more about updating your color variables in your code in our New Colors guide.
Technical Changes
  • Add Joystick version number to generated CSS files.
  • The main content of _variables.scss is now broken up into multiple files in app/scss/variables in order to make themeing easier.
  • Install instructions on dev site now use the current version tag instead of the dev branch.
  • New Favicon for Joystick Docs site
  • Fix bower.json formatting bug
  • jQuery dependeny for docs site is now an NPM package instead of a Bower package.
  • Fixed js lint errors

0.8.0-beta.4

  • Fix bower.json formatting bug

0.8.0-beta.3

  • Install instructions on dev site now use the version tag instead of the dev branch.

0.8.0-beta.2

What's New
  • The Joystick Color palette has been completely refreshed. The new colors are bolder and more accessible.
  • Colors has been moved from Components to Utilities
  • New Favicon for Joystick Docs
  • Simplified theming when using Joystick's Sass framework.
  • Joystick Design Template Sketch File has been updated with new colors (Photoshop file and design guidelines PDF coming before final release).
Breaking Changes
  • The following color Sass variables have been removed from Joystick:
    • $red
    • $orange
    • $yellow
    • $green
    • $teal
    • $blue
    • $royal-blue
    • $purple
    • $fuchsia
    • $pink
  • Color shades no longer use the -10 to -90 suffix naming convention e.g. $color-base-10, $color-base-20, etc. -
Technical Changes
  • jQuery dependeny for docs site is now an NPM package instead of a Bower package.
  • The main content of _variables.scss is now broken up into multiple files in app/scss/variables in order to make themeing easier.

0.7.0

Utilities

9 December 2016

What's New
  • Utilities - New helper classes to provide even more control over Joystick components
    • 11 new utility helpers
    • Typography documentation moved from Components to Utilities and renamed "Text".
  • The navbar for the Docs site has been redesigned to utilize the navbar component.
  • The .joy-brand__separator has been tweaked slightly and no longer uses a | in a pseudo element.
Bug Fixes
  • Component examples now use the correct Joystick colors
  • Removed negative left margin from dotted lists which caused them to be moved 1rem too far to the left.
  • Added missing padding to breadcrumb separators

0.6.1

Dropdowns in Design Files

31 October 2016

What's New
  • Dropdown components have been added into the Photoshop and Sketch Design Template files.

0.6.0

Dropdowns

21 October 2016

What's New
  • New Component: Dropdowns. - Dropdowns are toggleable menus that are used to show the user aditional actions or content.
  • Added a .joy-brand__img class to use in lieu if the .joy-brand__svg class in navbars.

0.5.0

Modals & NPM install

29 September 2016

What's New
  • New Component: Modal. - A "modal" is used to display content in a layer over your page's main content.
  • Modals added to the Sketch and Photoshop design templates
  • Install via npm with npm install --save git+https://stash.ea.com/scm/xd/joystick-design-system.git.
Breaking Changes
  • Font Awesome has been removed as a Dependency of Joystick. For more information on how to continue using it, see our icons documentation.
  • Deprecated Page Headers component, which was replaced by Navbars
Bug Fixes
  • Fixed a bug where Navbar demos showed a double separator between the logo and brand name.
  • Fixed a bug in the navbar where EA logo was excessively wide in IE10
  • Fixed a bug on iPad portrait view where no links were visible in the navbar
  • Switches with text will now display properly in IE10 and up.
  • Range Sliders styles in IE10 and up now match the styles in other browsers
  • Range Sliders focus states have been added for improved accessiblility in all browsers
  • Fixed bug where build process would crash if .passwd.json file was missing when building from a local repository.
Technical Changes
  • Improved README.md instructions

0.4.2

1 September 2016

Bug Fixes
  • Fixed a bug where the responsive Navbar's width grew larger than the width of the viewport on IE11

0.4.1

26 August 2016

Technical Changes
  • Added !default to all variables missing the declaration in app/scss/_variables.scss and app/scss/variables/colors.scss files.

0.4.0

New components and redesigned navbars

16 August 2016

What's New
  • New Component: Switches.
    • A "switch" is a stylized version of a checkbox input which allows a user to toggle between two options.
    • Switch component variants include Sizes, Widths, Text, and Colors
  • New Component: Range Sliders.
    • Range sliders are a form of input for entering a number whose exact value is not important.
    • Range Slider component variants include Labels and Colors.
  • Themes are now renamed to Component Styles. Class names have not been changed.
  • Link styles in Component Styles themes now just add an underline on hover instead of a white background.
  • New .joy-button--inverse-white class added to buttons inverse variant.
Breaking Changes
  • The Navbar component has been redesigned and rebuilt to be simpler and more easily modified.
    • Responsive Navbar component variant has also beein redesign and rebuilt from the ground-up.
    • joy-navbar__responsive-toggle class changes to joy-navbar__menu-toggle
    • joy-navbar__responsive-toggle class changes to joy-navbar__menu-toggle
    • "Menu" text removed from joy-navbar__menu-toggle (formerly joy-navbar__responsive-toggle). Text is now displayed via CSS.
    • "|" text removed from joy-brand__separator. Text is now displayed via CSS.
    • joy-navbar__link--account class for the Account link in the navbar.
    • joy-navbar__primary--responsive-centered modifier added to center app logo in mobile views
    • joy-navbar__menu-toggle--left added to position the menu button on the left of the mobile-view navbar when using the centered modifier.
  • Please review any existing navbar components and variants you are currently using and be sure to update your markup accordingly
Design Templates
  • Switches and Range Sliders designs added to the Sketch and Photoshop Design Templates
  • Moved the header/footer samples over to the Tearsheet
  • Added a Properties Legend layer (hidden by default), to show spacing and properties for basic components
  • HEADERS renamed to NAVBAR
  • Responsive Navbar included
  • Navbar styles redesigned to match the default styles of navbars (white)
  • Radio and Checkbox inputs had their designs updated in the Sketch and PSD Design Templates to better match the CSS styles from the framework.
Technical Changes
  • Component Sass architecture has been simplified for several components (removed FLAVOR directory architecture):
    • buttons
    • navbar
    • range sliders
    • switches
  • Attribution added to the generated CSS
  • jQuery removed as bower depenedency
  • Button mixins: Button's are now built using mixins to define all color styles. Developers can use the @mixin button-color() to create entirely new buttons. See app/scss/components/buttons/buttons-base.scss for usage instructions.

Please report any issues and provide feedback in the Slack Support channel.

0.3.2

Disabled Button Class and Hex Colors

26 May 2016

  • Button component now includes joy-button--disabled class for disabling anchor elements.
  • HEX color values now appear along with Sass color variables in the colors component.

0.3.1

Better Bower Install

9 May 2016

  • Installing Joystick via Bower now only installs the Sass files (instead of downloading the entire +48MB repository).

0.3.0

Console is now Joystick

28 Apr 2016

Breaking Changes
  • The repository name has changed from console-design-system to joystick-design-system
  • The bower install command has changes to bower install https://stash.ea.com/scm/xd/joystick-design-system.git.
  • The prefix for CSS classes has changed from cds- to joy-. We will not be changing this prefix anymore after this update, we promise.
What's new
  • We've completely redesigned the website - well, websites. The Joystick Docs now live at docs.joystick.ea.com and we've created a second site at joystick.ea.com where you can learn more about Joystick.
  • New guides have been created to help learn how to design, develop, or write using Joystick.
  • Not sure where to start with Joystick? This getting started walkthrough will help you get up and going with Joystick.
  • Tons of new resources are available on our resources

0.2.1

New Sketch Template with Font Awesome Symbols

9 Feb 2016

  • Update Sketch Template to include symbols for the Font Awesome icon library
  • Remove typo from homepage

0.2.0

Technical Cleanup + ZIP Downloads

9 Feb 2016

We had some things to cleanup behind the scenes in orer to prepare for newer content and features.

0.1.0

Pre-Alpha Release

18 Dec 2015

For this pre-alpha release of the Joystick Design System, we advise that you used the UI Framework only for Proofs-of-concept or prototypes. Please email any questions or feedback to Andy McFee or Ryan Rumsey on the EA IT Experience Design team.

  • First release of the xd.ea.com site
  • A CSS-only, platform-agnostic UI framework which can be included in a project via Bower.
  • Design Principles explaining the philosphy behind Joystick's design decisions.
  • Content Guide for aiding content creators in writing effective and consistent content for various media.
  • Downloadable Design Template for Skecth (Mac only) is available for designers to use to wireframe with UI elements from the Joystick's UI Framework
  • BREAKING CHANGE If you have been using the UI Framework during development, be aware that the class scoping prfeix has changed from .eads- to .cds-. Please update in your markup when performing an update on your Bower package.