search

adeo / mozaic-design-system

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

Autocomplete component #1371

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 margin between Figma and Mozaic CSS classes. These differences are mostly on MField component with or without help text. It is used to wrap input components such as MAutoComplete and MTextInput.

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

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

Gap between field label and help text: Figma: 2px / 0.125rem CSS: 4px / 0.25rem (.mc-field__help: margin-top: 0.25rem)

Gap between help text and input component: Figma: 6px / 0.375rem CSS: 8px / 0.5rem (.mc-field .mc-field__element : margin-top: 0.5rem)

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. Click on "Create a Synoptic" button
  3. I'm redirected to the Creation Synoptic - Step 1
  4. I'm able to see the:
  5. Autocomplete component - POF selection
  6. Text input component - Synoptic name input

    The gap between elements of components are not the same as Figma components

Code example

No response

Is this a regression?

Additional comments

No response

lisa-caffiers commented 1 year ago

image

tiloyi commented 1 year ago

Hi @lisa-caffiers , Thanks for your issue.

I just looked at the link provided => https://offer.sit.kobi.adeo.cloud/offer-visualization/creation-view

Spacing between the help text & the label: The styles are well at 2px / 0.125rem (see Screenshot)

helptext-label

=> So, on this point, we are good ✅

Spacing between the help text & the input: Unfortunately, it seems that your Figma mockups is out to date.

Indeed, on our side, to develop the components we use the following Figma library =>https://www.figma.com/file/beR93zs0TM5Bj0OTUyrmOa/%5BBA%5D-Forms-%F0%9F%94%B5?node-id=296%3A2051&t=IEftzLVK99Iu9qFf-0

So, if you go to this link, as you will see, the spacing between the help text and the field is 8px / 0.5rem. So on our side we are fine.

Maybe an update of your Figma is necessary?

I remain at your disposal if you need to talk about it.

lisa-caffiers commented 1 year ago

Trésor, The issue has been transferred to Jean-Baptiste on 27/02