TDS Announcement Board 📣

Welcome to the TDS Announcement Board! Check back here regularly for the latest updates on TDS!


August 2019

New TDS Core Component ✨

👉Interactive icons 👈

💡Feedback icons❗️

DSM Updates

v2.3.1

StepTracker

  • Fixed the ability to select the state of the step
  • Fixed the title from nudging between states (regular and bold text)
  • Enabled the ability to select number of steps instead of manually adjusting
  • Small and Large components are responsive width-wise
  • Small component adjusts height automatically according to the label
  • Large component must detach from symbol to adjust height automatically according to the label
  • https://tds.telus.com/components/index.html#steptracker

Terms and Conditions

v2.3.0

  • Icons are going to be built into their own component folder; Decorative Icons will be moved to the component folder along with Interactive and Feedback Icons in the near future

v2.2.3 Input and Select components

  • Recommended 16px (Box 3) spacing between form fields
  • Decreased the height from 52px to 48px to optimize vertical spacing
  • See “Forms” category for pre-built components
  • See “Forms (build your own)” category for individual form field symbols
  • https://tds.telus.com/components/index.html#forms

Colours

  • Updated Accessible Green to allow text to be more accessible on other backgrounds
  • Addition of Raven Grey to provide a lighter yet accessible grey alternative
  • Addition of Rajah Yellow colour set; currently limited to a specific icon use and Notification component
  • https://tds.telus.com/components/index.html#colours

UnorderedList and OrderedList

Shadow

  • Updated the shadow specifications to use pure black instead of grey which removed the soft, white blur when placed on darker images or backgrounds
  • Updated affected layer styles which automatically updates affected components
  • Updated Footnote to include the shadow and border, to align with code

📝 Other notes

  • This is a reminder that the Helper element is deprecated, please use Hint instead

v1.0.3

  • Colours (updated Accessible Green, added Raven Grey and Rajah Yellow colour set)
  • Shadow (updated shadow specifications on affected layer styles)

New TDS Core Features 🎁

DecorativeIcon@2.2.0

Spinner@3.1.0

Animation@2.0.0

ButtonGroup@2.1.0

  • allow ButtonGroup to be uncontrolled; allow unselected by default
  • Release notes
  • Docs

Colours@2.1.0

TDS Core Fixes

TermsAndConditions@1.0.18

TermsAndConditions@1.0.17

  • Listed content no longer throws an error when mixing nodes and strings.
  • Release notes T&C

FlexGrid@3.0.1

  • Convert pixel to rem units in FlexGrid container.
  • Release notes

Heading@2.2.5

DecorativeIcon@2.1.3

  • Cleaned up and removed ids from SVG Decorative Icons
  • Release notes

Tooltip@4.1.0

  • Generate unique id using @tds/util-helpers uniqueId
  • Release notes

Spinner@3.0.3

  • inline prop now responsively wraps the Button component
  • Release notes

Input@3.0.16

Select@3.1.6

TextArea@3.0.15

TermsAndConditions@1.0.9

Input@3.0.15

Input@3.0.12

Select@3.1.2

Colours@2.1.0

  • updated AccessibleGreen to use a slightly darker tone, providing better colour contrast to text on light grey backgrounds
  • Release notes

Card@2.0.6

TDS Community Features

Testimonial@2.0.1

TDS Community Fixes

SideNavigation@2.0.2

  • Fix button font override on site builder. The component now uses telus font from shared typography
  • Release notes

July 2019

New TDS Core Component ✨

TermsAndConditions v1

TermsAndConditions component Replace all those ExpandCollapses with a component purpose-built for the distribution of legal copy! A more subtle look and feel combined with options for numbered and non-numbered legal terms will make your page look nicer while also making the developer experience smoother.

Footnote and FootnoteLink Show legal copy to your users quickly and in an accessible manner! Footnote combined with FootnoteLink will open a modal on the bottom of the screen that shows the relevant legal copy to the link selected.

Terms and Conditions docs

New TDS Community Component ✨

Skeleton Provider

Skeleton provider is used as a container for other components, it enhances a subset of TDS core components by adding skeleton property. The skeleton property will transform the child component into a skeleton. The skeleton property can be set to an object with options to customize how the skeleton will appear.

SkeletonProvider docs

Features 🎁

StandaloneIcon 2.1.0

Additional icon sizes are available (20px, 32px) in StandaloneIcon

DecorativeIcon 2.1.0

Additional icon sizes are available (20px, 32px) in DecorativeIcon

Shared-hocs 1.1.0

An improvement to the focus trap HOC, which will affect the accessibility of modal components, including Terms and Conditions:

Select 3.1.0

Select component now has a new prop: hintPosition

Notification 1.3.0

Notification component has new props to add onDismiss and onExit callbacks

Fixes

TermsAndConditions 1.0.8

Terms and conditions component renders anchor tags as TDS Links

UnorderedList 3.0.7

UnorderedList released with icon padding adjustments

Input 3.0.9

Input uncontrolled to controlled warning fix

Tooltip 4.0.3

Added type="button" to the StandaloneIcon in Tooltip

StandaloneIcon 1.1.2

Standalone icon accessibility fix

Documentation 🎁

Check out the updated documentation for Expand Collapse

Styled Components upgrades 💅

With all 40 components refactored, TDS V3 “with styled components” has been officially released! See our release notes for full details: https://github.com/telus/tds-core/releases/tag/v3.0.0

Spinner 3.0.0

Css-reset 2.0.0

FlexGrid 3.0.0

Core-colours 2.0.0

StepTracker 4.0.0

Notification 2.0.0

Box 2.0.0

Text 2.0.0

Paragraph 2.0.0

StandloneIcon 2.0.0

DecorativeIcon 2.0.0

Tooltip 4.0.0

June 2019

Community component updates

SideNavigation 2.0.0

SideNavigation component is now converted to styled components. Release notes

Features 🎁

StandaloneIcon 1.1.1

StandaloneIcon renders a11yText in A11yContent

Button 2.1.0

Button now supports forwarding refs

ButtonLink 2.1.0

ButtonLink now supports forwarding refs

Spinner 2.2.0

Spinner has been released with new visual styles, and comprehensive accessibility documentation

A11yContent 2.1.0

A11yContent now supports rest props

Video 1.2.0

Video component has simpleMode

Styled Components upgrades 💅

ExpandCollapse 2.0.0

HairlineDivider 2.0.0

DimpleDivider 2.0.0

Card 2.0.0

TextArea 3.0.0

Select 3.0.0

InputFeedback 2.0.0

May 2019

New community component ✨

PreviewCard

The PreviewCard component creates the appearance of a page snippet, and can be used in a list format. PreviewCard docs

Community component updates

Testimonial 2.0.0

Testimonial component for displaying testimonial in a standalone, pre-styled component. Release notes

Features 🎁

Video 1.1.0

Video has been released with better support for smaller player sizes and a new crossOrigin prop.

Fixes 🔧

HairlineDivider 1.0.7

Hairline divider no longer disappears when you zoom out in Chrome Release notes

Checkbox 1.1.22

Labels now render correctly when in the error state in IE11 Release notes

Radio 1.1.20

Labels now render correctly when in the error state in IE11 Release notes

ExpandCollapse 1.2.23

Expand collapse now has a reduced size Release notes

ButtonLink 2.0.9

Label text is now centered in Mobile Safari on iOS 10 Release notes

Button 2.0.7

Label text is now centered in Mobile Safari on iOS 10 Release notes

Styled Components upgrades 💅

Input 3.0.0

Checkbox 2.0.0

Radio 2.0.0

OrderedList 3.0.0

ButtonGroup 2.0.0

April 2019

New community component ✨

Pagination

Pagination helps in content heavy pages to divide content and present in a limited and digestible manner. Pagination docs

Features 🎁

DecorativeIcon 1.2.1

More SVG Icons are now available in code. New Check, Heartbeat, HomeSecurity, PhoneHome, and PikTV icons added

UnorderedList and OrderedList were patched to support conditionally rendered children

Hover states added to Radio and Checkbox

Fixes 🔧

Unordered list 2.1.0

This release features mixed icon styles (SASS) -Release notes

Smaller package sizes for form elements

The following package sizes were vastly decreased in @tds/shared-form-field@2.2.0 @tds/core-select@2.0.14 @tds/core-input@2.1.11 @tds/core-text-area@2.0.12

Styled Components upgrades 💅

TDS is currently engaging in an initiative to upgrade all of our components to use the Styled Components CSS-in-JS framework. Check out the Tech Forum issue for more details!

Tooltip 3.0.0

Price Lockup 2.0.0

Unordered list 3.0.0

Link list 2.0.0

Display Heading 2.0.0

Heading 2.0.0

ChevronLink 2.0.0

Documentation updates

What's coming up in May ✨

  • Terms and Conditions core component
  • More core components converted to Styled Components
  • Motion documentation
  • Workshop: How to build a community component (both design and code)

March 2019

New core components ✨

Benefit Want a clear, concise and design-approved way to tell your users how great something is? Benefit is for you! Take a look over at the Benefit docs (Heading) and Benefit docs (No Heading)

Video and WebVideo TDS now offers a consistent video experience! Have a video hosted on TELUS servers? Use the Video component to take advantage of a full video player experience! Want to use a YouTube video? We have a component for that too! WebVideo will insert YouTube videos into your page along with using a TELUS branded splash screen. Take a look at the Video docs and WebVideo docs

Features 🎁

DecorativeIcon 1.1.0

DecorativeIcon has gotten a new update that has over 150+ icons!

CSSReset 1.2.0

New optional Sass mixin to help with page height. Shoutouts to Sean McCullough for the contribution!

Input 2.1.0

New hintPosition prop, now the Input can have a hint displayed below its label. Shoutouts to Ally Hui for the contribution!

Fixes 🔧

FlexGrid 2.3.7

Remove Broadcast and Subscriber deprecation warnings.

-Release notes

Colours 1.1.1

Properly export colours from commonjs. Thanks to Heather Vandervecht for bringing this issue to our attention.

Process upgrades 📈

Animation is now a published component. While not intended for use outside of TDS components, this will have the effect of decreasing TDS component build sizes. Thanks to Andrew Lam for the contribution!

Styled Components upgrades 💅

TDS is currently engaging in an initiative to upgrade all of our components to use the Styled Components CSS-in-JS framework. Check out the Tech Forum issue for more details!

A11yContent 2.0.0

Button 2.0.0

ButtonLink 2.0.0

Colours 1.1.0

Image 2.0.0

Strong 2.0.0

Small 2.0.0

WaveDivider 2.0.0

TDS sunset 🌅

TDS is planning on sunsetting old versions of the design system. The dates are as follows:

TDS Version Sunset Date
TDS v0.xx July 1 2019
TDS v1.xx September 1, 2019
TDS v2.xx February 1, 2020

TDS V3 is TDS utilizing Styled Components. Please have your projects using the relevant versions upgraded by these dates! For more information, check out the Tech Forum issue.

February 2019

Features 🎁

Input 2.0.0 now supports uncontrolled components by setting value to undefined by default

Select 2.0.0 now supports uncontrolled components by setting value to undefined by default

TextArea 2.0.0 now supports uncontrolled components by setting value to undefined by default

Fixes 🔧

FlexGrid 2.3.5 fixes a CSS specificity issue around horizonalAlign in FlexGrid.Col

Radio 1.2.3 no longer shows propType errors when you pass in a boolean value

Notification 1.2.10 now supports dismissible notifications

January 2019

Features 🎁

TDS Util Prop Types 1.2.0 has a new or propType for combining multiple Prop Types

Fixes 🔧

ExpandCollapse 1.2.4 does not reset state when a child element calls this.setState()

Thanks for the ongoing effort Ally Hui and Nicholas Mak! The conversation is continuing in #892.

December 2018

New core components ✨

Button Group

Feel like things are a bit empty when you have only a couple of radio buttons on your form? Want a bit of pizzazz in your user’s choices! Say no more! Today we’re introducing Button Group, a core component that displays radio inputs as big pretty buttons! Forms have never been so exciting. Feel the excitement over at our docs!

Breadcrumbs

Ever descend a hierarchy of pages and find that you’re lost and confused? At TELUS, we have a lot of deeply nested and complex pages. This is essential if we want to stay organized, but can be a little daunting to users who have been following links for a while. So, as a collaboration with Global Elements, we would like to introduce Breadcrumbs! This component is a consistent way of letting the user know which page they are on. It integrates right into projects already built with React Router 3 (or 4!), so minimal refactoring is required to use it! We hope you agree that it’s our most delicious component. Try a sample at our docs!

Designers, check all of this out on DSM version 2.1.3!

Features 🎁

Spinner 2.1.0 has a new inline prop to wrap Buttons and other inline elements more easily!

Thanks for being part of the conversation Ally Hui and Jeffrey Chang!

Flex Grid 2.3.0 - New horizontalAlign added to col, allowing for horizontal alignment on a per-column basis. Thanks for being part of the conversation Nika Karliuchenko!

Radio 1.2.0 - Add optional descriptions to Radio (Reported by, and design contributed by Cherry Hung. Thank you!)

Step Tracker 3.0.0 - Make Step Tracker full width and make default background colour grey. Thanks for submitting this GitHub issue, Cherry Hung!

Fixes 🔧

  • Input 1.0.12 now conditionally renders icons. Thanks for reporting, Bo Xing!
  • Tooltip 2.0.4 can only have one open at a time. Thanks for reporting, Vishakha Sethi!
  • Price Lockup 1.0.4 resolves an issue with line-height overrides applying improperly. Thanks for reporting, Erich Welz!
  • Flex Grid 2.3.0 - Fix FlexGrid.Row from being improperly sized on IE 11
  • Price Lockup 1.0.3 - Alignment has been fixed in some areas. Reported by: Tarek, Developed by: Nik Mak.
  • Hairline Divider 1.0.1 - Vertical hairline divider now displays regardless of parent height.

Pagination Pagination helps in content heavy pages to divide content and present in a limited and digestible manner. Pagination docs

Features 🎁

DecorativeIcon 1.1.0

DecorativeIcon has gotten a new update that has over 150+ icons!

DecorativeIcon 1.1.0

DecorativeIcon has gotten a new update that has over 150+ icons!

Fixes 🔧

Unordered list 2.1.0

This release features mixed icon styles (SASS) -Release notes

Styled Components upgrades 💅

TDS is currently engaging in an initiative to upgrade all of our components to use the Styled Components CSS-in-JS framework. Check out the Tech Forum issue for more details!

Tooltip 3.0.0

Price Lockup 2.0.0

Unordered list 3.0.0

results matching ""

    No results matching ""