Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

jhung
Copy link
Contributor

@jhung jhung commented Mar 24, 2020

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

This is work in progress.

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:

Form elements:

Expected behavior:

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

Related issues

#240

Updated form elements to match wires. Work in progress.
@jhung jhung self-assigned this Mar 24, 2020
@netlify
Copy link

netlify bot commented Mar 24, 2020

Deploy preview for pinecone ready!

Built with commit 1ea6162

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

@greatislander greatislander changed the title feat: updating form element states to match wires. Fixes #240. feat: updating form element states to match wires (fixes #240) Mar 25, 2020
@greatislander greatislander linked an issue Mar 25, 2020 that may be closed by this pull request
@greatislander greatislander added the enhancement New feature or request label Mar 25, 2020
@greatislander greatislander added this to the 1.0.0-alpha.12 milestone Mar 25, 2020
Copy link
Collaborator

@greatislander greatislander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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).

Copy link
Collaborator

@greatislander greatislander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

@greatislander greatislander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

@greatislander greatislander left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Screen Shot 2020-03-26 at 11 32 42 AM

@cherylhjli
Copy link

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:
    Screen Shot 2020-03-27 at 10 40 57 AM

  • 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?
    Screen Shot 2020-03-27 at 11 30 28 AM
    Screen Shot 2020-03-27 at 11 29 54 AM

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

@jhung
Copy link
Contributor Author

jhung commented Apr 15, 2020

@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.

@greatislander greatislander merged commit 4f20709 into platform-coop-toolkit:dev Apr 16, 2020
@jhung
Copy link
Contributor Author

jhung commented Apr 21, 2020

Fixes #236

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

HTML examples should be valid html Revise focus and active states for interactive elements
3 participants