Update template, add itemWidth, cleanup methods

ee/app/assets/javascripts/roadmap/components/epic_item_timeline.vue

@@ -30,6 +30,10 @@
         type: Number,
         required: true,
       },
+      itemWidth: {
+        type: Number,
+        required: true,
+      },
     },
     data() {
       return {
@@ -38,8 +42,10 @@
       };
     },
     computed: {
-      tdStyles() {
-        return `min-width: ${this.getCellWidth()}px;`;
+      itemStyles() {
+        return {
+          width: `${this.itemWidth}px`,
+        };
       },
       showTimelineBar() {
         return this.hasStartDate();
@@ -53,15 +59,14 @@
     },
     methods: {
       /**
-       * Gets cell width based on total number cells for
-       * current timeframe and shellWidth.
+       * Gets cell width based on total number months for
+       * current timeframe and shellWidth excluding details cell width.
        *
        * In case cell width is too narrow, we have fixed minimum
        * cell width (TIMELINE_CELL_MIN_WIDTH) to obey.
        */
       getCellWidth() {
-        const minWidth =
-          Math.ceil((this.shellWidth - EPIC_DETAILS_CELL_WIDTH) / this.timeframe.length);
+        const minWidth = (this.shellWidth - EPIC_DETAILS_CELL_WIDTH) / this.timeframe.length;
 
         return Math.max(minWidth, TIMELINE_CELL_MIN_WIDTH);
       },
@@ -229,7 +234,7 @@
         }
 
         // Reduce any offset from total width and round it off.
-        return Math.round(timelineBarWidth - offsetEnd);
+        return timelineBarWidth - offsetEnd;
       },
       /**
        * Renders timeline bar only if current
@@ -246,9 +251,9 @@
 </script>
 
 <template>
-  <td
+  <span
     class="epic-timeline-cell"
-    :style="tdStyles"
+    :style="itemStyles"
   >
     <div class="timeline-bar-wrapper">
       <a
@@ -265,5 +270,5 @@
       >
       </a>
     </div>
-  </td>
+  </span>
 </template>

spec/javascripts/roadmap/components/epic_item_timeline_spec.js

@@ -4,13 +4,14 @@ import epicItemTimelineComponent from 'ee/roadmap/components/epic_item_timeline.
 import { TIMELINE_CELL_MIN_WIDTH, TIMELINE_END_OFFSET_FULL, TIMELINE_END_OFFSET_HALF } from 'ee/roadmap/constants';
 
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { mockTimeframe, mockEpic, mockShellWidth } from '../mock_data';
+import { mockTimeframe, mockEpic, mockShellWidth, mockItemWidth } from '../mock_data';
 
 const createComponent = ({
   timeframe = mockTimeframe,
   timeframeItem = mockTimeframe[0],
   epic = mockEpic,
   shellWidth = mockShellWidth,
+  itemWidth = mockItemWidth,
 }) => {
   const Component = Vue.extend(epicItemTimelineComponent);
 
@@ -19,6 +20,7 @@ const createComponent = ({
     timeframeItem,
     epic,
     shellWidth,
+    itemWidth,
   });
 };
 
@@ -38,10 +40,10 @@ describe('EpicItemTimelineComponent', () => {
   });
 
   describe('computed', () => {
-    describe('tdStyles', () => {
+    describe('itemStyles', () => {
       it('returns CSS min-width based on getCellWidth() method', () => {
         vm = createComponent({});
-        expect(vm.tdStyles).toBe('min-width: 280px;');
+        expect(vm.itemStyles.width).toBe(`${mockItemWidth}px`);
       });
     });
   });
@@ -224,7 +226,7 @@ describe('EpicItemTimelineComponent', () => {
 
     it('renders component container element with `min-width` property applied via style attribute', () => {
       vm = createComponent({});
-      expect(vm.$el.getAttribute('style')).toBe('min-width: 280px;');
+      expect(vm.$el.getAttribute('style')).toBe(`width: ${mockItemWidth}px;`);
     });
 
     it('renders timeline bar element with class `timeline-bar` and class `timeline-bar-wrapper` as container element', () => {