Commit 9a2cbf0a authored by Paul Slaughter's avatar Paul Slaughter

Merge branch '224637-milestones-list-has-an-incorrect-height-value-with-1-milestone' into 'master'

Change timeline height to a uniform value

See merge request gitlab-org/gitlab!35394
parents 139ba879 cd3954d4
......@@ -38,7 +38,6 @@ export default {
v-for="timeframeItem in timeframe"
:key="timeframeItem.id"
class="milestone-timeline-cell gl-display-table-cell gl-relative border-right border-bottom"
:class="{ 'milestone-timeline-cell-empty': !milestonesExpanded }"
data-qa-selector="milestone_timeline_cell"
>
<current-day-indicator :preset-type="presetType" :timeframe-item="timeframeItem" />
......
......@@ -115,13 +115,9 @@ export default {
</script>
<template>
<div :style="sectionContainerStyles" class="milestones-list-section gl-display-table">
<div
:style="sectionContainerStyles"
class="milestones-list-section gl-display-table"
:class="{ 'milestones-list-section-collapsed': !milestonesExpanded }"
>
<div
class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-p-3"
class="milestones-list-title gl-display-table-cell border-bottom gl-vertical-align-top position-sticky gl-px-3 gl-pt-2"
>
<div class="gl-display-flex gl-align-items-center">
<span
......
$header-item-height: 60px;
$item-height: 50px;
$milestones-collapsed-height: 38px;
$details-cell-width: 320px;
$timeline-cell-height: 32px;
$timeline-cell-width: 180px;
$border-style: 1px solid $border-gray-normal;
$roadmap-gradient-dark-gray: rgba(0, 0, 0, 0.15);
......@@ -409,21 +409,14 @@ html.group-epics-roadmap-html {
}
.milestones-list-section {
&.milestones-list-section-collapsed {
height: $milestones-collapsed-height;
}
.milestones-list-items {
.milestone-timeline-cell {
height: $timeline-cell-height;
width: $timeline-cell-width;
}
.milestone-timeline-cell-empty {
height: $milestones-collapsed-height;
}
.timeline-bar-wrapper {
height: 32px;
height: $timeline-cell-height;
color: $gray-700;
}
......
......@@ -30,24 +30,17 @@ describe('MilestoneTimelineComponent', () => {
});
};
const findMilestoneTimelineCell = () => wrapper.find('.milestone-timeline-cell');
const findMilestoneItem = () => wrapper.find(MilestoneItem);
describe.each`
props | hasCellEmpty | hasMilestoneItem
${{}} | ${false} | ${true}
${{ milestonesExpanded: false }} | ${true} | ${false}
`('with $props', ({ props, hasCellEmpty, hasMilestoneItem }) => {
props | hasMilestoneItem
${{}} | ${true}
${{ milestonesExpanded: false }} | ${false}
`('with $props', ({ props, hasMilestoneItem }) => {
beforeEach(() => {
createWrapper(props);
});
it(`renders timeline cell with empty class = ${hasCellEmpty}`, () => {
expect(findMilestoneTimelineCell().classes('milestone-timeline-cell-empty')).toBe(
hasCellEmpty,
);
});
it(`renders MilestoneItem component = ${hasMilestoneItem}`, () => {
expect(findMilestoneItem().exists()).toBe(hasMilestoneItem);
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment