lib-classifier: Refactor survey task Choices and ChoiceButton styling

[mcbouslog]

Package

• lib-classifier

Linked Issue and/or Talk Post

• closes Survey Task: Choices and ChoiceButton styling updates #6238
• closes Survey Task: design improvement for deselecting choice #6076
• related to lib-classifier: Refactor survey task Choice and Questions styling #6478

Describe your changes

• add delete choice selection "x" button
• per related Figma design:
  • restyle Choices
  • restyle ChoiceButton
• refactor related stories
• update tests

How to Review

Helpful explanations that will make your reviewer happy:

• What Zooniverse project should my reviewer use to review UX?
  • lib-classifier, staging: https://local.zooniverse.org:8080/?project=1634&workflow=2434
• What user actions should my reviewer step through to review this PR?
• Which storybook stories should be reviewed?
  • (and related sibling stories) http://localhost:6006/?path=/story/tasks-survey-chooser-choices--less-than-six&globals=theme:dark
• Are there plans for follow up PR’s to further fix this bug or develop this feature? yes, see linked issues/PRs

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

Refactoring

• The PR creator has described the reason for refactoring
• The refactored component(s) continue to work as expected

Post-merge

• This PR adds translations keys to English dictionary(s). See guidance for pulling new keys to Lokalise here.

[seanmiller26]

Noting the few styling issues here (some of which were discussed in person):

• Increase the thumbnail resolutions and ensure the proportions are displayed as uploaded.

• Thumbnail widths should be as follows: 60px in 1 or 2 column layout, 50px in 3 column layout.

• Font size should be 14pt in 3 column layout

• Font should be the next weight when choice is selected (ie. Regular > Medium)

• Column widths should be even: 250px in 2 column layout, 166px in 3 columns.

• Mobile layout should always be 2 columns.

• The deselect 'X' will be moved on top of the thumbnail with an overlay.

[seanmiller26]

We discussed content overflow and how we can't always account for the edge case of a very long choice name. This may still happen. But what we can enforce, although more work on our end, is research teams putting spaces between their 'Other' categories so we can display proper line breaks.

insect/bug, reptile/amphibian > insect / bug, reptile / amphibian, etc.

[mcbouslog]

Refactored from menuitemcheckbox to menuitem to reflect that a choice menu item shows another (sub)menu (the Choice component) to answer questions or identify the choice.

I'm not sure if the Choice component should be refactored as a menu or fieldset or something similar?

Here are some related MDN links:

• menu: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role
• menu item: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role

[goplayoutside3]

A couple of questions on first code read:

1. Can you point me to the Figma or UI description for how many columns should appear on phone-sized screens. I vaguely remember the mention of mobile always having two columns, but on this branch a screen width < 600px knocks the column count down to 1 with lots of whitespace on each side. That introduces so much scrolling for a survey task user.

2. Could you also point me to Figma or design decisions / examples for projects with "Hide all" selected in the lab's thumbnail config. The example projects and Figma resources linked in this PR all have thumbnails.
   (Edit: I see one screenshot of hidden thumbnails in Survey Task: Choices and ChoiceButton styling updates #6238 I'm going to ask Sean about it there)

[goplayoutside3]

rowsCount and columnsCount should be passed with a $ to suppress the console warning about passing invalid props to a DOM element. See an example in the styled-components v6 upgrade here and styled-components transient props docs.

[seanmiller26]

2. I added the 'no thumbnail' options in Figma. They were previously buried in the exploration section.

[mcbouslog]

1. Can you point me to the Figma or UI description for how many columns should appear on phone-sized screens.

This is due to the 2 column layout request of

Column widths should be even: 250px in 2 column layout, 166px in 3 columns.

The two columns (500px) plus margins (horizontal, task area ~20px, page ~20px, total ~80px) force one column around less than 600px.

But agreed, a lot of whitespace, maybe columns could use clamp at smaller screen sizes or something similar?

[seanmiller26]

Perhaps they could have their own rules just for mobile. As long as the columns are even, I don't think we'll encounter an instance when they're too narrow to display properly at 2 columns.

[goplayoutside3]

When I run this branch with lib-classifier locally and look at your workflow without thumbnails (https://local.zooniverse.org:8080/?project=1634&workflow=3763), the buttons are still 60px height. Do you still plan to reduce those to 40px?