Skip to content

October 4th, 2019
Compare
Choose a tag to compare
@guern1kn guern1kn released this 04 Oct 16:51
october-4-2019
9dbac28
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

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.

64562463-0734f680-d31b-11e9-972e-00464b79c776

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.

    select huge

  • 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.

    image

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

Assets 2
Loading