### Summary
HTML `<button>` tags have a [type attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) 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](https://github.com/wmde/wikit/blob/30f9099132715239a0fe8c2fb7284d24f966f077/vue-components/src/components/Button.vue#L58-L63)
```lang=ts
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 [[ https://github.com/StarCitizenTools/mediawiki-skins-Citizen/blob/b183bb7ac70c0eb6b08e79ec38c079a8406edb5f/skinStyles/codex/codex.styles.less | 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
- [x] The prop changes are made with a temporary workaround
- [x] The change is communicated to all dev users
- [x] All instances of CdxButton use are updated
- [] Workarounds are removed