SDS updates
A lot has been updated since the last “what’s new” post, so this update just includes recent changes.
Sizing classes
Utility classes for setting the width and height of general elements have been formalized and documented.
View the SDS sizing classes documentation.
<!-- Narrow content (500px) -->
<div class="ds-rows highlight --50-w --20-h">
<p>Content</p>
</div>
<!-- Wide content (500px) -->
<div class="ds-rows highlight --50-w --20-h">
<p>Content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis vitae massa sit amet volutpat. Mauris iaculis volutpat ex, sed gravida justo condimentum et.</p>
</div>Web Components support
Web Components are a set of web platform APIs based on existing web standards for creating custom html elements and ‘widgets’.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
SDS v2.24.0 introduces support for using component specific SDS styles, which can be imported directly into a ‘closed’ web component.
View the SDS Web Component documentation.
<link rel="stylesheet" href="https://assets.soracom.io/css/sds/beta/combined.css" />
<script>
const dsNoticeTemplate = document.createElement('template');
dsNoticeTemplate.innerHTML = `
<!--
Import the base (minimal global sds css), and component specific (notice) css.
Note:
This is only required for the outer 'notice component'
HTML content INSIDE this component still uses the combined css loaded
at the root of the page. Because... reasons.
-->
<link rel="stylesheet" href="https://assets.soracom.io/css/sds/beta/base.css"/>
<link rel="stylesheet" href="https://assets.soracom.io/css/sds/beta/notice.css"/>
<div class="ds-notice">
<slot></slot>
</div>`;
class DsNotice extends HTMLElement {
constructor() {
super();
}
// List of attributes to use
static get observedAttributes() {
return ['state', 'loading'];
}
// Check for any attribute changes
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[property] = newValue;
}
// Connect the component and insert
connectedCallback() {
// Add the template to the shadowRoot
const shadowRoot = this.attachShadow({ mode: 'closed' });
shadowRoot.appendChild(dsNoticeTemplate.content.cloneNode(true));
// Process attributes
// Visual states
if (this.state) {
shadowRoot.querySelector('div').classList.add('--' + this.state);
}
// Loading state
if (typeof this.loading != 'undefined') {
shadowRoot.querySelector('div').classList.add('--loading' + this.loading);
}
}
}
// Register this component
customElements.define('ds-notice', DsNotice);
</script>
<ds-notice state="info">This is a plain text content inside a closed web component</ds-notice>
<ds-notice state="warning">
<p class="ds-text --label">This is html content inside a closed web component</p>
<p class="ds-text --small">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</ds-notice>Reorganised file structure
To better accomodate web components, the SDS common files (reset, fonts, colors, globals etc) have been reorganised and refactored.
This change includes updates to SCSS mixin names, SCSS variable names and the migratation from using @extends to @mixin/@include.
If you are using or including specific SDS SCSS features in your project, updated will be required to your local code to ensure it works with the latest SDS.
If the project simply imports the compiled CSS directly from assets or npm, or if the project imports combined.scss, no changes are required.
/* //////////////////////////// SDS SCSS Globals //////////////////////////// */
@import "_common/scss_globals";
@import "_common/scss_animations";
@import "_common/scss_colors";
@import "_common/scss_fonts";
@import "_common/scss_images";
@import "_common/scss_media-queries";
/* ///////////////////////////// SDS Global CSS ///////////////////////////// */
@import "_common/css_fonts";
@import "_common/css_animations";
@import "_common/css_globals";
@import "_common/css_images";
@import "_common/css_vars";
@import "_common/css_reset";Required fields
Documentation has been added for implementing required form fields.
<p class="ds-text --small">Fields marked with an asterisk (<abbr class="--required" title="required">*</abbr>) are required.</p>
<div class="ds-field">
<label for="required-1" class="ds-text --label">Label content <abbr class="--required" title="required">*</abbr></label>
<div class="ds-input">
<input id="required-1" type="text" required aria-required="true"/>
</div>
</div>Bug fixes
Recent component bug fixes, including:
- ds-datatable — row striping color fixes (@makoto++)
- ds-datatable –pin-first — background color fixes (@makoto++)
- ds-tabs — content overlaying display error with 10 or more tabs (@makoto++)
- ds-tabs — content scrolling issues (@makoto++)
- ds-disclosure — visual state colors not working (@makoto++)
- ds-dialog — numerous display issues
- ds-notice — setting icon on notice was incorrectly modifying sub-components