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

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

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

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

wants to merge 5 commits into from

Conversation

mcbouslog
Copy link
Contributor

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: 77.359% (-0.008%) from 77.367%
when pulling 715628d on lib-classifier_survey-task-design-changes
into 87ddcb4 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@mcbouslog @coveralls