Page Comparison

...

In September 2022, we introduced the Telerik component library. Our development teams received Telerik licenses, and we published the first draft of our (2.1) 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 pattern 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

(3.0) Telerik & KENDO UI Kit – Internal

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

(2.1) 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 launched a new UI Kit for Figma as part of their 2024 Q2 release. The 3.0 version was updated to match the current state of the development component libraries and support the newest Figma features like variables. Please see below for a summary of the changes. 

The UX Enablement team applied our MAACE customizations to the new version and publishing this for published this library in our Figma account. Our recommendation is for new product teams onboardingto onboard to the most recent version. 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.

What’s new in Telerik & KENDO UI Kit 3.0 for Bootstrap

• Exposing Nested Instances through Properties: Enjoy greater flexibility and control in your designs. 

• Introducing Variables: Manage color, typography, border radius, and spacing more efficiently. 

• Switching Between Modes: Seamlessly toggle between light and dark swatches to suit your design needs. 

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. 

...

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 submit your request using the intake form 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. 

...

Change Request Tracking Sheet 

Telerik

...

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

...

Change Requests

To request changes to the Telerik UI kit, theme or components, or to report issues, please complete the MOLE Team Intake Form. Telerik requests or issues may be logged under the Advisory Guidance>UX Consultation/Research section.

Please include as much information as possible, including:

• Whether you are requesting a modification or reporting an issue

• A brief description of the request

• A link to the issue, if applicable

Custom Theme

An internal theme that aligns with the (3.0) 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

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

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?

...

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

How do I show in-line validation on form fields in Figma?

Resources

Introduction to Telerik for UX (PowerPoint Presentation)

Change Logs

Telerik &

...

KENDO UI Kit – Internal

...

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 

...

(3.0) Change Log

Telerik & KENDO UI Kit – Internal (2.1) Change Log