adeo / mozaic-design-system

Mozaic Design System
https://mozaic.adeo.cloud
Apache License 2.0
72 stars 17 forks source link

DataTable values #1372

Closed lisa-caffiers closed 1 year ago

lisa-caffiers commented 1 year ago

I am opening an issue for

Styles (CSS, SCSS, ...)

Package version

@mozaic-ds/styles: 1.53.0

Description

Technical definition

There is a difference in typo size between Figma and Mozaic CSS classes for the DataTable values.

OVZ DataTable :

https://offer.sit.kobi.adeo.cloud/offer-visualization/display-view

https://www.figma.com/file/GBYiBxE0VcGc4HgzWgearG/Offer-Visualization?node-id=4274%3A197082&t=enrM7T6LrtTnX8xf-0

Value with a link : Figma: 14px / 0.875rem CSS: 16px / 1rem

Value without a link : Figma: 16px / 1rem CSS: 14px / 0.875rem

image

GitHub repository

No response

Mock-up(s)

No response

What happened?

No response

What is expected?

No response

To Reproduce

  1. Go to the Synoptics screen
  2. I'm able to see the DataTable: The Values typo sizes are not the same as Figma components

Code example

No response

Is this a regression?

Additional comments

No response

tiloyi commented 1 year ago

Hi @lisa-caffiers , Thank you for your issue.

I just looked at the links you provided.

So, you have to know that the DataTable developed on our side, is based on the specifications of the following Figma library: => https://www.figma.com/file/Fwvg2vuovdgIZZudFzwmLG/%5BBB%5D-Datatable-%F0%9F%94%B5?node-id=1785%3A64808&t=oFiVpRNZUccK4M1R-0

And as you can see in this Figma mockup, the simple text (without link) must always be at 14px with a line-height of 18px. This is the case in our CSS ✅

As for the version with a link, since we leave the freedom to the developers to insert the content of their choice in the cells, it is up to them to put the link at the right size using the "S" variation of the link.

If you are on Mozaic-Vue, the use of the "S" variation is as follows:

<MLink size="s" href="#">
The text of your link here
</MLink>

Here it is, I remain at your disposal to talk about it if needed :)

lisa-caffiers commented 1 year ago

Trésor, The modification has been done by our side