February 17th, 2020 - Spark React Hotfix

Package Version Details

• spark-react: 1.4.1 => 1.4.2
  https://www.npmjs.com/package/@sparkdesignsystem/spark-react/v/1.4.2

Patch update to Spark React

• Tells rollup to tranpile Spark package to commonjs format instead of es

Bug fixes to Selection inputs in Spark react

• Adds support for the onChange function to be passed into input variants checkbox and radio.
• Updates the select and Huge Select variants to use onChange while maintaining support for the onChangeFunc prop. Which will be deprecated in the future.
• Adds tests for the onChange props for checkbox and radio variants.

Docs Site

Enhances the card layout on the sparkdesignsystem homepage.

February 5th, 2020 (NDS Spark Package Release)

We are releasing some minor feature additions to our packages and bug fixes. The main minor additions are two new colors of red, adding in TypeScript Interfaces for our Spark Angular components, and improving the accessibility of our Dropdown component.

Package Version Details

• spark: 12.2.0 => 12.3.0
• spark-angular: 9.3.0 => 9.4.0
• spark-react: 1.3.0 => 1.4.1

https://www.npmjs.com/package/@sparkdesignsystem/spark/v/12.3.0
https://www.npmjs.com/package/@sparkdesignsystem/spark-react/v/1.4.1
https://www.npmjs.com/package/@sparkdesignsystem/spark-angular/v/9.4.0

New Features

Bugfixes

• Object Prepend polyfill update to es5
• remove unused var from sparkdesignsystem.com, $sprk-accordion-border-open
• added edge fallback for huge input

Color Updates

Two new red variations were added to Spark. Deep red #76232F
and Mid red #9D2235.

Component Updates

• Updated the Alert component in Angular to not rely on JavaScript from our Vanilla Spark package.
• Updated the Masthead component in Angular to not rely on JavaScript from our Vanilla Spark package.
• Updated the Tabs component in Angular to not rely on JavaScript from our Vanilla Spark package.
• Added an Input to Spark-Angular's sprk-button (isSpinning) that will render a spinner inside the button when true.
• Added new spacing sizes to the sprk-o-Box object.

Bug fix for Spark React, Spark Angular

Fixes #2699 #2131
Updated to use a fork of Tiny date picker, that allows Spark React and Spark Angular to
render in an SSR context.

Bug fix for SprkLink, SprkCardTeaser, SprkMasthead

Fixes #2238
Added an additional proptype option of PropTypes.elementType to SprkLinks (element), SprkCardTeaser (ctaLinkElement, mediaLinkElement) and SprkMasthead. This fixes a bug in tests in regards to a react component being supplied as the prop.

Bug fix for React SprkMasthead

Fixes #2665
Updates SprkMasthead to close the narrowNav menu when a navigating link is clicked.

Bug fix for SprkTextInput - Huge Variant

Fixes #2096
Updated the component to add the correct class when a defaultValue or value is passed into the component. The class enables the component to render correctly on page load in IE11 & Edge.

Bug fix for Dropdown

Fixes #2441
Adds a preventDefault() to the dropdown trigger click function to prevent any unwanted navigation functionality from occurring.

Add interfaces to spark-angular package

This adds structure for our angular component inputs that expect arrays and objects using TypeScript. Added missing analyticsString to bigNavLinks in sprk-masthead.component.ts. Added missing analyticsString to the dropdown choice items in the dropdown component.

Spark Angular Footer

Updated the footer API to have input analyticsString instead of analytics so I added in support for analyticsString. This brings footer in sync with the rest of the system that uses analyticsString. API now supports both methods for footer links right now to avoid breaking change.

Spark Angular Masthead

Added missing analyticsString to bigNavLinks in sprk-masthead.component.ts. Can now pass in an optional data-analytics string to the big navigation links in the masthead.

Spark Angular Dropdown

Added missing analyticsString to the dropdown choice items in the dropdown component. Can now pass in an optional data-analytics string to choice items in the dropdown component.

Dropdown (React, Angular, HTML)

We improved accessibility on Dropdowns by refactoring it according to W3C Examples.

October 4th, 2019

Welcome to Spark 12.2!

Today we're releasing new minor versions of Spark for Vanilla, React, and Angular. Here's a summary of the new features:

• Ported the reactive scrolling effect from the Vanilla Masthead to now be available in React and Angular, creating more vertical space for content on narrow viewports.
• Added a new variation of the Select Box, the Select Box Huge so that it is available for all frameworks.
• Added a new Percentage Input for handling entry of percent values in all frameworks.

Plus:

• Font size updates for Typography elements
• Various bug fixes.

Package Version Details

This release creates a new minor version for all frameworks with no breaking changes:

• spark: 12.1.1 => 12.2.0
• spark-angular: 9.2.1 => 9.3.0
• spark-react: 1.2.1 => 1.3.0

Update your versions to the latest ones above for all the goodness below!

New Features

Reactive Scrolling Effect for Masthead - React and Angular

The reactive scrolling effect for the Masthead has been added for React and Angular components.

When a user scrolls down the page on a narrow viewport, the masthead now animates up and off the page to create more space for content. When the user scrolls back up towards the top of the page, the masthead animates back down into view.

This functionality mimics the behavior of address bars on mobile web browsers and will automatically be applied to your app after updating to the latest versions of spark-angular or spark-react.

Spark Font Sizes

A new global base font size of 16px has been adopted for typography elements, increased from the previous 15px. Note this change only applies to font sizes for text inside elements with sprk-b-TypeDisplay* and sprk-b-TypeBody* classes, not all font relative metrics.

Inputs

• Added the Huge select box style for all frameworks. This matches the sizing of other "huge" input types, plus includes the animated label effect.

  

• Added input type declaration of data-sprk-input="huge" to signify the huge variant on all supported input types. The data property data-sprk-input="hugeTextInput" continues to work for text inputs but will be deprecated in a future release.

• Refactored Sass variable names so that $sprk-input-huge- prefixed variables are shared among huge style inputs. The previous $sprk-text-input-huge- prefix remains but is no longer documented and will be deprecated in a future release.

• Added hugeInput to spark-exports so that it can be individually imported

• Added a new Percentage Input for all frameworks, with iconography similar to the monetary input.

  

Bug Fixes

• Fixed a bug with select box to make sure vendor prefixes are always being applied in older browsers.

• Fixed a bug with huge text input (in vanilla only, react and angular fixes coming soon) and select box (in vanilla, react, angular) so that initial values now result in the correct label style instead of relying only on user interaction events.

• Fixed a layout bug with the alignment of input values being too far over to the right.

• Fixed a bug with the React select box component so that it transfers attributes set on the JSX element to the final <select> element during render

• Fixed a bug with spark-angular's sprkInput directive to reduce unnecessary error in the aot (Ahead Of Time) compiler

• Fixed a bug so that the monetary input formatter no longer defaults empty field values to 0.00

• Fixed a bug in spark-angular's masthead on iOS to keep it sticky to the top of the page, allowing the responsive scrolling effect to work as intended

September 13th, 2019

Summary

This release includes a small patch to all three spark packages (vanilla, react, angular) to emit out the spark package version on the window object. To check the version, run window.sprk.version.angular or window.sprk.version.react or window.sprk.version.vanilla in your console on a site that is using Spark.

Version Details

• spark: 12.1.0 => 12.1.1
• spark-angular: 9.2 => 9.2.1
• spark-react: 1.2.0 => 1.2.1

August 21st, 2019

Summary

In this release the we've focused on adding support for Angular 7 and Angular 8 (previously we only supported Angular 6), fixed several bugs in Spark's Angular components and added new label functionality to the Huge Text Input.

Version Details

• spark: 12.0.0 => 12.1.0
• spark-angular: 9.1 => 9.2
• spark-react: 1.1.0 => 1.2.0

📌Indicates a change you may need to take (these are not breaking changes)

New Component Updates

Huge Text Inputs with Floating Labels (Vanilla, React and Angular)

• Added functionality to have a floating label for Huge Text Inputs. The label is vertically centered inside the input until the input is focused. The label animates on focus and blur, changing size and positioning to "float" above the placeholder while visibly remaining inside the input.
  Not Focused:
  
  Focused:
  
  With Value:
  
  Animation
  
• React: Removed unnecessary container div when there's no icon
• New and Changed Variables (All available in settings.scss)
  • 📌REMOVED: $sprk-text-input-huge-border no longer exists, it's consolidated with base input styles provided by $sprk-text-input-border
    • Remove all instances of this variable from your app
  • CHANGED: $sprk-text-input-huge-focus-border-width, was at first not re-assignable, but now is. Default value is 2px
  • CHANGED: $sprk-text-input-border, default is now 2px solid $sprk-gray-dark
  • NEW: $sprk-text-input-huge-label-font-size, default value is $sprk-font-size-body-four
  • NEW: $sprk-text-input-huge-padding, default value is 0 $sprk-space-misc-a
  • NEW: $$sprk-text-input-huge-border-width, default value is2px
  • NEW: $sprk-text-input-huge-transition: top 0.3s, color 0.3s, font-size 0.3s
  • NEW: $sprk-text-input-huge-transition-delay, default value is 0s
  • NEW: $sprk-text-input-huge-placeholder-transition-delay, default value is 100ms
  • NEW: $sprk-text-input-huge-placeholder-transition-property, default value is opacity
  • NEW: $sprk-text-input-huge-placeholder-opacity, default value is 0
  • NEW: $sprk-text-input-huge-placeholder-active-opacity, default value is 1
  • NEW: $sprk-text-input-huge-label-top, default value is $sprk-text-input-huge-height / 3
  • NEW: $sprk-text-input-huge-label-active-top, default value is 10px !default
  • NEW: $sprk-text-input-huge-active-padding-top, default value is $sprk-text-input-huge-height / 4
  • NEW: $sprk-text-input-huge-focus-label-color, default value is $sprk-green
  • NEW: $sprk-text-input-huge-error-focus-label-color, default value is $sprk-black
  • NEW: $sprk-text-input-huge-complete-label-color, default value is $sprk-black

React Stepper Has Better Layout and Animation

• Now only renders a container <p> if needed
• Improved code coverage for unit tests

Angular Pagination Is Now Smarter

• The paginaton component now automatically switches between "long" and "default" layout as needed.
• Updated styles to fix a rendering bug in long pagination component. The long style now looks like this:
  

New CSS/JS Utilities

• JS Utility - toggleClassWithValue
  • It toggle classes depending on whether or not an input has value
• CSS utility - Remove the text cropping done on typography .sprk-u-TextCrop--none

Bug Fixes 🦟

• 📌Angular Pagination
  • Should now display correctly with 3 or fewer pages.
  • Fixed a bug where the previousClick and nextClick pagination component click events were emitting the incorrect page number. Note that in order to keep this from being a breaking change, the page property has been left as is and the newPage property has been added with the correct value.
    Before:
    
    After:
    
• 📌Angular Exports Have Correct Names - Explicitly export components and modules to allow for individual use in applications.
  • If you were importing a component using the angular compiled shorthand name has the latin barred O (for example, ɵoa), this should be updated to the actual Spark Component name
• 📌Accordion Hover Style - We had a hover style on accordion items, but because of an incorrect selector, it was never being applied.
  -We fixed it and changed default of $sprk-accordion-summary-active-color to $sprk-green
  • If you have an existing override to fix this, you can get rid of it now
    
• 📌Fixes typo - $sprk-stepper-dark-icon-color-hoverg => $sprk-stepper-dark-icon-color-hover
  • If you were manually overriding this variable, you should update to the new spelling.
• 📌Fixes typo -$sprk-toggle-transistion-timing => $sprk-toggle-transition-timing.
  • If you were manually overriding this variable, you should update to the new spelling.
• Can now dynamically show/hide checkbox options
  • Fixed a bug where nested checkboxes/radios weren't working in sprk-selection-containers.
• Fixed animations in Angular v7 and v8 for:
  • Toggle
  • Accordion
  • Masthead Accordion
• Angular Ordered Lists in IE11 - Ordered lists now correctly number
• Angular Ordered Lists Code Snippet Typo - Corrected code snippet in documentation.

Security Fixes

lodash version changes

• moving from 4.17.11 to 4.17.15
• patches a vulnerability reported through our automated tools

Spark Docs Site

• Search Improvements - Added Algolia for whole site search, replacing the component filter in the main navigation

• For Docs Site Only - Updated the regex for linter scss/dollar-variable-pattern
  • • Now requires sprk + -, followed by any letter or number collection.

Polyfills

• Added a polyfill for Object.assign (IE11)
• Added a polyfill for CustomEvent (IE11)

August 1, 2019 - Dependency Hotfix

Summary

Hotfix for a dependency issue. Importing throttle from lodash which is now included in the dev dependencies.

Version Details

• spark: v12.0.1

July 1, 2019

Summary

In this release the Spark Design System team has improved functionality for Masthead and Inputs and created the SprkStepper React component.

https://july-1-2019.sparkdesignsystem.com/

Version Details

• spark: v12.0.0 - Breaking Change ❗️
• spark-angular: v9.1.0 - Minor Change ⛏
• spark-react: v1.1.1 - Minor Change ⛏

Component Updates

Masthead [Vanilla - BREAKING CHANGE, Angular, React]

• The breaking change only applies to the vanilla implementation ❗️
• Sass has been updated to use flexbox to position the menu, logo and additional link on narrow viewports
• Angular - An additional slot has been added to pass the additional navigation link: navItem-slot
• React - An additional prop has been added to pass the additional navigation link: navLink
• Vanilla - An additional div is necessary to keep the logo centered in narrow viewports. The following should be added directly after the div.sprk-c-Masthead__branding:
  <div class="sprk-c-Masthead__nav-item"></div>
• Masthead (Extended) - A new user account icon has been added - user-account

Masthead [Vanilla]

• The mobile masthead experience has been enhanced for the vanilla component
• The API has not changed and these changes will be applied automatically when upgrading Spark
• When a user scrolls down the page, the masthead will become hidden. When the user scrolls back up towards the top of the page, the masthead will come back into view
• The design reason for this change is to allow more space for content on the mobile experience, while providing easy access to the navigation

Masthead - Extended [Angular] - BUG

• Remove the sprk-u-Width-100 class from the dropdown
• Fixes the character overflow issue in the dropdown items

Inputs [Vanilla, Angular, React]

• Update the default line height of the $sprk-input-error-text-line-height variable to 1.4 from 1
• Adds spacing when the error message wraps to the second line

Select Input [Vanilla, Angular, React]

• Update the default line height of the $sprk-text-input-line-height variable to 1.3 from 1
• Update the default padding of the $sprk-select-padding variable to accommodate the adjusted line height
• Allows text descenders to be rendered without being cut off

Date Input [Vanilla, Angular, React] - BUG

• Update the Date Validation regex
• Allow July as a valid month
• Allows user input using dashes for the month of February
• Disallows use of 00 in the month of February

Stepper [React, Vanilla]

• The Spark team has started implementing the Stepper component for the React framework

• In this release, we are publishing the Base and Descriptions variants of the Stepper

• Watch for the Carousel variant of Stepper in a future release

  SCSS Changes [BREAKING CHANGE]

  • sprk-stepper-step-content-bg-selected: default value changed to transparent (was sprk-white)
  • sprk-stepper-dark-step-description-bg-selected: renamed to sprk-stepper-dark-step-description-selected. This value was being used to define the background color of a selected step's content box when it has a description. This value is now used for the text color of a selected step's content and header when it has a description. The background color of the selected step's content box is controlled by sprk-stepper-step-description-bg-selected. This is a breaking change if you were overriding sprk-stepper-dark-step-description-bg-selected. ❗️

May 28th, 2019

The Spark team is happy to announce consolidated framework libraries for plain JavaScript, Angular, and React. This change helps support a simplified developer on-boarding experience and easier Spark team maintenance workflow as we add React to our list of supported JavaScript frameworks.

• All Spark libraries for styles and plain JavaScript functions are now on NPM as @sparkdesignsystem/spark.
• Full support for Angular has now been consolidated into @sparkdesignsystem/spark-angular
• Full support for React is now available at @sparkdesignsystem/spark-react

This change does not change Spark styles or component APIs, but does affect how dependencies are installed and imported.

Please note that all Angular module and component names have also been standardized to use the Sprk prefix. Previous versions had inconsistent prefix names that may need to be changed in your project. For example SparkPagination is now named SprkPagination.

Setup

Here's an example of how a package.json file might be changed for an Angular project using Spark:

Before:

"devDependencies": {
  "@sparkdesignsystem/spark-card": "^4.0.2",
  "@sparkdesignsystem/spark-core": "^10.0.0",
  "@sparkdesignsystem/spark-core-angular": "^8.0.9",
  "@sparkdesignsystem/spark-dictionary": "^1.0.2",
  "@sparkdesignsystem/spark-extras": "^3.1.8-alpha.7",
  "@sparkdesignsystem/spark-extras-angular-award": "^3.0.12",
  "@sparkdesignsystem/spark-extras-angular-card": "^3.0.11",
  "@sparkdesignsystem/spark-extras-angular-dictionary": "^3.0.11",
  "@sparkdesignsystem/spark-extras-angular-highlight-board": "^4.0.0",
  "@sparkdesignsystem/spark-highlight-board": "^4.0.2"
}

After

"devDependencies": {
  "@sparkdesignsystem/spark": "^11.0.0",
  "@sparkdesignsystem/spark-angular": "^9.0.0"
}

This represents a significant breaking change for Angular packages as it relates to bootstrap and controller injection. All spark styles have been combined as @sparkdesignsystem/spark and all Angular packages are now @sparkdesignsystem/spark-angular.

Change Summary

❗️ CORE
`@sparkdesignsystem/spark-core` -> `@sparkdesignsystem/spark`
`@sparkdesignsystem/spark-card` -> DEPRECATED (added to @sparkdesignsystem/spark)
`@sparkdesignsystem/spark-highlight-board` -> DEPRECATED (added to @sparkdesignsystem/spark)
`@sparkdesignsystem/spark-dictionary` -> DEPRECATED (added to @sparkdesignsystem/spark)
`@sparkdesignsystem/spark-award` -> DEPRECATED (added to @sparkdesignsystem/spark)

❗️ANGULAR
@sparkdesignsystem/spark-core-angular -> @sparkdesignsystem/spark-angular
@sparkdesignsystem/spark-card-extras-angular -> DEPRECATED (added to @sparkdesignsystem/spark-angular)
@sparkdesignsystem/spark-extras-angular-highlight-board -> DEPRECATED (added to @sparkdesignsystem/spark-angular)
@sparkdesignsystem/spark-extras-angular-dictionary -> DEPRECATED (added to @sparkdesignsystem/spark-angular)
@sparkdesignsystem/spark-extras-angular-award -> DEPRECATED (added to @sparkdesignsystem/spark-angular)

❗️REACT
Now has `peerDependencies` on @sparkdesignsystem/spark and NOT @sparkdesignsystem/spark-core

Upgrading

Upgrade Guide

1. Remove spark-core package: npm uninstall --save-dev @sparkdesignsystem/spark-core
2. Install new spark package: npm install --save-dev @sparkdesignsystem/spark
3. Change Sass file import path to point to new package: @import "node_modules/@sparkdesignsystem/spark/spark
4. Update any Spark JS polyfills and utility paths to use @sparkdesignsystem/spark instead of @sparkdesignsystem/spark-core
5. Remove any "Spark Extras" patterns you are using. Ex. npm uninstall --save-dev @sparkdesignsystem/spark-card
6. Update the path to the spark-core sass file to @import "node_modules/@sparkdesignsystem/spark/spark.scss";

Additional Upgrade Steps - Vanilla

1. Change JS import: import spark from "node_modules/@sparkdesignsystem/spark/spark"

Additional Upgrade Steps - Angular

1. Remove all Angular specific extras, such as @sparkdesignsystem/spark-extras-angular-card
2. Install new spark angular package, npm install --save-dev @sparkdesignsystem/spark-angular
3. Please note that all Angular module and component names have been standardized to use the Sprk prefix. Previous versions had inconsistent prefix names that may need to be changed in your project. For example SparkPagination is now named SprkPagination.

Additional Upgrade Steps - React

1. Install (or update) new patched version of spark react package, npm install --save-dev @sparkdesignsystem/spark-react

Component Updates 🆕

Huge Text Input [Available in Vanilla, React, and Angular]

• This input is a much larger version of text input with center text. (validation is still left aligned)
• Restrictions: This type of text input should only used as the main action on a page and in a form that asks for one input at a time.
• The label is hidden but the HTML tag is still important to include so it's accessible to screen readers.
• All other attributes from text-input are available for this larger text box

Accordion [Vanilla, React, and Angular]

• margin: 0 auto; was removed from the .sprk-c-Accordion class.
• The accordion component will no longer be centered on the page by default.

May 3, 2019

Spark Design System published bug fixes. Details can be read below.

Summary

This release adds bug fixes to two Spark Core packages.

https://may-3-2019.sparkdesignsystem.com/

Version Details

• spark-core: v10.1.1 - patch 🦟
• spark-core-angular: v8.0.9 - patch 🦟

Component Updates

Typography 🦟

This component had a bug where we had an explicit font set to the <strong>, <small> tags. Now, it will inherit font size like normal.

Stepper With Carousel 🦟

• Adds the carousel Sass vars to the documentation page.
• Fixes a bug where the carousel Sass breakpoint was not customizable. Now, the var of $sprk-carousel-breakpoint is available.
• Fixes resize event issues with the Stepper(with carousel).

April 30, 2019

Spark Design System published bug fixes. Details can be read below.

Summary

This release adds two bug fixes to the Spark Core Angular package.

https://april-30-2019.sparkdesignsystem.com/

Version Details

• spark-core-angular: v8.0.7 - patch 🦟

Component Updates

Angular Dropdown 🦟

This component had a bug where it was preventing the default action on click of one of the choice items. This caused external links to not work, as the link was never followed. The prevent default has now been removed.

Angular Masthead Extended Variation 🦟

The dropdown selector in the narrow navigation had a hard-coded text value for the link in the footer. The value has now been setup to be customized. Please see the masthead docs for information on adding in the footer link in the dropdown selector.
footer: { analyticsString: "Go Elsewhere Link", text: 'Go Elsewhere', href: '/alerts', }