Fix/2432 add field tooltip styling

[jomarmontuya]

closes #2432

[jomarmontuya]

@agalin920 yes indeed the Typograhpy has default text.primary color however the typography color in this approach are being overruled by the parent root element. Which in the screenshot above is the listitem root.

another way to do this is we will set disableTypography and pass the typography component as children. In ths way we don't need to inforce the text.primary but we will pass typography as child element

[agalin920]

@jomarmontuya is that intentional? If so we shouldn't change it. If not we should do a theme change.

Cc: @zcolah

[zcolah]

Andres, There is no figma component or style rules for lists that they need to always be typography primary. We can set the default color of list items to be typography primary. We can always switch it to be another color when needed just as we do with body text etc.

…

On Tue, Feb 13, 2024, 7:14 AM Andres Galindo ***@***.***> wrote: @jomarmontuya <https://github.com/jomarmontuya> is that intentional? If so we shouldn't change it. If not we should do a theme change. Cc: @zcolah <https://github.com/zcolah> — Reply to this email directly, view it on GitHub <#2540 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFMT47Y7HSBFZIAY6N66UTLYTLAQDAVCNFSM6AAAAABC5CUMMKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNBQGE2TANJUHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[jomarmontuya]

@agalin920 By default the typography inside listItem is not styled at all and it will inherit whatever color set to the parent. I tihnk this is a common issues with this ListItem might be a bug from MUI

Source -> https://stackoverflow.com/questions/43975839/material-ui-styling-text-inside-listitemtext

everybody uses this same approach to override the color by style props or pas Typography as children element.

[zcolah]

@jomarmontuya I've caught some VQA issues. May you please review them here:
https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3901%3A108362&mode=dev&t=7jnnqMCWk8piCxPA-1

[jomarmontuya]

@zcolah

The description text is currently using body3 and line height looks correct at 18px based on the figma design. Should we lower this by overriding default styles?

[jomarmontuya]

@zcolah

A pixel difference you found in the list indentation seems only to occur on laptop devices viewport, as this is looks fine on my end.

[jomarmontuya]

@zcolah I left a comment on the figma link you provided please review once you have time, Thank you!

[zcolah]

@jomarmontuya See this loom that discusses the VQA issues
https://www.loom.com/share/30d26dc348f3497eaa03b4754cf99db4

[zcolah]

A pixel difference you found in the list indentation seems only to occur on laptop devices viewport, as this is looks fine on my end.

indentation issue is discussed in the loom video, not too big of an issue to fix

[jomarmontuya]

[jomarmontuya]

@zcolah I figure out what the problem is, it's the element using span tag instead of p tag

[jomarmontuya]

@agalin920

Please take a look at this theme updates related to this PR -> zesty-io/material#89

[jomarmontuya]

@agalin920 after further digging into this problem, it apears that body3 variant is the only one being converted to span with inline styling

see below.

body3 looks like an extension we created and does not follow MUI default p tag for Typography.

solution I can think of is.

1. Update the body3 to be default P tag same as body1 and body2.
2. Update the body3 to have display inline-block.

[agalin920]

@agalin920 after further digging into this problem, it apears that body3 variant is the only one being converted to span with inline styling

see below.

body3 looks like an extension we created and does not follow MUI default p tag for Typography.

solution I can think of is.

1. Update the body3 to be default P tag same as body1 and body2.

2. Update the body3 to have display inline-block.

@jomarmontuya Would prefer them also to be p tags but if there is a limitation for that we can go with the inline-block solution

[jomarmontuya]

@shrunyan

please see related PR to move this for VQA -> zesty-io/material#90

[shrunyan]

please see related PR to move this for VQA -> zesty-io/material#90

PR#90 is merged and available in https://www.npmjs.com/package/@zesty-io/material/v/0.13.0

The base branch was changed.