Incorrect vertical alignment of text inside <ui5-button /> component

[pavelkornev]

Bug Description

If page has a custom line-height style and <ui5-button/> component is used among some text nodes, the text inside the button implicitly affected and leads to misalignment vertically (jumps 1-2 pixels up):

Expected Behavior

Outside styles should not affect rendering of inner nodes of button component:

Proposed solution

Add line-height property for button component, e.g.:

<ui5-button icon="add" style="line-height: 100%;">
  Add Comment
</ui5-button>

In our opinion, this property should be included in the implementation of this component rather than in the application code.

Steps to Reproduce

See example below.

Isolated Example

https://codesandbox.io/s/ui5-webcomponents-forked-j0spo?file=/index.html

Context

• UI5 Web Components version: 1.0.0-rc.14
• OS/Platform: macOS
• Browser: Chrome 90.0.4430.212
• Affected component: <ui5-button />

Priority

• Low
• Medium
• High
• Very High

Stakeholder Info (if applicable)

• Organization: SAP Graph
• Business impact: UX

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-b we have to ensure that the line-heght set on parent elements does not apply directly on the ui5-button, perhaps setting default one would be best.

ilhan

[tsanislavgatev]

Hello @pavelkornev ,

I've opened the example but i see the expected behavior. Can you please check the example, and if we have to add something to reproduce the issue, please update us.

Thanks and Best Regards,
Tsanislav

[ilhan007]

Hi @pavelkornev I re-checked the codesanbox example above (thanks for providing one)
and keep setting line-height: 32px (48px) to the body (tried on to wrapping div as well) but it applied only over the text somehow - could not see a difference with the Button's text alignment. Could you help me on this?

These are snapshots from your code sandbox example without line-height and with 48px line-height, but could not see a difference in the Button's alignment

no line-height

with 48px line-height

[pavelkornev]

Hi,
we had a call with Ilhan this morning, here is an updated example: https://codesandbox.io/s/ui5-webcomponents-forked-j0spo?file=/index.html

Top button: has a problem - text is positioned one 1px up.
Bottom button: has a fixed line-height and therefore text is properly centered.