RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
108 stars 25 forks source link

fix(rux-select) make height align with rux-input height #1209

Closed kiley-mitti closed 1 year ago

kiley-mitti commented 1 year ago

Brief Description

This is a fix for the problem @nortonprojects brought up here: https://github.com/RocketCommunicationsInc/astro/pull/1191

It takes rux-select and makes its height the same as rux-input so that the two can be easily aligned. It's actually a fix to rux-select since in figma the heights were always supposed to be as they are in this PR.

JIRA Link

Related Issue

General Notes

Jacob's proposed solution was to turn select's border into a box shadow which would make it match rux-input. This is a great solution and consistency is great! However, I'd actually like to change rux-input so that its border is actually a border and not a box shadow. I think that moving the fake border from box-shadow to a real border will solve other paper cuts in development. To that end, this is the solution I propose for the rest as well. I've done a calc on padding so that it takes border into account.

Motivation and Context

Forms are annoying to align when the inputs are different sizes. This fixes that for select/input.

Issues and Limitations

Might be a breaking change for people who have already tried to solve this manually by changing aux-input's size rather than select's.

Types of changes

Checklist

changeset-bot[bot] commented 1 year ago

🦋 Changeset detected

Latest commit: e7d7ada57e1e772846c4b291ff495c4141be4147

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify[bot] commented 1 year ago

Deploy Preview for astro-preview ready!

Name Link
Latest commit e7d7ada57e1e772846c4b291ff495c4141be4147
Latest deploy log https://app.netlify.com/sites/astro-preview/deploys/64d3af0d1b595c0008505931
Deploy Preview https://deploy-preview-1209--astro-preview.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.

netlify[bot] commented 1 year ago

Deploy Preview for astro-stencil ready!

Name Link
Latest commit e7d7ada57e1e772846c4b291ff495c4141be4147
Latest deploy log https://app.netlify.com/sites/astro-stencil/deploys/64d3af0ddce30100089851e5
Deploy Preview https://deploy-preview-1209--astro-stencil.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.