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" />
  • After checking with @v_mishra for UX input, we agreed to have this version take precedence.
• 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 the borderless 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.