November 30th, 2020

Summary

This release has some major wins for Spark! It's one of our largest releases yet. ✨

• Design Tokens now make Spark styles (colors, borders, etc.) available for Android and iOS applications.
• API upgrades that standardize how components work and the inputs/props available.

❗️ - Indicates Breaking Change
📌 - Indicates Important, non-breaking change

Package Versions

This release has breaking changes.

• @sparkdesignsystem/spark-angular v12.0.1
• @sparkdesignsystem/spark-react v4.0.0
• @sparkdesignsystem/spark v15.0.0
• @sparkdesignsystem/spark-styles v1.0.0

Default Branch Naming Changes

• Renamed master branch to main for all Spark Design System repositories.

Design Tokens (All Packages)❗️

Angular and React projects no longer need to import the Spark HTML package which significantly reduces package size in your applications!

Learn more about Design Tokens and how they're a future-friendly way to create visual consistency between platforms.

Developer Perks

• Maintains sync with current style updates while minimizing impact to code.
• Enables Android and iOS projects to access style variables from Spark.
• Supports future-friendly development. Design Tokens can generate style files for any possible platform in the future.

❗️See the Upgrade Guide for each package for details.

HTML (❗️ Breaking Changes)

Design Tokens

• Updated Sass imports.
• See the Upgrade Guide for details.

Spinner

• Added variant to HTML spinner to account for primary and secondary options.

Button

• Added new accessibility attributes to buttons that are spinning.
• See Upgrade Guide for details.

Angular (❗️ Breaking Changes)

Design Tokens ❗️

• Updated Sass imports and simplified package dependency.
• See the Upgrade Guide for details.

Accordion

• Added new Input idString.

Accordion Item 📌

• Added new Input iconAdditionalClasses.
• Added new Input leadingIconAdditionalClasses.
• Added new Input contentAdditionalClasses.
• Added new Outputs openedEvent and closedEvent.
• Deprecated title in favor of heading.
• Deprecated additionalHeadingClasses in favor of headingAdditionalClasses.
• Deprecated iconTypeClosed in favor of iconNameClosed.
• Deprecated iconTypeOpen in favor of iconNameOpen.
• Deprecated isActive. Use additionalClasses instead.
• Accordion titles will now render with sprk-b-TypeDisplaySeven by default.
• Breaking Change - sprk-b-BodyTypeTwo will no longer render on the accordion by default. This class can be added back using contentAdditionalClasses on the sprk-accordion-item.

Alert

• Added additional Input for variant & set up deprecation for alertType.
• Added typings for alertType & variant to restrict to success, fail, info.
• Added additional Input for isDismissible & set up deprecation for dismissible.
• Added new inputs for iconName and dismissIconName.
• Added a boolean input of isVisible.
• Added an event emitter (@Ouput) to the alertDismiss() method.

Award 📌

• Award will no longer render an empty Toggle if the properties are left empty.
• Deprecated title in favor of heading.
• Deprecated analyticsStringImgOne in favor of imgOneAnalyticsString .
• Deprecated analyticsStringImgTwo in favor of imgTwoAnalyticsString .
• Deprecated analyticsStringDisclaimer in favor of disclaimerAnalyticsString .
• Deprecated additionalClassesImgOne in favor of imgOneAdditionalClasses .
• Deprecated additionalClassesImgTwo in favor of imgTwoAdditionalClasses .
• Added new Input itemSpacing.

Button 📌

• Button's loading state is more semantic and better communicates state to screen readers.
• Deprecated the isSpinning input on Button.
• Added additionalClasses prop to this directive.
• Uses sprk-spinner directive for more compositional options.
• Uses app state to conditionally render button text and spinner.
• See the upgrade guide to update your app before next release.

Link

• Added isDisabled prop.
• Removed the variant option of base.

Toggle

• Added isOpen input to allow the Toggle to be open on render.
• Added type="button".
• Added triggerText input - continue support for title until next release.
• Added openEvent and closedEvent outputs to emit on toggle.
• Added toggleIconName input to allow for custom icons.
• Added iconAdditionalClasses input - continue support for iconClass until next release.
• Added triggerTextAdditionalClasses input - continue support for titleFontClass until next release.
• Added contentAdditionalClasses input.

Stack

• Added new Input idString.

React (❗️ Breaking Changes)

Design Tokens❗️

• Updated Sass imports and simplified package dependency.
• See the Upgrade Guide for details.

SprkAccordion 📌

• Deprecated headingAddClasses and is replaced with headingAdditionalClasses.
• Deprecated contentAddClasses and is replaced with contentAdditionalClasses.
• Deprecated iconAddClasses and is replaced with iconAdditionalClasses.
• Deprecated isDefaultOpen and is replaced with isOpen.
• New props iconNameOpen, iconNameClosed, and leadingIcon.

SprkButton 📌

• Button's loading state is more semantic and better communicates state to screen readers.
• Made its loading state more compositional.
• Deprecated disabled and is replaced with isDisabled
• Deprecated loading and is replaced with isSpinning
• No longer need to depend on Vanilla JS to cancel spinning.
• See the upgrade guide to update your app before next release.

SprkDropdown

• Allows a default choice.

SprkAward ❗️

• Breaking Change: Award will no longer render with sprk-o-CenteredColumn by default. This class can be added using the additionalClasses property.
• Award will no longer render an empty Toggle if the properties are left empty.
• Property addClasses is deprecated. Use imageAdditionalClasses instead.
• Property linkAddClasses is deprecated. Use linkAdditionalClasses instead.
• See Upgrade Guide below for details.

SprkLink 📌

• Updated the variant name for links with icons. variant="icon" is now variant="hasIcon". icon support will be removed next release.
• See Upgrade Guide below for details.

SprkToggle 📌

• Change isDefaultOpen to be isOpen. isDefaultOpen will be supported until the next release.
• Update prop name for titleAddClasses to be titleAdditionalClasses. titleAddClasses will be supported until the next release.
• Update iconAddClasses to be iconAdditionalClasses. iconAddClasses will be supported until the next release.
• Added ability to pass through a function on click. Use the onClick prop.
• Changed title prop to be triggerText. title will be supported until the next release.
• Added ability to Added classes to the content with the new prop contentAdditionalClasses
• See Upgrade Guide below for details.

SprkTabs 📌

• tabBtnAddClasses has been deprecated and replaced with tabBtnAdditionalClasses .
• tabBtnAnalytics has been deprecated and replaced with tabBtnAnalyticsString .
• tabPanelAddClasses has been deprecated and replaced with `tabPanelAdditionalClasses
• See Upgrade Guide below for details.

Bugs

Masthead - HTML & React

• The Masthead Dropdown Icons were turning purple on hover. They have been updated to black.

🎃 Hacktoberfest Contributions - Thank You!

• @iadi7ya converted an existing function to ES6 arrow function in a doc site React file
• @crs2here added propTypes to the ContextSubMenu component in the doc site
• @Ahmeed2m added propTypes to the PrinciplesLayout component in the doc site and fixed eslint errors
• @hmajid2301 added missing propTypes to UsingSparkLayout component and did eslint fixes
• @codeShaurya Updated the isValidPhone.js to be an arrow function
• @motionsuggests added propTypes for ContentWrapper and fixed eslint errors in the doc site
• @motionsuggests added proptypes for children prop in the src/components/layouts/InstallingSparkLayout.js file
• @crs2here added propTypes to the CssUtilityTable component in the doc site
• @slavakr cleaned up all the prettier errors in the header on the doc site
• @crs2here cleaned up all the prettier errors in the footer on the doc site
• @yusufalp updated the isValidSSN utility to be an arrow function
• @felipedotcom updated the setValidTextInput utility to be an arrow function
• @nidble added missing proptypes and eslint fixes to HomepageLayout.js
• @kaylakremer addressed prettier issues on the InstalllingSparkDocsMenu component for the doc site
• @kaylakremer fixed a bug affecting React Modal focus trapping
• @saideepesh000 updated the isValidDate utility to be an arrow function
• @iamjoross updated the toggleValue function to be an arrow function
• @vivek32ta updated the ComponentPreview component to be a functional component in the doc site
• @yodasw16 updated our version banner content
• @drishit96 updated setValidTick to be an arrow function in the docs site
• @LaloCode modified isValidMonetary to be an arrow function in the docs site
• @Kalovelo fixed uniqueID issues on React SprkToggle and SprkMastheadAccordionItem
• @motionsuggests updated masthead links to use variant="simple" instead of variant="plain" on the 's
• @mantasio updated the setValidSelect utility to be an arrow function.
• @sanchitgupta001 updated SprkDropdown to allow a default choice
• @Ahmeed2m Added a README to the React package
• @basters Added option "default" for dropDown choices (Angular)
• @ka6thick54 Added an closeAnalyticsString to Angular Modal

🎒...

September 21st, 2020

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',
  • ➡️ 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
    

---

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](https://user-images.gith...

August 31, 2020 - Patch Update to HTML and Angular Tooltips

We released a patch update to @sparkdesignsystem/spark and @sparkdesignsystem/spark-angular to add in type="button" on the trigger element in the Tooltip components. This fixes a bug with the Tooltip and submits inside forms. Thank you @OAndersonQL for this contribution!

@sparkdesignsystem/spark 13.1.3
@sparkdesignsystem/spark-angular 10.1.3
@sparkdesignsystem/spark-react 2.1.3

If you are using the HTML version of Spark, please add type="button" to the ` element in the Tooltip component markup.

August 19th, 2020 - Patch Update

Summary

Updates the version of lodash that has a High Severity Prototype Pollution
Issue #3349

@sparkdesignsystem/spark: 13.1.2
@sparkdesignsystem/spark-angular: 10.1.2
@sparkdesignsystem/spark-react: 2.1.2

Special thanks to @solidsplake for bringing this to our attention!

Hotfix patch

Summary

Updates the version of lodash and fixes a bug with angular spark tabs to account for dynamic changes in the component. Issue #3246

@sparkdesignsystem/spark: 13.1.1
@sparkdesignsystem/spark-angular: 10.1.1
@sparkdesignsystem/spark-react: 2.1.1

July 13th, 2020

Summary

In this release we added Huge Radios and Checkboxes, a new Tooltip component and various bug fixes. We had two contributors outside of the Spark team, thank you @diriquelme and @janinavelasco9 for your contributions!

🚨 = Indicates Breaking Changes

📌 = Indicates important, non-breaking change

New Versions

• @sparkdesignsystem/spark 13.1.0
• @sparkdesignsystem/spark-react 2.1.0
• @sparkdesignsystem/spark-angular 10.1.0

HTML Package Updates

🚨 Breaking Changes (Sass)

• Removed two Sass variables that were misspelled. If you are overwriting these variables you will need to update to the new variable name.
  • $sprk-toggle-transistion-timing is replaced by $sprk-toggle-transition-timing
  • $sprk-stepper-dark-icon-color-hoverg is replaced by $sprk-stepper-dark-icon-color-hover

New Components

• Tooltip

  • A Tooltip can be added to Spark icons to provide additional information about a feature.
    

• Huge Radio Inputs
  Huge radio buttons are a type of selection indicator that draw focus to questions and options in a user experience.
  

• Huge Checkbox
  The Huge Checkbox component is intended for flows that present single questions in a step by step process.
  

• New utility functions - isEnterPressed and isSpacePressed.
  Useful for keyboard event handling.

    button.addEventListener('keydown', (e) => {
      if (isSpacePressed(e)) { // do something when Space is pressed. }
      if (isEnterPressed(e)) { // do something when Enter is pressed. }
    });
  

Accessibility Updates

• Darkened the color of the helper text used for inputs so it is more readable.

Bug Fixes

• Fixed a bug with Modal so that no console error is thrown when hideModal() is called and no modal trigger is present. Thank you @janinavelasco9 !

Angular Package Updates 📌

New Features

• 📌 Checkboxes have been updated. There are new components for use and they are listed below as well as in the developer documentation pages.
  • Components
    • <sprk-checkbox-group>
    • <sprk-checkbox-item>
  • Directives
    • sprkFieldset
    • sprkCheckboxInput
    • sprkCheckboxLabel
    • sprkLegend
  • The previous Checkbox component using <sprk-selection-container> has been renamed to Legacy Checkbox and is still available, but will be removed next release.
• 📌 Radios have been updated. There are new components for use and they are listed below as well as in the developer documentation pages.
  • Components
    • <sprk-radio-group>
    • <sprk-radio-item>
  • Directives
    • sprkFieldset
    • sprkRadioInput
    • sprkRadioLabel
    • sprkLegend
  • The previous Radio component using <sprk-selection-container> has been renamed to Legacy Radio and is still available, but will be removed next release.

New Components

• Tooltip
  • A Tooltip can be added to spark icons to provide additional information about a feature.
    
• Huge Checkbox - The Huge Checkbox component is intended for flows that present single questions in a step by step process.
• Huge Radio - The Huge Radio component is intended for flows that present single questions in a step by step process.

Enhancements

• Added more tests to the sprkFieldError and sprkHelperText directives

React Package Updates 📌

New Features

• 📌 Checkboxes have been updated. There are new components for use and they are listed below as well as in the developer documentation pages.
  • <SprkCheckboxGroup>
  • <SprkCheckboxItem>
  • <SprkFieldset>
  • <SprkLegend>
  • <SprkHelperText>
• The previous Checkbox component using <SprkSelectionInput> has been renamed to Legacy Checkbox and is still available, but will be removed next release.
• 📌 Radios have been updated. There are new components for use and they are listed below as well as in the developer documentation pages.
  • <SprkRadioGroup>
  • <SprkRadioItem>
  • <SprkFieldset>
  • <SprkLegend>
  • <SprkHelperText>
• The previous Radio component using <SprkSelectionInput> has been renamed to Legacy Checkbox and is still available, but will be removed next release.

New Components

• Tooltip
  • Tooltips can be added to spark icons to provide additional information about a feature.
    
• Huge Checkbox
  The Huge Checkbox component is intended for flows that present single questions in a step by step process.
  
• Huge Radio
  The Huge Radio component is intended for flows that present single questions in a step by step process.
  

Bug Fixes

• Updated the SprkButton component so it won't apply the disabled attribute to anchor tags if disabled is true. The disabled attribute on anchor tags is not valid HTML. Thank you to @diriquelme for this work and congrats on your first code contribution to Spark Design System!
• When mediaVariant is sent to icon it will now appropriately center content correctly.

Documentation

• Added information to the storybooks to note about the Masthead not being sticky in IE11 to clearly set expectations on the Masthead component.
• Clarified on Accordion that if there's only one item, it should be a Toggle.

---

HTML UPGRADE PLAN

• Corrected Sass variables that were misspelled
  • 🛠TO DO: Search for $sprk-toggle-transistion-timing in your code base, and replace it with $sprk-toggle-transition-timing
  • 🛠TO DO: Search for $sprk-stepper-dark-icon-color-hoverg in your code base, and replace it with $sprk-stepper-dark-icon-color-hover

ANGULAR UPGRADE PLAN

• Update deprecated Checkbox/Radio components that are using <sprk-selection-container>.
  • 🛠TO DO: Search entire code base for use of <sprk-selection-container>, and replace the radio or checkbox with refactored component that uses the following:
    • Components
      • <sprk-checkbox-group> || <sprk-radio-group>
      • <sprk-checkbox-item> || <sprk-radio-item>
    • Directives
      • sprkCheckboxInput || sprkRadioInput
      • sprkCheckboxLabel || sprkRadioLabel
      • sprkFieldset
      • sprkLegend

REACT UPGRADE PLAN

• Update deprecated Checkbox/Radio components that are using <SprkSelectionInput>.
  • 🛠TO DO: Search entire code base for use of <SprkSelectionInput> component, and replace the radio or checkbox with refactored component that uses the following:
    • <SprkCheckboxGroup> || <SprkRadioGroup>
    • <SprkCheckboxItem> || <SprkRadioItem>
    • <SprkFieldset>
    • <SprkLegend>
    • <SprkHelperText>

May 1, 2020

Summary

This release upgrades our Spark Angular package to work with Angular version 9. Updates the width of the Center Column to be larger (1232px). Updates our primary green color to a new more accessible green. Darkens the gray border around inputs and various other accessibility improvements including updating the trigger element in toggles from an anchor element to a button element. We fixed various bugs across our packages in this release as well. Read below for the changes in this release and check out the Upgrade Guide at the bottom for even more support.

New Versions

@sparkdesignsystem/spark 13.0.0
@sparkdesignsystem/spark-react 2.0.0
@sparkdesignsystem/spark-angular 10.0.0

HTML Package Updates

New Features

• The Spinner function has been updated to provide an aria-label while the spinner is spinning.
• Added two new utility functions related to accessibility.
  • toggleAriaExpandedAttribute(toggleTrigger) - toggles the aria-expanded attribute on toggleTrigger.
  • generateAriaControls(triggerElement, contentElement) - Copies the value of the the id attribute on contentElement into the aria-controls attribute on triggerElement. If no id is available, a unique id is generated.
• Update Stack docs in Storybooks to add information about item spacing not being applied when using the specific column sizes. Add example Stack story that uses the specific column sizes and padding.
• Checkbox inputs have been customized to have a green background when checked.
• Radio inputs have been customized to have a green background when checked.

Accessibility Updates

• Update input border colors to darker gray so they can be seen easier.
• The Accordion Item has a trigger element that was previously an anchor tag. It has now been updated to be a button element. New styles were written to remove the browser defaults for button elements so that this component will visually look the same.
• The Toggle component has a trigger element that was previously an anchor tag. It has now been updated to be a button element. New styles were written to remove the browser defaults for button elements so that this component will visually look the same. It can now be activated with space key.
• The dom-slider package being used in Spark has been updated to version 2.1.0. This fixes an issue that was causing collapsed content to still be visible to screen readers in the following components:
  • HTML Toggle
  • HTML Accordion
  • HTML Award
  • HTML Footer

Breaking Changes

• Update the width of the Center Column to be larger at 1232px.

Bug Fixes

• Fixed a bug where sprk-o-Box spacing modifiers were using the incorrect variable.

Angular Package Updates

New Features

• Spark Angular components are now compatible with Angular 9 applications in addition to Angular 7 and 8 applications.
• Checkbox inputs have been customized to have a green background when checked.
• Radio inputs have been customized to have a green background when checked.
• We will warn implementations of <sprk-highlight-board> that have a secondary CTA (call to action) without a primary CTA.
• Update Stack docs in Storybooks to add information about item spacing not being applied when using the specific column sizes. Add example Stack story that uses the specific column sizes and padding.

Accessibility Updates

• Update input border colors to darker gray so they are easier to see.
• The Spinner function has been updated to provide an aria-label while the spinner is spinning.
• The <sprk-toggle> component has a trigger element that was previously an anchor tag. It has now been updated to be a <button> element.
• The <sprk-accordion-item> has a trigger element that was previously an anchor tag. It has now been updated to be button element.
• The <sprk-masthead-accordion-item> has a trigger element that was previously an anchor tag. It has now been updated to be button element. The aria-expanded attribute has been added.
• The <sprk-masthead> has an id and aria-controls attribute on the narrow navigation menu trigger and associated content. A new input has been made to set a custom value - narrowNavId. A unique id is created as the default.

Breaking Changes

• <sprk-table> was wrongly striped by default. We've corrected that default so all tables will be bare unless configured otherwise. Users are still able to add striped style by adding sprk-b-Table--striped-even to the additionalClasses input of the component.

Bug Fixes

• The <sprk-modal> example in Storybook has been updated to resolve the console errors when clicking the close button.
• Fixed a bug in angular documentation where the invalid percentage input didn't have the error class on it.
• Fixed a typo in masthead so that isElementVisible will correctly return early if window is not defined.

React Package Updates

New Features

• The <SprkFooter> documentation has been updated to show the data that is being passed into the component.
• Update Stack docs in Storybooks to add information about item spacing not being applied when using the specific column sizes. Add example Stack story that uses the specific column sizes and padding.
• Checkbox inputs have been customized to have a green background when checked.
• Radio inputs have been customized to have a green background when checked.

Bug Fixes

• <SprkStack> had a bug that was applying the misc spacing classes when it shouldn't have. Update the component to only render the classes when the itemSpacing prop is set.

Accessibility Updates

• Update input border colors to darker gray so they are easier to see.
• The Spinner function has been updated to provide an aria-label while the spinner is spinning.
• The <SprkToggle> component has a trigger element that was previously an anchor tag. It has now been updated to be a <button> element.
• The <SprkAccordionItem> has a trigger element that was previously an anchor tag. It has now been updated to be button element.
• The Masthead component has a trigger element that was previously an anchor tag. It has now been updated to be button element. New styles were written to remove the browser defaults for button elements so that this component will visually look the same. It can now be activated with space key. Accordion items can now receive itemID for id and aria-controls. If an itemID isn't provided, a unique id will automatically assigned to ensure accessibility.

Breaking Changes

• Highlight Board - According to design recommendations, a secondary call-to-action cannot exist without a primary cta. If that is the case, the component will be broken and a warning will show up in development.

New CSS Classes

• A new utility has been added - sprk-u-MaxWidth--100. This utility will add max-width: 100% to an element.
• A new modifier has been added for all frameworks for Input Containers. sprk-b-InputContainer--full will add max-width: 100%.

Accessibility

These components have been updated in all 3 frameworks to meet WAI-ARIA Authoring Practices for the Disclosure Pattern.

• Toggle
• Accordion
• Award
• Footer
• Masthead

A Green with Better Contrast (All Frameworks) [POTENTIAL BREAKING CHANGE]

• We've made $sprk-green and $sprk-green-dark darker to give better contrast between our text and background colors. The most noticeable difference will be in primary button colors.
• Tints of green will remain the same, and all colors using the $sprk-green and $sprk-green-dark variables will automatically update with this release.
• The color highlight that shows up text is selected is updated for better contrast.
• SprkStepper and SprkCarousel on dark backgrounds now use a lighter green. This can be changed with the $sprk-stepper-icon-border-color-selected-dark-bg sass variable.

Documentation

• Our homepage has been updated to include a Skip Nav link. This will make our site easier to navigate with a keyboard, screen reader, or with other Assistive Technology.
  

• Update the Tabs documentation to clarify that Spark supports automatic activation when using a keyboard to navigate.

• Updated the Icons installation guide content.

• Updated the Fonts installation guide content.

• Updated the Installing Spark landing page.

• Updated the background color for the documentation site to white so that it is still readable when a browser is using dark mode.

• New images on homepage to match our branding. Take a look at the powerlines on wider viewports!
  

---

HTML UPGRADE PLAN (13.0.0)

• Center columns default widths are now 1232px
  • This is a layout component that horizontally centers the page content with a max width.
  • 🛠THINGS TO CHECK: Search your project for elements with the class sprk-o-CenteredColumn and check those corresponding pages for any breaking UI.
• Spark Green has changed to a darker ...

Hotfix to Spark React Package for SprkLink

Summary

Updates a faulty OR conditional in the React SprkLink component file that resulted in extra CSS classes being added to SprkLink components. Adds some extra expectations to unit tests to check for extra classes.

@sparkdesignsystem/spark-react: 1.5.1

[Hotfix] April 17th, 2020

Bug Hotfix for Spark Angular Dropdown

🦟Fix a bug in <sprk-dropdown> that was incorrectly reloading the page when the dropdown trigger was clicked.

March 23, 2020 Release

This release adds new components to the React and Angular packages. Fixes bugs for all three packages. Implements Jest as the testing framework for both React and Angular packages and makes the tests viewable in Storybook.

New Package Versions

• spark: 12.3.0 => 12.4.0
• spark-angular: 9.4.0 => 9.5.0
• spark-react: 1.4.2 => 1.5.0
  https://www.npmjs.com/package/@sparkdesignsystem/spark/v/12.4.0
  https://www.npmjs.com/package/@sparkdesignsystem/spark-react/v/1.5.0
  https://www.npmjs.com/package/@sparkdesignsystem/spark-angular/v/9.5.0

Spark HTML Updates (@sparkdesignsystem/spark)

🦟Bug Fixes

• Fixed a bug that would cause the content in Wait Modals to overflow its container in Internet Explorer 11.
• Fixed a bug in the Masthead where the logo did not have a big enough clickable area in Internet Explorer 11.
• For better semantics, search inputs will now have type="search" instead of type="text"

🔥New Features

• Updated the color of the spinner in the Wait Modal from $sprk-red to $sprk-black.
• Added new $sprk-spinner-color-dark variable thats available for use.
• Updated the sprk-c-Spinner--dark CSS class to be $sprk-black instead of $sprk-red.

Spark React Updates (@sparkdesignsystem/spark-react)

⚡️New components

• Added new SprkHeading component.
• Added new SprkText component.
• Added new SprkFlag component
• Added new SprkBox component.
• Added new SprkCenteredColumn component.

🦟Bug Fixes

• Bug fix for labels in the SprkTextInput component. Labels are now connected to inputs, so clicking the label will activate corresponding input.
• Fixed a bug that would cause the content in Wait Modals to overflow its container in Internet Explorer 11 .
• For better semantics, search inputs will now have type="search" instead of type="text"

🔥New Features

• Add the prop values miscA, miscB, miscC, and miscD to allowed values for the itemSpacing prop. This standardizes camelCase naming of our props & values. The values misc-a, misc-b, misc-c, and misc-d are still supported and this is not a breaking change.
• Switched the Spark HTML package to now use Jest for testing purposes. This speeds up the test running process and now brings us in sync with tooling between our React and Angular packages (now both using Jest). Using Jest also allows us to take advantage of the add-on for storybook that displays test results in a panel in the component canvas.
• Updates color of the spinner in the Wait Modal from $sprk-red to $sprk-black.
• Add new $sprk-spinner-color-dark variable and update the .sprk-c-Spinner--dark class to be $sprk-black instead of $sprk-red.
• Add the prop value hasIcon to the allowed values for variant in the to SprkLink component. This standardizes camelCase naming of our props & values. The value has-icon is still supported and this is not a breaking change.

Spark Angular Updates (@sparkdesignsystem/spark-angular)

⚡️New components

• Added new sprkBox directive.
• Added new sprkCenteredColumn directive.
• Add sprkLink directive
• Added new typography sprkHeading directive.
• Added new typography sprkText directive.
• Added new <sprk-flag> component
• Add deprecation notes to the old <sprk-link> component. It is still able to be used but will be removed in the summer 2020 release. Please use the new sprkLink directive going forward.
• Updates all components that were using the <sprk-link> component to use the new sprkLink directive.

🦟 Bug Fixes

• Bug fix that removes sprk-b-Table--bordered-columns and sprk-b-Table--bordered-columns-inside classes being passed into the <sprk-table> component to render the table correctly. If you would like these classes added to a <sprk-table> you can pass them into the additionalTableClasses input.
• Bug fix that adds space between the Award images in the <sprk-award> component.
• Bug fix in <sprk-tabbed-navigation> for when using the keyboard to navigate the tab component, disabled tabs will now not be selectable.
• Disabled tabs in the <sprk-tabbed-navigation> component will no longer have a :hover style applied.
• Bug fix for the sprkFormatterMonetary directive. The monetary formatter will now only fire if the supplied value is valid. This fixes a bug where invalid values were being run through the formatter and creating unexpected behavior.
• Fixed a bug that would cause the content in Wait Modals to overflow its container in Internet Explorer 11.
• For better semantics, search inputs will now have type="search" instead of type="text"

🔥New Features

• Add the ctaIcon input to <sprk-card> component. It adds the option to render an icon next to the CTA in the teaser variant, if the ctaType is a link and an icon name is provided.
• Update the cardType and ctaType Inputs in <sprk-card> to explicitly check the types allowed for each input.
• Updates color of the spinner in the Wait Modal from $sprk-red to $sprk-black.
• Added new $sprk-spinner-color-dark variable and update the sprk-c-Spinner--dark class to be $sprk-black instead of $sprk-red
• Added new input of idString, variant, and analyticsString to the button directive.
• Added a new story to the Angular Storybook that showcases the secondary button with a spinner, "Loading Secondary".
• Switched the Spark Angular package to now use Jest for testing purposes. This speeds up the test running process and now brings us in sync with tooling between our React and Angular packages (now both using Jest). Using Jest also allows us to take advantage of the add-on for storybook that displays test results in the component canvas.

Spark Documentation Site Updates

• Fixed a bug in setting up the data-sprk-main attribute. Updated where to put data-sprk-main. It should be put on the main content container of the app, not the <body> tag.
• We updated our HTML installation guides to be more helpful, and paired them with videos.
• Anchor links are available for all headings around the site for easier sharing.

Storybook Updates

• Updated the Masthead component's logo so that it doesn't get cropped when the narrow navigation is open.