innovaccer / design-system

Masala Design System (MDS) is an open-source design system built at Innovaccer. Figma file : https://www.figma.com/community/file/974368355920553546/masala-design-system-web-guidelines
https://mds.innovaccer.com
MIT License
84 stars 79 forks source link

Support for react element as a label in Navigation Tab #484

Closed anmolmalik97new closed 3 years ago

anmolmalik97new commented 3 years ago

Summary

As of now, the Navigation component expects label as a string. But once we pass a react element. It works but at the same time, it throws a typescript error. As the component is expecting label to be a string.

Basic example

const navigationOptions = [ { name: 'todos', label: ( <TabLabel label="To-do's" count={todoCount} active={tab === 'todos'} /> ), link: `/test`, } ]

Motivation

To make it more generic

aditya-kumawat commented 3 years ago

This won't be allowed as per design guidelines. Support for count in Navigation will be added soon.

satyamyadav commented 3 years ago

This is resolved by #592 , so closing it.