feat: updating form element states to match wires (fixes #240)

[jhung]

Update form element states to match designs. Fixes #240 .

This is work in progress.

• I've read the guidelines for Contributing to the Platform Co-op Toolkit
• This isn't a duplicate of an existing pull request

Description

This updates the states of form elements and buttons to match the updated designs.

Not addressed in this pull request (to be addressed in another pull request):

• Tags
• Links
• Lists
• Accordions
• Pagination

Steps to test

1. Go to each of the components below and verify that default, hover, active, focus, disabled, and error states match the designs.

Buttons:

• Default
• Default inverted
• Secondary
• Secondary Inverted
• Borderless default
• Borderless inverted
• Destructive borderless
• Destructive inverted
• Disc default
• Disc inverse
• Tag button

Form elements:

• Text Input
• Text Input Inverted
• Text Area
• Text Area Inverted
• Select
• Select Inverted
• Checkboxes
• Checkboxes Inverted
• Radio Buttons
• Radio Buttons Inverted
• Submit Button
• Submit Button Inverted

Expected behavior:

Different states should visually match the designs. See:
03 States Table.pdf

Related issues

#240

[netlify]

Deploy preview for pinecone ready!

Built with commit 1ea6162

https://deploy-preview-288--pinecone.netlify.app

[greatislander]

@jhung The indeterminate checkbox state should be removed, and a custom checkbox component with aria-checked should be added (as found in the filter list).

[greatislander]

@jhung Filter list component is not working at the moment.

[greatislander]

@jhung looks like this PR should encompass search forms too. Thoughts?

[greatislander]

@jhung @cherylhjli I assume this matches wires (haven't looked) but the focus state for borderless buttons looks a little tight to me (there's not much breathing room between the inner outline and the text/icon). Thoughts?

[cherylhjli]

These are looking great Jon, we've come such a long way! Some notes:

• Button default, default inverted, submit button / Firefox, Safari: The active state inner border is slightly thicker than the outer border. Could they be the same width?

• Button secondary / all browsers: In order to make this consistent with the inverse secondary buttons, could we also make the hover border thicker?

• Button secondary inverse / all browsers: The text inside and border colour should both be Blue 50 (#E3EAE8)

• Funny effects here upon click + hover and click + not hovering: https://deploy-preview-288--pinecone.netlify.com/components/preview/button--secondary-inverse.html (firefox and safari)

• all borderless buttons and inverse borderless / all browsers: The focus state border seem to be really close to the text and icon. However upon focus + active it’s fine. I noticed that the stroke icon the inside of the button on focus, not on the outside. I think that may contribute to the button feeling crowded. The area between the two coloured strokes also seem to vary between focus and focus + active.

• Disc button, disc button inverse / firefox: on active state, there are these weird fuzzies that appear around the button! See screenshot:
  

• Tag button / chrome: the inside stroke on focus and focus + hover states vary slightly.

• Tag button / firefox, safari: the focus + active state have different width strokes for the outside and inside.

• All form fields, default and inverse / all browsers: I noticed the hover and active are still blue 500, can we change them to the same red as the text?

• All drop downs / all browsers: Can the drop down arrow be closer to the right hand edge? Same optical distance as the “O” of “option” to the left edge. Also, the text seems to be sitting a bit low - can it be horizontally centre aligned to the drop down field?

• Drop down disabled / all browsers: This one is a bit farther than design specs - it currently can be easily mistaken as a regular text field as it doesn’t have the same grey treatment as the other disabled form fields

• All checkboxes and radio buttons, default and inverse / all browsers: For some reason I can trigger an active state in inspect mode, but not regularly when I’m using the checkbox

• Radio buttons, default and inverse, all browsers: When I hover over a selected radio button, both the inactive border and the hover border appear - making it have 2 sets of borders. Is it possible to hide the thinner inside border?
  
  

• Submit button inverse: I don’t see this in the states table - what is this button for?

[jhung]

@cherylhjli and @greatislander - ready for another look. There are some outstanding issues which I will file as separate issues.

Known issues:

• select down chevron does not match error and disabled state colours
• designs lack :checked:hover selected style.
• hover styling for search button on home and page layouts not consistent with other button hover styles.
• pressing space on a radio, then arrow to a different radio leaves the previous radio in an active state.
• Search form focus style looks slightly different on FF vs. Chrome.

[jhung]

Fixes #236