[patch] Making sure that the popover container is ready #5005
Jialeclchromatic.yml
on: pull_request
chromatic-deployment
2m 3s
storybook-tests
3m 12s
Annotations
5 errors
|
storybook-tests
Process completed with exit code 1.
|
|
src/dialog/Dialog.stories.tsx > Date Input Dialog:
packages/lib/src/dialog/Dialog.stories.tsx#L430
TestingLibraryElementError:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/dialog--date-input-dialog&addonPanel=storybook/interactions/panel
Unable to find role="combobox"
Ignored nodes: comments, script, style
<body>
<div
class="sb-preparing-story sb-wrapper"
>
<div
class="sb-loader"
/>
</div>
<div
class="sb-preparing-docs sb-wrapper"
>
<div
class="sb-previewBlock"
>
<div
class="sb-previewBlock_header"
>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
<div
class="sb-previewBlock_icon"
/>
</div>
<div
class="sb-previewBlock_body"
>
<div
class="sb-loader"
/>
</div>
</div>
<table
aria-hidden="true"
class="sb-argstableBlock"
>
<thead
class="sb-argstableBlock-head"
>
<tr>
<th>
<span>
Name
</span>
</th>
<th>
<span>
Description
</span>
</th>
<th>
<span>
Default
</span>
</th>
<th>
<span>
Control
</span>
</th>
</tr>
</thead>
<tbody
class="sb-argstableBlock-body"
>
<tr>
<td>
<span>
propertyName
</span>
<span
title="Required"
>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
<tr>
<td>
<span>
propertyName
</span>
<span>
*
</span>
</td>
<td>
<div>
<span>
This is a short description
</span>
</div>
<div
class="sb-argstableBlock-summary"
>
<div>
<span
class="sb-argstableBlock-code"
>
summary
</span>
</div>
</div>
</td>
<td>
<div>
<span
class="sb-argstableBlock-code"
>
defaultValue
</span>
</div>
|
|
src/date-input/DateInput.stories.tsx > Date Picker States:
packages/lib/src/date-input/DateInput.stories.tsx#L250
TestingLibraryElementError:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--date-picker-states&addonPanel=storybook/interactions/panel
Unable to find role="combobox"
Ignored nodes: comments, script, style
<div>
<div
class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0"
>
<h4
class="css-1bd2r6e-SectionTitle epwpitw0"
>
Show date picker over another element with a certain z-index
</h4>
<div
style="display: flex; flex-direction: column; gap: 20px; height: 200px; width: 500px; margin-bottom: 250px; padding: 20px; border: 1px solid black; border-radius: 4px; overflow: auto; z-index: 130; position: relative;"
>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-rjiscs-Label e13qgkf43"
>
From
</label>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-1iorwek-TextInput-inputStylesByState e142rxi2"
>
<input
aria-invalid="false"
aria-label="Date input"
aria-required="true"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:r2k:"
name=""
placeholder=""
tabindex="0"
type="text"
value="01-12-1995"
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
aria-label="Select date"
class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72"
color="transparent"
data-state="closed"
role="button"
shape="square"
tabindex="0"
type="button"
>
<div
class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71"
>
<div
class="css-13mo10g-IconContainer ejuqjh70"
color="transparent"
>
<span
aria-hidden="true"
class="css-1n52w0c-IconContainer e1cuupo30"
role="img"
/>
</div>
</div>
</button>
</div>
</div>
</div>
<div
id="input-:r2k:-portal"
style="position: absolute;"
/>
</div>
<div
id="date-picker-:r28:-portal"
style="position: absolute;"
/>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-rjiscs-Label e13qgkf43"
>
To
</label>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-1iorwek-TextInput-inputStylesByState e142rxi2"
>
<input
aria-invalid="false"
aria-label="Date input"
aria-required="true"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:r2m:"
name=""
placeholder=""
tabindex="0"
type="text"
value=""
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
aria-label="Select date"
class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72"
color="transparent"
data-state="closed"
role="button"
shape="square"
tabindex="0"
type="button"
>
<div
class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71"
>
<div
class="css-13mo10g-IconContainer ejuqjh70"
|
|
src/date-input/DateInput.stories.tsx > Year Picker Chromatic:
packages/lib/src/date-input/DateInput.stories.tsx#L241
TestingLibraryElementError:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--year-picker-chromatic&addonPanel=storybook/interactions/panel
Unable to find role="combobox"
Ignored nodes: comments, script, style
<div>
<div
class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0"
>
<h4
class="css-1bd2r6e-SectionTitle epwpitw0"
>
Year picker
</h4>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-rjiscs-Label e13qgkf43"
>
Date input
</label>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-1iorwek-TextInput-inputStylesByState e142rxi2"
>
<input
aria-invalid="false"
aria-label="Date input"
aria-required="true"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:r26:"
name=""
placeholder=""
tabindex="0"
type="text"
value="06-04-1905"
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
aria-label="Select date"
class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72"
color="transparent"
data-state="closed"
role="button"
shape="square"
tabindex="0"
type="button"
>
<div
class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71"
>
<div
class="css-13mo10g-IconContainer ejuqjh70"
color="transparent"
>
<span
aria-hidden="true"
class="css-1n52w0c-IconContainer e1cuupo30"
role="img"
/>
</div>
</div>
</button>
</div>
</div>
</div>
<div
id="input-:r26:-portal"
style="position: absolute;"
/>
</div>
<div
id="date-picker-:r24:-portal"
style="position: absolute;"
/>
</div>
</div>
Ignored nodes: comments, script, style
<div>
<div
class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0"
>
<h4
class="css-1bd2r6e-SectionTitle epwpitw0"
>
Year picker
</h4>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-rjiscs-Label e13qgkf43"
>
Date input
</label>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-1iorwek-TextInput-inputStylesByState e142rxi2"
>
<input
aria-invalid="false"
aria-label="Date input"
aria-required="true"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:r26:"
name=""
placeholder=""
tabindex="0"
type="text"
value="06-04-1905"
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
aria-label="Select date"
class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72"
color="transparent"
data-state="closed"
role="button"
shape="square"
tabindex="0"
type="button"
>
<div
class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71"
>
<div
class="css-13mo10g-IconContainer ejuqjh70"
color="transparent"
>
<span
aria-hidden="true"
class="css-1n52w0c-IconContainer e1cuupo30"
role="img"
/>
</div>
|
|
src/date-input/DateInput.stories.tsx > Chromatic:
packages/lib/src/date-input/DateInput.stories.tsx#L229
TestingLibraryElementError:
Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--chromatic&addonPanel=storybook/interactions/panel
Unable to find role="combobox"
Ignored nodes: comments, script, style
<div>
<div
class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0"
>
<h4
class="css-1bd2r6e-SectionTitle epwpitw0"
>
Year picker
</h4>
<div
class="css-11oxx33-Container e1rnzm9u0"
>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-rjiscs-Label e13qgkf43"
>
Date input
</label>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-oah2gi-TextInput-inputStylesByState e142rxi2"
>
<input
aria-errormessage="error-input-:ri:"
aria-invalid="true"
aria-label="Date input"
aria-required="true"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:ri:"
name=""
placeholder=""
tabindex="0"
type="text"
value="06-04-1905"
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
aria-label="Select date"
class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72"
color="transparent"
data-state="closed"
role="button"
shape="square"
tabindex="0"
type="button"
>
<div
class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71"
>
<div
class="css-13mo10g-IconContainer ejuqjh70"
color="transparent"
>
<span
aria-hidden="true"
class="css-1n52w0c-IconContainer e1cuupo30"
role="img"
/>
</div>
</div>
</button>
</div>
</div>
<div
aria-live="assertive"
class="css-1q3cx1e-ErrorMessageContainer e1sr2iqb0"
id="error-input-:ri:"
role="alert"
>
<span
aria-hidden="true"
class="css-h813lc-IconContainer e1cuupo30"
role="img"
/>
Error message
</div>
</div>
<div
id="input-:ri:-portal"
style="position: absolute;"
/>
</div>
<div
id="date-picker-:r0:-portal"
style="position: absolute;"
/>
</div>
</div>
<div
class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0"
>
<h4
class="css-1bd2r6e-SectionTitle epwpitw0"
>
Complete date input
</h4>
<div
class="css-bdeehe-DateInputContainer e13qgkf44"
>
<label
class="css-tpnb1h-Label e13qgkf43"
>
Date input
<span
class="css-qsrw3q-OptionalLabel e13qgkf42"
>
(Optional)
</span>
</label>
<span
class="css-11o6zss-HelperText e13qgkf41"
>
Help message
</span>
<div
class="css-d83qck-TextInputContainer e142rxi3"
>
<div
class="css-1iorwek-TextInput-inputStylesByState e142rxi2"
>
<input
aria-invalid="false"
aria-label="Date input"
aria-required="false"
autocomplete="nope"
class="css-1ssiudq-Input e142rxi1"
id="input-:rk:"
name=""
placeholder="DD/MM/YY"
tabindex="0"
type="text"
value=""
/>
<div
class="css-kn6vjj-Flex e1ruen4x0"
>
<button
|