Content: UUID Field Revamp

[jomarmontuya]

closes #2449

[zcolah]

@jomarmontuya

• VQA for the UUID Field is Complete.
  Each comment has a note about what the concern is. Once you resolve the concern, please reply "Done" on the Comment.
  See all comments here: https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3889%3A15931&mode=dev&t=xPjm41TwD3mIIPlv-1

• Please show a checkmark when a user copies a UUID
  I have added a flow for the same. See here: https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX/Zesty-3.0-Revamp?type=design&node-id=3894-33450&mode=dev

[jomarmontuya]

@zcolah quick question, regarding the text.primary color of the uuid field, do we really wanted to be the same with the others?

because this field is not editable, it would make sense the this field is set to disabled, therefore if we do set it to disabled, MUI has default styling for disabled field which is what we currently see right now it affects the field and the text inside it.

if we need to change it to text.primary i would have to override that mui styling.

cc: @agalin920

[jomarmontuya]

@zcolah I've adjusted the size of the icon to small and fontsize to small but it looks like the gap is relatively wider than what it is on figma design.

we can adjust the gap by i would have to override some styling here.

@agalin920

[agalin920]

@zcolah quick question, regarding the text.primary color of the uuid field, do we really wanted to be the same with the others?

because this field is not editable, it would make sense the this field is set to disabled, therefore if we do set it to disabled, MUI has default styling for disabled field which is what we currently see right now it affects the field and the text inside it.

if we need to change it to text.primary i would have to override that mui styling.

cc: @agalin920

I believe we have handled this in the past by giving the input the read only attribute

[agalin920]

@zcolah quick question, regarding the text.primary color of the uuid field, do we really wanted to be the same with the others?

because this field is not editable, it would make sense the this field is set to disabled, therefore if we do set it to disabled, MUI has default styling for disabled field which is what we currently see right now it affects the field and the text inside it.

if we need to change it to text.primary i would have to override that mui styling.

cc: @agalin920

Have you experimented with the end adornment position values? It can also be set to start depending on placement

[zcolah]

@jomarmontuya

Regarding the text.primary color of the uuid field, do we really wanted to be the same with the others?
Yes. As @agalin920 shared keep it as a read-only field. This is because we do not want users to think this field is not available or is switched off.

With respect to the icon size issues
Look at the Global Search Text Input as prior art to see how it was achieved. @theofficialnar was responsible for that project and can provide context on how it was done.

[jomarmontuya]

Screen.Recording.2024-02-22.at.2.17.39.PM.mov

@zcolah @agalin920 thank you for your inputs. I've updated kindly see demo

[zcolah]

Hi @jomarmontuya

• The UUID Field looks good. However the MUI Theme update seems to have impacted the spacing between the Search Icon and Search Text in the search bar. Please look into this.

https://www.figma.com/file/zOI7oSH3fG1XDmmPzsP6PX?node-id=4081:30129&mode=design#735360365

[jomarmontuya]

@zcolah do you think we should create new ticket for that instead of adding it here? The search bar is affected because of the adjustment we did in the material repo

cc: @agalin920

[jomarmontuya]

@zcolah new issue I created to address that global search -> #2595

[agalin920]

.

[agalin920]

.

[agalin920]

@jomarmontuya

@zcolah do you think we should create new ticket for that instead of adding it here? The search bar is affected because of the adjustment we did in the material repo

cc: @agalin920

@jomarmontuya Is it? I thought you said it was due to an custom override. But come to think of if it that was truly the case then this would remain in tact.

Is this because the way it achieves the spacing different than your previous solution? If thats the case why was a different route taken? should the solution be changed?

[jomarmontuya]

@agalin920

The InputAdornment in the global search previously has set to margin-right:0px so with the theme change it now has 4px margin-right.

however I think it was the right change, the problem in this search is not the inputAdornment but the search input has padding left and right which pushes the text few pixels to the right.

This issue wasn't visible before because of the margin-right:0px

[agalin920]

@jomarmontuya gotcha thanks. Please add this as context to the ticket you made

[zcolah]

@jomarmontuya pls fix the Search Input issue and we will deploy both tickets together along with the MUI ticket

[jomarmontuya]

@zcolah here's related PR -> #2622

[zcolah]

Jomar pls ensure both of these are deployed to stage or dev together

…

On Fri, Mar 22, 2024, 4:59 AM Jomar Montuya ***@***.***> wrote: @zcolah <https://github.com/zcolah> here's related PR -> #2622 <#2622> — Reply to this email directly, view it on GitHub <#2549 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFMT472QBMTXQEAC6DSKGPTYZNUNTAVCNFSM6AAAAABDEDWH76VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJUGA2DGMJTGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>