TC Design

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 50 Next »

Background

In September 2022, we introduced the Telerik component library. Our development teams received Telerik licenses, and we published the first draft of our Telerik & KENDO UI Kit – Internal Figma library for our UX designers to use. This space includes documentation for UX designers and product teams on the use of the Figma UI kit, theme customization and design system guidelines.

Goals

  • More efficient UI design process – More time to focus on discovery, research and validation

  • More efficient development process – Eliminating the need to reinvent the wheel

  • Closer alignment between design and implementation

  • First step in helping our product teams meet our standards for responsive design and accessibility – Any user, any device, anywhere

  • Consistency across MAACE products

Figma UI Kits

Available Figma Libraries

Telerik & KENDO UI Kit – Internal

Built off the Telerik & KENDO UI Kit for Bootstrap (2.1)

How to Use 

  1. Open your Figma file 

  2. Open the Libraries dialog by selecting the Team Library button in the Assets panel 

  3. Toggle on the desired library 

As long as the components and styles do not get detached from the library in individual project files, they should automatically receive any updates that are published. 

Figma UI Kit Version Strategy 

Telerik regularly provides updates to their UI kits in the Figma community. As these UI kits will need to be customized for our use, we will need to manage how we incorporate Telerik’s changes.  

Some recent versions have included breaking changes. For example, the kit was refactored in May when Figma released new updates for auto-layout and variants. When this happens, teams already using our customized version of the library may stay on the version they are using. The MOLE team’s UX designers will be responsible for applying our customizations to the new version and publishing this for new product teams onboarding. Existing teams can switch to the new library once they complete a milestone of their project. The aim is to have the fewest number of disruptions as possible and reduce the need to rework existing design files.

Custom Components 

One of the goals of these UI components is to allow us as UX designers to work more efficiently with our development teams. In order to work this way, we should try to limit the number of custom components we need to build and maintain. 

If you are designing a new interface, wireframe and ideate as normal. When you move to high fidelity design, or discussing implementation with your development team, a good first step is to look at what component options are available from the library. If your team does encounter an issue where the component you need is not available, please explore whether the same result can be achieved with what is provided. 

However, these libraries are intended to be a helpful tool, not a roadblock. If your team cannot achieve the same result with an existing component, add it to the tracking sheet linked below. We will review these component requests together and prioritize them in our backlog. Ensure to flag any urgent requests as a high priority. 

Custom Component Workflow 

Custom component workflow between product team and MOLE team
 Figure 1 - Text version

Product Team 

  1. Identify the need for a new component 

  2. Document the change request in the tracking sheet 

  3. Mark the request priority and note if it is a current blocker for their team 

MOLE Team 

  1. Review the request 

  2. Assess if more details are required 

  3. If so, raise the topic for discussion with the product team or in a MAACE Design meeting 

  4. Capture the requirements and design concept 

  5. Add the change request to the prioritized backlog 

... 

  1. Schedule the backlog item for implementation 

  2. Implement the new component 

  3. Add the new component to the Figma library 

  4. Provide the component for use 

    1. Make Telerik component available for development use 

    2. Publish Figma library 

    3. Update documentation (as needed) 

Change Request Tracking Sheet 

Telerik & KENDO UI Tracking Sheet

There are five sheets within the file:

Change Requests: Requests for new components in the Figma UI kit or modifications to existing components or styles. 

UI Kit Issues: Log of any issues you find while working with the UI kit. 

Dev Component Issues: Log of any issues your team finds while working with the implementation. These will form our development backlog that we can either address within the MOLE team or with Telerik. 

Accessibility Issues: Log of any accessibility issues your team finds while implementing the Telerik components.

Questions or Feedback: General questions or feedback to be discussed. 

Please fill in the columns with headings that are marked with a blue background and an asterisk. All column headings have tooltips if you would like more information on what to fill in. For the “Reference Link” column, please include either a link to your Figma file where the issue can be found or upload a screenshot in the folder linked in the column header. 

Custom Theme

Most recently updated July 13, 2023 using theme version R1 2023 - 6.0.3.

An internal theme that aligns with the Telerik & KENDO UI Kit - Internal is available from the UX Design Repository. The MOLE team is responsible for keeping the Figma UI Kit styles and component themes in alignment.

Known Issues

Older versions of components may not be compatible with the latest version of the theme.

Teams have reported issues when their project uses the latest version of the theme with an older version of components. Telerik does not support this scenario because the component may have some rendering changes like a changed class name or removed/added HTML element which will affect the styles. This can be resolved by updating to the latest version of the Telerik components. 

When updating to a new version of the theme, you will need to do a manual migration. Updating your current project to the latest version will re-apply your styles to the new version. Since there may be rendering changes between the versions, you will need to handle these changes in the updated project. 

Roadmap

Phase 1

Phase 2

Phase 3

Backlog

Establish internal UI kit base and first draft of processes

Incorporate design system guidelines

Establish external UI kit base

Establish a base Figma UI kit for internal MAACE products 

Begin documenting design system guidance and patterns for use 

Establish a base Figma UI kit for external MAACE products 

Build catalog of page templates for Workload Management 

Establish a method for product teams to track change requests and issues 

Customize external theme 

Create onboarding documentation

Clean up and split kit for easier use and maintenance 

Test UI components in project files and solve immediate and blocking issues 

Develop a strategy for managing our custom themes between UX and development 

Customize internal theme 

Ongoing

Review, discuss and prioritize change requests made by product teams 

(When change requests are prioritized) Design Figma components, build with MOLE development team and publish

Iterate on process improvements based on feedback from product teams

Frequently Asked Questions (FAQs)

How do I add content into a component without having to detach it?

Why are some components in the UI kit not available in my design files?

How do I add more rows or columns to a table?

Are Telerik UI components WCAG AA compliant for colour contrast?

How do I use icons from the Telerik UI Kit?

How do I ensure that my status feedback messages are accessible?

Resources

Introduction to Telerik for UX (PowerPoint Presentation)

Change Logs

Telerik & Kendo UI Kit – Internal Change Log

June 27, 2023 

Minor changes

  • Updated DropDownList component to allow for nesting the Dot Badge component

May 30, 2023 

Minor changes

  • Updated Small Solid Multiselect component Placeholder variant to have correct height

  • Updated Small Outline Multiselect component Placeholder variant to have correct height

  • Updated Small Flat Multiselect component Placeholder variant to have correct height

March 9, 2023 

Minor changes

  • Updated text for Label component to bold

  • Added variants to Button component for Danger in all sizes and states

  • Added new colour style $danger-button-bg

  • Added new colour style $danger-button-border

  • Added new colour style $danger-button-hovered-bg

  • Added new colour style $danger-button-hover-border

  • Added new colour style $danger-button-active-bg

  • Added new colour style $danger-button-active-border

  • Added new effect style Button/Danger/Focused

February 22, 2023 

Minor changes

  • Updated fill colour of DropDownList component Medium Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants

  • Updated fill colour of DropDownList component Small Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants

  • Updated fill colour of DropDownList component Large Outline, Normal, Focused, Invalid, Invalid focused and Disabled variants

  • Updated fill colour, text colour and stroke colour of DropDownList component Small, Medium and Large Outline Hover variants

February 7, 2023 

Minor changes

  • Resolved layout issues with Selected Cell and Alternate Cell variants of the Grid component

February 6, 2023

New components

  • Added Chip component as it is now supported in Blazor with recent Telerik release

  • Added ChipList component as it is now supported in Blazor with recent Telerik release

  • Added Avatar component as it is now supported in Blazor with recent Telerik release

February 6, 2023 

Minor changes

  • Properly linked styles for fill and stroke of TabStrip component

February 3, 2023 

Minor changes

  • Fixed responsive layout of Notification component

  • Added missing stroke on Upload Drop Zone component

January 31, 2023 

Minor changes

  • Restructured Calendar / Month View component

January 30, 2023 

Minor changes

  • Restructured Grid - Basic Features component

  • Resolved layout issues with Pager component

January 27, 2023 

Minor changes

  • Resolved layout issues with Row component

  • Resolved layout issues with Grid - Basic Features component

  • Updated $secondary-button-bg color style

  • Updated $secondary-button-border color style

January 25, 2023 

Minor changes

  • Updated Header Cell component to use auto layout

  • Updated Sorted Header Cell component to use auto layout

  • Updated Filterable Header Cell component to use auto layout

  • Updated Filterable Sorted Header Cell component to use auto layout

  • Updated First Cell component to use auto layout

  • Updated Edit Cell component to use auto layout

  • Updated Command Cell component to use auto layout

  • Updated Selected Cell component to use auto layout

  • Updated Group Cell component to use auto layout

  • Updated Alternate Cell component to use auto layout

  • Removed overlay from Sorted Header Cell and Filterable Sorted Header Cell components to resolve auto layout issues

January 24, 2023 

Minor changes

  • Fixed grouping of Base Text styles

  • Fixed broken text styles in TabStrip component

  • Fixed broken text styles in Upload component

  • Grouped component-specific text styles in the styles panel

January 20, 2023 

Minor changes

  • Updated Header 1 text size and style

  • Updated Header 2 text size and style

  • Updated Header 3 text size and style

  • Updated Header 4 text size and style

  • Updated Header 5 text size and style

  • Updated Header 6 text size and style

  • Updated Grid Cell component to use auto layout

November 23, 2022 

Minor changes

  • Updated icon colour of all Small Outline/Secondary variants of the Button component to $component-text-white

November 9, 2022 

Minor changes

  • Updated text colour of all Badge components of fill mode outline to $base-text

  • Updated arrow-double-60-down component name to caret-double-alt-down to match icon name

  • Updated arrow-double-60-up component name to caret-double-alt-up to match icon name

  • Updated arrow-double-60-left component name to caret-double-alt-left to match icon name

  • Updated arrow-double-60-right component name to caret-double-alt-right to match icon name

  • Updated paste-as-html component name to clipboard-code to match icon name

  • Updated paste-from-word-strip-file component name to clipboard-word-alt to match icon name

  • Updated paste-from-word component name to clipboard-word to match icon name

  • Updated paste-html component name to clipboard-html to match icon name

  • Updated paste-markdown component name to clipboard-markdown to match icon name

  • Updated paste-plain-text component name to clipboard-text to match icon name

  • Updated paste component name to clipboard to match icon name

November 8, 2022 

Minor changes

  • Updated DateInput component validation icon to use $error colour

November 7, 2022 

Minor changes

  • Renamed TabStrip component from generic name so it is more easily discoverable

  • Updated Notification component closeable notification variants to use semantic colours for close icon

  • Updated Badge component colour info and warning variants to use $base-text for text colour

  • Updated Form component validation summary variant to use $notification-error-text for form message box error

November 4, 2022 

New components

  • Added File Manager component as it was discovered to be supported in Blazor

  • Added Filter component as it was discovered to be supported in Blazor

  • Added Menu component as it was discovered to be supported in Blazor

November 2, 2022 

Breaking changes

  • Removed Chip component from the published library

  • Removed ChipList component from the published library

  • Removed DropDownButton component from the published library

  • Removed SplitButton component from the published library

  • Removed FloatingActionButton component from the published library

  • Removed CheckBoxGroup component from the published library

  • Removed Rating component from the published library

  • Removed MultiViewCalendar component from the published library

  • Removed MultiSelectTree component from the published library

  • Removed DropDownTree component from the published library

  • Removed MultiColumnComboBox component from the published library

  • Removed Captcha component from the published library

  • Removed Menu component from the published library

  • Removed Avatar component from the published library

  • Removed AppBar component from the published library

  • Removed BottomNavigation component from the published library

  • Removed Popover component from the published library

  • Removed ActionSheet component from the published library

  • Removed ExpansionPanel component from the published library

  • Removed Filter component from the published library

  • Removed Badge component from the published library

  • Removed Skeleton component from the published library

  • Removed PivotGrid component from the published library

  • Removed PDF Viewer component from the published library

  • Removed ListBox component from the published library

  • Removed Chat, Conversational UI component from the published library

  • Removed Spreadsheet component from the published library

  • Removed File Manager component from the published library

  • Removed MediaPlayer component from the published library

  • Removed Timeline component from the published library

  • Removed ImageEditor component from the published library

  • Removed TaskBoard component from the published library

  • Removed Map component from the published library

  • Removed Diagram component from the published library

  • Removed OrgChart component from the published library

October 7, 2022 

Breaking changes 

  • Fixed auto layout in Default, Top and Bottom variants of Tab Strip component

October 3, 2022 

Minor changes 

  • Fixed auto layout in Expanded variant of Expansion Panel component

  • Fixed generated Primary Button hover and active state colours from Theme Builder

September 29, 2022 

Minor changes 

  • Removed data visualization components from the published library

September 16, 2022

Minor changes 

  • Updated $primary color style to Workload Management blue #1B50B1 

  • Updated $primarycolor-8% color style 

  • Updated $primarycolor-12% color style 

  • Updated $primarycolor-16% color style 

  • Updated $primarycolor-20% color style 

  • Updated $primarycolor-25% color style 

  • Updated $primarycolor-50% color style 

  • Updated $primary-button-bg color style 

  • Updated $primary-button-hovered-bg color style 

  • Updated $primary-button-active-bg color style 

  • Updated $primary-button-border color style 

  • Updated $primary-button-hover-border color style 

  • Updated $primary-button-active-border color style 

  • Added new file cover image 

  • Added new MAACE Design Change Log page 

  • No labels

TC Design