Merge pull request #1268 from PrefectHQ/select-range

Update SelectRangeDemo & Clear Icon Radius
PrefectHQ · May 3, 2024 · 66857a8 · 66857a8
2 parents 53ceb54 + d646fb6
commit 66857a8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/demo/sections/components/DateRangeSelect.vue b/demo/sections/components/DateRangeSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <ComponentPage title="Date Range Select" :demos="[{ title: 'Date Range Select' }, { title: 'Date Range Selesct' }]">
+  <ComponentPage title="Date Range Select" :demos="[{ title: 'Date Range Select' }, { title: 'Date Range Select Small' }]">
     <template #description>
       <DemoState v-model:state="exampleState" v-model:disabled="disabled" />
       <p-checkbox v-model="clearable" :disabled="disabled" label="Clearable" />
@@ -13,7 +13,7 @@
         </p-code>
       </p-content>
     </template>
-    <template #date-range-selesct>
+    <template #date-range-select-small>
       <p-content>
         <p-date-range-select v-model="value" v-bind="{ min, max, clearable, disabled }" size="sm">
           <p-code inline>

diff --git a/src/components/DateRangeSelect/PDateRangeSelect.vue b/src/components/DateRangeSelect/PDateRangeSelect.vue
@@ -2,7 +2,7 @@
   <PPopOver ref="popover" class="p-date-range-select" :placement="placement" auto-close>
     <template #target="{ open }">
       <PButton class="p-date-range-select__button" icon="ArrowSmallLeftIcon" :disabled="previousDisabled" :size="size" @click="previous" />
-      <PButton class="p-date-range-select__button p-date-range-select__input" :class="button({ size })" :disabled="disabled" :size="size" @click="open">
+      <PButton class="p-date-range-select__button  p-date-range-select__input" :class="button({ size })" :disabled="disabled" :size="size" @click="open">
         <div class="p-date-range-select__content">
           <PIcon icon="CalendarIcon" class="shrink-0" />
           <span class="p-date-range-select__label" :class="classes.label">
@@ -13,7 +13,7 @@
       </PButton>
 
       <template v-if="modelValue && clearable && !disabled">
-        <PButton class="p-date-range-select__button" icon="XCircleIcon" :size="size" @click="clear" />
+        <PButton class="p-date-range-select__button p-date-range-select__button--clear" icon="XCircleIcon" :size="size" @click="clear" />
       </template>
       <PButton class="p-date-range-select__button" icon="ArrowSmallRightIcon" :disabled="nextDisabled" :size="size" @click="next" />
     </template>
@@ -244,10 +244,13 @@
 }
 
 .p-date-range-select__button { @apply
-
   -ml-[1px]
 }
 
+.p-date-range-select__button--clear { @apply
+  rounded-none
+}
+
 .p-date-range-select__button:hover { @apply
   z-50
 }