p5.js-web-editor
p5.js-web-editor copied to clipboard
Create `OnOffToggle` component for preferences.
This is purely a code cleanup, there is no change to UI or behavior. It extracts a lot of repetitive code in the Preferences component into a new component OnOffToggle.
The component is inspired by @ghalestrilo's optionsOnOff code for the mobile preferences (which will be going away, in favor of a single responsive component).
It will probably evolve more as I refactor other parts of the Preferences.
Changes:
- Create a component
OnOffTogglefor the clickable "On" and "Off" labels. - Write unit tests.
- Use the
OnOffToggleinPreferencesfor Autosave, Autoclose Brackets and Quotes, etc.
I have verified that this pull request:
- [x] has no linting errors (
npm run lint) - [x] has no test errors (
npm run test) - [x] is from a uniquely-named feature branch and is up to date with the
developbranch. - [ ] is descriptively named and links to an issue number, i.e.
Fixes #123
Maybe I should rework the PreferencePicker instead of making a whole new component? 🤷
Possibly translationKey="LineNumbers" is a bit too "tricky" and it would be be better to be more explicit, even though it's more verbose. I can change the syntax to ariaLabelOn={t('Preferences.LineNumbersOnARIA')} ariaLabelOff={t('Preferences.LineNumbersOffARIA')}.