react-ui icon indicating copy to clipboard operation
react-ui copied to clipboard

Get rid of padding alignment hack once Safari supports `align-items: baseline` for blank inputs

Open adamkudrna opened this issue 4 years ago • 1 comments

See https://bugs.webkit.org/show_bug.cgi?id=142968

  1. Change default label and field alignment to real baseline:

    --rui-form-field-horizontal-label-vertical-alignment: baseline;
    --rui-form-field-horizontal-field-vertical-alignment: baseline;
    --rui-form-field-horizontal-label-padding-y: 0;
    
  2. Get rid of FormLayoutCustomField's innerFieldSize prop.

Make sure various label and field alignment scenarios are still supported by us—possible scenarios may narrow down by the change. Consult with src/lib/styles/tools/form-fields/_box-field-layout.scss comments.

Current state of baseline field alignment in Safari 14.0.3:

obrazek

Almost perfect (quick, no code tweaks) baseline alignment in Firefox:

obrazek

Be careful when tap target is involved in calculations:

obrazek

Since this works also for FormLayoutCustomFields, we could get rid of their innerFieldSize prop:

obrazek

adamkudrna avatar Apr 19 '21 18:04 adamkudrna

Comes from #263.

adamkudrna avatar Apr 19 '21 19:04 adamkudrna