Date web component with text inputs - Sketch artifacts

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website

https://design.va.gov

40 stars 61 forks source link

Date web component with text inputs - Sketch artifacts #846

Closed k80bowman closed 2 years ago

k80bowman commented 2 years ago

Description

Create or update Sketch artifacts for the experimental version of the Date component with text inputs instead of select inputs and add to the VA Design System Sketch library if they are not already there.

Tasks

[x] Create or update Sketch artifacts for component
[x] Add Sketch artifacts to Sketch library, if not already there
[x] Create component page in Sketch, if necessary
[ ] Add link to Sketch component page to documentation ticket

Acceptance Criteria

[x] Sketch component artifacts have been created or updated
[x] Sketch component page has been created, if necessary
[ ] Link to Sketch component page has been added to component documentation ticket

Mockups

Sketch mockups

GnatalieH commented 2 years ago

Mockups are here. @humancompanion-usds and @pdavies88 can you review my work? Preston, I made some changes with the spacing between labels, and I also bolded the labels above the red inline error message because this is how the text input error state looks. Thoughts?

pdavies88 commented 2 years ago

@GnatalieH had to request access to see the changes but I can definitely make them when I have access

pdavies88 commented 2 years ago

Thanks for the access I will update the spacing and bold states and update when those are up

GnatalieH commented 2 years ago

@pdavies88 OK cool, glad you got access. I didn't get a notification about that. Also, please note the spacing I used between the labels, as I think it's a bit different than the example on Chromatic. I increased the margins between some things. Thanks!

pdavies88 commented 2 years ago

@GnatalieH updates have been made to match the mocks and can be seen here: https://60f9b557105290003b387cd5-djkjfpydne.chromatic.com/?path=/docs/components-va-date-text-input--default

GnatalieH commented 2 years ago

@humancompanion-usds here's the link to the Sketch artboard for this component. I added symbols for the hint text variations. I'm going to close this ticket before noon ET today unless you want additional changes. Thanks!

humancompanion-usds commented 2 years ago

Please update the hint-text color in each of the examples (or update the symbol and be sure those variations are using that symbol). Thanks.