Documentation on how tokens work and how they are translated into code

Documentation - Tokens for designers and Developers

To avoid misalignments with borders and radiuses instead of adding a focus state within Figma as a style effect.

It gives the designers a bit more freedom and avoids mistakes when using different radiuses, as the style adapts itself to the component it's added to.

If needed I can show the how-to for the creation of the style.

Focus state as figma effect style

We need Nova to offer their components to be responsive and render correctly on mobile devices.

Mobile-friendly components

Using Nova 3 in Blazor, it would be handy to be able to pass more complex data types. At the moment, most of the props are string. 

Complex C# databinding

When using the Nova Tycho Tabs, I assume that the grey border of the Item should disappear when this item gets active. If this is a design decision, please let me know. 

Bug or Design Decision in Tabs section

We only have a description underneath the field but in some cases it's interesting to also add a description inside as fixed copy to support the necessary input to fill in.

Additional input field feature

The success color used in the alert component differs from the green hues available in the badge component.

When both have to convey the same idea (validation, success), it would be nice to have consistent option.

Success state colors

Inputs fields in Tycho are a bit less visually balanced than the previous version (missing a bit of padding on the sides taking into account that the typeface is not vertically trimmed by default).

Also, it might be nice to have a sizing options for inner content, when in need for something more subtle.

Input fields visual balance

Nova 3.0 used to provide an inline option. If I agree that it is semantically closer to a link, this option is not available anymore in Tycho and the low emphasis is not fully answering the need as it's accompanied with some padding and a hover effect that looks out of place in such use cases).

Link component

I want to select the <Menu Item> state to default with the Submenu unselected but if this is done the component changes back to the disabled state with submenu selected. 

As soon as I say submenu off with default state the component changes back to disabled state with submenu selected.

https://www.figma.com/design/3aG9ZI9nN7ecaplOPyOO55/%F0%9F%91%BE-Web---Nova-Tycho?m=auto&node-id=8311-17593&t=fpBcANvdsZnYw2oq-1

Error on the <Menu Item> Figma component

When value is changed from outside, there is no way to update the value.

DatePicker has no binding property

For text content framed in buttons, badges,...the vertical spacing looks a bit off. It's even more visible when associated with an icon (example attached).

The solution would be to trim the text to its baseline height but that can only be done in the master component without detaching.

Vertical spacing for framed text content

When using smaller sizes (SM here), border radiuses seems to be of lower value, creating a slight visual discrepancy when used next to input fields. Not sure if that's a bug or a request, but could it be adapted for the sake of consistency?

Buttons / Input fields border radius discrepancy

Currently, the date picker only allows for day(s) selection. I encountered multiple situation where I only needed to provide a month selection, so that'd be very useful to have such a variant.

Month picker

We used to have an info icon triggering a tooltip in input fields and I don't see it in the existing Tycho components. 

It was quite helpful to help users understand the expectation and provide context, especially for technical inputs.

Info tooltip icon for input fields

As in the title, the Datagrid row seem to be duplicated the components status page

https://nova.eliagroup.io/latest/components-and-patterns/components/component-status-9NmqsGPR

Datagrid is listed twice on the components status page

When working on a design, we need to adapt a component. 

The assigned colour tokens don't connect with the available colour tokens for us designers. 

Let's say we use the datagrid | cell body component. 

The colours assigned to the main and subtitle text are "components/datagrid/..."

If we need to adapt or create something in the same range, these colour tokens aren't available. So we have to search for the closest colour range available from the public library. 

So, for the subtitle, this would probably be "color/content/low" instead of "components/datagrid/..."

From a development perspective, I think this could become very annoying to see multiple colour tokens being used for the same component.

color tokens

The Blazor dropdown component has a weird extra margin on the popover, could you please fix that ?

Looking at the dropdown documentation, there is no left padding on the dropdown popover.

React and Webcomponent storybooks have the dropdown popover with no margin, but on Blazor one there is a popover.

Could you please fix that as this is messing up our design ?

https://nova-storybook.eliagroup.io/blazor/wwwroot/?path=/docs/components-nvfielddropdown--docs

Blazor NvFieldDropdown has an unnecessary extra margin on the left

The tooltip component doesn't have any swap property connected to its content layer to actually replace the content.

Tooltip component slot

It's just an idea, but isn't it easier to order the variables of a component in the order of what you see first? 

With the field component, the placeholder variable is above the label, while you first edit the label and then the placeholder, so it would be easier to first have the label variable and then the placeholder variable? 

order variables field component

Nav bullets content is currently using the information feedback color, no matter the intentional color selected.

Nav bullet wrong font color

A toaster component based on the alert message. 

Although the toaster has more possibilities such as action items within the box

The toaster can be dismissed or be hidden for a certain amount of time, or after the toaster has been dismissed the message becomes available within a notification center.

The toaster has a slide in functionality from the side of the page or the bottom of the page

Toaster

I noticed that a misalignment in the checkbox component between the checkbox itself and its label. One way to solve would be by capping the vertical trim to its baseline.

Checkbox + label alignement

Welcome to the Idea Box! This is your space to share ideas, report issues, and help shape the future of Nova. Whether it’s a feature request, a new component, or a bug you’ve found, your feedback drives our improvements. Submit your thoughts, and let’s build something great together!

Idea box