Skip to content

July 1, 2019
Compare
Choose a tag to compare
@guern1kn guern1kn released this 01 Jul 18:57
july-1-2019
b7ed71c
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.

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. ❗️
Assets 2
Loading