style: fix labels vertical align

[mistercrunch]

SUMMARY

recently merged PR #11400 messed up the vertical alignment of <Label /> in some contexts.

BEFORE

TEST PLAN

visual

[codecov-io]

Codecov Report

Merging #11415 into master will increase coverage by 0.05%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #11415      +/-   ##
==========================================
+ Coverage   66.49%   66.55%   +0.05%     
==========================================
  Files         860      860              
  Lines       40869    40871       +2     
  Branches     3686     3688       +2     
==========================================
+ Hits        27176    27201      +25     
+ Misses      13592    13571      -21     
+ Partials      101       99       -2     

Flag	Coverage Δ
#cypress	56.56% <ø> (+0.20%)	⬆️
#javascript	62.92% <ø> (-0.01%)	⬇️
#python	61.94% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...erset-frontend/src/components/DatabaseSelector.tsx	91.30% <ø> (ø)
superset-frontend/src/components/Label/index.tsx	100.00% <ø> (ø)
superset-frontend/src/components/Timer.tsx	95.83% <ø> (ø)
...et-frontend/src/dashboard/actions/sliceEntities.js	78.78% <0.00%> (-1.86%)	⬇️
.../src/dashboard/components/gridComponents/Chart.jsx	83.67% <0.00%> (-1.03%)	⬇️
...ntend/src/dashboard/components/PropertiesModal.jsx	90.00% <0.00%> (-0.91%)	⬇️
...-frontend/src/dashboard/components/SliceHeader.jsx	58.33% <0.00%> (ø)
...src/dashboard/components/HeaderActionsDropdown.jsx	68.88% <0.00%> (ø)
...t-frontend/src/dashboard/components/SliceAdder.jsx	98.50% <0.00%> (+1.49%)	⬆️
...set-frontend/src/dashboard/util/getDropPosition.js	93.65% <0.00%> (+1.58%)	⬆️
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update efdda8b...d06dad3. Read the comment docs.

[ktmud]

Just for the record, this PR also fixes the alignment of the datasource menu trigger on Explore page.

Before

(misaligned by #11400 )

After

BTW...

Can we also add some space between the pill and the database name?

This label on the Edit Datasource modal also seem to need some adjustment

[mistercrunch]

How about this?

[ktmud]

I think text in brackets looks too hacky as it reminds me of text-based UI instead of GUI. Maybe we can create a special label with less padding for this?

[mistercrunch]

Ok, I'm throwing in the space for now but will save the Label work for another PR.

My take on Label is that it probably needs a border in all cases (not just the clickable labels), and that we can use box-shadow to differentiate the clickable ones.

Also, part of the reason that Labels were uppercase in the past is that it helps with the vertical alignment perception. Without uppercase, text looks pushed down - not vertically aligned in many cases.

[rusackas]

If this used the fixed-width / tabular-numerals variant if Inter, we could probably just as easily specify the width in 'em' units, but this seems like it'd work just fine for now, and I'll try to remember to open a PR to address these tabular numerals in the Theme.

[mistercrunch]

oh right, em seems like the way to go here!