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.

Sign up for GitHub

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

Jump to bottom

[HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling #6574

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

[HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling #6574

wants to merge 14 commits into from

Conversation

mcbouslog
Copy link
Contributor

@mcbouslog mcbouslog commented Dec 17, 2024 •
edited
Loading

Caution

DO NOT MERGE. THIS BRANCH IS BEING USED TO ACCUMULATE AND TEST THE SURVEY TASK REDESIGN

Package

  • lib-classifier

Linked Issue and/or Talk Post

Describe your changes

[ ...incoming... ]

How to Review

Helpful explanations that will make your reviewer happy:

  • What Zooniverse project should my reviewer use to review UX?
  • What user actions should my reviewer step through to review this PR?
  • Which storybook stories should be reviewed?
  • Are there plans for follow up PR’s to further fix this bug or develop this feature?

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

Bug Fix

  • The PR creator has listed user actions to use when testing if bug is fixed
  • The bug is fixed
  • Unit tests are added or updated

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.

@mcbouslog
lib-classifier: Refactor survey task Choice and Questions styling (#6478
a111a79 
)

* Refactor survey task choice colors, text size, spacing

* Add info collapsible

* Refactor Choice sections margins

* Refactor Choice button borders

* Refactor survey task tests per Choice layout changes

* Fix more info align

* Refactor choice cancel

* Refactor Choice margin and padding

* Refactor ConfusedWith button styling

* Edit sub-heading color

* Refactor QuestionInput margin and round

* Edit Choice spacing

* Refactor Question input label text color if dark theme and isChecked

* Refactor Choice button spacing

* Reduce spacing within Choice elements

* Set question input spacing

* Refactor Choice story container spacing

* Remove unneeded a11yTitle

* Refactor Choice heading and ConfusedWith button spacing

* Add Carousel min height

* Refactor info icons with aria-hidden
@coveralls
Copy link

coveralls commented Dec 17, 2024 •
edited
Loading

Coverage Status

coverage: 75.615% (-0.01%) from 75.625%
when pulling a004cb7 on lib-classifier_survey-task-design-changes
into a7d4db0 on master.

@mcbouslog mcbouslog mentioned this pull request Jan 8, 2025
Closed
11 tasks
@mcbouslog
lib-classifier: Refactor survey task Choices and ChoiceButton styling (…
6236f1a 
…#6494)

* Refactor Choices stories with selected choices

* Add initial ChoiceButton delete functionality

* Refactor MockTask and Choices stories

* Refactor Choices and ChoiceButton with alternate row shading

* Refactor ChoiceButton thumbnail size

* Refactor ChoiceButton styling

* Refactor delete choice button

* Remove unused imports, delete deprecated choice button theme, and remove no longer applicable comments

* Add DeleteButton tests

* Refactor ChoiceButton thumbnail image request for better quality image

* Edit thumbnail width per whatSizeThumbnail helper

* Edit ChoiceButton label text size and weight per variables

* Refactor column sizes across media widths

* Update whatSizeThumbnail tests per updated design

* Refactor ChoiceButton and DeleteButton styling

* Refactor Choices and ChoiceButton tab sequence

* Add Home and End keystroke actions to menu

* Refactor menuitem aria attributes

* Refactor Choices tests

* Refactor ChoiceButton tests

* Refactor survey task tests

* Refactors for ChoiceButton focus and hover states

* Refactor Choices and Choice keyDown actions

* Edit ChoiceButton border states

* Edit ChoiceButton DeleteButton with no thumbnail

* Add survey task Choices hide thumbnails story

* Refactor Choices grid with no thumbnails

* Refactor Choices grid columns per media width

* Refactor ChoiceButton label for long content

* Edit choices grid row height if no thumbnails

* Fix ChoiceButton DeleteButton sizing

* Refactor Choices thumbnail display to hide or show, remove hide if more than 30 choices

* Add ChoiceButton translations

* Refactor DeleteButton focus and hover styling

* Refactors per review notes

* Update survey task tests per translation changes
@mcbouslog
lib-classifier: refactor Choice label and InfoLabel (#6611)
618ce4e 
* Refactor Choices stories with selected choices

* Add initial ChoiceButton delete functionality

* Refactor MockTask and Choices stories

* Refactor Choices and ChoiceButton with alternate row shading

* Refactor ChoiceButton thumbnail size

* Refactor ChoiceButton styling

* Refactor delete choice button

* Remove unused imports, delete deprecated choice button theme, and remove no longer applicable comments

* Add DeleteButton tests

* Refactor ChoiceButton thumbnail image request for better quality image

* Edit thumbnail width per whatSizeThumbnail helper

* Edit ChoiceButton label text size and weight per variables

* Refactor column sizes across media widths

* Update whatSizeThumbnail tests per updated design

* Refactor ChoiceButton and DeleteButton styling

* Refactor Choices and ChoiceButton tab sequence

* Add Home and End keystroke actions to menu

* Refactor menuitem aria attributes

* Refactor Choices tests

* Refactor ChoiceButton tests

* Refactor survey task tests

* Refactors for ChoiceButton focus and hover states

* Refactor Choices and Choice keyDown actions

* Edit ChoiceButton border states

* Edit ChoiceButton DeleteButton with no thumbnail

* Add survey task Choices hide thumbnails story

* Refactor Choices grid with no thumbnails

* Refactor Choices grid columns per media width

* Refactor ChoiceButton label for long content

* Edit choices grid row height if no thumbnails

* Fix ChoiceButton DeleteButton sizing

* Refactor Choices thumbnail display to hide or show, remove hide if more than 30 choices

* Refactor InfoLabel text, choice label heading level
@mcbouslog
Merge branch 'master' into lib-classifier_survey-task-design-changes
715628d
@mcbouslog mcbouslog mentioned this pull request Jan 13, 2025
Open
18 tasks
@mcbouslog mcbouslog linked an issue Jan 17, 2025 that may be closed by this pull request
Survey task filter radio button labels use nested buttons #3919
Open
mcbouslog and others added 2 commits January 23, 2025 11:34
@mcbouslog @goplayoutside3
lib-classifier: Refactor CenteredLayout and survey task spacing (#6615)
8674bf9 
* Fix layout stories with survey task

* Refactor CenteredLayout for various media sizes and survey task

* Refactor survey task Chooser and Choices spacing

* Edit margin and pad consistent with Grommet docs

* Refactor Chooser margin and pad with `'0'`

Co-authored-by: Delilah C. <[email protected]>

* Fix sticky subject area

* Refactor shared styled containers

* Revert CenteredLayout refactor with grid

* Remove responsive size context from CenteredLayout

* Refactor CenteredLayout for task area with survey task

* Fix CenteredLayout sticky behavior (#6645)

* Add hasSurveyTask prop to StyledSubjectContainer instances

---------

Co-authored-by: Delilah C. <[email protected]>
@mcbouslog
Merge branch 'master' into lib-classifier_survey-task-design-changes
7f20b25
@mcbouslog mcbouslog mentioned this pull request Jan 28, 2025
Merged
15 tasks
mcbouslog and others added 3 commits January 28, 2025 10:24
@mcbouslog @goplayoutside3
lib-classifier: Refactor survey task filtering (#6619)
d68afdc 
* Refactor Choices stories with selected choices

* Add initial ChoiceButton delete functionality

* Refactor MockTask and Choices stories

* Refactor Choices and ChoiceButton with alternate row shading

* Refactor ChoiceButton thumbnail size

* Refactor ChoiceButton styling

* Refactor delete choice button

* Remove unused imports, delete deprecated choice button theme, and remove no longer applicable comments

* Add DeleteButton tests

* Refactor ChoiceButton thumbnail image request for better quality image

* Edit thumbnail width per whatSizeThumbnail helper

* Edit ChoiceButton label text size and weight per variables

* Refactor column sizes across media widths

* Update whatSizeThumbnail tests per updated design

* Refactor ChoiceButton and DeleteButton styling

* Refactor Choices and ChoiceButton tab sequence

* Add Home and End keystroke actions to menu

* Refactor menuitem aria attributes

* Refactor Choices tests

* Refactor ChoiceButton tests

* Refactor survey task tests

* Initial survey task filters refactor to FilterLabel, radio input group

* Fix layout stories with survey task

* Refactor CenteredLayout for various media sizes and survey task

* Refactor survey task Chooser and Choices spacing

* Edit margin and pad consistent with Grommet docs

* Refactor FilterLabel selected state styling

* Refactor FilterStatus and Characteristics from drop button to collapsible

* Refactor Characteristics styling

* Revert Chooser and FilterStatus change

* Refactor Characteristics and related styling, add Characteristics story

* Refactor FilterStatus styling

* Refactor ClearFilters section styling

* Refactor FilterLabel tests

* Refactor FilterStatus tests

* Refactor survey task tests per filtering changes

* Fix focus issues with filters and choices

* Add aria-controls and aria-expanded to Filters button

* Refactor Chooser margin and pad with `'0'`

Co-authored-by: Delilah C. <[email protected]>

* Fix sticky subject area

* Refactor shared styled containers

* Rebase edits

* Add text-decoration underline to close filters button

* Refactor Characteristics spacing

* Refactor selected filters position

* Add AnnounceContext for choices per filters

* Adjust FilterStatus icon size

---------

Co-authored-by: Delilah C. <[email protected]>
@mcbouslog
Refactor FilterStatus with scrollIntoView
997c842
@mcbouslog
Merge branch 'master' into lib-classifier_survey-task-design-changes
d9a9587
@mcbouslog mcbouslog changed the title [DRAFT] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, and Questions styling [DRAFT] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling Jan 28, 2025
@mcbouslog
Copy link
Contributor Author

I believe the scroll issue identified in #6619 (comment) is fixed with 997c842.

@seanmiller26
Copy link
Contributor

The only things I noticed on final review:

On mobile, when the layout shifts to single column, the choice heights w/ thumbnails are 50px. Should still be 60px height. Note - this looks ok on a project like Woodpecker Cavity Cam (which already has a single row of choices) until you get narrower than ~430px screen width.
https://fe-project-branch.preview.zooniverse.org/projects/elwest/woodpecker-cavity-cam/classify/workflow/16998

Add 5px margin or padding to top of 'Close Filters' button. (When inspecting I couldn't find how the style is coded)

Otherwise, LGTM! Ready for testing!

@mcbouslog
Copy link
Contributor Author

The only things I noticed on final review:

On mobile, when the layout shifts to single column, the choice heights w/ thumbnails are 50px. Should still be 60px height. Note - this looks ok on a project like Woodpecker Cavity Cam (which already has a single row of choices) until you get narrower than ~430px screen width. https://fe-project-branch.preview.zooniverse.org/projects/elwest/woodpecker-cavity-cam/classify/workflow/16998

Add 5px margin or padding to top of 'Close Filters' button. (When inspecting I couldn't find how the style is coded)

Otherwise, LGTM! Ready for testing!

Great catches @seanmiller26 ! Changes made 👍

@mcbouslog mcbouslog changed the title [DRAFT] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling [HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling Jan 30, 2025
@mcbouslog mcbouslog marked this pull request as ready for review January 30, 2025 18:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@goplayoutside3 goplayoutside3 Awaiting requested review from goplayoutside3

@seanmiller26 seanmiller26 Awaiting requested review from seanmiller26

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
fe-project-branch deploy
Status: In progress
Milestone
No milestone
3 participants
@mcbouslog @coveralls @seanmiller26