Skip to content

@lzcabrera lzcabrera released this Jan 30, 2018 · 3245 commits to master since this release

Updated 22 September 2018


Since v0.19.0 (August 2017), the TDS team set out to create a React-first component library, and organized Sketch symbols. The goal in mind was to create a Design system that featured highly-reusable components with built-in accessibility, branding, and variations to serve TELUS developers in building web properties that do not deviate from the TELUS brand, have all the features necessary to promote fast and high-quality development. Equally important, another goal to create a library of Sketch assets to promote fast design iteration. "Release 1" of the TELUS Design System is the realization of these goals.

For information on the future of TDS, you may view our roadmap.

📃 Changelog

Our versioning strategy with v1.0.0 of the React component library is to strictly follow semantic versioning. This means:

  • The major version (vX.0.0) will be incremented when breaking changes occur, such as removal of component props, global CSS, pixel pushing (i.e. changing the padding or font size of a component that affects layout), or dramatic shifts in branding. Major releases may include features or patches

  • The minor version (v0.Y.0) will be incremented when new features are added, deprecation notices are made, or documentation is changed. Minor releases may include patches

  • The patch version (v0.0.Z) will be incremented when there are fixes made to pre-existing component props, CSS, or documentation

🚨 Breaking Changes


  • All deprecated or class-based CSS classes have been removed, this includes:

    • Form elements: input, select, textarea, choice, choice__text, choice--error, field, field__control field__control--dropdown, field__control--disabled, field--success, field--error

    • Hints: hint, hint--active, field--hinted, hint--active, hint__trigger

    • Layout, size, and spacing: button-row, field-col, helper, helper--error, medium-*, large-*, xl-*

    • Grid: container, container--limited-width, container--fluid, grid-row, small-*, medium-*, large-*, xs-*, offset-*, push-*, pull-*, hidden-*

    • Lists: list, list--bulleted, list--small, list--numbered, list--alpha-lower, list--checked, list--compact, list__item, list--error

    • Icons: icon, icon-core-caret-down, icon--*, icon-core-*, icon--fw,

    • Typography: helper--success

    • Accessibility: accessible-hide

    • Utility mixins: from-breakpoint, at-breakpoint, dimple

    • Functions: rem

  • Base font size in global CSS is now 100%; this will affect your page’s layout when users have set their browsers to a base font size that isn’t the standard 16px

  • Update all instances of @import ~@telusdigital/tds/dist/scss/variables to:

    • import ~@telusdigital/tds/dist/scss/colours
      if your sass files need the colour variables

React Components

  • Deprecated React components and blocks have been removed: Checklist, Headline, Icon, Overview, TextTitleBodyButton, TitledText, Video, and Grid

  • Components that render semantic elements such as <input /> and <button> no longer have tag specific CSS. That means tag selectors such as button {} can override component styles. Be sure not to use tag selectors in your codebase

🎁 Features

🔧 Fixes

  • Ensure there’s padding in Button and ButtonLink components when the call-to-action copy expands the button width more than 180px

  • Display of caret icon on the Select component


These instructions outline what to consider when upgrading from older versions of TDS in your codebase. Our recommendation when upgrading from far-back versions is to upgrade incrementally. Incremental upgrades entail:

  1. Upgrade your copy of TDS to its next incremented version

  2. When your build passes, upgrade to the next incremented version

  3. Continue upgrading until you reach the latest version

From versions between 0.19.0 and v0.34.0

  1. In your project’s front-end directory, run yarn add @telusdigital/tds@1.0.0

  2. Replace Typography styles with their respective Typography component

    1. Replace all globally scoped heading css classes with the corresponding Heading and Display Heading components

    2. Replace text--sup class with its corresponding Text.Sup, Heading.Sup or DisplayHeading.Sup component

    3. Replace all globally-scoped text css classes with its corresponding Typography component: Text, Paragraph, Strong, Small

    4. Remove any instance of the italic class

    5. Style input fields using the Input component

  3. Replace all unordered and ordered list classes with their corresponding list component: UnorderedList or OrderedList

  4. Replace of Icon components with either DecorativeIcon or StandaloneIcon component and also ensure that any instance of the following globally scoped css classes, css function and scss variables are removed:

  5. Remove any calls to the dimple() mixin and use the DimpleDivider component instead

  6. Any use of Grid CSS or the Grid component should be replaced with the FlexGrid component

  7. Refactor CSS using the breakpoint SCSS utilities to use sass-mq library provided by @tds/core-responsive

  8. Remove any calls to the rem() sass function

  9. Polyfill the Set javascript object to ensure the ExpandCollapse component works in IE11

From versions between 0.5.0 and 0.18.1

  1. In your project’s front-end directory, run yarn add @telusdigital/tds@1.0.0

  2. Follow normal setup instructions in the Getting started guide for developers

  3. Blocks are no longer maintained in TDS. To consume blocks, see instructions in the Site builder repository

Assets 2