Fail
Unable to find role="button" and name "Batch accept"
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m3b1s-Svg e82dnwa0"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1t7464v"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-14rfowm"
>
<div
class="css-u71t7w"
>
<svg
alt="Chrome"
aria-label="Chrome"
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
fill="#DB4437"
/>
<path
d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
fill="#0F9D58"
/>
<path
d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
fill="#FFCD40"
/>
<path
d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
fill="url(#paint0_radial_466_21161)"
/>
<path
d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
fill="url(#paint1_radial_466_21161)"
/>
<path
d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
fill="url(#paint2_radial_466_21161)"
/>
<ellipse
cx="8.01347"
cy="8.00358"
fill="#F1F1F1"
rx="3.36699"
ry="3.36699"
/>
<ellipse
cx="8.01367"
cy="8.00354"
fill="#4285F4"
rx="2.69361"
ry="2.6936"
/>
<defs>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
gradientUnits="userSpaceOnUse"
id="paint0_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
gradientUnits="userSpaceOnUse"
id="paint1_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
gradientUnits="userSpaceOnUse"
id="paint2_radial_466_21161"
r="1"
>
<stop
stop-color="#263238"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#263238"
stop-opacity="0.01"
/>
</radialgradient>
</defs>
</svg>
<div
class="css-1t7464v"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<button
class="css-c3emee"
data-testid="button-diff-visible"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-ybd41d"
/>
<a
class="css-1fy1yvr"
href="https://www.chromatic.com/test?appId=123&id=11"
target="_blank"
>
<img
alt="Snapshot for the 'Primary' story of the 'Button' component"
src="/B.png"
/>
<img
alt=""
src="/B-comparison.png"
style="max-width: 100%;"
/>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
/>
<path
d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
/>
</svg>
</a>
</div>
Ignored nodes: comments, script, style
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m3b1s-Svg e82dnwa0"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1t7464v"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-14rfowm"
>
<div
class="css-u71t7w"
>
<svg
alt="Chrome"
aria-label="Chrome"
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
fill="#DB4437"
/>
<path
d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
fill="#0F9D58"
/>
<path
d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
fill="#FFCD40"
/>
<path
d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
fill="url(#paint0_radial_466_21161)"
/>
<path
d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
fill="url(#paint1_radial_466_21161)"
/>
<path
d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
fill="url(#paint2_radial_466_21161)"
/>
<ellipse
cx="8.01347"
cy="8.00358"
fill="#F1F1F1"
rx="3.36699"
ry="3.36699"
/>
<ellipse
cx="8.01367"
cy="8.00354"
fill="#4285F4"
rx="2.69361"
ry="2.6936"
/>
<defs>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
gradientUnits="userSpaceOnUse"
id="paint0_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
gradientUnits="userSpaceOnUse"
id="paint1_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
gradientUnits="userSpaceOnUse"
id="paint2_radial_466_21161"
r="1"
>
<stop
stop-color="#263238"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#263238"
stop-opacity="0.01"
/>
</radialgradient>
</defs>
</svg>
<div
class="css-1t7464v"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<button
class="css-c3emee"
data-testid="button-diff-visible"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-ybd41d"
/>
<a
class="css-1fy1yvr"
href="https://www.chromatic.com/test?appId=123&id=11"
target="_blank"
>
<img
alt="Snapshot for the 'Primary' story of the 'Button' component"
src="/B.png"
/>
<img
alt=""
src="/B-comparison.png"
style="max-width: 100%;"
/>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
/>
<path
d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
/>
</svg>
</a>
</div>View in Storybook
Chrome 105880x640
Linux Linux Ubuntu 20.04.4
f2c2bf on norbert/ap-3626-add-unaccept-button
Unable to find role="button" and name "Batch accept"
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-1cq2c0c"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m3b1s-Svg e82dnwa0"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1q5ehcp"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-14rfowm"
>
<div
class="css-u71t7w"
>
<svg
alt="Chrome"
aria-label="Chrome"
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
fill="#DB4437"
/>
<path
d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
fill="#0F9D58"
/>
<path
d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
fill="#FFCD40"
/>
<path
d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
fill="url(#paint0_radial_466_21161)"
/>
<path
d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
fill="url(#paint1_radial_466_21161)"
/>
<path
d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
fill="url(#paint2_radial_466_21161)"
/>
<ellipse
cx="8.01347"
cy="8.00358"
fill="#F1F1F1"
rx="3.36699"
ry="3.36699"
/>
<ellipse
cx="8.01367"
cy="8.00354"
fill="#4285F4"
rx="2.69361"
ry="2.6936"
/>
<defs>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
gradientUnits="userSpaceOnUse"
id="paint0_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
gradientUnits="userSpaceOnUse"
id="paint1_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
gradientUnits="userSpaceOnUse"
id="paint2_radial_466_21161"
r="1"
>
<stop
stop-color="#263238"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#263238"
stop-opacity="0.01"
/>
</radialgradient>
</defs>
</svg>
<div
class="css-1q5ehcp"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<button
class="css-kc49n4"
data-testid="button-diff-visible"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1ml4jsj"
/>
<a
class="css-1fy1yvr"
href="https://www.chromatic.com/test?appId=123&id=11"
target="_blank"
>
<img
alt="Snapshot for the 'Primary' story of the 'Button' component"
loading="eager"
src="/B.png"
/>
<img
alt=""
loading="eager"
src="/B-comparison.png"
style="max-width: 100%;"
/>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
/>
<path
d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
/>
</svg>
</a>
</div>
Ignored nodes: comments, script, style
<div
class="css-tb8xck"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-1cq2c0c"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m3b1s-Svg e82dnwa0"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M8.41 1.59a2 2 0 0 0-2.82 0l-4 4a2 2 0 0 0 0 2.82l4 4a2 2 0 0 0 2.82 0l4-4a2 2 0 0 0 0-2.82l-4-4Zm.71-.71a3 3 0 0 0-4.24 0l-4 4a3 3 0 0 0 0 4.24l4 4a3 3 0 0 0 4.24 0l4-4a3 3 0 0 0 0-4.24l-4-4Z"
fill-rule="evenodd"
/>
</svg>
<div
class="css-1q5ehcp"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-14rfowm"
>
<div
class="css-u71t7w"
>
<svg
alt="Chrome"
aria-label="Chrome"
fill="none"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
fill="#DB4437"
/>
<path
d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
fill="#0F9D58"
/>
<path
d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
fill="#FFCD40"
/>
<path
d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
fill="url(#paint0_radial_466_21161)"
/>
<path
d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
fill="url(#paint1_radial_466_21161)"
/>
<path
d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
fill="url(#paint2_radial_466_21161)"
/>
<ellipse
cx="8.01347"
cy="8.00358"
fill="#F1F1F1"
rx="3.36699"
ry="3.36699"
/>
<ellipse
cx="8.01367"
cy="8.00354"
fill="#4285F4"
rx="2.69361"
ry="2.6936"
/>
<defs>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
gradientUnits="userSpaceOnUse"
id="paint0_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
gradientUnits="userSpaceOnUse"
id="paint1_radial_466_21161"
r="1"
>
<stop
stop-color="#3E2723"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#3E2723"
stop-opacity="0.01"
/>
</radialgradient>
<radialgradient
cx="0"
cy="0"
gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
gradientUnits="userSpaceOnUse"
id="paint2_radial_466_21161"
r="1"
>
<stop
stop-color="#263238"
stop-opacity="0.2"
/>
<stop
offset="1"
stop-color="#263238"
stop-opacity="0.01"
/>
</radialgradient>
</defs>
</svg>
<div
class="css-1q5ehcp"
/>
</div>
</div>
</div>
</div>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<button
class="css-kc49n4"
data-testid="button-diff-visible"
type="button"
>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M3 3H.5a.5.5 0 0 0-.5.5v10c0 .28.22.5.5.5h10a.5.5 0 0 0 .5-.5V11h2.5a.5.5 0 0 0 .5-.5V.5a.5.5 0 0 0-.5-.5h-10a.5.5 0 0 0-.5.5V3Zm1 1v2.3L6.3 4H4ZM3 4v6.5a.5.5 0 0 0 .5.5H10v2H1V4h2Zm1-1h6.5a.5.5 0 0 1 .5.5V10h2V1H4v2Zm6 7V7.71l-2.3 2.3H10Zm0-3.7V4.7L4.7 10h1.6L10 6.3ZM9.3 4H7.7L4 7.71V9.3L9.3 4Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
<div
class="css-1ml4jsj"
/>
<a
class="css-1fy1yvr"
href="https://www.chromatic.com/test?appId=123&id=11"
target="_blank"
>
<img
alt="Snapshot for the 'Primary' story of the 'Button' component"
loading="eager"
src="/B.png"
/>
<img
alt=""
loading="eager"
src="/B-comparison.png"
style="max-width: 100%;"
/>
<svg
class="css-149xqrd"
height="14px"
viewBox="0 0 14 14"
width="14px"
>
<path
d="M2 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7.5a.5.5 0 0 0-1 0V12H2V2h4.5a.5.5 0 0 0 0-1H2Z"
/>
<path
d="M7.35 7.36 12 2.7v1.8a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 1 0 0 1h1.8L6.64 6.64a.5.5 0 1 0 .7.7Z"
/>
</svg>
</a>
</div>View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
f2c2bf on norbert/ap-3626-add-unaccept-button
Unable to find an element with the text: Accept entire build. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
<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>
</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>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
id="storybook-root"
>
<div
class="css-11mjrbp"
orientation="right"
>
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m...
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
<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>
</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>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
id="storybook-root"
>
<div
class="css-11mjrbp"
orientation="right"
>
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m...View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
f2c2bf on norbert/ap-3626-add-unaccept-button
Unable to find an element with the text: Accept entire build. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
<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>
</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>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
id="storybook-root"
>
<div
class="css-11mjrbp"
orientation="right"
>
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m...
Ignored nodes: comments, script, style
<body
class="sb-main-fullscreen sb-show-main"
style="background: rgb(255, 255, 255); color: rgb(46, 52, 56); font-size: 13px;"
>
<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>
</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>
</td>
<td>
<button>
Set string
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="sb-nopreview sb-wrapper"
>
<div
class="sb-nopreview_main"
>
<h1
class="sb-nopreview_heading sb-heading"
>
No Preview
</h1>
<p>
Sorry, but you either have no stories or none are selected somehow.
</p>
<ul>
<li>
Please check the Storybook config.
</li>
<li>
Try reloading the page.
</li>
</ul>
<p>
If the problem persists, check the browser console, or the terminal you've run Storybook from.
</p>
</div>
</div>
<div
class="sb-errordisplay sb-wrapper"
>
<pre
class="sb-heading"
id="error-message"
/>
<pre
class="sb-errordisplay_code"
>
<code
id="error-stack"
/>
</pre>
</div>
<div
id="storybook-root"
>
<div
class="css-11mjrbp"
orientation="right"
>
<div
class="css-nlyae3"
data-canvas="right"
orientation="right"
>
<div
class="css-5vam5k"
>
<div
class="css-gghy96"
>
<div
class="css-17fv6jh"
>
<div
class="css-gtwj8f"
>
<div
class="css-u71t7w"
>
<svg
class="css-6m...View in StorybookChrome 105880x640
Linux Linux Ubuntu 20.04.4
f2c2bf on norbert/ap-3626-add-unaccept-button
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: ignoredException
at https://6480e1b0042842f149cfd74c-ftwelvpufk.capture-loopback.chromatic.com/sb-preview/runtime.js:4:93306