daffodil icon indicating copy to clipboard operation
daffodil copied to clipboard

feat(design): add basic switch component

Open gracetxgao opened this issue 1 year ago • 2 comments

PR Checklist

Please check if your PR fulfills the following requirements:

  • [x] The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
  • [ ] Tests for the changes have been added (for bug fixes / features)
  • [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Starter for #1022

What is the new behavior?

A basic switch component is set up.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

gracetxgao avatar Oct 04 '24 06:10 gracetxgao

To do:

  • [x] Loading state
  • [x] Disabled state (ability to disable a switch, or set disabled when toggle is also loading)
  • [x] Show error message if switch fails to toggle
  • [x] A label position property that changes the orientation of the label from being displayed left or right of the toggle UI
  • [x] ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
  • [x] Keyboard interactions

xelaint avatar Oct 04 '24 18:10 xelaint

To-do ARIA considerations (https://www.w3.org/WAI/ARIA/apg/patterns/switch/):

  • [x] A visible label referenced by the value of aria-labelledby set on the element with role switch.
  • [x] aria-label set on the element with role switch.
  • [x] When on, the switch element has state aria-checked set to true.
  • [x] When off, the switch element has state aria-checked set to false.

xelaint avatar Oct 14 '24 17:10 xelaint

@gracetxgao I went ahead and made updates to the aria labels. Lmk if you have any questions.

In the basic switch example, clicking on the disabled or loading switches toggles the default switch. Clicking on the switch in switch-label-positions-example also toggles the default switch. I think you may need to add form controls to examples.

xelaint avatar Oct 28 '24 14:10 xelaint

@gracetxgao please remove the package-lock.json from this diff.

damienwebdev avatar Dec 02 '24 15:12 damienwebdev

@gracetxgao please rebase on develop since we pushed updates to linting, so there may be a few linting errors in this PR.

xelaint avatar Dec 12 '24 03:12 xelaint