Merge pull request #444 from bethinkpl/IT-5861_fix_datepicker_open_icon

bethinkpl · Nov 25, 2024 · bb510e6 · bb510e6
2 parents e553dff + 9523c3f
commit bb510e6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts b/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts
@@ -98,7 +98,7 @@ const args = {
 	icon: 'FA_CALENDAR_DAY',
 	isIconHiddenOnMobile: false,
 	calendarPosition: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM,
-	errorMessage: '',
+	errorMessage: null,
 	state: DATE_PICKER_STATES.DEFAULT,
 	color: DATE_PICKER_COLORS.NEUTRAL,
 	disableDates: [new Date(now + oneDayMili * 2).toISOString().slice(0, 10)],

diff --git a/lib/js/components/DatePickers/DatePicker/DatePicker.vue b/lib/js/components/DatePickers/DatePicker/DatePicker.vue
@@ -45,7 +45,9 @@
 			@click="toggle"
 		/>
 
-		<span v-if="errorMessage" class="ds-datePicker__errorMessage"> {{ errorMessage }} </span>
+		<span v-if="showErrorMessage" class="ds-datePicker__errorMessage">
+			{{ errorMessage }}
+		</span>
 		<input ref="flatpickrInputRef" class="ds-datePicker__hiddenInput" />
 	</div>
 </template>
@@ -113,6 +115,7 @@
 		@include info-s-default-regular;
 
 		color: $color-danger-text;
+		height: $space-xs;
 	}
 }
 </style>
@@ -185,7 +188,7 @@ export default defineComponent({
 		},
 		errorMessage: {
 			type: String,
-			default: '',
+			default: null,
 		},
 		state: {
 			type: String as PropType<DatePickerStates>,
@@ -275,7 +278,10 @@ export default defineComponent({
 			if (!this.icon) {
 				return null;
 			}
-			return this.isOpen.value ? ICONS.FA_CHEVRON_UP : this.icon;
+			return this.isOpen ? ICONS.FA_CHEVRON_UP : this.icon;
+		},
+		showErrorMessage() {
+			return this.errorMessage !== null;
 		},
 	},
 	async mounted() {