Merge branch 'designs-widget-style' into 'master'

Designs: add widget styles

See merge request !120439



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Tomas Vik <tvik@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/design_management/components/list/item.vue

@@ -133,7 +133,11 @@ export default {
     <div
       class="card-body gl-p-0 gl-display-flex gl-align-items-center gl-justify-content-center gl-overflow-hidden gl-relative"
     >
-      <div v-if="icon.name" data-testid="design-event" class="gl-top-5 gl-right-5 gl-absolute">
+      <div
+        v-if="icon.name"
+        data-testid="design-event"
+        class="gl-absolute gl-top-3 gl-right-3 gl-mr-1"
+      >
         <span :title="icon.tooltip" :aria-label="icon.tooltip">
           <gl-icon
             :name="icon.name"
@@ -165,11 +169,11 @@ export default {
         />
       </gl-intersection-observer>
     </div>
-    <div class="card-footer gl-display-flex gl-w-full">
+    <div class="card-footer gl-display-flex gl-w-full gl-bg-white gl-py-3 gl-px-4">
       <div class="gl-display-flex gl-flex-direction-column str-truncated-100">
         <span
           v-gl-tooltip
-          class="gl-font-weight-bold str-truncated-100"
+          class="gl-font-weight-semibold str-truncated-100"
           data-qa-selector="design_file_name"
           :data-testid="`design-img-filename-${id}`"
           :title="filename"

app/assets/javascripts/design_management/pages/index.vue

@@ -141,6 +141,12 @@ export default {
       }
       return 'col-12';
     },
+    designContentWrapperClass() {
+      if (this.hasDesigns) {
+        return 'gl-bg-gray-10 gl-border gl-border-t-0 gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-px-5';
+      }
+      return null;
+    },
   },
   mounted() {
     if (this.$route.path === '/designs') {
@@ -364,7 +370,7 @@ export default {
     </gl-alert>
     <header
       v-if="showToolbar"
-      class="gl-display-flex gl-my-0 gl-text-gray-900"
+      class="gl-border gl-px-5 gl-py-4 gl-display-flex gl-justify-content-space-between gl-bg-white gl-rounded-base gl-rounded-bottom-left-none! gl-rounded-bottom-right-none!"
       data-testid="design-toolbar-wrapper"
     >
       <div
@@ -418,7 +424,7 @@ export default {
         </div>
       </div>
     </header>
-    <div>
+    <div :class="designContentWrapperClass">
       <gl-loading-icon v-if="isLoading" size="lg" />
       <gl-alert v-else-if="error" variant="danger" :dismissible="false">
         {{ __('An error occurred while loading designs. Please try again.') }}
@@ -483,7 +489,7 @@ export default {
             v-if="canSelectDesign(design.filename)"
             :checked="isDesignSelected(design.filename)"
             type="checkbox"
-            class="design-checkbox"
+            class="design-checkbox gl-absolute gl-top-4 gl-left-6 gl-ml-2"
             data-qa-selector="design_checkbox"
             :data-qa-design="design.filename"
             @change="changeSelectedDesigns(design.filename)"

app/assets/javascripts/work_items/components/widget_wrapper.vue

@@ -45,7 +45,7 @@ export default {
 <template>
   <div
     id="tasks"
-    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-4"
+    class="gl-rounded-base gl-border-1 gl-border-solid gl-border-gray-100 gl-bg-gray-10 gl-mt-5"
   >
     <div
       class="gl-pl-5 gl-pr-4 gl-py-4 gl-display-flex gl-justify-content-space-between gl-bg-white gl-rounded-base"

app/assets/stylesheets/page_bundles/design_management.scss

@@ -8,12 +8,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   background: transparent;
 }
 
-.design-checkbox {
-  position: absolute;
-  top: $gl-padding;
-  left: 30px;
-}
-
 .layout-page.design-detail-layout {
   max-height: 100vh;
 }

spec/frontend/design_management/components/list/__snapshots__/item_spec.js.snap

@@ -38,13 +38,13 @@ exports[`Design management list item component with notes renders item with mult
   </div>
    
   <div
-    class="card-footer gl-display-flex gl-w-full"
+    class="card-footer gl-display-flex gl-w-full gl-bg-white gl-py-3 gl-px-4"
   >
     <div
       class="gl-display-flex gl-flex-direction-column str-truncated-100"
     >
       <span
-        class="gl-font-weight-bold str-truncated-100"
+        class="gl-font-weight-semibold str-truncated-100"
         data-qa-selector="design_file_name"
         data-testid="design-img-filename-1"
         title="test"
@@ -118,13 +118,13 @@ exports[`Design management list item component with notes renders item with sing
   </div>
    
   <div
-    class="card-footer gl-display-flex gl-w-full"
+    class="card-footer gl-display-flex gl-w-full gl-bg-white gl-py-3 gl-px-4"
   >
     <div
       class="gl-display-flex gl-flex-direction-column str-truncated-100"
     >
       <span
-        class="gl-font-weight-bold str-truncated-100"
+        class="gl-font-weight-semibold str-truncated-100"
         data-qa-selector="design_file_name"
         data-testid="design-img-filename-1"
         title="test"

spec/frontend/design_management/pages/__snapshots__/index_spec.js.snap

@@ -9,7 +9,9 @@ exports[`Design management index page designs renders error 1`] = `
    
   <!---->
    
-  <div>
+  <div
+    class="gl-bg-gray-10 gl-border gl-border-t-0 gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-px-5"
+  >
     <gl-alert-stub
       dismisslabel="Dismiss"
       primarybuttonlink=""
@@ -41,7 +43,9 @@ exports[`Design management index page designs renders loading icon 1`] = `
    
   <!---->
    
-  <div>
+  <div
+    class="gl-bg-gray-10 gl-border gl-border-t-0 gl-rounded-bottom-left-base gl-rounded-bottom-right-base gl-px-5"
+  >
     <gl-loading-icon-stub
       color="dark"
       label="Loading"