Merge branch 'nl-card-border' into 'master'

Add border to board cards

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/165567



Merged-by: Florie Guibert <fguibert@gitlab.com>
Approved-by: Nick Brandt <nbrandt@gitlab.com>
Approved-by: Florie Guibert <fguibert@gitlab.com>
Reviewed-by: Nick Leonard <nleonard@gitlab.com>
Co-authored-by: Nick Leonard <nleonard@gitlab.com>

app/assets/javascripts/boards/components/board_card.vue

@@ -76,7 +76,7 @@ export default {
       return this.item.color;
     },
     cardStyle() {
-      return this.itemColor ? { borderColor: this.itemColor } : '';
+      return this.itemColor ? { borderLeftColor: this.itemColor } : '';
     },
     formattedItem() {
       return {
@@ -145,7 +145,7 @@ export default {
         'is-disabled': isDisabled,
         'is-active gl-bg-blue-50': isActive,
         'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
-        'gl-border-4 gl-pl-4 gl-border-l-solid': itemColor,
+        'gl-border-l-4 gl-pl-4 gl-border-l-solid': itemColor,
       },
     ]"
     :index="index"
@@ -154,7 +154,7 @@ export default {
     :data-item-path="item.referencePath"
     :style="cardStyle"
     data-testid="board-card"
-    class="board-card gl-relative gl-mb-3 gl-rounded-base gl-p-4 gl-leading-normal"
+    class="board-card gl-border gl-relative gl-mb-3 gl-rounded-base gl-p-4 gl-leading-normal"
     @click="toggleIssue($event)"
   >
     <board-card-inner

app/assets/stylesheets/page_bundles/boards.scss

@@ -107,7 +107,6 @@
 
 .board-card {
   background: var(--gl-background-color-default);
-  box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1);
 
   &:last-child {
     margin-bottom: 0;

spec/frontend/boards/components/board_card_spec.js

@@ -198,9 +198,9 @@ describe('Board card', () => {
       });
 
       expect(wrapper.classes()).toEqual(
-        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-4']),
+        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-l-4']),
       );
-      expect(wrapper.attributes('style')).toContain(`border-color: ${DEFAULT_COLOR}`);
+      expect(wrapper.attributes('style')).toContain(`border-left-color: ${DEFAULT_COLOR}`);
     });
 
     it('does not render border if color is not present', () => {
@@ -212,7 +212,7 @@ describe('Board card', () => {
       });
 
       expect(wrapper.classes()).not.toEqual(
-        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-4']),
+        expect.arrayContaining(['gl-pl-4', 'gl-border-l-solid', 'gl-border-l-4']),
       );
       expect(wrapper.attributes('style')).toBe(undefined);
     });