nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcCheckboxRadioSwitch] [NcRadioGroup] Animate checkboxes and radio buttons

Open
#8,684 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

design enhancement feature: checkbox-radio-switch feature: radio-group
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

Similar to #8043

As part of a broader animation initiative for the release, checkboxes and radio buttons should animate when checked/unchecked.

For radio buttons, the inner circle should grow/shrink.

For checkboxes, the path for the checkmark should animate from the left side when ticked and from the right when unticked. The fill behind it should quickly crossfade.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Compare the related issue #8043, then locate the NcCheckboxRadioSwitch and NcRadioGroup components. Implement the described checked and unchecked animations for radio buttons and checkboxes, including the checkmark path direction and fill crossfade; done means both controls visibly animate in both states.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.