Skip to content

Publish - August 30th, 2021
Compare
Choose a tag to compare
@afebbraro afebbraro released this 30 Aug 15:32
· 21 commits to main since this release
august-30-2021
4806020
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

We've removed utility classes from being used in the components. We had some typography updates, and flipped the accordion arrow icon. The angular code dependency has been updated to support 11. We updated the angular storybook and it now uses inline rendering which makes the Docs page load much faster.

❗️ This release is medium-large. Depending on the app.
Allocate Dev and Design time accordingly and refer to the Upgrade Guide at the bottom of these release notes for project scope. The largest efforts are checking your entire app for any visual changes upon upgrading.

Package Versions

  • Angular: 14.0.0 -> 15.0.0
  • React: 6.0.0 -> 7.0.0
  • Spark (HTML): 17.0.0 -> 18.0.0
  • Styles: 3.0.0 -> 4.0.0

All packages

  • 🚨 Removes the use of utility classes from Spark, this touches all three frameworks and is a breaking change because we removed the use of !important from components and added some new classes.
  • 📌 This release includes minor adjustments to typography settings throughout Spark. Text in every component will have been slightly modified in terms of line height, font size, and/or font weight. Be sure to review your application thoroughly to make sure all text content is still usable.
  • Flip accordion arrow icon & add additional class for optional top border #4039
    Screen Shot 2021-08-25 at 11 12 52 AM
  • Input labels, spacing and copy in Storybook are now consistent with each other.
  • There is a space for App Store Badges in the Footer:
  • Typography updates, and a new documentation page.
  • Select component's icon position is set to relative so it's visible if there's an autofill present.

Angular

  • Upgrade Angular Storybook to latest version. Check it out!
  • Removes the use of utility classes from Spark, this touches all three frameworks and is a breaking change because we removed the use of !important from components and added some new classes.
  • Add App Store links in the footer with the newapp-slot
  • isElementVisible function is now checking if window is undefined. This makes sure that errors don't show up. Affects Autocomplete, and Masthead components.
  • For those needing a more custom Footer Award section, use the new additional-award-slot
  • Typography updates, and a new documentation page.
  • Updates peer dependencies to be up to Angular 11.2.14.
  • Select component's icon position is set to relative.

React

  • Removes the use of utility classes from Spark, this touches all three frameworks and is a breaking change because we removed the use of !important from components and added some new classes.
  • A new prop to SprkStack called isStackItem. Set to true will add the stack item class in cases where you need your Stack to also be an Stack Item.
  • New app-slot prop is available to pass in into Footer.
  • 📌 Helper text elements are not <p> tags instead of <div> tags for better semantics.
  • Typography updates, and a new documentation page.

HTML

  • Removes the use of utility classes from Spark, this touches all three frameworks and is a breaking change because we removed the use of !important from components and added some new classes.
  • isElementVisible function is now checking if window is undefined. This makes sure that errors don't show up. Affects Autocomplete, and Masthead

Styles

  • Added new modifier to Stack of
/// Centers children of the Stack.
.sprk-o-Stack--center-all {
  align-items: center;
  justify-content: center;
}
  • Added new type helpers
// Type Helpers
.sprk-b-Type--center {
  text-align: $sprk-type-center;
}

.sprk-b-Type--left {
  text-align: $sprk-type-left;
}

.sprk-b-Type--right {
  text-align: $sprk-type-right;
}

Upgrade Guide

HTML

  • Typography updates may shift some elements in your app. Do a visual check and adjust accordingly.
  • Find Dropdown instances by searching the project for sprk-c-Dropdown. If there is sprk-u-Display--none utility class, remove and replace with sprk-c-Dropdown--is-hidden.
  • Find Modal instances by searching the project for sprk-c-Modal. If there is sprk-u-Display--none utility class, remove and replace with sprk-c-Modal--is-hidden. You may also need to look for sprk-c-ModalMask and replace sprk-u-Display--none with sprk-c-ModalMask--is-hidden.
  • Update the Masthead code to match our copy code. 🚨 We removed a handful of utility classes like sprk-u-Display--none that used !important and replaced them. See all of the main difference in the Pull Request. Aug-25-2021 13-02-29

Angular

  • Typography updates may shift some elements in your app. Do a visual check and adjust accordingly.
  • Improve your code semantics by searching for sprkHelperText directives and turning it into a <p> if appropriate.
  • 🚨 We removed many utility classes from components and stories. These classes had !important on them and overid styles. Do a visual check on your app to make sure that unintended styles aren't applying because of this removal. Explore our PR and take a look at the stories.

React

  • Typography updates may shift some elements in your app. Do a visual check and adjust accordingly.
  • 🚨 We removed many utility classes from components and stories. These classes had !important on them and overid styles. Do a visual check on your app to make sure that unintended styles aren't applying because of this removal. Explore our PR and take a look at the stories.
  • If you have custom styling by selecting css via the .sprk-b-HelperText class, also make sure you're not selecting via a <div> element. It's a <p> tag now.
Assets 2
Loading