American Express American Express |

Release Notes

V6.25.6 - April 23, 2024

Fixed

DataTable

  • Accessibility fix for checkable DataTable

V6.25.5 - November 14, 2023

Fixed

Collapsible

  • Adds reduced motion on hover

Carousel

  • Update resizing and reflow

Text Link

  • Update tag target size

Input

  • Update disabled styling

V6.25.4 - September 14, 2023

Fixed

Modal

  • Add overflow scrolling when modal has large amount of content

V6.25.3 - August 7, 2023

Fixed

Checkbox

  • unify styles for checked and indeterminate

V6.25.2 - June 21, 2023

Fixed

Carousel

  • updated component structure to improve accessibility

Two-Lined Dropdown

  • overflow wraps on small breakpoints

Breadcrumb

  • replace iconfont with dls-icon glyph

V6.25.0 - May 12, 2023

New

Navigation

  • added nav styles to DLS Lite

Icons

  • added a no-icons variant to DLS & DLS Lite

Updated

Carousel

  • allows motion animation triggered by interaction to be disabled

Collapsible Panel

  • allows motion animation triggered by interaction to be disabled

Phone Input

  • updated focus state

Navigation

  • allows motion animation triggered by interaction to be disabled

Navigation

  • background color on hover updated to dls-gray-04

Tab

  • allows motion animation triggered by interaction to be disabled

V6.24.0 - February 20, 2023

New

Date Picker

  • Introduce new legend element and square date outline

Breadcrumbs

  • Introduced non-interactive visual variation

Utility Classes

  • Add missing justify-content-start flex class

Flags

  • Added the Denmark flag

Updated

Breadcrumbs

  • Update to color contrast

Inputs

  • Set opacity of placeholder text to fix Firefox bug.

Progress Bar

  • Correctly reflect percent completion of progress bar

V6.23.2 - December 15, 2022

Updated

Search

  • Target new btn-form-close class for clear button

Select

  • Reflow instead of using ellipses

V6.23.1 - November 28, 2022

Updated

Carousel

  • Add no-icon class with JS if children present

Tooltip

  • Aligns correctly on small breakpoints

DatePicker

  • Update hover colors by @smo682 in #324

Documentation

  • Update references to iconography to use dls-icons instead of iconfont classes

Deprecated

Iconfonts

  • DLS Icon classes are deprecated in favour of using the @americanexpress/dls-icons package.

V6.23.0 - October 14, 2022

New

Icons:

  • Bank app
  • Bank mobile
  • Bank mobile landscape


Utilities:

Added new classes for flex align-self styles

  • .align-self-center
  • .align-self-start
  • .align-self-end
  • .align-self-baseline
  • .align-self-stretch

Updated

General Note

This release was specifically to update and remediate a number of accessibility issues within our components. Whilst each component received its own specific treatment, all components have also had the following updates to ensure consistency:

  • Interactive elements now have focus state
  • All components reflow to 320px
  • Interactive elements now have a minimum of 44x44 pixels target size


Color

  • Gray 04 hex code updated to #8E9092 to have sufficient contrast of 3:1 with gray 01 and lighter
  • Neutral hex code updated to #8E9092 to have sufficient contrast of 3:1 with gray 01 and lighter


Accordions - Collapsible text link

  • Change name to: Collapsible text
  • Accessible label provided
  • Updated button states:
    • Default: Button size
    • Hover: Button size and styling
    • Active: Button size and styling


Accordions - Inline collapsible text link

  • Changed name to: Inline collapsible text
  • Introduce text-link class styles for consistency with new anchor styling
  • Removed second button hide details button and changed text on existing button to:
    • Open state: Hide details. Collapsed state: Show details
  • Updated button states:
    • Default: Button size
    • Hover: Button size and styling
    • Active: Button size and styling


Alert:

  • add link underlined class
  • add new .alert .glyph class to set spacing around dismissible icon


Badges

  • Changed outlined badge size from 33px to 32px
  • Neutral Status Badge color updated to new Gray 04
  • Updated accessible name
  • Accessible labelling for tooltip


Breadcrumbs

  • Added new breadcrumb-item class
  • Updated link text to new link styling
  • Tap Target height increased to 44px
  • Links wrap on mobile view


Buttons

  • Changed color from Gray 05 80% opacity (90% on hover) to 60% black (70% on hover)
  • Increased size from 40x40px to 44x44px
  • Button reflow to adjust to text
  • Introduced btn-utility-wrapper and btn-utility classes to allow for utility buttons to also benefit from contrast ratio updates and 44px tap target sizes.
  • Introduced .btn-overflow class that reduces font-size and allows for text to overflow inside of buttons.


Cards

  • Link styling updated to new underline on default.
  • Loader default color changed to Gray 04 to pass color contrast 3:1.


Carousel

  • Pause/Play button added
  • Added balance-play class to correctly align pause/play button with dots in the center.
  • Added carousel-text-overlay class to replace image gradient and give content correct contrast.
  • Background color updated to gray 01
  • Dots are no longer interactive, only arrows control the carousel
  • Tap Target height increased to 44px
  • Added alt text to images
  • Semantic headings provided


Checkbox

  • Tap Target increase to 44x44px
  • Color contrast increase ratio 3 to 1
  • Border changed from gray 03 to gray 04
  • Updated label


Data Table

  • Unselected sort header icon changed to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background
  • Accessible labelling added
  • Unique IDs provided
  • Fully accessible with keyboard navigation
  • Increased size of targets to hit 44x44px target minimum.
  • Adjust .table class to require semantic HTML element in addition to class.


Date picker

  • Increased size of targets to hit 44x44px target minimum.
  • Updated date states to include symbols in addition to colors.
  • Introduced expand/collapse state for calendar button.
  • Date selected state is now conveyed
  • Unique IDs provided
  • Accessible labelling added


Date range picker

  • Increased size of targets to hit 44x44px target minimum.
  • Reduced display to only show single month at a time.
  • Moved to using one input with input field mask, so that calendar can be used at 320px.
  • Introduced new .date-range-focus class to correctly handle focus states for both inputs
  • Updated date states to include symbols in addition to colors.
  • Background color update to gray 04 to have sufficient contrast of 3:1 ratio


Dialog Box

  • Fully accessible with keyboard navigation
  • Focus state added when dialog is opened & closed
  • Heading update


File upload

  • Updated link text to new link styling


Filter

  • Increased size of targets to hit 44x44px target minimum.
  • Filter status now announced with screen readers.
  • Added missing roles and attributes.
  • Accessible labelling added


Footer

  • Manage toggle and heading functionality on resize


Hero Images

  • Text meets 3:1 & 4.5:1 color contrast ratio.
  • Text & image resize to meet small screen size of 320px.
  • Semantic markup provided
  • Update programmatic Labels


Header and footer

  • Updated link text to new link styling
  • Increased size of social media buttons to hit 44x44px target minimum


Highcharts

  • Text alternative added for each graphic.
  • Graphical object updated to Gray 04 to meet 3:1 color contrast with background


Inputs

  • Color contrast of input border changed to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background or lighter
  • Added success and error messages for success and error states.


Currency Input

  • Accesible label provided for input field


Date Input

  • Group labels added


Password Input

  • Provided instructions for show button
  • Form Validation


Phone Input

  • Updated error message.
  • Group labels added
  • Update programmatic Labels


Copy link Input

  • Keep status messages present after successful copy
  • Update Accessible labelling


Link - Inline

  • Updated states:
    • Default: Added underline
    • Hover: Changed default color to 10% Darker (#0065BD)
    • Pressed: Changed default color to 20% Darker (#005AA8)


Link - Standalone

  • Increased target size to 44px
  • Updated states:
    • Default: Added underline
    • Hover: Change default color to 10% Darker (#0065BD)
    • Pressed: Change default color to 20% Darker (#005AA8)
    • Focused: Changed size to match target size, 3px corner radius.


Link -Dark mode

  • Updated states:
    • Changed Focus to white, 3px radius


Map

  • Tooltip -Close button
  • Increased target size to 44x44px
  • Color change from Gray 03 to Gray 05


Modal

  • Increased close target size to 44x44px
  • Keyboard navigation includes focus state


MultiSelect

  • Increased checkbox target size to 44x44px
  • Proper Accessible labelling
  • Error message associated to MultiSelect on error


Multi Step Tracker

Simple updates:

  • Update Line style - Height 2px, Dash 2px gap 4px. Update Gray to Gray 05.
  • Update dot state.
  • Introduce new text to Mobile: Dot number and total number of dots.
  • Accessible labelling


Complex Updates:

  • Update Line style - Height 2px, Dash 2px gap 4px. Update Gray to Gray 05.
  • Update dot state.
  • Introduce new Dot Sub states.
  • Introduce new text to Mobile: Dot number and total number of dots.
  • Introduce new .multistep .step .progress-bar classes for progress bar state styles
  • Introduce new .multistep .step.active .dot-completed classes for completed dot states
  • Introduce new .multistep .step.current .dot-sub-step classes for current step dot states
  • Introduce new .multistep .step .dot-incomplete classes for incomplete dot states


Navigation

Primary

  • Updated text colors.


Secondary

  • Updated text colors.
  • Updated padding top and bottom to 11px.
  • Increased target size to 44px


Tertiary

  • Updated text colors.
  • Updated padding top and bottom to 11px.
  • Increased target size to 44px.


Notification

  • Updated link text to new link styling
  • Increased close target size to 44px.
  • Added href to element


Overflow Menu

  • Increased close target sizes to 44px.
  • Updated focus size to 3px inside menu item.
  • Accessible naming


Pagination

  • Updated sizes of Page targets to 44x44px.
  • Added 8px padding between each page.
  • At 320px Break point:
    • Removed padding between each page
    • Reduced ‘…’ to 24px width
    • Reduced padding between button and pages to 6px
  • Removed background hover state from page links.
  • Uses link state styling for pages in default state.
  • Updated ‘previous’ and ‘Next’ button states.
  • Update to semantic structure


Progress Indicator

Progress Bar

  • Determinate progress bars now have a label element to show current value
  • Added .progress-label class to provide styles to label


Segmented Tracker:

  • Added Label (4 of 12 Completed) below the tracker.
  • Added .linear-tracker-label class to provide styles to label


Continuous Tracker

  • Left align the success text to maintain consistently.
  • Load Patterns


Linear Determinate

  • Adjust background color to Gray 02
  • Added percentage label below the tracker


Linear Indeterminate

  • Removed gray background
  • Adjusted unfilled section of linear bar to be transparent


Circular Determinate

  • Adjust background color to Gray 02.


Circular Indeterminate

  • Active bar 1/4 was made transparent.
  • Gray background 3/4 is now active (bright blue default and white for dark theme)
  • Accessible naming


Radio Buttons

  • Color contrast increase ratio 3 to 1
  • Border changed from gray 03 to gray 04
  • Fixed the horizontal layout and reduced the overall default width.
  • Added visible label
  • Increase Target Size to 44px


Search

Simple Results

  • Increased target size and search result to 44px height
  • Introduce new text link styling with class .search-results-item-link
  • Introduce new class .no-results-msg for displaying no results message
  • Added visible label
  • Provided proper semantic markup
  • Hidden submit button doesn’t receive focus


Search Advanced Results

  • Introduce new text link styling with class .search-results-item-link


Select

  • Properly attribute error message on error


Stepper

Default Stepper

  • Label associated with input.


Slide Stepper

  • Plus and minus buttons have been updated to gray 04 to have sufficient contrast of 3:1 ratio
  • Background color of incomplete changed to gray 04 to have sufficient contrast of 3:1 ratio
  • Slider Knob now has 1px white border outside to create contrast between gray 04 and bright blue
  • Slider buttons tap target increased to 44x44px
  • Visible label added.
  • Provided ARIA roles
  • New class .slider-button and .slider-button-styles added to provide correct button styles
  • New class .slider-handler and .slider-handler-styles added to provide correct handler styles


Tabs

  • Unselected Hover: the bright blue text was not passing 4.5:1 ratio contrast with Gray 02. So the new color is #0065BD (v7-Bright Blue 510) as the new text hover style.
  • Along with default and active tab component we added in hover component so tabs can be easily changed by designers.
  • Mobile reflow was redesigned to be vertical tabs so the labels are fully visible. Organized the tabs to easily access desktop and mobile versions.
  • Typo correction for aria-controls.


Tags

  • Update to labels to better convey dismissing a tag
  • Tap target increased to 44x44px.
  • Introduced new .tag-container and .close-tag classes with same syntax as before to introduce new styles
  • Deprecated existing .tag class


Tooltips

  • ARIA tooltips have accessible name.
  • Increased button tap target to meet 44x44px.
  • Expand/Collapse state added.
  • Accessible labels added.
  • Tooltip content dismissible
  • Introduced new class tooltip-btn-circle for adding correct styling to Outline Badges


Toggle Switches

  • Off state color updated to gray 04 to have sufficient contrast of 3:1 ratio with gray 01 background or lighter
  • Fixed the horizontal layout, Right Align text and reduced the overall width
  • Added Disabled state
  • Introduced new .toggle-switch class with same syntax as before to introduce new styles


Video

  • Video control tap target size increased to 44x44px
  • Added description text below video to allow those unable to watch to still engage with the content.

Deprecated

Card Number Input

Postal Code Input

Tags

  • Deprecated existing .tag class in preference of .tag-container and .close-tag classes.

Toggle Switches

  • Deprecated existing .switch class in preference of .toggle-switch class

V6.21.5 - June 8, 2022

New

Icons

  • dls-icon-bank-app
  • dls-icon-bank-app-filled
  • dls-icon-bank-mobile
  • dls-icon-bank-mobile-filled
  • dls-icon-bank-mobile-landscape
  • dls-icon-bank-mobile-landscape-filled

Updated

Documentation

  • Updated Accordions documentation

Copy Link Input

  • Success message added
  • Input field outline updated to bright blue

Deprecated

Button

  • Contextual Text Buttons

V6.21.4 - April 13, 2022

Updated

Documentation

  • Updated “Copy” overlay on all Color swatches to pass accessibility color contrast 3:1 ratio
  • Updated “Copy” overlay on the Data Viz color swatch to pass accessibility color contrast 3:1 ratio
  • Updated Stylelint version to remove all non-inclusive language
  • Removed specs
  • Updated Design-Kit link under Resources section
  • Updated z-index file to reference correct labels for Modal

Fixed

Icons

  • Success/Warning icon size updated to 28px

V6.21.2 - April 5, 2022

Fixed

Documentation

  • Removed duplicated accessibility prop (.individual)
  • Breakpoints and padding values now mimic values in code and design kit

Assets

  • Updated to latest static-assets version

V6.21.1 - February 18, 2022

New

Data Viz

  • dls-aqua-100
  • dls-aqua-200
  • dls-aqua-300
  • dls-aqua-400
  • dls-aqua-500
  • dls-aqua-600
  • dls-bright-blue-100
  • dls-bright-blue-200
  • dls-bright-blue-300
  • dls-bright-blue-400
  • dls-bright-blue-500
  • dls-bright-blue-600
  • dls-deep-blue-100
  • dls-deep-blue-200
  • dls-deep-blue-300
  • dls-deep-blue-400
  • dls-deep-blue-500
  • dls-deep-blue-600
  • dls-green-100
  • dls-green-200
  • dls-green-300
  • dls-green-400
  • dls-green-500
  • dls-green-600
  • dls-magenta-100
  • dls-magenta-200
  • dls-magenta-300
  • dls-magenta-400
  • dls-magenta-500
  • dls-magenta-600
  • dls-orange-100
  • dls-orange-200
  • dls-orange-300
  • dls-orange-400
  • dls-orange-500
  • dls-orange-600

Deprecated

Data Viz Colors

  • dls-teal
  • dls-salmon
  • dls-dark-yellow
  • dls-gold
  • dls-bright-blue-20
  • dls-bright-blue-40
  • dls-bright-blue-60
  • dls-deep-blue-20
  • dls-deep-blue-40
  • dls-deep-blue-60

V6.20.0 - January 27, 2022

New

Data Viz

  • dls-data-visualization.scss stylesheet added

V6.19.1 - January 8, 2022

Fixed

Overflow Menu

  • Updated to automatically close menu on interaction and returns focus to menu

Updated

Documentation

  • Date of Birth Input updated to Date Input
  • DataTable date format updated to reflect MMM DD, YYYY

Deprecated

Data Viz

  • Bar Charts

Inputs

  • Smart Forms
  • Card Number Input
  • Postal Code Input

Video Player

  • Headline & Feature Video

V6.19.0 - November 29, 2021

New

Floating Button

  • New classes added (btn-floating-chat & btn-floating-scroll)

Fixed

Highcharts

  • Adds missing a11y styles

Input

  • Adds focus indicator to submit, reset, and button inputs

V6.18.5 - November 12, 2021

Fixed

Tabs

  • Adds missing keyboard navigation

V6.18.4 - October 14, 2021

Fixed

Search

  • Addressed visual bug on border

Hero

  • Fixed visual inconsistency for our color gradients across browsers

Collapsible Panel

  • Updated to allow for correct text wrapping with and without icon

Cards

  • Added media query to honor prefers-reduced-motion setting for actionable cards

Updated

Documentation

  • Updated guidance on how to use our Design Kit in Designer - Get Started section

V6.18.1 - August 17th, 2021

Fixed

Secondary Navigation

  • Fixed jumping of menu items on hover

Password Input

  • Fixed password value overlapping with show/hide button

Currency Input

  • Updated for visual consistency of focus state

Phone Number Input

  • Updated for visual consistency of focus state

Guidelines

  • Fixed broken link to dls-react docs in Getting Started section

V6.18.0 - July 29th, 2021

New

Colours

  • New Light Blue accent color added

Fixed

Breadcrumb

  • Improved focus state visual representation

Maps

  • Improved keyboard navigation to ensure all interactive elements are accessible

Modal

  • Improved keyboard navigation to ensure all interactive elements are accessible
  • Updated example to better show expected focus behavior

Pagination

  • Improved focus state visual representation

Updated

Guidelines

  • Updated Colors section with new best practice documentation
  • Improved contribution guidelines added to our library’s contributing.md and readme files
  • Deprecated label removed from two-lined dropdown

V6.17.2 - July 8th, 2021

New

Flags

  • Ethiopia
  • Georgia
  • Kenya
  • Mozambique
  • Nigeria
  • Russia
  • Rwanda

Updated

Radio Button

  • Updated best practice documentation
  • Included an outlined focus state that is distinct and different

V6.16.1 - May 21th, 2021

Fixed

Icons

Added viewport attribute to Banking icons’ SVGs Fixed filled state for Transfer and Quick Transfer icons

Select

Solve for visual style inconsistency on Internet Explorer Adjusted focus style to pass accessibility minimum color contrast ratio

V6.16.0 - April 19th, 2021

New

Icons

Created a new Banking section in icons.

  • Overdraft Protection
  • Direct Deposit
  • Recurring Interest
  • Round the Clock
  • Security
  • Check Banking
  • Check Scan
  • Transfer
  • Savings
  • Multi-Channel
  • E-Check
  • Wire Transfer
  • Quick Transfer
  • Instant
  • Retirement
  • CD
  • High Yield

Fixed

Social Icon

  • Reduced file size of Instagram social icon by making it fully vector

V6.15.0 - March 10th, 2021

New

Icons

  • Bookmark
  • Pound No Fee

Fixed

Input success state

  • Missing success icon inside an input is fixed

V6.14.2 - January 25th, 2021

New

Digital Wallet Buttons

  • Google Pay
  • Samsung Pay

Fixed

Buttons

  • Dark background Secondary and Tertiary buttons: added missing visual states for Hover and Pressed.

Updated

Social Icon

  • Linkedin

Deprecated

App Badge

  • Windows Store

V6.14.1 - December 9th, 2020

Fixed

Modal

  • Fixed alignment that was causing Modal component on dls-react not to center on IE11

Tooltip

  • Amended padding on Tooltip button

V6.14.0 - November 2nd, 2020

New

Icon

  • Open Banking
  • Send & Split

Fixed

Multi-Step Tracking

  • Vertically aligned the labels

Tabs

  • Removed a negative margin that was affecting the intended padding between the tab menu and the content

Updated

Icon

  • Bank
  • Split

V6.13.2 - October 19th, 2020

Fixed

  • Phone Input:
    • To handle pasted inputs formatting
  • Navigation
    • Bar is now responsive to the padding of the link
  • Modal:
    • Added click-outside and Escape key to dismiss
  • Escape key on IE11:
    • Fixed functionality on the following components:
      • MultiSelect
      • CurrencyField
      • Filter
      • OverflowMenu
      • Search
      • Tooltip

V6.13.1 - October 5, 2020

Fixed

  • Pagination:
    • Aligned button’s hover style
  • Dropdowns
    • Fixed disable state behavior for Select and Multi-select
  • Tooltip:
    • Adjusted margin and icon behavior on hover

V6.13.0 - September 21st, 2020

New

  • Search:
    • Search has been rethought and rebuilt for better usability, accessibility, and keyboard navigation with two distinct variations:
      • Search Input
      • Search Input with Button
  • Flags:
    • Chile
    • Colombia
    • Ecuador
    • Peru
    • Venezuela
  • Font
    • Added Guardian in WOFF format

Fixed

  • Solved IE11 issues by adding missing shims on dls.js components
  • Ensured Icon Buttons stay properly styled in fluid scenarios

Updated

Status color orange (Moderate) has been slightly darkened for higher color contrast on white.

V6.12.0 - August 24th, 2020

New

  • Dropdown:
    • Multi-select
  • Icons:
    • Link Out glyph
    • List icon
    • Yelp social icon

Fixed

  • Carousel:
    • Fixed opacity for Single Card Carousel on desktop

Updated

  • Dropdown:
    • Renamed Standard Dropdowns to Select and updated documentation
    • Deprecated Two-Lined Dropdowns
  • Inputs:
    • Hint text has moved above input fields, below the label

V6.11.1 - August 10, 2020

Fixed

  • CSS:
    • Removed font-family property from b and strong selectors

V6.11.0 - July 27, 2020

New

  • Inputs:
    • Added a new class for Hint text

Fixed

  • Phone Input:
    • Aligned state styles on Firefox

V6.10.0 - July 13, 2020

New

  • Icons:
    • Card Contactless
    • Cards Contactless
    • Card Insert
    • Card Tap
    • Pay Over Time
    • Construction
    • Dental
    • Medical
    • Spa
  • Flags:
    • Cambodia
    • Malaysia
    • Philippines
    • Sri Lanka
    • Vietnam
  • Graphics:
    • World Service Pattern in Deep Blue with Deep Blue background 90%
  • Pattern:
    • File Upload shown in Patterns section with drag and drop well (Thanks GCS UX Team for the contribution!)
  • Phone Number Input:
    • Basic
    • Single country with flag
    • Country code dropdown

Improved

  • Icons:
    • Card
    • Cards
    • Card Benefit
    • Card Swipe
    • Lock Card
    • Tap to Pay
  • Graphics:
    • Updated World Service Patterns to SVGs

Fixed

Documentation Updates

  • Phone Number Input:
    • Deprecating input with separate dropdown for country code

V6.9.1 - July 1, 2020

New

  • Margin-4 responsive classes added

Fixed

  • BentonSans CDaaS URL updated

V6.9.0 - June 22, 2020

New

  • Flags:
    • European Union
    • Luxembourg
    • South Africa
    • Brazil
    • South Korea
    • Bangladesh
  • Icons:
    • Attach
    • Grid
    • Wifi Off
  • Inputs:
    • Success with message

Improved

  • Icons:
    • Warning icon redrawn to better visually match the Success icon height
    • Archive and Wifi have been moved to the Actions category
  • Badges:
    • Circular Badges have been renamed to Outline Badges

Fixed

  • Phone Number Input: Japan format
  • Badges: adjusted the Outline Badges text to bold
  • Multistep-Tracker: minor visual improvements

Documentation Updates

  • Graphics:
    • Deprecated the Amex Social Icon for future removal
  • Datepicker:
    • Date picker error state icon changed to red
  • Patterns:
    • New Patterns section added
    • Forms section that provides best practice guidelines on how to create forms added

V6.8.0 - January 14, 2020

New

  • Brand Assets:
    • Tagline
      • Don’t live life without it
      • Don’t do business without it
    • Ribbons
      • American Express
      • Member Since
    • The Centurion
      • Linear
      • Solid
    • World Service Globe
    • 1850
  • Typography: New label-3 style
  • Inputs: Added DLS.js inputgroup component
  • Filters: New filters component
  • DLS Mini: Smaller version of DLS Lite available that provides only global styles such as normalize, typography, element resets, and basic layout

Improved

  • Icons:
    • Devices have been modernized:
      • Desktop
      • Laptop
      • Mobile
      • Tablet
    • Social Network Icons: Updated to refreshed brand icons
  • Inputs: Updated label and error state styles; changed labels to sentence case, label-3, and gray-06

Fixed

  • Inputs:
    • Allow control and meta keys for currency, phone number, and card number inputs
    • Currency input: set min-width and handle international values on blur

Documentation Updates

  • Graphics: Added brand asset examples
  • Inputs: Updated Date Input example using DLS.js inputgroup and updated error messages copy
  • Developers: Added additional information on using DLS.render() function

V6.7.0 - December 11, 2019

New

  • New Icon:
    • Copy
  • New Colors:
    • Status colors Attention (Dark Yellow) and Moderate (Orange)

Fixed

Iconfonts: Added versioning and consistent encoding

Documentation Updates

Developers: Static assets folder structure for easy reference

V6.6.0 - November 25, 2019

New

  • New Icons:
    • No Fee
    • Partnership
    • Split
  • Highcharts: Highcharts.js now available on CDN and shared scripts

Improved

  • Icons: all icons completely refactored and refined to a smaller file size, updated styling for
    • Airplane
    • Car
    • Taxi
    • Train
    • Card (Filled)
  • Inputs: password component show/hide updated for visual accessibility
  • Data Tables: increased functionality
    • Sortable columns
    • Checkboxes
    • Expandable rows
    • Actionable rows
    • Zebra stripes starting on second row

Fixed

  • Inputs:
    • currencyfield required/optional validation
    • smsfield handling of default value
    • smartfield tabbing to enter input, clicking in IE
  • Tooltips: updated text alignment to the left

Documentation Updates

  • Data Sets have been renamed to Data Tables

V6.5.0 - October 21, 2019

New

  • New Overflow Menu component
  • New Icons:
    • Credit Score
    • Launch
  • New Flag:
    • Indonesia

Improved

  • Navigation: added functionality to close mobile nav with click outside of menu

Documentation Updates

  • Get Started - Designers: New and improved resources
    • Added Sketch Color Palette
    • Added Sketch Plugins
    • Updated Sketch UI Kit
  • Styles - Icons and Glyphs: Updated Creating Icons and Glyphs guidelines

V6.4.0 - September 25, 2019

New

  • New Glyphs:
    • Double Chevron Left
    • Double Chevron Right
  • Icons and Glyphs: SVG Icon and Glyph support using color classes (fills built in) and iconfont size classes (as long as SVG element’s width and height is set to 1em)
  • Data Visualization: Highcharts styles with dls-highcharts.css and dls-highcharts.min.css

Improved

  • Updated Icons:
    • Show
    • Hide
  • Updated Graphics:
    • App Badges for Apple Wallet, Apple App Store, Google Play, and Microsoft

Fixed

  • Removed source from .npmignore

Documentation Updates

  • Graphics: Added additional guidelines for using App Badges and deprecated Apple Wallet Badge Small
  • Data Visualization: Added Highcharts guidelines and examples

V6.3.0 - August 29, 2019

New

  • Typography: Added Guardian font style
  • New Icons:
    • Accessibility
    • Flash Off
    • Hearing Impaired
    • Link
    • Lock Card
    • Menu
  • Updated Icons:
    • Calculator
    • Camera
    • Captions On/Off
    • Cruise Ship
    • Declined
    • Filter
    • Flash
    • Freeze Card
    • Infinity
    • QR Scan
    • Sound On/Off
    • Watch
  • New Glyphs:
    • Sort Up
    • Sort Down
  • Graphics: Added new World Service and Flourish graphic patterns
  • Styles: Added .bg-repeat for pattern backgrounds and color filter classes for svgs
  • Inputs: Added Date Input component and guidelines

Improved

  • Sass: Replaced node-sass with dart-sass
  • Card Image: .card-img-tint classes darkened from 0.2 to 0.5
  • Dropdown: Increased minimum spacing between text and chevron
  • Flags: Reduced file size for Spain, Argentina, and Mexico.
  • Hero: Updated overlay gradients for smoother transition
  • Inputs: Updated alert messages to not be confined within the component and can be placed anywhere within the page
  • Navigation: Shortened secondary vertical nav and section header spacings, updated dropdown nav icon to filled

Fixed

  • Search: Updated error to console warn if missing config for search component
  • Stepper Slider: Right clicking no longer updates value

Documentation Updates

  • Added FAQ section
  • Accessibility: Added Do’s and Don’ts examples
  • Color: Removed gradients because they’re no longer recommended outside of hero component
  • Getting Started - Developers: Added training references and additional details on styles and functionality
  • Graphics: Added World Service Pattern and Flourish guidelines
  • Typography: Added Guardian guidelines
  • Layout: Moved Multi-Step Flows from Components to Layout section
  • Components: Moved all developer functionality and style references to bottom of each section
  • Breadcrumbs: Guidelines, design specs and examples were updated to reflect removal of gradient on text overflow and deprecated breadcrumb blur classes
  • Buttons: Updated guideline copy and design specs
  • Carousels: Updated guideline copy and design specs
  • Data Visualization: Updated guidelines and examples with data visualization color order
  • Hero: Added additional guidelines and examples for using text and gradients in Heroes
  • Inputs: Added Date Input component guidelines
  • Multi-Step Flows: Moved to Layout section
  • Multi-Step Tracking: Updated design specs and examples
  • Navigation: Updated guideline design specs and examples for new padding on navigation components
  • Notifications: Updated example for component level message
  • Tags: Guideline copy and design spec updates

V6.2.0 - July 19, 2019

New

  • dls-build-module: Added command for building a single file to import specified or all CSS modules from. See more details in the README.md
  • Colors: Added data visualization colors:
    • dls-teal
    • dls-salmon
    • dls-dark-yellow
    • dls-gold
    • dls-bright-blue-20
    • dls-bright-blue-40
    • dls-bright-blue-60
    • dls-deep-blue-20
    • dls-deep-blue-40
    • dls-deep-blue-60

Improved

  • Fonts: Added WOFF2 formats for card number and iconfonts and removed dead formats eot, ttf, svg

Documentation Updates

  • What’s New - Contribution: New and updated Contribution sub-sections
  • Component Contribution
  • Icon Contribution
  • Design Working Groups
  • Design Insight
  • Report a Bug
  • Collaboration
  • What’s New - Developers: Updated examples to use CDN links instead of relative paths
  • Data Visualization: New color palette for visual data
  • Hero: Fixed templates download links
  • Notifications: Updated system-level message examples
  • Enhanced search functionality

V6.1.0 - June 11, 2019

New

  • Cards: Added .card-relative class
  • Icons: Added Calculator, Filter, and Sort icons to icon library

Improved

  • Updated the color of default/active chevrons to Gray 05 in buttons, dropdowns, navigation, and phone number inputs components for consistency
  • Buttons: Added default black text for Amazon and Marriott Bonvoy cobrand buttons per brand and for accessibility
  • Carousels: Added lazy-loading functionality for carousel images that are not in the first slide shown
  • Checkboxes: Label is now body-3
  • Search: Enhanced to take in multiple search terms and type-ahead function is now optional
  • Steppers: Clicking and holding increase/decrease buttons moves the slider
  • Steppers: Disable increase/decrease buttons when hit max/min
  • Switches: Added minimum width and spacing for long labels

Fixed

  • Collapsible Panels: Fixed bug where reducing a screen size to mobile caused open panel content to cut off
  • Copy Input: Fixed timeout to reset error message
  • Date Picker: Updated due date font to body-2
  • Tabs: Fixed bug where clicking on different tabs no longer made icons disappear in IE
  • Utilities: Fixed stack-r class and added to documentation
  • Renamed CSS File “switch” to “switches” since it is a reserved term

Documentation Updates

  • Added new DLS site search functionality
  • Added details about dls.js functional requirements and options for all interactive components
  • Developers: Added CSS Modules folder structure
  • Layout: Added “do’s” and “don’ts” to Grid section
  • Cards: Added coded examples for relative cards
  • Utilities: Added shadow classes
  • Removed instances of inactive class “.strong” from the docs. Devs should use <strong> instead.
  • Badges: Updated autopay example
  • Collapsible Panels: Removed unnecessary role attributes from examples
  • Tooltips: Updated info tooltip examples by removing “close” buttons within tooltip content
  • V5 search functionality restored
  • V5 developer downloadable zip file fixed

V6.0.0 - April 11, 2019

New

The DLS has undergone a major code refactor for accessibility and cleanup for this release. dls.js has been reduced by over 65% and DLS.css has decreased by an additional 20%.

  • Visual assets such as fonts and images are now hosted in a central asset repository
  • Accent Gray 6 (#333) was brought back as the default color for typography
  • Marriot-Bonvoy and Amazon colors have been added
  • New icons:
    • Chip
    • Video player controls
    • Camera
    • Flash
    • QR scan
    • Infinity
    • Cart
    • Medal
    • Freeze card
    • Cruise ship
    • Airplane
    • FaceID
    • Watch
    • Social
  • New designs:
    • Carousels have a new hero images design
    • Hero images have a new design with the relationship device, gradient overlays, and tag lines
    • Multi-step trackers have been redesigned with a new complex multi-tracker with sub-steps
  • Visual regression and unit testing have been implemented for all components

Improved

  • Path reference to styles and scripts have changed from dist/* to dist/{version}/* for caching
  • Components were refactored for semantics and accessibility
  • Redundant classes have been removed
  • dls.js was rewritten for all components to be simplified and more dynamic
  • Legacy logos and colors have been removed
  • Many components have been redesigned and enhanced:
    • Carousel auto-play speed can now be customized
    • Collapsible panels now have icon hover/active states
    • Date picker has been redesigned with a new calendar and state variations
    • Tabs have been redesigned to exclude the extra right pane and to scroll horizontally in mobile instead of changing to a select dropdown
    • Tags have been redesigned and now also have a new smaller variation
    • Maps have been updated in line with the Amex Maps design
    • Navigation with icons and section headers now have icon hover/active states
    • Pagination has been redesigned to be on a single line with chevrons
    • Video player has been redesigned with use of closed captioning for accessibility