@insymetri/styleguide 0.1.77 → 0.1.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -117,25 +117,27 @@
|
|
|
117
117
|
</DatePicker.Trigger>
|
|
118
118
|
{/snippet}
|
|
119
119
|
</DatePicker.Input>
|
|
120
|
-
<DatePicker.
|
|
121
|
-
|
|
122
|
-
{#
|
|
123
|
-
|
|
124
|
-
<div
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
120
|
+
<DatePicker.Portal>
|
|
121
|
+
<DatePicker.Content forceMount sideOffset={8}>
|
|
122
|
+
{#snippet child({props, wrapperProps, open})}
|
|
123
|
+
{#if open}
|
|
124
|
+
<div {...wrapperProps}>
|
|
125
|
+
<div
|
|
126
|
+
{...props}
|
|
127
|
+
class="bg-surface border border-primary rounded-10 shadow-dropdown p-12 z-16 min-w-280"
|
|
128
|
+
transition:fly={{y: -4, duration: 150}}
|
|
129
|
+
>
|
|
130
|
+
<DatePicker.Calendar>
|
|
131
|
+
{#snippet children({months, weekdays})}
|
|
132
|
+
<IICalendarGrid {months} {weekdays} {placeholder} onNavigate={(d) => (placeholder = d)} />
|
|
133
|
+
{/snippet}
|
|
134
|
+
</DatePicker.Calendar>
|
|
135
|
+
</div>
|
|
134
136
|
</div>
|
|
135
|
-
|
|
136
|
-
{/
|
|
137
|
-
|
|
138
|
-
</DatePicker.
|
|
137
|
+
{/if}
|
|
138
|
+
{/snippet}
|
|
139
|
+
</DatePicker.Content>
|
|
140
|
+
</DatePicker.Portal>
|
|
139
141
|
</DatePicker.Root>
|
|
140
142
|
{#if showError && errorMessage}
|
|
141
143
|
<span class="text-tiny text-error mt-4" data-field-error>{errorMessage}</span>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IIDateInput from './IIDateInput.svelte'
|
|
3
|
+
import IIButton from '../IIButton/IIButton.svelte'
|
|
4
|
+
import type {DateValue} from '@internationalized/date'
|
|
5
|
+
|
|
6
|
+
let value = $state<DateValue>()
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<!--
|
|
10
|
+
Reproduces the apply-flow layout that previously broke the calendar popup:
|
|
11
|
+
a height-constrained `overflow-y-auto` scroll container (which also clips
|
|
12
|
+
overflow-x on the right) with the Continue button as a *later sibling* of the
|
|
13
|
+
date input. Before the DatePicker.Portal fix the calendar (min-w-280) was
|
|
14
|
+
clipped on the right/bottom by this container and painted *behind* the
|
|
15
|
+
Continue button. With the portal it escapes the container and layers above.
|
|
16
|
+
|
|
17
|
+
To verify: open the calendar and confirm it is fully visible and sits above
|
|
18
|
+
the Continue button.
|
|
19
|
+
-->
|
|
20
|
+
<div
|
|
21
|
+
data-testid="scroll-container"
|
|
22
|
+
style="display: flex; flex-direction: column; gap: 1rem; width: 300px; height: 200px; overflow-y: auto; border: 1px dashed var(--color-border-primary, #cbd5e1); border-radius: 10px; padding: 1rem;"
|
|
23
|
+
>
|
|
24
|
+
<IIDateInput bind:value label="Date of Birth" class="w-full" />
|
|
25
|
+
<IIButton class="w-full">Continue</IIButton>
|
|
26
|
+
</div>
|