search

grommet / hpe-design-system

HPE Design System
48 stars 23 forks source link

Assess padding/text placement issues in button and select in Designer #828

Closed taysea closed 4 years ago

taysea commented 4 years ago

Some issues regarding Button and Select were noted in the designer. Theme and grommet changes need to be reviewed to see if any recent changes caused these effects. Images below of issues being noted: image (3) image (2) image (1)

halocline commented 4 years ago

Select drop is getting browser's focus border as well: Screen Shot 2020-06-02 at 11 51 55 AM Screen Shot 2020-06-02 at 11 54 25 AM

taysea commented 4 years ago

I think some of the shift could be due to the new font-format. In this video, notice the slight shift in the button text in the navigation. I think this is contributing to the issues Edgar and Jens are pointing out. The "left tab" is the new font format of woff2 (text is slightly higher). lineheight

In the designer links shared by Edgar and Jens, the text placement is not as drastic as their screenshots (regardless of what browser I'm using), but I am able to notice a subtle difference.

taysea commented 4 years ago

Select drop is getting browser's focus border as well: Screen Shot 2020-06-02 at 11 51 55 AM Screen Shot 2020-06-02 at 11 54 25 AM

Wonder if this change is related to whatever is causing this issue as well: https://github.com/hpe-design/design-system/issues/829

halocline commented 4 years ago

I think some of the shift could be due to the new font-format. In this video, notice the slight shift in the button text in the navigation. I think this is contributing to the issues Edgar and Jens are pointing out. The "left tab" is the new font format of woff2 (text is slightly higher). lineheight

In the designer links shared by Edgar and Jens, the text placement is not as drastic as their screenshots (regardless of what browser I'm using), but I am able to notice a subtle difference.

I feel like I recall hearing that the new font did have adjustments to line-height. I may notice a bit more exaggeration in FF than Chrome or Safari.

taysea commented 4 years ago

font-formats Toggling between a designer file provided by jens. The tab labelled 'Taylor - ...' has the hpe theme prior to the new woff2 format, and the other tab is with the new woff2 format. The whole page shifts as we toggle between tabs because the placement of the text in a line seems to be different between woff2 and the prior woff format. I think this is the root of the issues people are seeing.

halocline commented 4 years ago

Toggling between a designer file provided by jens. The tab labelled 'Taylor - ...' has the hpe theme prior to the new woff2 format, and the other tab is with the new woff2 format. The whole page shifts as we toggle between tabs because the placement of the text in a line seems to be different between woff2 and the prior woff format. I think this is the root of the issues people are seeing.

Agree that the shift is due to font files. The difference is caused by MetricHPEXS (new) vs. MetricHPE (prior) as opposed to .woff vs. .woff2.

Here is a good screenshot and context: https://github.com/hpe-design/design-system/issues/506#issuecomment-638965428 metrichpexs-comparo

taysea commented 4 years ago

Gotcha, yes you are right. It is not an issue of woff vs woff2, but the shift from Metric HPE to MetricHPEXS.

Oddly, based on the shift of the fonts it seems like the new font is shifting in a direction counter to what I'd expect. The older MetricHPE font (with extra space on the bottom) had been aligning properly, but the new HPEXS version seems to shift all text upward (especially in cases where text has a descender, such as "g") as if the bottom space in the old font already was leaving room for descenders.

I think a 15-30min discussion would be sufficient to iron out the discrepancy here and decide what we want to do with the font file.