fix(ui5-split-button): fix split button when in wrapper

[hinzzx]

When our <ui5-split-button> is wrapped and a width is set to the wrapper, our <ui5-split-button> is not correctly displayed.

With this change, we fix that issue and we also adopt the usage of CSS Logical Props, removing redunancies and reducing our CSS code significantly.

Before:

After:

Fixes: #7659

[unazko]

Looks good to me.

Stale

[ilhan007]

Did not test it, in respect to code - looks good to me.

Something that I noticed while reviewing (not directly related to the change, but still related to the Split Button styles),
that you can remove a lot of RTL styles by replacing border-left, border-right, border-* with their CSS logical props equivalents as shown in the table:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding

[hinzzx]

Hi @ilhan007 ,

It is currently WIP regarding to the redunant RTL params. Thanks for pointing it out though. There are also few more, styling issues I would have to address as well.

[nnaydenow]

Works okey. Found only 1 minor misalignment with border in all themes (except sap_horizon and sap_horizon_dark)

[unazko]

Hello @hinzzx, @ilhan007, @nnaydenow,

I've identified the following two issues, which aren't related to the reported incident at all as I do not know what is the scope of the PR any longer:

• Issue rtl and horizon on emphasized button with active state
  

• Issue with fiori 3 and attention button. The text color black and instead it should be semantic color
  

The initial issue is found internally and looks like an edge case.
For similar cases with unrelated issues to the initial one I think it would be more practical to log separate incidents.

Best regards,
Boyan

[hinzzx]

Hello @hinzzx, @ilhan007, @nnaydenow,

• Issue with fiori 3 and attention button. The text color black and instead it should be semantic color
  

Best regards, Boyan

Hi there, as discussed offline, I just wanted to clarify that the text on the attention button in Fiori 3 is to remain black.

[nnaydenow]

LGTM. Tested all themes in following scenarios:

• compact size
• rtl
• compact size + rtl