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

Design tweaks #139

Closed
14 tasks done
alyblenkin opened this issue Jun 21, 2024 · 4 comments
Closed
14 tasks done

Design tweaks #139

alyblenkin opened this issue Jun 21, 2024 · 4 comments
Milestone

Comments

@alyblenkin
Copy link
Collaborator

alyblenkin commented Jun 21, 2024

Starting a list of small changes to improve the over all experience

Spacing, weights, text fields

  • Vertical spacing after text boxes (can we leverage the vue components here)
  • Make the spacing between selects consistent with the text fields (selects seems more spaced apart)
  • Reduce text size/weight of title
  • Text field needs to be a lighter grey because it looks disabled (try #F7F8F9)
  • Hover state for text fields can be lighter
  • For displayed values and conditionally disabled fields, it's hard to tell it's updating because the text is too light - Needs design (Idea: when it's dynamic maybe add a light blue highlight animation)

Icons

  • More consistent alignment of controls (icons in larger views, hamburger menu in smaller). Vertical centering makes those a moving target.
  • more menu still appears pretty small
  • Chevrons for groups are not aligned in the middle with the text

Elevation

Repeats

  • Add a "+" icon to the add button for repeats with label.
  • Adding the repeat label (really the label of the outer group) in the button text. That would be similar to Collect (see comment below)
  • The number should match the label text weight
@alyblenkin alyblenkin converted this from a draft issue Jun 21, 2024
@alyblenkin alyblenkin added this to the Next milestone Jun 21, 2024
@lognaturel
Copy link
Member

For the add button for repeats, what do you think about also adding the repeat label (really the label of the outer group) in the button text? That would be similar to Collect. For example, if the repeat label is "person", the button label would be "Add person". The danger is that of course the repeat label could be poorly selected. In Collect, the repeat name is used as-is and put in quotes (Add "person"?). We could consider doing things like forcing lowercase.

@alyblenkin
Copy link
Collaborator Author

@lognaturel Yes, I think this would be a super nice improvement and would align nicely with Collect!

@sadiqkhoja
Copy link
Contributor

Comments by @eyelidlessness about Form Header on #132:

I was curious to see how wrapping looks for forms with long titles. Pretty good! I think we may want to iterate later on...

  • More consistent alignment of controls (icons in larger views, hamburger menu in smaller). The vertical centering makes those a moving target. I think we'll probably want some design guidance on that.
  • Maybe slightly reducing text size/weight over a certain character length? (Honestly the weight feels pretty heavy regardless of length, wrapping.)

@lognaturel
Copy link
Member

Normalize vertical spacing, especially after text boxes:
Screenshot 2024-06-28 at 4 02 49 PM

@sadiqkhoja sadiqkhoja moved this from Todo to In Progress in Web Forms Jul 9, 2024
@sadiqkhoja sadiqkhoja self-assigned this Jul 9, 2024
@sadiqkhoja sadiqkhoja removed their assignment Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants