Changelog
Found a bug? Please submit a request through JIRA.
View the Spark v2 Changelog or the Spark v1 Changelog.
3.10.9
- Updated Sass math syntax in variables to work with Sass-Extract and Dart Sass
3.10.8
- Added RTL support for toggles
- Updated visual regression tests, updated deprecated puppeteer calls
- Added RTL support for Text Inputs with Addons
3.10.7
- Fixed EDL-365: Added !default to SCSS _grid config variables.
3.10.6
- Fixed EDL-362: Removed unneccessary styles for component css files.
- Fixed EDL-364: added
backface-visibility: hidden
to.spark-table tbody
to fix random windows chrome issue with table lines disappearing
3.10.5
- Fixed EDL-359: Added prefix range for MasterCard [2221, 2720]
- Fixed EDL-360: Leap year issue with “DD-MM-YYYY” format only
3.10.4
- Fixed EDL-356: Range highlighting does not work for popover calendar (backwards direction) and inline calendar (both directions)
- Fixed EDL-357: Inline Date Calendar text disappearing in Spark Classic
3.10.3
- Updated “@sabre/spark-icons”
3.10.2
- Fixed EDL-353: Adjusted button day styles for calendar-popover
3.10.1
- Package updates
3.10.0
- Fixed EDL-335: Softkeyboard on ios with type tel in the Card Expiration component would not advance when using double byte languages
- Fixed EDL-335: Softkeyboard on Android with type text in Card Number component did not handle venders with credit cards that had multiple lengths when using double byte languages
3.9.10
- Fixed EDL-390: Modal Component with Tooltip Component doesn’t show tooltip
3.9.9
- Updated “@sabre/spark-icons”
3.9.8
- Fixed EDL-309: Popover
z-index
is higher than Toast Notifications
3.9.7
- Fixed EDL-343: Clicking the Advance By Month Select arrow in the Calendar Popover does not result in the options list being presented
- Fixed EDL-339: Programatically setting values for Payments Component formats value incorrectly
3.9.6
- Fixed EDL-333: Clear button overlaps text entered into the field on narrow fields or when text is long
- Fixed EDL-334: Remove outline on Toolbar wrapper that is momentarily visible in the Spark-React component
- Fixed EDL-335: Card Number
cardTypes
with three or more patterns cause errors in the component
3.9.5
- Fixed EDL-330: Payments component can’t be server side rendered (SSR)
- Removed unused
imports-loader
package - Fixed
hover
state on disabled Text Inputs inside the Table component - Fixed
active
state on Button components inside disabled Table rows
3.9.4
- Fixed larger
line-height
forh
tags other thanh4
in the Accordion component
3.9.3
- Fixed EDL-316:
padding-bottom
on thebody
element remains after a Bottom Fixed Panel is hidden - Fixed Number Selector default and info state colors in the Katana theme
- Fixed color of active page in Pagination component
- Updated RELEASE-CHECKLIST.MD,
.npmrc
andpackage.json
to remove references to the old Nexus registry - Fixed Slider component label color to match other input labels
3.9.2
- Fixed EDL-314: Popover is closed when
mouseDown
andmouseUp
targets do not match andmouseUp
occurs outside the component - Fixed EDL-327: Missing select list arrows in Calendar Jump Date Select List
- Fixed EDL-328: Focus when selecting date in Calendar Jump Date Select List
- Fixed EDL-329: Incorrect background color on disabled Select List with no selected value
3.9.1
- Fixed EDL-320: CVV Input does not support regex validation
- Fixed EDL-324: 24-hour Time Text Input does not accept “00” for hour field
- Fixed EDL-325: added missing
@use sass:math
to calendar.scss, header.scss, table.scss, toast.scss that was causing Dart Sass to fail to compile in some instances
3.9.0
- Added the Currency Input component and examples
- Fixed EDL-315: Removed unnecessary
title
attributes from Calendar Toggle button - Fixed EDL-319: ‘onAfterDrawerCollapse’ event does not fire when using Table in responsive row to panel mode
- Adjusted
editSpreadsheet
regression test timings to ensure proper screenshots are captured - Fixed EDL-323: Select Input label is hidden when field is autofilled by browser
- Fixed EDL-322: Background-color on Select Inputs without a Label does not extend all the way down
- Added an example illustrating a Select with No Label and associated regression tests
- Updated publishing instructions to push to legacy nexus as well as GCP nexus
- Updated
.browserlistrc
to better align with current browser support
3.8.2
- Fixed EDL-317: On iOS devices focusing on a Slider input does not show the focus state
- Added regression tests for Slider inputs’ focus states
- Fixed EDL-300: Select Input font-size at
xl
screen size does not match other text-based inputs
3.8.1
- Added new icon: Dollar Circle Symbol
3.8.0
- Fixed EDL-303: Allow Step Indicator to cycle through Dropdown option on Tab keypress
- Added Indeterminate Checkbox component and examples
- Updated the Release Checklist documentation with new details to verify
- Fixed Password Toggle icon size in Sign In with Progress Bar example
- Fixed alignment of Password Toggle icon in Sign In examples
- Updated Dart Sass task to run synchronously in development to speed up compile time
3.7.1
- Replaced deprecated
node-sass
package with Dartsass
package - Fixed EDL-296: Focus shifts unexpectedly when calendar closes in Date Input With Calendar component
- Fixed EDL-297: Added missing Clear button markup to Auto Suggest examples
- Fixed the disabled color of the Auto Suggest Clear button in the Classic theme
- Fixed EDL-298: Partially filled and disabled Text Input Typeahead causes placeholder to appear
- Fixed EDL-302: Auto Suggest down arrow should cycle to the top when at the end of listbox
- Updated Auto Suggest
_onKeyup
method to triggeronChange
callback if necessary - Fixed EDL-308: Duplicate Event Handlers in Card Set (Card Number + Expiration Date) components after calling
update()
- Fixed EDL-310: Calendar Toggle button is misaligned when field has a status (e.g error) message
- Fixed implementation of
spark-fab--sm
andspark-fab-group--sm
classes in the Katana theme - Added examples illustrating usage of the
spark-fab--sm
andspark-fab-group--sm
classes - Fixed EDL-307: Unable to disable Credit Card Types in Card Set component
3.7.0
- Fixed scenario in Date Inputs where removing the contents of the first field while keeping the rest causes removal of the
active
class - Fixed EDL-281: PopOver Calendar does not move within Modal
- Added Inline Calendar component and examples
- Fixed issue in Range Slider where a window keyboard listener was never being removed leading to console errors
- Added new Time Selection components:
- Time Text Input
- Time Range Slider
3.6.2
- Fixed issue where some icons displayed with inconsistent stroke widths
- Fixed the height of the Katana Header component’s top accent bar when the Header is condensed or collapsed
3.6.1
- Added
.stylelintrc
file - Added
aria-label
tonav
element in Pagination - Truncated List example
3.6.0
- Fixed incorrect disabled color on Multi-Select component’s group title
- Fixed Primary Progress Button example code by removing extra
"
- Added new icons:
- Document Search
- Link/Unlink
- Added a multi-line list example of the Page-Level Message component
- Fixed the disabled style for the Pagination component’s navigation arrows in the Classic theme
- Fixed sass syntax error in input-group.scss:52
- Fixed Select Input padding around the dropdown caret
- Fixed missing
spark-btn--md
class in medium-size Progress Button examples - Fixed Select Input arrow styling in the Classic theme when the component has a value and is disabled
- Fixed Number Selector display of whole numbers when the step attribute contains zeros after the decimal i.e. step 1.00 should result in value being displayed as 1.00 instead of 1
- Added deprecation notice for icon grunt build task
- Added
@sabre/spark-icons
dependency
3.5.4
- Fixed Issue with Pagination Select Input component when on non-$gray-10 background
3.5.3
- Fixed EDL-267: Calendar display does not adapt correctly on smaller screens
- Fixed EDL-286: Table bottom border disappears when last row is active
- Fixed EDL-278: Selecting Table rows results invisible borders in Firefox and Chrome
- Fixed EDL-66: Added options for positioning the Calendar Popover
- Added
.nvmrc
file - Updated
.eslintrc
rules to work with updatedeslint
- Updated
package.json
packages for compatibility with node >= 12 - Fixed EDL-292: Tooltip pointer hover can trigger the additional content and the pointer can be moved over the additional content without the additional content disappearing
- Fixed EDL-290: Left padding is missing from first Tab with icon in the Katana theme
- Fixed EDL-255: Added CSS to prevent truncation of text in the Select component at XL size
3.5.2
- Fixed EDL-274: Arrow function not working in IE11 on FAB Icon Only with Options and Underlay Breakpoint example
- Added new icon: Covid
3.5.1
- Fixed EDL-258: Slider Handle does not retain
focus
state when mouse is used to move handle - Fixed EDL-263: Single carousel item is not centered in container in IE11
- Fixed EDL-264 and EDL-265:
- Floating numbers not always displayed appropriately when interacting with input field directly or with Increment/Decrement buttons
- Updated and added unit tests for Number Selector component
- Fixed EDL-272: Avatar overlay shifts when hovered in IE11
- Fixed EDL-275: Spinner does not show in View More Button
- Fixed EDL-276: Dropdown Step Indicator options cannot be tabbed into in Firefox
- Fixed EDL-277: Fixed Panel
z-index
higher than hamburger menu underlay - Fixed EDL-279: Focusing on steps via keyboard tab key does not reveal tooltips in Condensed Step Indicator
- Updated Condensed Step Indicator tooltip
:hover
z-index
to supersede the:focus
z-index
- Fixed EDL-280: Dropdown Step Indicator header should regain focus after a selection is made
- Updated
role
and addedaria-modal
attributes in thePopover
andCalendarPopover
components - Updated
font-family
to Roboto Condensed for Text Avatars - Updated the Text Avatar text colors for the
:hover
,:hover:focus
and:focus
states - Added custom CSS to Static Avatar in Link examples to hide transitioning border when tabbing past link
- Update Katana Secondary Button initial,
:focus
and:hover:focus
text color - Updated Checkbox and Radio Button
:checked:hover
state in IE11 to match other browsers - Updated Condensed Header underpipe to
4px
instead of3px
- Updated
:active
state of Avatars in Headers in IE11 - Updated Accordion toggle CSS rotation value to resolve bug in IE
- Updated Summary Bar expand-collapse toggle icon to fill instead of line
- Updated positioning of Icons with Tooltips in the Table component on IE Edge to prevent jumping on hover
- Updated the text-color for disabled cells in the Table component which was incorrect in IE11
- Updated the Table Drawer handle
overflow
attribute for IE11 to allow box-shadows to be fully visible - Updated the Table Row-to-Panel examples to remove hidden Table Headers from the
tabindex
at smaller sizes - Updated button states for the show/hide password variation of the Text Input component
- Added
keyup
event for the show/hide password variation of the Text Input component - Updated Table component styles to round corners and add shadow when the edit table row action panel is open
3.5.0
- Added the new Spark Katana theme
- Updated the Button Group component to vertically center elements
- Added Text Button alignment examples to demonstrate how they should behave in different scenarios
- Updated the Calendar component with wrapper
html
elements to allow styling of elements within the Calendar Popover - Updated Spark Katana Footer Icon hover transition timing functions to
$spark-ease-out
to align with the Spark standard - Updated Regression test config base configure object to use the spread operator
- Deprecated the
spark-message--lg
class in the Page-level Message component - Updated the Classic theme Multi-Select Input as follows:
- Removed errant CSS in the Classic theme Multi-Select styles
- Removed the Multi-Select dropdown arrow displayed on
xs
screens - Added Info state examples for the Multi-Select Input component
- Added visual regression tests for the new Info state
- Updated the
_inset-content.scss
helper to align with the Katana theme - Removed
clearfix
include fromspark-panel__component
element to resolve cases where Panel contents are flexed - Removed
focus
underline from the Condensed Step Indicator Tooltip text - Updated the Table component JS to set a
data-attribute
for Row-to-Panel tables to allow for targeted styling - Fixed
animation-delay
value in Table Drawer component - Updated resize handles to always show in resizable Table components regardless of viewport size
- Deprecated the Spark Classic
_input-message-states.scss
mixin and migrated the styles into individual components to allow theming - Removed some styling from the
_input-message.scss
helper and placed them within individual components to allow theming - Fixed regression test config causing custom scripts to fail
- Updated Roboto Mono to v2.138 to fix IE11 font-weight rendering bug
- Updated Text Input transition timing functions to
$spark-ease-out
to align with the Spark standard - Removed some styling from the
_tooltip.scss
placeholder and placed them within individual components to allow theming
3.4.9
- Fixed EDL-268: Clear button does not show consistently when choosing options via mouse or keyboard arrows in Auto Suggest Show All Terms variation
- Updated unit tests for the Underlay component to resolve a failing test based on
npm
package updates - Updated Toast component
z-index
value to match Fixed Panel component
3.4.8
- Removed unused psuedo-class styles for the Pagination component ellipsis
- Fixed Payments Card Number Input in IE11 where field appears broken or does not show at all
- Fixed Unified Payments’ Expiration and CVV field widths that should follow a 60:40 ratio
- Fixed Scroll-to-Top positioning bug in IE11 caused by unrecognized
main
element
3.4.7
- Fixed EDL-245: Date Range does not clear properly when values are changed
- Fixed EDL-248: Tables with additional checkboxes do not work correctly
- Fixed EDL-249:
onChange
callback is not fired when interacting with Toggle Switches via mouse - Fixed EDL-253: Keyboard does not show on iOS devices when interacting with the Spreadsheet Table
- Fixed EDL-256: Modal
.spark-modal__dismiss
class does not dismiss the Modal as expected - Fixed EDL-257: Number Selector value rounding is inconsistent
- Removed
.focus
class from the.spark-auto-suggest
element as it is never applied - Fixed faulty Auto Suggest - Auxiliary Information example caused by double quotes
- Updated the Disabled Auto Suggest example to include a
disabled
attribute on the Clear button - Added visual regression tests for the Panel Menu
- Fixed back icon alignment issue in four level Panel Menu
3.4.6
- Adjusted CSS
rotate
transforms in the following components to resolve a Firefox rendering bug:- Accordion
- Expand-Collapse
- Panel Menu
- Summary Bar
- Removed antialiasing in the
_icon.scss
placeholder that affects the Chevron icon in the following components:- Expand-Collapse
- Panel Menu
- Summary Bar
- Removed
align-items
declaration with incorrect value in Messages component
3.4.5
- Removed errant
box-shadow
CSS applied to the success variation of the Message component - Removed errant CSS class in Image Panel example
- Added missing
spark-panel
classes to Modal with Expand-Collapse example - Added missing
ARIA
attributes to Modal with Expand-Collapse example - Removed unused
spark-serif
class - Updated the Side Fixed Panel component to indicate through a
data-attribute
when a panel is full width - Added new icons:
- Text Large
- Text Small
3.4.4
- Added new icon: Spray Bottle
3.4.3
- Fixed EDL-251: Select Input arrow size is incorrect, and position varies between empty and filled states
- Added
href
attributes to the Footer social media links in order to be able to tab to them using the keyboard - Removed
button--loading-with-input
regression test that is no longer needed
3.4.2
- Fixed IE bug (10, 11, Edge) where
input
event is not fired by replacing it withchange
event that works across all Spark-supported browsers - Updated unit tests for the Select Input component
- Fixed: Backstop config paths configuration was misconfigured
3.4.1
- Fixed EDL-235: Added styles to Text Input and Auto Suggest for disabled inputs with values and border hover states
3.4.0
- Fixed EDL-242: Badges with Popovers do not show the Popover when the Enter key is pressed while focused on the Badge
- Fixed EDL-244: Toolbar touch event is causing memory leaks
- Moved image assets to S3 and updated image URLs for the following examples:
- Carousel
- Toast
- Tab Panel examples
- Fixed Roboto Mono font names to resolve issue with displaying different weights
- Added new icons:
- Lightning Bolt
- Credit Card Hand
- Updated Roboto Condensed to v2.138 to fix Chrome font weight rendering bug
- Added Side Fixed Panel component and examples
- Updated Underlay HTML example to disable
animate
property - Removed broken
text-shadow
styling on Text Input Character Count label - Added
opacity
transition to Text Input Character Count
3.3.6
- Updated Header SCSS so the More menu now looks like other drop down menus, fixed mobile header initial transition
- Added new icons:
- Box-package
- Circles-connected
- Congruent-cubes
- Monitor-binary
- Toy-building-block
3.3.5
- Fixed EDL-241: Progress Button spinner shows in default state in Safari if button was initially hidden then revealed
3.3.4
- Fixed EDL-117: Header overflow items change positions when selected
- Fixed EDL-234:
- Added
aria-labels
to elements containing Spark icons as needed - Added new option to Payments to allow customizing CVV Popover
aria-label
- Updated Table example headers where icons are used to align the header with the icons
- Fixed incorrect inputs in Modal - Multiple Form Elements example
- Added
- Fixed EDL-239: Tabs with Icons lose left-padding when in RTL mode
3.3.3
- Fixed EDL-221: Page content is reachable via Tab key when Header Hamburger menu is open on smaller screens
- Fixed EDL-226: Unable to click on either date or year using a Date Input with Typeahead while using Safari Browsers
- Fixed EDL-236: Replaced incorrect Number Selector messaging classes with correct v3 classes, and fixed states examples to apply correct
aria-describedby
values - Fixed EDL-235: Added styles to Text Input and Auto Suggest for disabled inputs with values and border hover states
- Added new icons: Document Cog, Bookmark Star
- Cleaned up reference to visual regression testing in
RELEASE-CHECKLIST.MD
- Removed old Nexus registries from
.npmrc
file - Updated visual regression tests so they no longer give false positives
3.3.2
- Resolved EDL-190: Added a “Select Today” button feature and configurations to the Calendar Popover component
- Fixed EDL-232: Calling
update
on Step Indicator returns incorrect step count - Updated Babel to export modules using commonjs from ES6 syntax. ES6 modules were causing issues in some testing frameworks, particularly Sinon
3.3.1
- Fixed EDL-225: Deprecated forced button state styles
.focus
,.hover
,.active
,.disabled
- Fixed EDL-230: Date Select placeholder text overlaps option in Windows when using arrow keys (Chrome) or mouse (Edge) to make selection
- Updated backstop html reports to show only error reports if there are any
3.3.0
- EDL-231: Added
aria-label
attributes to the Tab component’s scroll buttons - Added Floating Action Button component
- Added Underlay component
- Updated
.babelrc
:- Added
@babel/plugin-proposal-class-properties
plugin
- Added
- Updated
.eslintrc
:- Changed parser to
babel-eslint
- Changed parser to
3.2.2
- Fixed EDL-229: Missing focus state for active Tabs
3.2.1
- Fixed EDL-211: Tooltip flickers if mouse is moved to the top of the icon button for Tooltips placed at the top
- Fixed EDL-223: Extra border around unified payments warning message
- Fixed EDL-228: Messaging Mixin API missing
setInfo()
&clearInfo()
methods - Added new icons: Flickr, Pinterest, Rate Loading and Message Chat
- Updated the Instagram icon to reflect changes to the brand icon
- Added Events mixin
- Fixed console error caused by removed EDL theme switcher markup
3.2.0
- Fixed EDL-219: Toolbar will not close in iOS Chrome
- Fixed EDL-224: Purple color steps removed in Spark v3
- Fixed EDL-214: Popover does not close when clicking outside on an iPad
- Added Multi-Action Button and Combo Button components and examples
- Updated the Popover component to:
- set ARIA attributes when a popup menu is included in the Popover as part of a Multi-Action or Combo Button
- fix the element being checked for the
popover-active
class when caching - ensure that disabled buttons cannot trigger a Popover
- allow a Popover to be used outside of a
spark-popover-group
element
- Fixed the Button Group “component” layout properties and added examples and regression tests
- Removed the theme switcher from EDL demos
3.1.1
- Fixed EDL-209: Typeahead calendar wouldn’t allow you to enter 02-29-2020
- Added README.txt to the changelog folder so git will track the folder
- Added new icon: Boarding Pass
- Fixed gulp script that was appending multiple change log items to the same line
3.1.0
- Fixed EDL-205: Modal is closed due to mouseUp event outside modal after upgrading Chrome version
- Fixed EDL-213: Status message color changes on hover
- Added hide-on-scroll functionality to the Header
- Added Row-to-Panel Table example
3.0.3
- Added gulp script to concatenate change logs for release
- Fixed Babel stand alone component build issue
- Fixed EDL-217: Hidden elements in Header placeholder menu can be reached by tabbing
- Fixed EDL-215: Chrome Mobile closes toolbar panel when keyboard opens
- Updated EDL package release documentation
3.0.2
- Fixed EDL-216: Bottom corners of Select Input status messages aren’t rounded
- Fixed EDL-208: Filter expand/collapse panels cannot collapse at XS size
- Fixed errant SCSS in Payments component
- Updated Payments CVV instantiation script for consistency with other examples
- Fixed EDL-206: Linear-gradients on Table Drawers display incorrectly
- Added NPM postversion script to automatically add banner to CHANGELOG.md
- Fixed EDL-212: Updated templates with Step Indicators to the proper v3 version
3.0.1
- Fixed EDL-197: Added error messaging to the auto-suggest component
- Fixed EDL-203: Select options change color with state on Windows
- Fixed SCSS that was causing an issue in some Angular builds
- Updated Babel to Babel 7 with support for polyfills that don’t pollute the global namespace
- Changed Header product title size to
delta
onxs
&beta
forsm
and up - Added left borders to Tables
- Changed chevron icon size in Expand/Collapse from
2.5rem
to2rem
- Changed chevron icon to fill on Table Drawers
- Changed animation timings
- Increased label transition time on Input components from
100ms
to200ms
- Decreased Calendar transition duration from
300ms
to200ms
- Increased label transition time on Input components from
- Changed margin between toolbar icons by adding an additional
0.5rem
of space - Fixed wrong colors in some HTML examples from
#555
to#333
- Added transition to Carousel slides
- Fixed EDL-204: Accordion scss code breaking builds
- Fixed EDL-199: Added
onClick
callback configuration param to Toolbar component
3.0.0
- Remove Roboto Slab font from the library
- Remove jQuery bundling from the library
- Updated the Carousel component with the following changes and updates:
- Added an optional Skip Carousel button to assist with keyboard navigation on all Carousel variations
- Added ESC key functionality to allow bypassing a Carousel when navigating via keyboard
- Removed the Dark and Light Hero variations in favor of a single Hero Carousel variation
- Added ARIA attributes to the Hero Carousel to provide more details to screen readers
- Updated modular scale to remove duplicates and unused sizes:
- Removed
iota
- All
theta
changed toeta
and removedtheta
- All
eta
changed tozeta
- All
zeta
changed toepsilon
- Removed
- Removed color palettes that are not in use (
$cyan, $cyan-color-steps
,$purple
andpurple-color-steps
) - Removed deprecated styling including the following:
- Deprecated Header Search styling
- Instances of the Logout button and associated styling
- Deprecated margin and padding helper classes
- Orphan style variables
- Unused colors in Badges
- Deprecated warning colors
- Deprecated Button Link class
.spark-btn--link
- Deprecated “disabled” link styling
- Updated markup to substitute all references of old helper classes with their new variations
- Updated the Table with Messaging examples as follows:
- Added a Tooltip partial Javascript file for use
- Changed instances of large airplane icons to medium
- Removed Toolbar partial file from examples that do not have a Toolbar
- Update all Status icons to use fill instead of line within Tables
- Removed Icon Buttons that do not have any usage within Tables and replaced them with vertically centered Icons when not inside a status wrapper.
- Replaced instances of
<button class="spark-btn--link">
in HTML examples to<a class="spark-link">
- Fixed
$ease-in-out-quart
SASS variable name in easing configs - Removed unused SASS variables in the following components and component configs:
- Buttons
- Calendar Popover
- Checkbox
- Header
- Menu
- Panel
- Progress Indicator
- Select
- Slider
- Tables
- Toast Notifications
- Toggles
- Transaction Summary Bar
- Replaced Number Selector
- Updated default visual style
- Added hidden label style
- Added keyboard triggered button effects
- Updated messaging styles
- Updated accessibility features
- Added Right to Left support
- Removed setErrorState method; Use standard method from Messaging mixin
- Updated Step Indicator:
- Added
stepProgressionLabel
to allow for translation of theX of X
in the drop down step list variation - Added Accessibility attributes to the step badge, these are translatable with the
currentLabel
and thecompletedLabel
- Removed the requirement that the Step Indicator have a title and a subtitle when not using
- Added
onStepClick
callback option to expose click functionality to single page applications. See JS tab for the examples in the Developer section - Updated the html examples, applying appropriate class names to the different variations
- Removed header and subtitle from code
- Added
- Added animation to Messages
- Added Progress Button animation
- Updated markup used in Extra Small Indeterminate Progress Indicator
- Added Extra Small Determinate Progress Indicator