SDS updates
ds-menu changes
To assist users, a common ux pattern is to display a small external link icon on any button or link that will open a new browser window.
SDS will now automatically add this icon to ds-menu menu items on any button that has the html5 formtarget attribute or any link that has the html target attribute.
<div class="ds-menu">
<div class="ds-text --label">Account</div>
<ul>
<li>
<button class="ds-text --icon-support" formtarget="_blank">Account support</button>
</li>
<li>
<a href="#" target="blank">Payment information</a>
</li>
</ul>
</div>ds-progress-steps updates
ds-progress-steps is a component to show the user their progress through a set number of steps, for example during a shop checkout process, or account signup. In this update ds-progress-steps now has a docs page, and has been completely refactored to reduce complexity and improve mobile support.
Simplified structure
In the latest SDS, most the additional class names are no longer required, and there is no requirement to add a class name to indicate the total number of available steps.
<ul class="ds-progress-steps ds-progress-steps__5-step ds-progress-steps__5-step--2">
<li class="ds-progress-steps__step"> Choose account type/region </li>
<li class="ds-progress-steps__step"> Create account </li>
<li class="ds-progress-steps__step"> Verify your email </li>
<li class="ds-progress-steps__step"> Enter contact details </li>
<li class="ds-progress-steps__step"> Account submission complete </li>
</ul><ul class="ds-progress-steps --2">
<li> Choose account type/region </li>
<li> Create account </li>
<li> Verify your email </li>
<li> Enter contact details </li>
<li> Account submission complete </li>
</ul>Improved mobile support
The component now correctly scales across a wider range of screen widths – right down to the minimum device width of 320px.
ds-header updates
ds-header received numerous tweaks and fixes in preparation for an upcoming user-console release.
In addition to some styling changes, support was added for animating the menu button label when the header is loaded.
Deleting or removing content
Documentation was added to the UX Pattern section of the SDS docs on Deleting or removing content.