Skip to content

April 12th, 2021 - Breaking Changes for All Spark Packages
Compare
Choose a tag to compare
@bobwise bobwise released this 12 Apr 20:13
· 851 commits to main since this release
april-12-2021
c6ee344
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

This release has breaking changes for all Spark packages. It includes component upgrades for angular inputs, dropdown, cards, promo and tabs. It also includes link color changes, input color changes and change of location of button call-to-actions inside the components. We removed the pink color and added a new orange.

❗️ This is a very large, breaking release.
Allocate Dev and Design time accordingly and refer to the Upgrade Guide at the bottom of these release notes for project scope.

Package Versions

  • Angular: 12.1.1 - > 13.0.0
  • React: 4.1.1 -> 5.0.0
  • Spark (HTML): 15.1.1 -> 16.0.0
  • Styles: 1.1.1 -> 2.0.0

Documentation

Spark Styles

  • Removed sprk-u-Width-100 class from the inputs and built in that styling into sprk-b-TextInput. (width: 100% )
  • Consolidated pink and yellow error colors into orange.
    • Pink and yellow are still available as tokens, but will be removed on the next breaking change release.
    • Alerts, Inputs and Color Guides reflect this change. Legacy components will also use orange.
    • See Color Usage Guide to learn where to use this error color.
    • Orange utility classes are also available.

Button

  • Updated Secondary and Tertiary buttons to use purples.
    • Secondary will have the same silhouette, but purple
    • Tertiary no longer has borders, but has styling on hover/focus.
  • Removed Quaternary Button and is no longer in code base.
    image

Default Link

  • Default state is purple text, purple underline.
  • Visited state is purple text, purple underline.
  • Hover/Focus/Active state is red text, red underline.
    image

Icon With Text Link

  • Styles match Default Link but with no underline.
  • Added the link transition to the icon so it animates the same as the text.
    image

Informational Dropdown

  • The text and the icon turn purple on hover (applies to both the open and closed state).
    image

Footer Toggle (Toggle components found inside Footer components)

  • The text and icon will be bold and underlined on hover, like Footer Links.
    image

Masthead

  • The Masthead Selector text, border, and chevron icon will turn purple on hover when the selector is open and when it is closed.
  • Extended navigation dropdown items will turn red on hover.
    image
    image

Inputs

  • Updated colors for default, hover, focus, and error states on all inputs. Includes text inputs, selects, inputs with icons, autocompletes, radios, and checkboxes, including all huge variants.
  • Refactors all input borders to be box-shadows.
    image
    image

Angular

Promo (Breaking Change❗️)

Updates the Promo component to accept ng-content and thus making it composition based instead of the current configuration based.

Card - (Breaking Change❗️)

Updates the Card component to accept ng-content and thus making it composition based instead of the current configuration based.

Button - (Breaking Change❗️)

  • Quaternary Button is no longer available. Replace all Quaternary Buttons with Secondary or Tertiary Button.

Dropdown (Breaking Change❗️)

  • additionalIconClasses is deprecated and replaced with iconAdditionalClasses.
  • additionalTriggerClasses is deprecated and replaced with triggerAdditionalClasses .
  • additionalTriggerTextClasses is deprecated and replaced with triggerTextAdditionalClasses .
  • title is deprecated and replaced with heading.
  • dropdownType is deprecated and replaced withvariant
    • variant base is replaced with default.
    • mastheadSelector variant is deprecated and replaced with an internal selector component (sprk-masthead-selector)

Highlight Board

  • Improved documentation.

Masthead

  • Extended Navigation: Updated Masthead Selector to have its own CSS Namespace. Padding and color contrast improvements. Note: Former Dropdown Selector namespaces will still work.

Tabs

  • The sprk-tabbed-navigation component is deprecated and replaced with sprk-tabs in an upcoming release.
  • sprk-tabbed-navigation-panel is deprecated and replaced with sprk-tabs-panel.
  • sprk-tabbed-navigation-tab is deprecated and replaced with sprk-tabs-button.
  • The defaultActive Input on sprk-tabbed-navigation-panel and sprk-tabbed-navigation-tab is renamed to isDefaultActive on sprk-tabs-panel and sprk-tabs-button.
  • New Output on sprk-tabs-button - tabClick.

Tooltip

  • Updated how the width is calculated to address a bug on narrow screens where the tooltip was rendering out of the viewport and creating a horizontal scroll.

React

Button (Breaking Change❗️)

  • Quaternary Button is no longer available. Replace all Quaternary Buttons with Secondary or Tertiary Button.
  • New prop forwardedRef has been added to the component.

Card (Breaking Change❗️)

Updates the Card component to accept children and thus making it composition based instead of the current configuration based.

Dropdown

  • additionalIconClasses is deprecated and is replaced with iconAdditionalClasses.
  • additionalTriggerClasses is deprecated and is replaced with triggerAdditionalClasses .
  • additionalTriggerTextClasses is deprecated and is replaced with triggerTextAdditionalClasses .
  • title is deprecated and is replaced with heading.
  • Added new events openedEvent and closedEvent.
  • Dropdown links can now be rendered as any element, including react-router-dom Links.

Promo (Breaking Change❗️)

Updates the Promo component to accept children and thus making it composition based instead of the current configuration based.

Highlight Board

  • Improved documentation.
  • React Highlight Board will no longer throw a console warning if an image is used without alt text.

Inputs

  • Accessibility Bug fix: Spark Inputs will no longer assign an error container ID to aria-describedby if the input is valid.
  • New prop ariaDescribedBy - any value(s) provided will be included in aria-describedby on the input.

Masthead

  • Extended Navigation: Updated Masthead Selector to have its own CSS Namespace. Padding and color contrast improvements. Note: Former Dropdown Selector namespaces will still work.

Tooltip

  • Updated how the width is calculated to address a bug on narrow screens where the tooltip was rendering out of the viewport and creating a horizontal scroll.

HTML

Highlight Board

  • Improved documentation.

Tooltip

  • Updated how the width is calculated to address a bug on narrow screens where the tooltip was rendering out of the viewport and creating a horizontal scroll.

Masthead

  • Extended Navigation: Updated Masthead Selector to have its own CSS Namespace. Padding and color contrast improvements. Note: Former Dropdown Selector namespaces will still work.

🎒Upgrade Guide

ALL PACKAGES (Angular, React, HTML)

Removed sprk-u-Width-100 from the inputs and added width: 100%; to sprk-b-TextInput

  • Check inputs that have a sprk-b-TextInput class and remove unneeded sprk-u-Width-100 classes. Ensure layout doesn't change.

Changed Sass Variables

If you're overriding any of these variables, adjust to changes accordingly. See Design Token List for new defaults.

  • $sprk-btn-secondary-hover-border-color
  • $sprk-btn-secondary-hover-background-color
  • $sprk-btn-secondary-hover-text-color
  • $sprk-btn-secondary-visited-text-color
  • $sprk-btn-secondary-text-color
  • $sprk-btn-secondary-border
  • $sprk-btn-secondary-border-color
  • $sprk-btn-secondary-background-color
  • $sprk-btn-secondary-disabled-background-color
  • $sprk-btn-tertiary-hover-shadow
  • $sprk-btn-tertiary-hover-border-color
  • $sprk-btn-tertiary-border-color
  • $sprk-btn-tertiary-background-color
  • $sprk-btn-tertiary-disabled-border-color
  • $sprk-btn-tertiary-disabled-background-color
  • $sprk-link-light-hover-font-weight
  • $sprk-text-input-error-color
  • $sprk-text-input-error-border-color
  • $sprk-text-input-border
  • $sprk-text-input-disabled-border-color
  • $sprk-text-input-disabled-background-color
  • $sprk-text-input-transition
  • $sprk-input-huge-border-width
  • $sprk-input-huge-box-shadow

Removed Sass Variables

If you're overriding any of these variables, adjust to changes accordingly. See Design Token List for new defaults.

  • $sprk-btn-quaternary-background-color
  • $sprk-btn-quaternary-box-shadow
  • $sprk-btn-quaternary-border
  • $sprk-btn-quaternary-border-color
  • $sprk-btn-quaternary-text-color
  • $sprk-btn-quaternary-letter-spacing
  • $sprk-btn-quaternary-hover-background-color
  • $sprk-btn-quaternary-hover-text-color
  • $sprk-btn-quaternary-hover-shadow
  • $sprk-btn-quaternary-hover-border-color
  • $sprk-btn-quaternary-visited-text-color
  • $sprk-btn-quaternary-disabled-shadow
  • $sprk-btn-quaternary-disabled-hover-border
  • $sprk-btn-quaternary-disabled-text-color
  • $sprk-btn-quaternary-disabled-background-color
  • $sprk-btn-quaternary-disabled-border-color
  • $sprk-btn-quaternary-disabled-border-style
  • $sprk-btn-quaternary-disabled-border-width
  • $sprk-input-huge-focus-border-width

New Sass Variables

If you're overriding any of these variables, adjust to changes accordingly. See Design Token List for new defaults.

  • $sprk-autocomplete-results-margin-top
  • $sprk-dictionary-label-color
  • $sprk-black-tint-15
  • $sprk-text-input-focus-box-shadow
  • $sprk-text-input-error-focus-box-shadow
  • $sprk-input-huge-error-border-color
  • $sprk-input-huge-border-color
  • $sprk-input-huge-focus-border-color
  • $sprk-input-huge-focus-box-shadow
  • $sprk-input-huge-focus-box-shadow-disabled
  • $sprk-label-color

Angular Upgrade Guide

❗️Required Work (Card, Promo, Button)

Styles

  • Find anywhere in your project you're manually using yellow or pink to indicate error. Replace with $sprk-orange.
    • sprk-u-Color--yellow
    • sprk-u-BackgroundColor--pink
    • $sprk-yellow
    • $sprk-pink

sprk-dropdown

  • Rename all instances of additionalIconClasses to iconAdditionalClasses.
  • Rename all instances of additionalTriggerClasses to triggerAdditionalClasses .
  • Rename all instances of additionalTriggerTextClasses to triggerTextAdditionalClasses .
  • Rename all instances of title to heading.
  • Rename all instances of dropdownType to variant

sprk-tabbed-navigation

  • Replace all instances of <sprk-tabbed-navigation> with <sprk-tabs>.
  • Replace all instances of <sprk-tabbed-navigation-tab> with <sprk-tabs-button>.
  • Replace all instances of <sprk-tabbed-navigation-panel> with <sprk-tabs-panel>.
  • Rename all instances of defaultActive on sprk-tabbed-navigation-tab or sprk-tabbed-navigation-panel with isDefaultActive.

React Upgrade Guide

❗️Required Work (Card, Promo, Button)

Styles

  • Find anywhere in your project you're manually using yellow or pink to indicate error. Replace with $sprk-orange.

    • sprk-u-Color--yellow
    • sprk-u-BackgroundColor--pink
    • $sprk-yellow
    • $sprk-pink

  • New modifier for Promos was added to allow them to go max-width: 100%, .sprk-c-Promo--full

SprkDropdown

  • Rename all instances of additionalIconClasses with iconAdditionalClasses.
  • Rename all instances of additionalTriggerClasses with triggerAdditionalClasses.
  • Rename all instances of additionalTriggerTextClasses with triggerTextAdditionalClasses.
  • Rename all instances of title with heading.

HTML Upgrade Guide

❗️Required Work (Button)

  • Button
    • Quaternary Button is no longer available. Find every element with the class sprk-c-Button--quaternary and replace with sprk-c-Button--secondary or sprk-c-Button--tertiary.
    • Search for elements withsprk-c-Spinner class, and change its modifier class to sprk-c-Spinner--primary or sprk-c-Spinner--secondary, whichever matches text color of the button.

Styles

  • Find anywhere in your project you're manually using yellow or pink to indicate error. Replace with $sprk-orange.
    • sprk-u-Color--yellow
    • sprk-u-BackgroundColor--pink
    • $sprk-yellow
    • $sprk-pink

Masthead Extended

  • This is all contained in the div with the class sprk-c-Masthead__selector-dropdown
    • Find sprk-c-Dropdown class and remove it.
    • Find sprk-c-Dropdown__header and replace with sprk-c-Masthead__selector-dropdown-header.
    • On any a elements within a sprk-c-Masthead__selector-dropdown-header element, add the sprk-c-Masthead__selector-dropdown-header-link class.
    • Find sprk-c-Dropdown__title class and replace with sprk-c-Masthead__selector-dropdown-title.
    • Find sprk-c-Dropdown__links class and replace with sprk-c-Masthead__selector-dropdown-links.
    • Find sprk-c-Dropdown__link sprk-u-ptm classes and replace with sprk-c-Masthead__selector-dropdown-link.
    • Find sprk-c-Dropdown__item class and replace with sprk-c-Masthead__selector-dropdown-item.
    • Find sprk-c-Dropdown__footer sprk-u-TextAlign--center classes and remove it. Add sprk-c-Masthead__selector-footer.
    • For more context, see this diff of masthead stories.
Assets 2
Loading