[0.27.0] Remove link CSS

🚨 Breaking Changes

Remove link CSS classes that were deprecated in v0.22.0.

[0.26.0]: new card variants, interactive icon

🚨 Breaking Changes

Card component

• className and style props have been removed
• The Card component has a new internal padding applied, which may affect your layouts

🎁 Features

Components

• StandaloneIcon can be made into an interactive element by giving it an onClick handler. The presence of this prop will render a fully accessible button.
• Card component has two new variants: grey and lavender

🔧 Fixes

• Button component is now 100% of its parent's width on mobile viewports

[0.25.0] Remove deprecated button styles, Button prop and variant

🚨 Breaking Changes

CSS

• Removed buttons.scss and all its globally scoped CSS, use the Button component instead
• If you were using the button--plain class to reset button styles, that class has NOT been replaced with a component. We suggest you create your own component for that if you need it. Here is the CSS that we have removed:

.button--plain {
  margin: 0;		
  padding: 0;		
  border: 0;		
  background-image: none;		
  background-color: transparent;		
  box-shadow: none;		
  text-align: center;
}

Button Component

• Removed the outlined variant, use the inverted variant instead
• Removed the invert boolean prop, use the inverted variant instead

🔧 Fixes

• Code snippets display is now mobile friendly on the documentation site.

[0.24.0] Dividers, Icon enhancements, and Input enhancements

🚨 Breaking Changes

None

👻 Deprecations

All deprecations will be removed in a later release. Migrating your codebase to the new components as you upgrade will help you avoid breaking changes later.

Expect deprecated features to be completely removed from TDS five minor versions after they are deprecated. Therefore, deprecations declared in v0.20.0, will be removed in the next release, v0.25.0. You have been warned.

New deprecations with this release:

• The Icon component.
• All icon classes and Sass variables/mixins. .icon, .icon--primary, .icon--secondary, .icon--error, .icon--disabled, .icon--fw, .icon--large, .icon-core-*, core-icon(), $core-icon-codepoints. Use the new icon components for all iconography.
• The dimple() Sass mixin.
• All creations of the "wave" should be considered deprecated in favor of the WaveDivider component. Use the component instead of custom CSS or an image.

🎁 Features

• Input:
  • The tooltip is a revealable bubble containing extra information that only some users need.
  • The hint is clarifying information that sits directly to the right of the main label. It provides a hint to how they should input data into the form field.
• New icon components: DecorativeIcon and StandaloneIcon
  • The DecorativeIcon should only be used for purely aesthetic icons.
  • The StandaloneIcon should be used for meaningful icons that have a semantic purpose within the page. Often these may be used as interactive elements.
• Divider components: WaveDivider, DimpleDivider, and HairlineDivider.

🔧 Fixes

None

Full details in the changelog.

[v0.23.0] Input and List components

🚨 Breaking Changes

None

👻 Deprecations

• The HTML <input> element.
• The HTML <ul> and <ol> elements. And the list classes: list, list--alpha, list--alpha-lower, list--bulleted, list--checked, list--compact, list--numbered, list--error, list--small, and list__item.

🎁 Features

• Input: an interactive textual input form control. The Input component completely replaces the use of the raw HTML input element and includes error messaging, feedback styling, hover and focus states, accessibility properties, and field helper messaging.
  • The "hint" tooltip is not currently available with the new component, but will be added soon.
• UnorderedList: a branded <ul> component
• OrderedList: a branded <ol> component

🔧 Fixes

None

Full details in the changelog.

[v0.22.0] Typography Components

🚨 Breaking Changes

• None

👻 Deprecations

• display-heading-1, .heading-1, heading-2, heading-3, heading-4 CSS classes are all deprecated. Use the Heading and Display Heading components instead.
• text--large, text--medium, text--small, strong, small, text CSS classes are all deprecated. Use the Text, Paragraph, Strong and Small components instead.
• text--sup, text--sub CSS classes are all deprecated. Use the Text.Sup, Heading.Sup and DisplayHeading.Sup sub-components instead.
• italic is also deprecated.

🎁 Features

This release includes a series of Typography components to replace all CSS classes for typography. The base font settings have not been changed. Helvetica Neue is still in use.

• Paragraph, Text, Strong, and Small components. It also includes Text.Sup sub-component to apply superscript styles to text.
• Heading and DisplayHeading components. They also include a superscript sub-component each: Heading.Sup and DisplayHeading.Sup.

🔧 Fixes

• ButtonLink: the invert prop was unnecessarily given a default, which produces a warning. It is now fully removed.
• ButtonLink: line height is now congruent with Button component

Details in the changelog.

v0.21.1

🔧 Fixes

• ChevronLink and ButtonLink were left out of the v0.21.0 release. This has been corrected and can be imported via import { ChevronLink, ButtonLink } from '@telusdigital/tds'.

More detailed notes can be found in the changelog.

[v0.21.0] Links and Notification

🚨 Breaking Changes

• None

👻 Deprecations

• link, link--descent, link--primary, link--secondary, link--inverted, chevron-link--primary, chevron-link--secondary, chevron-link, chevron-link--inverted, a.button, a.button--primary, a.button--secondary, a.button--inverted, a.button--outlined CSS classes are all deprecated. Use the Link, ChevronLink or ButtonLink component instead.
• Buttons and ButtonLink only support 3 style variants: primary, secondary, and inverted. The other button styles are not supported by the brand and should not be used going forward.
• Primary and secondary underlined text links are not supported by the new Link component. These link styles are not supported by the brand and should not be used going forward.

🎁 Features

• New Link component available that replaces former link styles used for HTML anchors and React Routers Link components. It's a 3-in-1 pack!
  • Anchor links
  • Chevron links
  • Button links
• Notification component has been refreshed. It now properly aligns its content with the grid. Notifications should always be used as full-width components. Do not nest them inside grid columns.

Details in the changelog.

[v0.20.0] Button

Notable Changes

🚨 Breaking Changes

• None.

👻 Deprecations

• button, button--primary, button--secondary, button--inverted, button--outlined CSS classes are all deprecated. Use the Button component instead.
• Outlined Primary button, Inverted Primary button, and Inverted Outlined Primary button are not supported by the new Button component. These button styles are not supported by the brand and should not be used going forward.

🎁 Features

• New Button component is available that should replace current usages of button styles used for HTML buttons.

More detailed notes can be found in the Changelog.

v0.19.1

This releases marks an important departure from previous versions. TDS is putting the React components at the forefront of the library, and will be creating many more foundational React components moving forward.

You may need to make some configuration changes in order to use this and subsequent versions.

Migrating from <= v0.18.1

If you are based on the isomorphic-core-starter kit, we have integrating these changes into that. The easiest way to upgrade is to fetch changes from the upstream repo. Otherwise, follow these manual steps.

1. Install the new package and remove the old ones.

yarn remove telus-thorium-core telus-thorium-enriched
yarn add @telusdigital/tds

2. Remove any <link/>s to Thorium styles in the <head> of your app.

// ui/src/server.js

// Remove this entry from `additionalHeadResources`
{
  type: 'css',
  link: 'https://cdn.telus.digital/thorium/core/v0-latest/tds.min.css'
}

3. Configure CSS loader to load the compiled TDS styles through webpack in dev and prod.

// webpack.dev.babel.js

module: {
  rules: [
    // ... other rules
    // Add this to the module.rules array
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }
  ]
}

// webpack.prod.babel.js

module: {
  rules: [
    // ... other rules
    // Add this to the module.rules array
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    }
  ]
}

4. Import the TDS styles at the top of your App entry point.

// ui/src/components/App/index.jsx

import React from 'react';
// other imports...

import '@telusdigital/tds/dist/tds.css'; // <-- Add this!

const App = () => { ... };

5. Style imports are being ignored during server side rendering. Add ".css" to the node plugins configuration in your .babelrc so that the tds.css file will also be ignored.

// ui/.babelrc

"babel-plugin-transform-require-ignore",
{
  "extensions": [".scss", ".css"]
}

6. Replace the "telus-thorium-enriched" entry in "ui/webpack.config.babel.js" with "@telusdigital/tds".
7. Because there is a new package name, you will need to change your imports for TDS components.

// Instead of...
import { Spinner } from 'telus-thorium-enriched';

// Do this.
import { Spinner } from '@telusdigital/tds';

8. We have also changed the location of Sass variables and mixins that you may be importing into your Sass files.

// Instead of...
@import '~telus-thorium-core/scss/settings/variables';
@import '~telus-thorium-core/scss/utility/helpers;
@import '~telus-thorium-core/scss/utility/mixins;

// Do this.
@import '~@telusdigital/tds/dist/scss/variables';
@import '~@telusdigital/tds/dist/scss/helpers';
@import '~@telusdigital/tds/dist/scss/mixins';

TDS Internal Changes

This release also introduces some awesome changes to the internal infrastructure of TDS, which allows us to produce a more optimized package and create more usable documentation:

• Use react-styleguidist to document components and generate our documentation site.
• Use rollup as a module bundler to create a single, optimized, ES6 modules distributable for TDS.
• Set the "module" field in our package.json so that module bundlers in consuming applications can optimize further.
• TDS will only be distributed as an npm package in order to use existing JavaScript infrastructure and more easily integrate with consuming React applications.

Notable Changes

🚨 Breaking Changes

• Foundational overhaul (see above)

🎁 Features

• remove outline prop for button

🔧 Fixes

• Buttons now have the correct TELUS-Web font.
• Form elements have a box-shadow to represent :focus state

More detailed notes can be found in the changelog.