Summary
HTML <button> tags have a type attribute that defaults to type="submit" if they are part of a <form>. This is often not desirable, because that causes the form to be submitted when the button is clicked unless that behavior is prevented.
Currently, that native type can't be set on Codex components, because type is already a prop that does something else.
Wikit solved this with a nativeType prop: Button.vue
interface Props { // [...] /** * The default behavior of the button * * Allowed values: `submit`, `reset`, `button` */ nativeType?: 'button' | 'submit' | 'reset'; }
It would be great if there would be a way to do something like that in Codex as well.
Implementation plan
The DST engineers decided that we would prefer to change the existing type prop to mean the native type, and add a new type called weight that has values 'normal', 'primary', 'quiet. Instead of removing type altogether and allowing the user to bind the type attribute, we will keep it as a prop so that we can clearly document the fact that the type will default to button, which is different from the native type (which defaults to submit).
This is a breaking change, so we will make the change in stages.
Stage 1: Non-breaking change
- Add a new prop, weight, which matches the current type prop.
- Change the type prop to refer to native button type, but continue accepting either types or weights for this prop.
- Inside the Button component, check to see if the value provided for type is actually a weight. if so, use that value for weight, and use the default type ('button').
- Update SearchInput to set the button type to 'submit'.
Stage 2: Communicate the change and ask devs to update
- Once this is released, both weight and type values will work for the type prop.
- At this time, we will ask people who are using CdxButton to update their code to change the type prop to weight, and to set the new type prop if they have a button that's a type other than 'button'.
Codesearch finds the following projects using CdxButton, which will need to be updated:
- WikiLambda
- GrowthExperiments
- NearbyPages (no changes needed)
- QuickSurveys
- ReadingLists
- VueTest
- Vector
- Citizen (skin, contains Codex styles)
Stage 3: Remove workarounds
- Once all instances of CdxButton use have been updated to use the new weight and type props, remove the workaround code that accepts ButtonTypes for weight, tests the workaround, and demos the workaround
Acceptance criteria
- The prop changes are made with a temporary workaround
- The change is communicated to all dev users
- All instances of CdxButton use are updated
- Workarounds are removed