Tweak design of form fields
Addresses #ticket-number.
Purpose
As part of the one design language (ODL) project, we've reviewed the form components and tweaked their styles to improve their cohesiveness and visual hierarchy.
Approach and changes
- Change the label's and validation hint's font-weight from regular to bold
- Increase the input border-radius from 8px to 12px
- Change the error icon from the Alert to the Notify icon
Definition of done
- [ ] Development completed
- [ ] Reviewers assigned
- [x] Unit and integration tests
- [x] Meets minimum browser support
- [x] Meets accessibility requirements
⚠️ No Changeset found
Latest commit: 5fee865d21f3a1fafda1e669d3eab124f509ca39
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| oss-circuit-ui | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | May 22, 2023 4:13pm |
Codecov Report
Merging #2101 (5fee865) into main (eb445e6) will increase coverage by
0.00%. The diff coverage is100.00%.
@@ Coverage Diff @@
## main #2101 +/- ##
=======================================
Coverage 92.08% 92.08%
=======================================
Files 170 170
Lines 3599 3600 +1
Branches 1267 1267
=======================================
+ Hits 3314 3315 +1
Misses 264 264
Partials 21 21
| Impacted Files | Coverage Δ | |
|---|---|---|
| packages/circuit-ui/components/Input/Input.tsx | 93.47% <ø> (ø) |
|
| .../circuit-ui/components/SearchInput/SearchInput.tsx | 81.25% <ø> (ø) |
|
| packages/circuit-ui/components/Select/Select.tsx | 95.12% <ø> (ø) |
|
| ...ckages/circuit-ui/components/Selector/Selector.tsx | 90.24% <ø> (ø) |
|
| ...ircuit-ui/components/FieldAtoms/FieldLabelText.tsx | 90.90% <100.00%> (+0.90%) |
:arrow_up: |
| ...t-ui/components/FieldAtoms/FieldValidationHint.tsx | 94.59% <100.00%> (ø) |
This change has been postponed until after ~v7~ v8 to align the rollout with the mobile apps.