Replace <gl-deprecated-button> with <gl-button> in app/assets/javascripts/prometheus_alerts/components/reset_key.vue

Instructions

  • Using the migration script, or by manually editing the files:
    • Replace each instance of <gl-deprecated-button> with <gl-button>.
    • Convert each variant attribute to the new variant/category combination using the variant mapping guide.
  • Take before/after screenshots of each button in the file, and upload them in the Merge Request description.
  • Request review from a designer within your stage group. If you are outside of a stage group, ping a UX foundations member.

Variant mapping guide

  • variant="primary" -> variant="info" category="primary"
  • variant="secondary" -> remove attribute
  • variant="dark" -> remove attribute
  • variant="light" -> remove attribute
  • variant="link" -> keep attribute
  • variant="success" -> variant="success" category="primary"
  • variant="outline-success" -> variant="success" category="secondary"
  • variant="info" -> variant="info" category="primary"
  • variant="outline-info" -> variant="info" category="secondary"
  • variant="warning" -> variant="warning" category="primary"
  • variant="outline-warning" -> variant="warning" category="secondary"
  • variant="danger" -> variant="danger" category="primary"
  • variant="outline-danger" -> variant="danger" category="secondary"

Examples

- <gl-deprecated-button variant="outline-success" />
+ <gl-button variant="success" category="secondary" />
- <gl-deprecated-button variant="primary" />
+ <gl-button />
- <gl-deprecated-button variant="secondary" />
+ <gl-button />
- <gl-deprecated-button variant="success" />
+ <gl-button variant="success" category="primary" />
Edited by Taurie Davis