Skip to content

v1.0.0
Compare
Choose a tag to compare
@lzcabrera lzcabrera released this 30 Jan 15:20
· 3542 commits to master since this release
v1.0.0
85b2473
This commit was signed with the committer’s verified signature. The key has expired.
theetrain Enrico Sacchetti
GPG key ID: E73F2CC7F3F14A64
Expired
Learn about vigilant mode.

Updated 22 September 2018

Summary

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

CSS

  • 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

Migration

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/[email protected]

  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/[email protected]

  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
Loading