fix(kdatetimepicker): fix wrapping in timepicker display (#2013)

* fix(kdatetimepicker): fix wrapping in timepicker display * fix: minor fixes
Kong · Feb 13, 2024 · 7c5a2cd · 7c5a2cd
1 parent 7ddf5d4
commit 7c5a2cd
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 59 deletions.
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
@@ -173,8 +173,8 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 
 #### Structure
 
-* `timepicker-input` class has been changed to `datetime-picker-input`
-* `k-datetime-picker-input` `data-testid` attribute has been changed to `datetime-picker-input`
+* `timepicker-input` class has been changed to `datetime-picker-trigger`
+* `k-datetime-picker-input` `data-testid` attribute has been changed to `datetime-picker-trigger`
 * `timepicker-display` class has been changed to `datetime-picker-display`
 * `k-datetime-picker-display` `data-testid` attribute has been changed to `datetime-picker-display`
 * `k-datetime-picker-toggle` `data-testid` attribute has been changed to `datetime-picker-toggle`

diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
@@ -112,6 +112,7 @@
         <KDateTimePicker
           mode="dateTime"
           placeholder="Select a date and time"
+          range
           width="300"
         />
       </SandboxSectionComponent>
@@ -121,6 +122,29 @@
           mode="dateTime"
         />
       </SandboxSectionComponent>
+
+      <!-- Usage -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Usage"
+      />
+      <SandboxSectionComponent
+        description="When range is selected, in narrow spaces KDateTimePicker should wrap to next line."
+        title="Wrapping to next line"
+      >
+        <div class="between-container">
+          <div class="full-width-sibling">
+            <p>Full-width sibling</p>
+          </div>
+          <div>
+            <KDateTimePicker
+              mode="dateTime"
+              popover-placement="bottomEnd"
+              range
+            />
+          </div>
+        </div>
+      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>
@@ -133,3 +157,28 @@ import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
 const maxDate = new Date()
 maxDate.setMonth(new Date().getMonth() + 3)
 </script>
+
+<style lang="scss" scoped>
+.kdatetimepicker-sandbox {
+  .between-container {
+    display: flex;
+    gap: $kui-space-50;
+    justify-content: space-between;
+
+    .full-width-sibling {
+      align-items: center;
+      background-color: $kui-color-background-danger-weaker;
+      border-radius: $kui-border-radius-20;
+      display: flex;
+      overflow: auto;
+      padding: $kui-space-40;
+      resize: horizontal;
+      width: 100%;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/KDateTimePicker/KDateTimePicker.cy.ts b/src/components/KDateTimePicker/KDateTimePicker.cy.ts
@@ -54,7 +54,7 @@ const emptyTimeRange = {
   timePeriodKey: null,
 }
 
-const timepickerInput = 'datetime-picker-input'
+const timepickerInput = 'datetime-picker-trigger'
 const timepickerDisplay = 'datetime-picker-display'
 const submitButton = 'datetime-picker-submit'
 const clearButton = 'datetime-picker-clear'

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -6,38 +6,40 @@
     :style="widthStyle"
   >
     <KPop
+      :disabled="disabled"
       hide-caret
       :hide-popover="state.hidePopover"
       :placement="popoverPlacement"
       position-fixed
       width="auto"
       @opened="state.hidePopover = false"
     >
-      <div class="datetime-picker-input-wrapper">
-        <span
-          class="datetime-picker-display"
-          :class="{ 'has-icon': icon, 'disabled': disabled }"
-          data-testid="datetime-picker-display"
-          v-html="state.abbreviatedDisplay"
-        />
-
-        <KInput
-          class="datetime-picker-input"
-          data-testid="datetime-picker-input"
-          :disabled="disabled"
-          readonly
+      <div
+        class="datetime-picker-trigger-wrapper"
+        :class="{ 'disabled': disabled }"
+      >
+        <div
+          class="datetime-picker-trigger"
+          :class="{ 'disabled': disabled }"
+          data-testid="datetime-picker-trigger"
+          role="button"
           :style="widthStyle"
+          :tabindex="disabled ? -1 : 0"
         >
-          <template
-            v-if="icon"
-            #before
-          >
-            <CalIcon
-              class="calendar-icon"
-              decorative
-            />
-          </template>
-        </KInput>
+          <span
+            class="datetime-picker-display"
+            :class="{ 'has-icon': icon, 'disabled': disabled }"
+            data-testid="datetime-picker-display"
+            v-html="state.abbreviatedDisplay"
+          />
+        </div>
+        <CalIcon
+          v-if="icon"
+          class="calendar-icon"
+          :color="KUI_COLOR_TEXT_NEUTRAL"
+          decorative
+          :size="KUI_ICON_SIZE_40"
+        />
       </div>
 
       <template
@@ -142,7 +144,6 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { format } from 'date-fns'
 import { formatInTimeZone } from 'date-fns-tz'
 import { DatePicker } from 'v-calendar'
-import KInput from '@/components/KInput/KInput.vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KPop from '@/components/KPop/KPop.vue'
 import KSegmentedControl from '@/components/KSegmentedControl/KSegmentedControl.vue'
@@ -151,6 +152,7 @@ import { ModeArray, ModeArrayCustom, ModeArrayRelative, ModeDateOnly, Timepicker
 import type { DateTimePickerState, TimeFrameSection, TimePeriod, TimeRange, Mode, CSSProperties, DatePickerModel, ButtonAppearance, PopPlacements } from '@/types'
 import { CalIcon } from '@kong/icons'
 import useUtilities from '@/composables/useUtilities'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 
 const { getSizeFromString } = useUtilities()
 
@@ -584,51 +586,58 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
     }
   }
 
-  .datetime-picker-input-wrapper {
+  .datetime-picker-trigger-wrapper {
     position: relative;
 
-    .datetime-picker-input {
-      :deep(.k-input:read-only) {
-        @include inputDefaults;
-        cursor: pointer;
+    .datetime-picker-trigger {
+      @include inputDefaults;
 
-        &:hover {
-          @include inputHover;
-        }
+      cursor: pointer;
+      display: inline-flex;
+
+      &:hover {
+        @include inputHover;
+      }
+
+      &:focus {
+        @include inputFocus;
+      }
+
+      &.disabled {
+        @include inputDisabled;
+        pointer-events: none;
 
-        &:focus {
-          @include inputFocus;
+        .datetime-picker-display {
+          color: var(--kui-color-text-disabled, $kui-color-text-disabled) !important;
         }
+      }
+
+      .datetime-picker-display {
+        @include inputText;
+
+        display: flex;
+        flex-wrap: wrap;
+        pointer-events: none;
+        white-space: nowrap;
 
-        &:disabled {
-          @include inputDisabled;
+        &.has-icon {
+          // icon size + icon spacing
+          /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+          margin-left: calc(var(--kui-icon-size-40, $kui-icon-size-40) + var(--kui-space-40, $kui-space-40));
         }
       }
     }
 
-    .datetime-picker-display {
-      @include inputText;
-
-      display: inline-flex;
-      left: 0;
-      margin-left: $kDateTimePickerInputPaddingX;
-      margin-top: $kDateTimePickerInputPaddingY;
-      max-width: 90%;
+    .calendar-icon {
+      left: $kDateTimePickerInputPaddingX;
+      margin-top: 2px; // align icon vertically with input text
       pointer-events: none;
       position: absolute;
-      top: 0;
-      z-index: 1;
-
-      &.has-icon {
-        // default spacing + icon size + icon spacing
-        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-        margin-left: calc($kDateTimePickerInputPaddingX + var(--kui-icon-size-40, $kui-icon-size-40) + var(--kui-space-40, $kui-space-40));
-        max-width: 80%;
-      }
+      top: $kDateTimePickerInputPaddingY;
+    }
 
-      &.disabled {
-        color: var(--kui-color-text-disabled, $kui-color-text-disabled) !important;
-      }
+    &.disabled {
+      cursor: not-allowed;
     }
   }