Replace the deprecated Buttons with the design system Buttons

[ryanjwilke]

Cypress App

• [ ] Add @deprecated to the old button component(s).
  • [ ] Add to Button.vue
• [ ] Replace the old button component(s) with the new one.
  • [ ] Replace all instances of Button.vue and update associated tests.
• [ ] Remove any dead code and tests associated with the old button.
  • [ ] Delete Button.cy.tsx
  • [ ] Detete Button.vue

Cypress Cloud

• [ ] Add @deprecated to the old button component(s).
• [ ] Replace the old button component with the new one.
• [ ] Remove any dead code and tests associated with the old button.

Cypress Docs

• [ ] Add @deprecated to the old button component(s).
• [ ] Replace the old button component with the new one.
• [ ] Remove any dead code and tests associated with the old button.

Cypress Learn

• [ ] Add @deprecated to the old button component(s).
• [ ] Replace the old button component with the new one.
• [ ] Remove any dead code and tests associated with the old button.

[cbfrance]

I think a checklist like this will be very useful for our discussion with engineers, and we should probably try to keep it updated as template for any "component rollout."

Trying to think if there are other checklist items ...

• update any related documentation
• adjust component props
• update associated tests (not just removing old ones)
• Potentially publish updates back to the upstream component (eg. fixes discovered during an initiative)
• Onboarding to new style eg. Tailwind (or other techniques) ... other stuff?

I wonder how much time it will take to do a complete rollout. In this case, the Button component is simple but appears in a lot of places. Other components will probably have tricker implementations.

Thanks for kicking this off @ryanjwilke

[cbfrance]

Another thought, what if design system team went ahead and tagged everything as deprecated? That way the design team could clearly indicate non-conformance and it would remove that checklist item from the engineer's list.