react-ui-org / react-ui

React UI is a themeable and performant UI library for React apps.
https://react-ui.io
MIT License
21 stars 7 forks source link

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

Open adamkudrna opened 3 years ago

adamkudrna commented 3 years ago

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 commented 3 years ago

Comes from #263.