Remove .add-border + borderless prop from CI Icon when used together
Description
Some of the CI Icons in the Merge Request page (mr_widget_pipeline.vue) have the following:
<ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
Having both borderless
and add-border
are pretty contradictory...
Solution
Remove both borderless and add border to have them simply as:
<ci-icon :status="status" :size="24" />
UI impact
Even though one would expect these two conditions to "cancel out", side by side the look slightly different:
- At the top:
<ci-icon :status="status" :size="24" />
- At the bottom:
<ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
As we want to achieve more consistency, we may want to choose only one style overall.
Technical Information
- Possible cleanup if either
.add-border
or theborderless
prop are not used anymore, they should be removed from the implementation in JS and CSS. - This MR gitlab-foss!20189 (merged) introduced a redesign that added the borderless class. This comment should be removed as it is out of date.
Edited by Miguel Rincon