Skip to content

September 21st, 2020
Compare
Choose a tag to compare
@afebbraro afebbraro released this 21 Sep 16:02
september-21-2020
ef9c91e
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 as the colors and icons in the system have been refreshed. This release also includes a new button variant of quaternary and new light link variant. Also included in this release is the addition of inputs/properties on various components to add functionality and some bug fixes.

New Versions

  • @sparkdesignsystem/spark 14.0.0
  • @sparkdesignsystem/spark-angular 11.0.0
  • @sparkdesignsystem/spark-react 3.0.0

Documentation Updates

  • Component previews on the docs site are now lazy loaded, improving page performance.

HTML Package Updates

  • Updates all the colors in the system. Removed old ones and added new ones. See the Upgrade Guide for more info.
  • Button styles have all been updated and a new "quaternary" button variant has been added.
  • Added new "light" link variant.
  • Footer is now black background with white text.
  • Masthead link styles have been updated.
  • The spinner in the Wait Modal is now the new primary color.
  • Pagination link styles have been updated.
  • The Stepper is now shown with a dark purple background instead of the blue that was previously used.
  • Added new Sass vars for the menu seen in the Masthead.
  • Added new .sprk-c-Spinner--primary and .sprk-c-Spinner--secondary spinner variants.
  • Added new stories to storybook to show the new button spinner variants.
  • The text highlight selection color has changed from a tint of green to the lightest new purple that we offer.
  • Icon sizes have changed. Please see the upgrade guide for more info on icons.
  • Alerts have been updated to use the new colors.
  • Links have gone from black to purple.
  • Inputs now use purple for the various states instead of green.
  • Tabs now use purple instead of red.
  • The old colors have been removed from the Spark CSS utilities and new classes were added for the new colors.

Angular Package Updates

The Angular package will receive all the updates from the HTML package and this new version v11 has a dependency on Spark v14.

  • Updated icons throughout the components. This involved changing the icon names and adding additional CSS classes.
  • Add Angular CLI Schematics support to spark-angular

Button

  • Added new quaternary variant option

Box

  • Now supports the idString Input.

Centered Column

  • Now supports analyticString input property to allow implementers to capture analytics data.

Dictionary

  • dictionaryType has been deprecated and replaced with variant.
  • data has been deprecated and replaced with keyValuePairs.
  • new Input: additionalKeysClasses - allows adding custom classes to all keys elements.
  • new Input: additionalValuesClasses - allows adding custom classes to all values elements.

Divider

  • The <sprk-divider> component is being deprecated and should be replaced with the sprkDivider directive.

Heading

  • Now supports the idString Input.

Icon

  • Changed iconType input to iconName for API consistency. iconType is still available so this is not a breaking change, but will be completely replaced with iconName next release.
  • Added viewBox as an optional input for the SVG. Defaults to "0 0 64 64"
  • Added ariaLabelledBy input for accessibility.

Text

  • Now supports the idString Input.

Tooltip

  • triggerIconType has been deprecated and replaced with triggerIconName.

Promo

  • Added the option to choose the button variant via a new input of buttonVariant
  • Added new input for border styles, hasBorder="true"

React Package Updates

The React package will receive all the updates from the HTML package and this new version v3 has a dependency on Spark v14.

Centered Column

  • Now supports analyticString input property to allow implementers to capture analytics data.

Dictionary

  • New property: additionalKeysClasses - allows adding custom classes to all keys elements.
  • New property: additionalValuesClasses - allows adding custom classes to all values elements.

Icon

  • Updated component to ES6 Standards
  • Removed unnecessary props and default props

Stack

  • <SprkStack> now supports the analyticsString property.

Tooltip

  • triggerIconType has been deprecated and replaced with triggerIconName.
  • new property: openedEvent - A function to be called when the tooltip is toggled open.
  • new property: closedEvent - A function to be called when the tooltip is toggled closed.

Award

  • Added propTypes.elementType to allow React Router Links to be used.

Button

  • The role attribute has been updated to use the TagName prop instead of the element prop, which was causing incorrect HTML to be rendered.
  • Added propTypes.elementType to allow React Router Links to be used.

Card

  • Can now supply a buttonVariant to Cards of quaternary

Upgrade Guide

This new release has a lot of new additions that require changes in your app.
Please take a look at the following TODOs for every package.
📌 Remember to run your custom components through the "All Packages" upgrade guide, and your specific upgrade package implementation to ensure usage guidelines.

All Packages Upgrade Guide

  • Icon SVGs have been updated.
    • ➡️ TODO: Update icon source. Internal teams can access CDN links via shorty/sparkassetcdn
  • All icons with name suffix two-color is removed
    • ➡️ TODO: Search for two-color and remove them from icon name. (facebook-two-color -> facebook)
  • Icon sizes converted
    • Large went from 32px -> 24px
    • XL went from 64px to 32px.
    • Removed sizes xs and xxs, and xxl
    • ➡️ TODO: Convert medium icon size to large (more info in package specific upgrade guide)
  • No more small icon names with size modifiers. For example, bell-filled-small will only be bell-filled. Size changes can still be applied via Icon size css classes. )
    • ➡️ TODO: Search for icons in your respective package and remove any -small suffixes in icon names. Size them with css as necessary.
  • Many Icons need an additional class
    • ➡️ TODO: Any Icon that that has sprk-c-Icon--stroke-current-color needs sprk-c-Icon--filled-current-color added to it. (See package-specific upgrade guide for more info)
  • font-weight utility is unnecessary in links
    • ➡️ TODO: search for sprk-b-Link and remove sprk-u-FontWeight--normal from its classes.
  • Removed $sprk-gray-dark color variable
    • ➡️ TODO: Find any instance of $sprk-gray-dark and replace with with a $sprk-black-tint-20 (Ask designer to confirm)
  • Removed black tints that end with 5
    • ➡️ TODO: Replace $sprk-black-tint -25, -55, and -75. (Ask design for what color to use, most likely will be replace with -30, -60, -80 respectively.)
  • Removed red tints
    • ➡️ TODO: Replace $sprk-red-tint -25, -50, and -75. (Ask design for what color to use.)
  • Removed blue tints
    • ➡️ TODO: Replace $sprk-blue-tint -25, -50, and -75. (Ask design for what color to use.)
  • Removed green tints
    • ➡️ TODO: Replace $sprk-green-tint -25, -50, and -75. (Ask design for what color to use.)
  • Removed green dark
    • ➡️ TODO: Replace $sprk-green-dark. (Ask design for what color to use.)
  • Removed yellow tints
    • ➡️ TODO: Replace $sprk-yellow-tint -25, -50, and -75. (Ask design for what color to use.)
  • Remove Sass Variables that are no longer in use

    • $sprk-select-arrow-stroke-width

    • $sprk-icon-using-custom-stroke

    • $sprk-icon-using-custom-stroke

    • $sprk-icon-custom-stroke-width-s

    • $sprk-icon-custom-stroke-width-m

    • $sprk-icon-custom-stroke-width-l

    • $sprk-icon-custom-stroke-width-xl

    • $sprk-icon-xxl

    • $sprk-btn-tertiary-underline-width

    • $sprk-btn-tertiary-underline-padding-top

    • $sprk-btn-tertiary-underline-color

    • $sprk-btn-tertiary-hover-underline-color

    • $sprk-link-disabled-font-weight

    • $sprk-masthead-link-hover-color

    • $sprk-big-nav-link-color

    • $sprk-big-nav-active-color

    • $sprk-tab-navigation-btn-border-top

    • $sprk-tab-navigation-btn-hover-border-top

    • $sprk-tab-navigation-btn-active-border-top

    • ➡️ TODO: If using these variables, you can remove it from your project, it's no longer relevant

React Upgrade Guide

  • SprkDropdown

    • Needs additional icon classes
    • ➡️ TODO: Add prop of additionalIconClasses="sprk-c-Icon--l"

  • SprkFooter

    • Needs additional classes to connectIcons prop
    • ➡️ TODO: Add icon configuration through prop connectIcons.icons[#].addClasses: addClasses: 'sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color', image
    • ➡️ TODO: Update additionalIcons prop from house to home

  • SprkMasthead

    • ➡️ TODO: Change all props of <SprkLink> from variant="plain" to `"variant="simple"
    • ➡️ TODO: Change all prop of Sign In<SprkButton> from variant="secondary" to variant="quaternary".

  • SprkModal

    • ➡️ TODO: Remove redundant ={true} from isVisible
      image

Angular Upgrade Guide

  • Remove all modifying suffixes from icon names like -small.

    • ➡️ TODO: Search project for iconType. Remove any icon names with suffixes from list below
      • -small
      • -large
      • -two-color
    • Example: exclamation-filled-small -> exclamation-filled
    • Components Affected
      • Date Input
      • Helper Text
      • Huge Text
      • Monetary
      • Password
      • Percentage
      • Phone
      • SSN
      • Search
      • Text Input
      • Textarea
      • Checkbox
      • Radio
        image

  • Divider

    • is now a directive
    • ➡️ TODO: Replace all instances of the <sprk-divider> component with the sprkDivider directive.

  • Date Picker

    • Icon stroke has been changed into filled, and given a current color Icon style
    • ➡️ TODO: Search project for Date Pickers. Find additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-DatePicker__icon" and update it to additionalClasses="sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color"
      image

  • Huge Select

    • Icon stroke has been changed into filled, and given a current color Icon style
    • ➡️ TODO: Search project for Huge Selects. Find additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon" and update it to additionalClasses="sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon"

  • Search

    • Icon stroke has been changed into filled, and given a current color Icon style
    • ➡️ TODO: Search project for Search. Find additionalClasses="sprk-b-InlineSearch__icon sprk-c-Icon--stroke-current-color" and update it to additionalClasses="sprk-b-InlineSearch__icon sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color"
      image

  • Select

    • Icon stroke has been changed into filled, and given a current color Icon style
    • ➡️ TODO: Search project for Select. Find additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon" and update it to additionalClasses="sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon"

  • Dropdown

    • Icons are now sized via classes.
    • ➡️ TODO: Search project for Dropdown by finding <sprk-dropdown. Add additionalIconClasses="sprk-c-Icon--l" to component.
      image

  • Footer

    • Icon sizes have changed, and Icon modifier uses stroke instead of filled current color
    • ➡️ TODO: Search project for Footer instances. Search for [socialLinks] to find its configuration. Update iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color' to iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--filled-current-color'

  • Masthead

    • Variant changes from plain to simple, convert secondary buttons to quaternary and icon updates
    • ➡️ TODO: Search project for Masthead instances. Change all variant="plain" sprkLinks in Masthead to variant="simple"
      image
    • ➡️ TODO: Find secondary buttons and change the modifier from secondary to quaternary. class="sprk-c-Button sprk-c-Button--secondary sprk-c-Button--compact" to class="sprk-c-Button sprk-c-Button--quaternary sprk-c-Button--compact"
      image
    • ➡️ TODO: Search for additionalIconClasses="sprk-c-Icon--l sprk-c-Icon--stroke-current-color sprk-Stack__item" inside of Masthead and update it to additionalIconClasses="sprk-c-Icon--filled-current-color sprk-Stack__item"
      image
    • ➡️ TODO: Update user-account icon name to user. Search for triggerIconType="user-account" and change it to triggerIconType="user". Change additionalIconClasses from sprk-c-Icon--l to sprk-c-Icon--xl

  • Promo

    • ➡️ TODO: Search for Promo instances by searching project for <sprk-promo. Confirm that it has hasBorder="true" as an input.

HTML Upgrade Guide

  • Remove sprk-c-Icon--m from error icon

    • ➡️ TODO: Search class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" and update to class="sprk-c-Icon sprk-b-ErrorIcon" (Removing the sprk-c-Icon--m class)
    • Components Affected:
      • Checkbox
      • Date
      • Date Picker
      • Helper Text
      • Huge Select
      • Huge Text
      • Monetary
      • Percentage
      • Phone
      • Radio
      • SSN
      • Search
      • Text Input
      • Textarea
        image

  • Add filled current color modifier to all icons that have sprk-c-Icon--stroke-current-color class

    • ➡️ TODO: Search project for sprk-c-Icon--stroke-current-color and add sprk-c-Icon--filled-current-color class to that element
    • Components Affected:
      • Alert
      • Date Picker
      • Search
      • Footer

  • Remove all modifying suffixes from icon names like -small.

    • ➡️ TODO: Search project for -small. Additionally, remove any icon names with suffixes from list below
      • -small
      • -large
      • -two-color

  • Date Picker

    • Icon changes
    • ➡️ TODO: Search for class="sprk-c-Icon sprk-c-Icon--stroke-current-color" and update it to class="sprk-c-Icon sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color"

  • Huge Select

    • Icon needs an additional class
    • ➡️ TODO: Search for all instances of Huge select by searching for sprk-b-InputContainer sprk-b-InputContainer--huge. Find the svg that contains the sprk-c-Icon class and add an additional class sprk-c-Icon--filled-current-color
      image

  • Password, SSN

    • Needs additional classes
    • ➡️ TODO: Search for Password input instances by searching sprk-b-SelectionContainer. Add a sprk-b-Checkbox class to that div.
    • ➡️ TODO: Search for the input with type="checkbox" and add the class sprk-b-Checkbox__input to it.
    • ➡️ TODO: Search for its label with classes sprk-b-Label sprk-b-Label--inline and add sprk-b-Checkbox__label class to it. This applies to labels with sprk-b-Label--disabled
      image

  • Search

    • Remove icon sizing, add filled current color modifier
    • ➡️ TODO: Search for all instances of Search inputs. Search for svg with attribute class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--stroke-current-color" and update it to class="sprk-c-Icon sprk-c-Icon--filled-current-color sprk-c-Icon--stroke-current-color"

  • Select

    • Add filled current color icon modifiers
    • ➡️ TODO: Search for svg that has class sprk-b-SelectContainer__icon, and add sprk-c-Icon--filled-current-color class to it.
      image

  • Accordion

    • Icon size changes
    • ➡️ TODO: Search for sprk-c-Accordion__icon in project, update sprk-c-Icon--l to sprk-c-Icon--xl

  • Alert

    • Added filled icon modifier
    • ➡️ TODO: Find all instances of Alert by searching sprk-c-Alert__icon and update all of its classes to sprk-c-Alert__icon sprk-c-Icon sprk-c-Icon--xl sprk-c-Icon--filled sprk-c-Icon--filled-current-color
    • ➡️ TODO: Search for #bell and rename that svg reference to #bell-filled in every Alert
      image

  • Award

    • Icon size changes
    • ➡️ TODO: Search for instances of Award components in project (typically in Footer), update sprk-c-Icon--l to sprk-c-Icon--xl

  • Dropdown

    • Add new dropdown class
    • ➡️ TODO: Search for all instances of Dropdowns Triggers by findingdata-sprk-dropdown-trigger and add sprk-c-Dropdown__trigger class to it.
    • ➡️ TODO: Add modifier to SVG in dropdown by adding classes sprk-c-Icon--l
      image

image

  • Footer
    • Now has dark background, changed styles, removed classes like sprk-u-FontWeight--normal
    • ➡️ TODO: Find outer div of Footer by searching project for sprk-u-BackgroundColor--gray. Replace all of its classes with sprk-o-Box sprk-o-Box--large sprk-c-Footer
    • ➡️ TODO: Find the h3 tag with a sprk-b-TypeBodyOne class and add sprk-c-Footer__text class to it
    • ➡️ TODO: Find the p tags in footer (usually has sprk-b-TypeBodyFour class), and add sprk-c-Footer__text class.
    • ➡️ TODO: Find footer links by searching for a tags with classes sprk-b-Link sprk-b-Link--simple sprk-u-FontWeight--normal. Replace it with sprk-c-Footer__link sprk-b-Link sprk-b-Link--light
      image

image

  • Masthead

    • Icon, links
    • ➡️ TODO: Search for sprk-c-Menu__icon and change icon modifier form sprk-c-Icon--l to sprk-c-Icon--xl
    • ➡️ TODO: Change all links that contain sprk-b-Link--plain to sprk-b-Link--simple
    • ➡️ TODO: sprk-c-Button--secondary to sprk-c-Button--quaternary
    • ➡️ TODO: Update svg Icon to have classes sprk-c-Icon--xl sprk-c-Icon--filled-current-color (inside of span with classsprk-c-MastheadAccordion__heading)
    • ➡️ TODO: Search for sprk-c-Menu__icon and change its Icon modifier from sprk-c-Icon--l to sprk-c-Icon--xl

  • Modal

    • Remove icon classes
    • ➡️ TODO: Find the button with class sprk-c-Modal__icon Change the icon modifiers of svg element inside of it bye removing the classes sprk-c-Icon--stroke-current-color and the sprk-c-Icon remains.
    • ➡️ TODO: Find all wait modals by searching sprk-c-Modal--wait. Find the div with sprk-c-Spinner inside of it and replace all classes with: sprk-o-Stack__item sprk-c-Spinner sprk-c-Spinner--circle sprk-c-Spinner--large sprk-c-Spinner--primary"
      image

image

  • Stepper

    • Change background from blue to purple-dark
    • ➡️ TODO: Search for sprk-u-BackgroundColor--blue and update it to sprk-u-BackgroundColor--purple-dark
    • ➡️ TODO: Find sprk-c-Carousel and add modifier classes sprk-c-Carousel--has-dark-bg
    • ➡️ TODO: Find sprk-c-Carousel__prev and sprk-c-Carousel__next and change Icon classes from sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-c-Icon--l to sprk-c-Icon sprk-c-Icon--filled-current-color sprk-c-Icon--xl
      image

  • Toggle

    • Change icon sizes
    • ➡️ TODO: Change Icon size modifier from sprk-c-Icon--l to sprk-c-Icon--xl
Assets 2
Loading