Merge pull request #1054 from PrefectHQ/date-range-select-tweaks

Enhancement: PDateRangeSelect overflow and escape to close
PrefectHQ · Dec 13, 2023 · 1d99a80 · 1d99a80
2 parents 4b59d1d + 16f8a5c
commit 1d99a80
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/DateRangePicker/PDateRangePicker.vue b/src/components/DateRangePicker/PDateRangePicker.vue
@@ -181,7 +181,7 @@
 }
 
 .p-date-range-picker__date-wrapper--selected-start { @apply
-  rounded-l-sm
+  rounded-l-default
 }
 
 .p-date-range-picker__date-wrapper--selected-start::before { @apply
@@ -193,7 +193,7 @@
 }
 
 .p-date-range-picker__date-wrapper--selected-end { @apply
-  rounded-r-sm
+  rounded-r-default
 }
 
 .p-date-range-picker__date-wrapper--in-range { @apply

diff --git a/src/components/DateRangeSelect/PDateRangeSelect.vue b/src/components/DateRangeSelect/PDateRangeSelect.vue
@@ -40,6 +40,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { useKeyDown } from '@prefecthq/vue-compositions'
   import { addDays, addSeconds, differenceInSeconds, isAfter, isBefore, secondsInDay, startOfMinute } from 'date-fns'
   import { computed, ref, watch } from 'vue'
   import PButton from '@/components/Button/PButton.vue'
@@ -67,6 +68,10 @@
     'update:modelValue': [DateRangeSelectValue],
   }>()
 
+  useKeyDown('Escape', () => {
+    popover.value?.close()
+  })
+
   const placement = [bottomLeft, topLeft, bottomRight, topRight, leftInside, rightInside]
   const popover = ref<InstanceType<typeof PPopOver>>()
   const mode = ref<'relative' | 'range'>('relative')
@@ -252,7 +257,6 @@
 
 <style>
 .p-date-range-select { @apply
-  w-full
   flex
   flex-nowrap
   items-center
@@ -277,6 +281,7 @@
 }
 
 .p-date-range-select__input { @apply
+  overflow-hidden
   grow
   shrink
   min-w-0
@@ -293,7 +298,6 @@
 .p-date-range-select__label { @apply
   shrink
   min-w-0
-  overflow-hidden
   whitespace-nowrap
 }