Automattic / vip-design-system

Design system components used throughout WordPress VIP
https://vip-design-system-components.netlify.app/
15 stars 3 forks source link

FORNO-1880: Fix alignment of inline label and select field #347

Closed t-wright closed 6 months ago

t-wright commented 6 months ago

Description

Fixes an alignment issue with the inline select component. The extent of the current misalignment depends on the browser stylesheet since no font family or size is currently defined. The below "before" represents a minor example of the issue that has been reported.

Before

Screenshot 2024-02-29 at 15 37 17

After

Screenshot 2024-02-29 at 15 38 11

Also adjusts the height of the vertical bar between the label and select field to match the bar on the right of the select field.

Checklist

Steps to Test

  1. Pull down PR.
  2. npm run dev.
  3. Visit http://localhost:6006/?path=/story/form-select--is-inline
  4. Verify the label and select option text is vertically aligned
netlify[bot] commented 6 months ago

Deploy Preview for vip-design-system-components ready!

Name Link
Latest commit 6d737dfb816f5e6dc98078355dfb8da3631f87ff
Latest deploy log https://app.netlify.com/sites/vip-design-system-components/deploys/65e00c9ad464160008d66f8a
Deploy Preview https://deploy-preview-347--vip-design-system-components.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.