Replace <gl-deprecated-button> with <gl-button> in app/assets/javascripts/jobs/components/job_log_controllers.vue
Note - These are the scroll up and scroll down buttons in a job header:
- Even though there is going to be a limited log, you can go into DevTools, copy one of the HTML lines in the log, then hit paste numerous times to enlargen the log to enable the scroll buttons. This is certainly a hack, but does enable these buttons so you can test them.
- Currently, an
<icon>
exists inside the button, but there is a newicon="scroll_up"
property you can add to the newgl-button
itself.
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 Jarek Ostrowski