From 90ad9a0f9a316a77faf96a09e2728fbd467caef8 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 26 Mar 2026 11:44:42 +0100 Subject: [PATCH 01/12] feat: Expose item card component --- build-tools/utils/custom-css-properties.js | 6 + build-tools/utils/pluralize.js | 1 + pages/card/header-permutations.page.tsx | 45 - pages/card/permutations.page.tsx | 30 - pages/item-card/assets/image-placeholder.png | Bin 0 -> 7906 bytes pages/{card => item-card}/common.tsx | 32 +- pages/item-card/padding-permutations.page.tsx | 48 + pages/item-card/permutations.page.tsx | 72 + pages/item-card/style-custom.page.tsx | 157 ++ pages/item-card/styles.scss | 30 + pages/item-card/variant-permutations.page.tsx | 70 + .../__snapshots__/themes.test.ts.snap | 112 +- .../__snapshots__/design-tokens.test.ts.snap | 128 ++ .../__snapshots__/documenter.test.ts.snap | 416 ++++ .../test-utils-selectors.test.tsx.snap | 8 + .../test-utils-wrappers.test.tsx.snap | 1717 +++-------------- src/cards/index.tsx | 9 +- src/cards/styles.scss | 8 +- .../__snapshots__/styles.test.tsx.snap | 144 +- src/internal/components/card/index.tsx | 61 - src/internal/components/card/interfaces.ts | 57 - src/internal/components/card/styles.scss | 113 -- .../__snapshots__/styles.test.tsx.snap | 52 + src/item-card/__tests__/card.test.tsx | 357 ++++ src/item-card/__tests__/styles.test.tsx | 131 ++ src/item-card/index.tsx | 44 + src/item-card/interfaces.ts | 143 ++ src/item-card/internal.tsx | 97 + .../components/card => item-card}/motion.scss | 4 +- src/item-card/style.tsx | 60 + src/item-card/styles.scss | 160 ++ .../__snapshots__/styles.test.tsx.snap | 66 +- .../__snapshots__/styles.test.tsx.snap | 42 +- .../__snapshots__/styles.test.tsx.snap | 40 +- src/test-utils/dom/item-card/index.ts | 52 + .../__snapshots__/styles.test.tsx.snap | 144 +- style-dictionary/classic/borders.ts | 1 + style-dictionary/classic/shadows.ts | 5 + style-dictionary/classic/spacing.ts | 5 +- style-dictionary/utils/token-names.ts | 14 +- style-dictionary/visual-refresh/borders.ts | 4 + style-dictionary/visual-refresh/colors.ts | 3 + .../visual-refresh/metadata/borders.ts | 10 + style-dictionary/visual-refresh/shadows.ts | 1 + style-dictionary/visual-refresh/spacing.ts | 6 +- 45 files changed, 2690 insertions(+), 2015 deletions(-) delete mode 100644 pages/card/header-permutations.page.tsx delete mode 100644 pages/card/permutations.page.tsx create mode 100644 pages/item-card/assets/image-placeholder.png rename pages/{card => item-card}/common.tsx (68%) create mode 100644 pages/item-card/padding-permutations.page.tsx create mode 100644 pages/item-card/permutations.page.tsx create mode 100644 pages/item-card/style-custom.page.tsx create mode 100644 pages/item-card/styles.scss create mode 100644 pages/item-card/variant-permutations.page.tsx delete mode 100644 src/internal/components/card/index.tsx delete mode 100644 src/internal/components/card/interfaces.ts delete mode 100644 src/internal/components/card/styles.scss create mode 100644 src/item-card/__tests__/__snapshots__/styles.test.tsx.snap create mode 100644 src/item-card/__tests__/card.test.tsx create mode 100644 src/item-card/__tests__/styles.test.tsx create mode 100644 src/item-card/index.tsx create mode 100644 src/item-card/interfaces.ts create mode 100644 src/item-card/internal.tsx rename src/{internal/components/card => item-card}/motion.scss (89%) create mode 100644 src/item-card/style.tsx create mode 100644 src/item-card/styles.scss create mode 100644 src/test-utils/dom/item-card/index.ts diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index b977afe7cc..73511df043 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/build-tools/utils/custom-css-properties.js @@ -178,5 +178,11 @@ const customCssPropertiesList = [ 'tokenStyleDismissColorDisabled', 'tokenStyleDismissColorHover', 'tokenStyleDismissColorReadOnly', + // Item card specific style properties + 'styleItemCardBackgroundDefault', + 'styleItemCardBorderColorDefault', + 'styleItemCardBorderRadius', + 'styleItemCardBorderWidthDefault', + 'styleItemCardBoxShadowDefault', ]; module.exports = customCssPropertiesList; diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js index b627e0b364..2359e8b107 100644 --- a/build-tools/utils/pluralize.js +++ b/build-tools/utils/pluralize.js @@ -45,6 +45,7 @@ const pluralizationMap = { Icon: 'Icons', IconProvider: 'IconProviders', Input: 'Inputs', + ItemCard: 'ItemCards', KeyValuePairs: 'KeyValuePairs', LineChart: 'LineCharts', Link: 'Links', diff --git a/pages/card/header-permutations.page.tsx b/pages/card/header-permutations.page.tsx deleted file mode 100644 index 4fa20d613e..0000000000 --- a/pages/card/header-permutations.page.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; - -import Card from '~components/internal/components/card'; -import { InternalCardProps } from '~components/internal/components/card/interfaces'; - -import createPermutations from '../utils/permutations'; -import PermutationsView from '../utils/permutations-view'; -import { actions, CardPage, icon, longContent, longDescription, longHeader, shortHeader } from './common'; - -const permutations = createPermutations([ - // With header - { - header: [shortHeader, longHeader], - children: [longContent], - description: [undefined, longDescription], - actions: [undefined, actions], - icon: [undefined, icon], - }, - // Without header and without description - { - header: [undefined], - children: [longContent], - description: [undefined], - actions: [undefined, actions], - icon: [undefined, icon], - }, - // Without header but with description - { - header: [undefined], - children: [longContent], - description: [longDescription], - actions: [undefined, actions], - icon: [undefined], - }, -]); - -export default function CardHeaderPermutations() { - return ( - - } /> - - ); -} diff --git a/pages/card/permutations.page.tsx b/pages/card/permutations.page.tsx deleted file mode 100644 index 651445755d..0000000000 --- a/pages/card/permutations.page.tsx +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; - -import Card from '~components/internal/components/card'; -import { InternalCardProps } from '~components/internal/components/card/interfaces'; - -import createPermutations from '../utils/permutations'; -import PermutationsView from '../utils/permutations-view'; -import { actions, CardPage, icon, longContent, longHeader, shortDescription } from './common'; - -const permutations = createPermutations([ - { - header: [longHeader, undefined], - children: [longContent, undefined], - description: [shortDescription, undefined], - actions: [actions], - icon: [icon], - disableHeaderPaddings: [false, true], - disableContentPaddings: [false, true], - }, -]); - -export default function CardPermutations() { - return ( - - } /> - - ); -} diff --git a/pages/item-card/assets/image-placeholder.png b/pages/item-card/assets/image-placeholder.png new file mode 100644 index 0000000000000000000000000000000000000000..bafb5bdb91fa98bff979cd349aff0541e7a3ec22 GIT binary patch literal 7906 zcmeHM`#;nD``4|T97?Dpp=fL+E61G0a+t_wQp9ezdt~L1G-s<2?oz5ZG9=R+rs!6q z+7R8JiW!C7GUsZOYRD4PvhQm?pU>a${r>R%!NdD~?RB`W=XJi`xxPN`>y@`D%gM>D z_w+zv<>Y>emi?{!1yC+^X`{eDrC5*SXXWH}TFd^{m>(-omXp(iJW&U6iKW8PNs@s( zWv%Z)rTlSesG`!El-Lv@DQK^f2HmXf@#1*TOeqb9a`r9wE166tJL#3no&S74pl)jM z{a2xoqoyVoz0bR!*SlUWFb6Al(g3~YPA>e{^G4K7a+Lok{BPpX`A{F9O&S(jcxOp3 zOo@`D%gK)Ac8Mm?yO``lIemJ%W8=-kQ9|(_yQwsr?4(9gxwCHZA{xs`=4+%M1=dY-i zsoXRye7f8}P5zOlcX}3(Sx7gAqn)+p4`6rGI`Up{-VBjSfRoR zMjcOB3Kx$4C?`sFxU7+T>5LS|A}O_64r6;h)20NhF*isP@V$`CVBz<7_jtN_aNWb=&({W6sist(Wu?_NjO|uSWTysw zG&894vpVg4()t6-C=NSYMiJENVQlYa%G+>Rl6PY9afVkpYC3;_b@z!$NDPH^}_5G zHC75wY0|>H-YOhfLUkCQV0cMU({DAJ+PSRGsz|J`&k1A8%B))%U=^FTEq-E;(MPwT zB7ap{q}C?MM>P+hTd;Cr1ZBYQ@A$ynVi^NPQkqJ-SM^D1{JBRRINl$(ySqAUxn|5h3cH(1civl8;H$%m_YB21$W|D z2e8ECV97a8M$k3*eK!vKu|{DF(sdJkG!7McP-%FAICf(NPUg;tOXqy7^Wpaq6$i1R zEjN9IGm9zgF<5RNWq@@Bc9*x8?EjkyCh(|?p=MRCsjDW9kaaqvE=lEWv=u%0k`a23 ziguZ=Xv5wLp2OPG&)PoFmZAsi>jk=j9gPVcHL(XUfhS&-e-(+&iYoodGfkHrdcgQ%0Qsjd=!T9WaX&2SP<5lEE;#d!?lpZ={mj~x) z#3|QMnuC-W2VcE`OS;+KrI}vJT-InD*AxhOfEZFp<1@30Nefx`q#N(5Q2u&g*uz;L4 z`?u*tFgv}i`3pyl3bkdP&S)6?JYU&=S*4bwxe~Hugz0h`V2xxEi!4HXm)u{SJlt{W z=S3WItp-iv?!{cjGq48Citawq)^x%#p@r3zKnK_m?NF!e>O1%qP#5dr4l~tO~u6xe} ztdhG~fM6pmq$~#3^Ro0=v2%>l;pqX^cr`DpEf?Dg``{yIIcr@@nv9@AF-kHer2C19 z)>He4GaX(ETBbI{-Hgc)6e8f2b{`2JL2DXHk8f`r$GQu%uXJ_fbyj*M`zuT~y%i`Asv&Tj*!}%NHn%d72 z$Asa2ZM-}LF3|$hmG*(P8#ch&$&G&X!zp|R`pLDk-GqE4%NVgthl?=ulakUB5pj^E z1ZyG|{m`I|+@vJLD{*JOCgOx~cq)|ArJYwBD58@l6{wJ1irsb>x3Eu}D@x822OF)g zfdkv5gi@np_XNTBk222_t^dflP@IdMIl{3s;F^vchUPcg3{MPm1Y+@%48^_=;v@1> z`PPFB_WK;H9&AeU*~juJkl|LjQG=nApi-@dH0) z7?rv7tvonQ%Vsdt@u@&aPGOZ1i|TW*$?E4Q6Yq&*x2v(U{CONk*r$m>yHg8|^l_rX zHlj6g!v#zZcKOEH8=njv9qFV{bt=?a>Qh~6H!~X~x`bmk6t+xXgVXG6D)%qmPfDN% zAIpK$+-(|eEiS`ty!+i4Dk|!)Y4QTmI^z3z z^<3<7f#}l^R@8G=W3rJtbK`du6-qy(+n5|=04}nLa>~%4#qW*Kku*`P@A4R5yr)oz z;LALPwkF_nF2*QCi=Eyzz()Wr?5Dgoj;ZPbnVm1~U)zQk&FHlaG(9f$PINOyYda4d z;1e0k@9XyDf|y=ubXvO%PEf@l?*U~kMq<;88I=#eaE_r6&tDBGNLd2!8dBx%H06yn zRl`pf?c-_Ra6*@C6v8m~spY%pK%M?fda&CrwD#e7E^C+*PN_Pi|K@oMjJpKw1jGTW zrC!SzkVVhob`|7cUuZJcuOx7OVAF?P{3 z^a6y~3^*YX>@KJwAzUHsg`L;cYybVkL|m%m(KIk<^};6#akk~b$=)z3WJ_&o&u$u@ z{aICmg0Swq$cq_&ZYzUj!fBh3{bfuXb8N=7 z!9A4+>PWR-5ccMZ|Q6wS9IV0Pc|tfnmGmeapBBKE*`9P_R^?T^1i3%=F;)7+BH z^EudeHTwE5cc>Mk5N8HhYVYX5zvp5#h7{WDxTc*bL`ulvu-_a7}8Nbr&?$YHw8^uxw(!hao}Xa)ea#wcKvo7!WlKsH1n-YT^H ztG#c7#0jH(#4W6zUuiEn40YU$d~hmhYK@a7ZBA==V*IXJHa-Wtl&uzopZ}`6;std$ zl^QLbEKJATwn>8F^Z^+)$O z>02UGd&U(~yWRgP7oXoCyZwS!9E-KoDLGB4%3Itrr;bt9fBdbOJ}P}1$(l3-TNxn@ z{!D$Wr~`P9?r9!X}*`&}#t z@@FG|X#>gOaKFXhu36dug3F1IyV&f@6s>fy{VuPiohCR}W-jrBI{L2>2P5vCvhm)S zJ{KWZq+^d`HlKOF@#}3A;sEJRXL8FJ;zh18+OwJ$^=Rny04r0Z=xhmJ&HL2qG?neW@?x~&1R79;F=Zgn6Mg*cd+ zXRY(T0i{m6JNM4fJm$o!o#@;x;wM;fYP}4`ti_^O;eil^r{zuvkLfh(YU`Mrs2$tNq)r*dSHjdiyxh?-HE$ zOMvj|E2{&99PI8`_~;$L#Dr(}Txo^5MYR(4Je+XahooE9e*@tRnKhNwkzQ5{2=TXD zRlhV|tmWyJ6ED2U#k%>Y5B*4W)E^tSOWbkxR#m6g*cC6xj6TmE%YGi(HeT*iy+Mz? zz4Sr5EPC!H-|qrZFfAn|IeB?JeZ2j7aR#O6OfL2kZpCtOcC7>G-pS#_i&Ik(?nn0< zV7d~!dfQknEk8#-x32sk-{YKAH3T8IN}_$CS|k?6F7chZYm)|>+ODVSVci z;@AT3q^c`OH+NDQKS-PiZ%gF27iXcd0{nMJy=&5z>)+1CWIvzokMU>6Qg(oa@p~r= z;=x=)Nam+H&V~^~h9|xqf%+IiQXTK->-FV?m;Nh}&px6MKf8cEb6}Uatk-KW=;|(H zN;Celj=!i-+ErSSi?x*@A2;nQ(xtAl_7sMm#)x&4kKoJHm(l>~&DP~zfFzKxqo^_& zzj;D^Wiq`iE{=2BMvUqNjP*Wb6e7*@7CEV9#jOv?A7C}LPv^sFNF_zH5x~yzK+b22 zgHPX0d$@PEJ<6dc<-K^l8G}X|&_@;ZT|w1R53rxk2BnGs&m(YIZebrU85;z@#Wj#3 zPT~7EM17pVoQKoo>$vpP;|b3tY)+hv6Iu0R&z(uDO$rUaebMBeWIsPoglz7tm7On- z>AIm2qNp>4kKW=h+Ljl3oC?9X`0uSR|0{^B=(@Gc9$PFSKgpwL33h@M)zP@93w9Lx ziFgVTphP8{xQf|3`f4<7g>Qwiob}eNwaPQp(^-RWEg#$(@zP#W2Bt_kdFA z3D8;kM{rAHy})wY^DijGLo;b3R3qD9u1V{rOLSGt%heML?ob9JFLtvZ=7}MxUY+Pj z`l>`r4X@<_B#W=Z2}T0E?R7sErNqSu8<~j#agrV{b7v-BKi9qxko#12mpui}|LYSn1?eD-E2+O~l?t~+ zns21pza}zx1q~#-TjVF++0|waId8V=c|-HgMRt6zgj2I=-EAZHnjc=&e`$4KwE>t9 zNIhYirOPthJ9lKMD)VCIuen$~+Dc`a5i^Ic^rFtt^#^$tRD5&WW-I=#)C&RNEQIT{v)SbP-H zV9o7~tm9=V$c*E$HKxm%Q>Y}%AEh>U33>&#qu?I-nbTVac9W~!<6Hdhr)S6&yn1^461vsreMSE$7$Szj5t0z>=AxF62J)(fsY0|+$? zAAWKh&LF+`HEhNL*O|0KA@K0FTW9R`)OyyjLVDcA z^W)L4eW3Z`ND7!cr5k=w2@ep>!!TVjFq0HJ!v`23o5iIgIoR|%N#o*lyqUD`C$4PLu5ZedQ1%B?cjjNsb0+vHwrvpoATEcR+@gll{&mEfI2LU1LH6qNJ%P0c8#)eRQA*IOqwz7l(MhxfNChP$!)k^c=cfVJ+AaT)9<^ZcmlMbeo zp3pqxE2NN%k9%;K!_j3%TW103kD(HGUy;TksLCsGZ>-yd!78eax<59xPox#7S@s5ccQSR_E!Q~-C;JOsJzlez?~M%SIF$jo_ey|`!+z~L6=lGC@W@qH7g?TQDOeo`Mj z<`Nlx!aiC)Xod*NK={ZsB@vQ7dWI%jP1mFqz(z(uV=?Ms`zZ6XEWp=+Y2_i4loGNw z-UC=K%L)_t59wiTu<$mg4fmDuH7Y^e+yth1-bxW`FO>?m8BA{bvOpwQRPDwD`ibA5 zM96=ws@kLr$+!a?u4kPI;w}gyAvfUnjVgF)=29#U#bJi%NMEf~xD$OD zKmj9$yf8rTdGN*CL20&BV{8qWf^Hs=Y3_#c>fIS|-7)a#VEiqG+zFJvEe}*VS2+?D z2AJr$g@OJtY)>1|8f?{JQ)8*|zp1mw1o(I0=caadW3=MYRvzf))PPd^*S_RiThoJ` z8K18>rvpRCdjV>o4V@B|NCR1YV6}7yjLW;)QowrhA=&XSJ|tM_vB&=CvUyaI;og1@ zHT~N^pBJi@{eiNV%7ADmyK?~TQ@Q%dm8>JRNz?h`|9EKl9NI7Kn9`6%z~}0;=N<>@ z`Xwsk>N4iFbKts{#9B*1E-9fF;XA1Ds!GgD;4DW=WUx9-KIa$^yrTeY1&!ZEn*3Y; z*`)5a*pf_O1LfrP)JF-R1_k300sgV43y1*W>!^=Tfq{zvfAYF7Fx1&{xDZUDo8`4n zZaO2g;?~^0bXcjrzzxgGk_nV-g#O{bLJtOh%pRVMrLUZ0_ODG5X!Y05i;zzBR-Yy? zzU>5W_#L43vAq~xWxi}gmH_$2y;YbkgbOj^#oGdWVkY~?!%vp8;SVt)(yNBMcEjhL zHj9wRr%SdNW6gnk7L?nUBFxhIQiSn7~Xa7XT>1tCR%`e zt4V7)_Up*Sv_!JCv_o|jIDkeA94`#%Sr>1JIO|yhqSm4-MB4fL(6B_sT)8$WfjH)v z)5nLU3PV@2#6a66QxTQ>9X8U~d&v85i?s?hFrrpgO_G)|S}T0zS3TnjnMm@Or*|_6 zF(RbNo=NSKI;m%<@tzKXZu`BPW#H +
This is a React Node
+ + +); + export const actions = ( ); -export const icon = ; +export const icon = ; + +export const imageContentEmbedded = ( +
+ Image placeholder for item card media +
+); + +export const imageContentDefault = ( +
+ Image placeholder for item card media +
+); diff --git a/pages/item-card/padding-permutations.page.tsx b/pages/item-card/padding-permutations.page.tsx new file mode 100644 index 0000000000..aadc6ba903 --- /dev/null +++ b/pages/item-card/padding-permutations.page.tsx @@ -0,0 +1,48 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import ItemCard from '~components/item-card'; +import { ItemCardProps } from '~components/item-card/interfaces'; + +import createPermutations from '../utils/permutations'; +import PermutationsView from '../utils/permutations-view'; +import { CardPage, longContent, longHeader, reactNodeContent, shortFooter } from './common'; + +/* Disable-padding permutations for header, content, and footer */ +const permutations = createPermutations([ + // All padding toggle combinations with all slots present + { + header: [longHeader], + children: [longContent], + footer: [shortFooter], + disableHeaderPaddings: [false, true], + disableContentPaddings: [false, true], + disableFooterPaddings: [false, true], + }, + // Disabled paddings with custom React node content + { + children: [reactNodeContent], + disableContentPaddings: [false, true], + }, + // Header padding only (no footer) + { + header: [longHeader], + children: [longContent], + disableHeaderPaddings: [false, true], + }, + // Footer padding only (no header) + { + children: [longContent], + footer: [shortFooter], + disableFooterPaddings: [false, true], + }, +]); + +export default function CardPaddingPermutations() { + return ( + + } /> + + ); +} diff --git a/pages/item-card/permutations.page.tsx b/pages/item-card/permutations.page.tsx new file mode 100644 index 0000000000..6a14bcf04c --- /dev/null +++ b/pages/item-card/permutations.page.tsx @@ -0,0 +1,72 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import ItemCard from '~components/item-card'; +import { ItemCardProps } from '~components/item-card/interfaces'; + +import createPermutations from '../utils/permutations'; +import PermutationsView from '../utils/permutations-view'; +import { + actions, + CardPage, + icon, + longContent, + longDescription, + longFooter, + longHeader, + shortDescription, + shortFooter, + shortHeader, +} from './common'; + +/* Content slot combinations: header, description, children, footer, actions, icon */ +const permutations = createPermutations([ + // All content slots filled + { + header: [shortHeader], + description: [shortDescription], + children: [longContent], + footer: [shortFooter], + actions: [actions], + icon: [icon], + }, + // Header variations + { + header: [shortHeader, longHeader, undefined], + description: [shortDescription], + children: [longContent], + }, + // Description variations + { + header: [shortHeader], + description: [shortDescription, longDescription, undefined], + children: [longContent], + footer: [shortFooter], + }, + // Footer variations + { + header: [longHeader], + children: [longContent], + footer: [longFooter, shortFooter, undefined], + }, + // Actions with and without header + { + header: [shortHeader, undefined], + children: [longContent], + actions: [actions, undefined], + description: [longDescription], + }, + // Minimal: content only + { + children: [longContent], + }, +]); + +export default function CardPermutations() { + return ( + + } /> + + ); +} diff --git a/pages/item-card/style-custom.page.tsx b/pages/item-card/style-custom.page.tsx new file mode 100644 index 0000000000..8c3c3642cf --- /dev/null +++ b/pages/item-card/style-custom.page.tsx @@ -0,0 +1,157 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { SpaceBetween } from '~components'; +import ItemCard from '~components/item-card'; + +import { SimplePage } from '../app/templates'; + +export default function CustomCard() { + const background = 'light-dark(#ffe1e1, rgb(40, 0, 0))'; + + return ( + + + + Card content + + + + Card content + + + + Card content + + + + + + Card content + + + + ); +} diff --git a/pages/item-card/styles.scss b/pages/item-card/styles.scss new file mode 100644 index 0000000000..18c55c1cd9 --- /dev/null +++ b/pages/item-card/styles.scss @@ -0,0 +1,30 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ +@use '~design-tokens' as awsui; + +.image-wrapper { + block-size: 250px; + overflow: hidden; + &--embedded { + padding-block-start: 6px; + border-start-start-radius: awsui.$border-radius-card-embedded; + border-start-end-radius: awsui.$border-radius-card-embedded; + border-end-start-radius: awsui.$border-radius-card-embedded; + border-end-end-radius: awsui.$border-radius-card-embedded; + } + &--default { + padding-block-start: 12px; + border-start-start-radius: awsui.$border-radius-card-default; + border-start-end-radius: awsui.$border-radius-card-default; + border-end-start-radius: awsui.$border-radius-card-default; + border-end-end-radius: awsui.$border-radius-card-default; + } +} + +.image { + block-size: 100%; + inline-size: 100%; + object-fit: 'cover'; +} diff --git a/pages/item-card/variant-permutations.page.tsx b/pages/item-card/variant-permutations.page.tsx new file mode 100644 index 0000000000..b2d588c41f --- /dev/null +++ b/pages/item-card/variant-permutations.page.tsx @@ -0,0 +1,70 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import ItemCard from '~components/item-card'; +import { ItemCardProps } from '~components/item-card/interfaces'; + +import createPermutations from '../utils/permutations'; +import PermutationsView from '../utils/permutations-view'; +import { + actions, + CardPage, + icon, + imageContentDefault, + imageContentEmbedded, + longContent, + longDescription, + shortDescription, + shortFooter, + shortHeader, +} from './common'; + +/* Visual variant permutations: default vs embedded */ +const permutations = createPermutations([ + // Variants with all slots + { + header: [shortHeader], + description: [shortDescription], + children: [longContent], + footer: [shortFooter], + actions: [actions], + icon: [icon], + variant: ['default', 'embedded'], + }, + // Variants with minimal content + { + children: [longContent], + variant: ['default', 'embedded'], + }, + // Variants with header only + { + header: [shortHeader], + children: [longContent], + variant: ['default', 'embedded'], + }, + // Image in body (default variant) + { + header: [shortHeader], + description: [longDescription], + children: [imageContentDefault], + disableContentPaddings: [true], + variant: ['default'], + }, + // Image in body (embedded variant) + { + header: [shortHeader], + description: [longDescription], + children: [imageContentEmbedded], + disableContentPaddings: [true], + variant: ['embedded'], + }, +]); + +export default function CardVariantPermutations() { + return ( + + } /> + + ); +} diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 7f10a10e39..67951a70d4 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -25,6 +25,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-badge": "16px", "border-radius-button": "2px", "border-radius-calendar-day-focus-ring": "2px", + "border-radius-card-default": "0px", + "border-radius-card-embedded": "2px", "border-radius-chat-bubble": "2px", "border-radius-code-editor": "0px", "border-radius-container": "0px", @@ -43,6 +45,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-table-sticky-width": "0px", "border-width-alert": "1px", "border-width-button": "1px", + "border-width-card": "0px", + "border-width-card-highlighted": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -67,6 +71,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-button-primary-disabled": "#ffffff", "color-background-button-primary-hover": "#0a4a74", "color-background-calendar-current-date": "#f2f3f3", + "color-background-card": "#ffffff", "color-background-cell-shaded": "#f2f3f3", "color-background-chat-bubble-incoming": "#f2f3f3", "color-background-chat-bubble-outgoing": "transparent", @@ -162,6 +167,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-border-button-primary-disabled": "#d5dbdb", "color-border-calendar-grid": "#eaeded", "color-border-calendar-grid-selected-focus-ring": "#0073bb", + "color-border-card": "#eaeded", + "color-border-card-highlighted": "#0073bb", "color-border-cell-shaded": "#d5dbdb", "color-border-code-editor-ace-active-line-dark-theme": "#687078", "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", @@ -644,6 +651,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -682,8 +690,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-calendar-grid-focus-outline-gutter": "0px", "space-calendar-grid-gutter": "0px", "space-calendar-grid-selected-focus-outline-gutter": "2px", - "space-card-horizontal": "20px", - "space-card-vertical": "16px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "10px", + "space-card-vertical-default": "16px", + "space-card-vertical-embedded": "8px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "12px", "space-container-header-bottom": "8px", @@ -792,6 +802,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-badge": "16px", "border-radius-button": "2px", "border-radius-calendar-day-focus-ring": "2px", + "border-radius-card-default": "0px", + "border-radius-card-embedded": "2px", "border-radius-chat-bubble": "2px", "border-radius-code-editor": "0px", "border-radius-container": "0px", @@ -810,6 +822,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-table-sticky-width": "0px", "border-width-alert": "1px", "border-width-button": "1px", + "border-width-card": "0px", + "border-width-card-highlighted": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -834,6 +848,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-button-primary-disabled": "#2a2e33", "color-background-button-primary-hover": "#00a1c9", "color-background-calendar-current-date": "#16191f", + "color-background-card": "#2a2e33", "color-background-cell-shaded": "#16191f", "color-background-chat-bubble-incoming": "#16191f", "color-background-chat-bubble-outgoing": "transparent", @@ -929,6 +944,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-border-button-primary-disabled": "#414750", "color-border-calendar-grid": "#414750", "color-border-calendar-grid-selected-focus-ring": "#00a1c9", + "color-border-card": "#414750", + "color-border-card-highlighted": "#00a1c9", "color-border-cell-shaded": "#414750", "color-border-code-editor-ace-active-line-dark-theme": "#687078", "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", @@ -1411,6 +1428,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", + "shadow-card": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.08)", "shadow-container": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", @@ -1449,8 +1467,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-calendar-grid-focus-outline-gutter": "0px", "space-calendar-grid-gutter": "0px", "space-calendar-grid-selected-focus-outline-gutter": "2px", - "space-card-horizontal": "20px", - "space-card-vertical": "20px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "20px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", "space-container-header-bottom": "12px", @@ -1559,6 +1579,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-badge": "16px", "border-radius-button": "2px", "border-radius-calendar-day-focus-ring": "2px", + "border-radius-card-default": "0px", + "border-radius-card-embedded": "2px", "border-radius-chat-bubble": "2px", "border-radius-code-editor": "0px", "border-radius-container": "0px", @@ -1577,6 +1599,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-table-sticky-width": "0px", "border-width-alert": "1px", "border-width-button": "1px", + "border-width-card": "0px", + "border-width-card-highlighted": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -1601,6 +1625,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-button-primary-disabled": "#ffffff", "color-background-button-primary-hover": "#0a4a74", "color-background-calendar-current-date": "#f2f3f3", + "color-background-card": "#ffffff", "color-background-cell-shaded": "#f2f3f3", "color-background-chat-bubble-incoming": "#f2f3f3", "color-background-chat-bubble-outgoing": "transparent", @@ -1696,6 +1721,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-border-button-primary-disabled": "#d5dbdb", "color-border-calendar-grid": "#eaeded", "color-border-calendar-grid-selected-focus-ring": "#0073bb", + "color-border-card": "#eaeded", + "color-border-card-highlighted": "#0073bb", "color-border-cell-shaded": "#d5dbdb", "color-border-code-editor-ace-active-line-dark-theme": "#687078", "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", @@ -2178,6 +2205,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -2216,8 +2244,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-calendar-grid-focus-outline-gutter": "0px", "space-calendar-grid-gutter": "0px", "space-calendar-grid-selected-focus-outline-gutter": "2px", - "space-card-horizontal": "20px", - "space-card-vertical": "20px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "20px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", "space-container-header-bottom": "12px", @@ -2326,6 +2356,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-badge": "16px", "border-radius-button": "2px", "border-radius-calendar-day-focus-ring": "2px", + "border-radius-card-default": "0px", + "border-radius-card-embedded": "2px", "border-radius-chat-bubble": "2px", "border-radius-code-editor": "0px", "border-radius-container": "0px", @@ -2344,6 +2376,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-table-sticky-width": "0px", "border-width-alert": "1px", "border-width-button": "1px", + "border-width-card": "0px", + "border-width-card-highlighted": "1px", "border-width-dropdown": "1px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -2368,6 +2402,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-button-primary-disabled": "#ffffff", "color-background-button-primary-hover": "#0a4a74", "color-background-calendar-current-date": "#f2f3f3", + "color-background-card": "#ffffff", "color-background-cell-shaded": "#f2f3f3", "color-background-chat-bubble-incoming": "#f2f3f3", "color-background-chat-bubble-outgoing": "transparent", @@ -2463,6 +2498,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-border-button-primary-disabled": "#d5dbdb", "color-border-calendar-grid": "#eaeded", "color-border-calendar-grid-selected-focus-ring": "#0073bb", + "color-border-card": "#eaeded", + "color-border-card-highlighted": "#0073bb", "color-border-cell-shaded": "#d5dbdb", "color-border-code-editor-ace-active-line-dark-theme": "#687078", "color-border-code-editor-ace-active-line-light-theme": "#d5dbdb", @@ -2945,6 +2982,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -2983,8 +3021,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-calendar-grid-focus-outline-gutter": "0px", "space-calendar-grid-gutter": "0px", "space-calendar-grid-selected-focus-outline-gutter": "2px", - "space-card-horizontal": "20px", - "space-card-vertical": "20px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "20px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "3px", "space-container-content-top": "16px", "space-container-header-bottom": "12px", @@ -3093,6 +3133,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-badge": "4px", "border-radius-button": "20px", "border-radius-calendar-day-focus-ring": "3px", + "border-radius-card-default": "16px", + "border-radius-card-embedded": "8px", "border-radius-chat-bubble": "8px", "border-radius-code-editor": "8px", "border-radius-container": "16px", @@ -3111,6 +3153,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-table-sticky-width": "1px", "border-width-alert": "2px", "border-width-button": "2px", + "border-width-card": "1px", + "border-width-card-highlighted": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -3135,6 +3179,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-button-primary-disabled": "#ebebf0", "color-background-button-primary-hover": "#002b66", "color-background-calendar-current-date": "#f3f3f7", + "color-background-card": "#ffffff", "color-background-cell-shaded": "#f6f6f9", "color-background-chat-bubble-incoming": "#f6f6f9", "color-background-chat-bubble-outgoing": "transparent", @@ -3230,6 +3275,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-border-button-primary-disabled": "#ebebf0", "color-border-calendar-grid": "transparent", "color-border-calendar-grid-selected-focus-ring": "#f9f9fa", + "color-border-card": "#c6c6cd", + "color-border-card-highlighted": "#006ce0", "color-border-cell-shaded": "#dedee3", "color-border-code-editor-ace-active-line-dark-theme": "#656871", "color-border-code-editor-ace-active-line-light-theme": "#dedee3", @@ -3712,6 +3759,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-scale-popup-35003c", "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c", + "shadow-card": "none", "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)", "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", @@ -3750,8 +3798,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-calendar-grid-focus-outline-gutter": "-5px", "space-calendar-grid-gutter": "6px", "space-calendar-grid-selected-focus-outline-gutter": "-5px", - "space-card-horizontal": "20px", - "space-card-vertical": "16px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "16px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", "space-container-header-bottom": "8px", @@ -3860,6 +3910,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-badge": "4px", "border-radius-button": "20px", "border-radius-calendar-day-focus-ring": "3px", + "border-radius-card-default": "16px", + "border-radius-card-embedded": "8px", "border-radius-chat-bubble": "8px", "border-radius-code-editor": "8px", "border-radius-container": "16px", @@ -3878,6 +3930,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-table-sticky-width": "1px", "border-width-alert": "2px", "border-width-button": "2px", + "border-width-card": "1px", + "border-width-card-highlighted": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -3902,6 +3956,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-button-primary-disabled": "#ebebf0", "color-background-button-primary-hover": "#002b66", "color-background-calendar-current-date": "#f3f3f7", + "color-background-card": "#ffffff", "color-background-cell-shaded": "#f6f6f9", "color-background-chat-bubble-incoming": "#f6f6f9", "color-background-chat-bubble-outgoing": "transparent", @@ -3997,6 +4052,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-button-primary-disabled": "#ebebf0", "color-border-calendar-grid": "transparent", "color-border-calendar-grid-selected-focus-ring": "#f9f9fa", + "color-border-card": "#c6c6cd", + "color-border-card-highlighted": "#006ce0", "color-border-cell-shaded": "#dedee3", "color-border-code-editor-ace-active-line-dark-theme": "#656871", "color-border-code-editor-ace-active-line-light-theme": "#dedee3", @@ -4479,6 +4536,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-scale-popup-35003c", "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c", + "shadow-card": "none", "shadow-container": "0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)", "shadow-container-active": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a", "shadow-dropdown": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", @@ -4517,8 +4575,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-calendar-grid-focus-outline-gutter": "-5px", "space-calendar-grid-gutter": "6px", "space-calendar-grid-selected-focus-outline-gutter": "-5px", - "space-card-horizontal": "20px", - "space-card-vertical": "12px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "10px", + "space-card-vertical-default": "12px", + "space-card-vertical-embedded": "8px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", "space-container-header-bottom": "4px", @@ -4627,6 +4687,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-badge": "4px", "border-radius-button": "20px", "border-radius-calendar-day-focus-ring": "3px", + "border-radius-card-default": "16px", + "border-radius-card-embedded": "8px", "border-radius-chat-bubble": "8px", "border-radius-code-editor": "8px", "border-radius-container": "16px", @@ -4645,6 +4707,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-table-sticky-width": "1px", "border-width-alert": "2px", "border-width-button": "2px", + "border-width-card": "1px", + "border-width-card-highlighted": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -4669,6 +4733,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-button-primary-disabled": "#232b37", "color-background-button-primary-hover": "#75cfff", "color-background-calendar-current-date": "#333843", + "color-background-card": "#161d26", "color-background-cell-shaded": "#1b232d", "color-background-chat-bubble-incoming": "#0f141a", "color-background-chat-bubble-outgoing": "transparent", @@ -4764,6 +4829,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-button-primary-disabled": "#232b37", "color-border-calendar-grid": "transparent", "color-border-calendar-grid-selected-focus-ring": "#161d26", + "color-border-card": "#424650", + "color-border-card-highlighted": "#42b4ff", "color-border-cell-shaded": "#333843", "color-border-code-editor-ace-active-line-dark-theme": "#656871", "color-border-code-editor-ace-active-line-light-theme": "#dedee3", @@ -5246,6 +5313,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-scale-popup-35003c", "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c", + "shadow-card": "none", "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)", "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c", "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)", @@ -5284,8 +5352,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-calendar-grid-focus-outline-gutter": "-5px", "space-calendar-grid-gutter": "6px", "space-calendar-grid-selected-focus-outline-gutter": "-5px", - "space-card-horizontal": "20px", - "space-card-vertical": "16px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "16px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", "space-container-header-bottom": "8px", @@ -5394,6 +5464,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-badge": "4px", "border-radius-button": "20px", "border-radius-calendar-day-focus-ring": "3px", + "border-radius-card-default": "16px", + "border-radius-card-embedded": "8px", "border-radius-chat-bubble": "8px", "border-radius-code-editor": "8px", "border-radius-container": "16px", @@ -5412,6 +5484,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-table-sticky-width": "1px", "border-width-alert": "2px", "border-width-button": "2px", + "border-width-card": "1px", + "border-width-card-highlighted": "2px", "border-width-dropdown": "2px", "border-width-field": "1px", "border-width-icon-big": "3px", @@ -5436,6 +5510,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-button-primary-disabled": "#232b37", "color-background-button-primary-hover": "#75cfff", "color-background-calendar-current-date": "#333843", + "color-background-card": "#161d26", "color-background-cell-shaded": "#1b232d", "color-background-chat-bubble-incoming": "#0f141a", "color-background-chat-bubble-outgoing": "transparent", @@ -5531,6 +5606,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-button-primary-disabled": "#232b37", "color-border-calendar-grid": "transparent", "color-border-calendar-grid-selected-focus-ring": "#161d26", + "color-border-card": "#424650", + "color-border-card-highlighted": "#42b4ff", "color-border-cell-shaded": "#333843", "color-border-code-editor-ace-active-line-dark-theme": "#656871", "color-border-code-editor-ace-active-line-light-theme": "#dedee3", @@ -6013,6 +6090,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-scale-popup-35003c", "motion-keyframes-status-icon-error": "awsui-status-icon-error-35003c", + "shadow-card": "none", "shadow-container": "0px 1px 8px 2px rgba(0, 7, 22, 0.6)", "shadow-container-active": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c", "shadow-dropdown": "0px 4px 20px 1px rgba(0, 4, 12, 1)", @@ -6051,8 +6129,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-calendar-grid-focus-outline-gutter": "-5px", "space-calendar-grid-gutter": "6px", "space-calendar-grid-selected-focus-outline-gutter": "-5px", - "space-card-horizontal": "20px", - "space-card-vertical": "16px", + "space-card-horizontal-default": "20px", + "space-card-horizontal-embedded": "12px", + "space-card-vertical-default": "16px", + "space-card-vertical-embedded": "10px", "space-code-editor-status-focus-outline-gutter": "-7px", "space-container-content-top": "4px", "space-container-header-bottom": "8px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 7dcac6fe42..4deb428688 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -21,6 +21,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -2782,6 +2790,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -5543,6 +5559,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -8304,6 +8328,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -11065,6 +11097,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -13826,6 +13866,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -16587,6 +16635,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "2px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "0px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "2px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "2px", @@ -19353,6 +19409,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -22114,6 +22178,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -24875,6 +24947,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -27636,6 +27716,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -30397,6 +30485,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -33158,6 +33254,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -35919,6 +36023,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -38680,6 +38792,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", @@ -41441,6 +41561,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border radius of the focused day in date picker and date range picker.", "$value": "3px", }, + "border-radius-card-default": { + "$description": "The border radius of default cards.", + "$value": "16px", + }, + "border-radius-card-embedded": { + "$description": "The border radius of embedded cards.", + "$value": "8px", + }, "border-radius-chat-bubble": { "$description": "The border radius of chat bubbles.", "$value": "8px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 2e3a2e834f..9da07d0b97 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -16027,6 +16027,274 @@ with the input using \`ariaDescribedby\`.", } `; +exports[`Components definition for item-card matches the snapshot: item-card 1`] = ` +{ + "dashCaseName": "item-card", + "events": [], + "functions": [], + "name": "ItemCard", + "properties": [ + { + "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).", + "description": "Adds the specified classes to the root element of the component.", + "name": "className", + "optional": true, + "type": "string", + }, + { + "defaultValue": "false", + "description": "Removes the default padding from the content area.", + "name": "disableContentPaddings", + "optional": true, + "type": "boolean", + }, + { + "defaultValue": "false", + "description": "Removes the default padding from the footer area.", + "name": "disableFooterPaddings", + "optional": true, + "type": "boolean", + }, + { + "defaultValue": "false", + "description": "Removes the default padding from the header area.", + "name": "disableHeaderPaddings", + "optional": true, + "type": "boolean", + }, + { + "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases, +use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must +use the \`id\` attribute, consider setting it on a parent element instead.", + "description": "Adds the specified ID to the root element of the component.", + "name": "id", + "optional": true, + "type": "string", + }, + { + "description": "Attributes to add to the native root element. +Some attributes will be automatically combined with internal attribute values: +- \`className\` will be appended. +- Event handlers will be chained, unless the default is prevented. + +We do not support using this attribute to apply custom styling.", + "inlineType": { + "name": "Omit, "children"> & Record<\`data-\${string}\`, string>", + "type": "union", + "values": [ + "Omit, "children">", + "Record<\`data-\${string}\`, string>", + ], + }, + "name": "nativeAttributes", + "optional": true, + "systemTags": [ + "core", + ], + "type": "Omit, "children"> & Record<\`data-\${string}\`, string>", + }, + { + "description": "An object containing CSS properties to customize the item card's visual appearance. +Refer to the [style](/components/item-card/?tabId=style) tab for more details.", + "inlineType": { + "name": "ItemCardProps.Style", + "properties": [ + { + "inlineType": { + "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + "properties": [ + { + "name": "paddingBlock", + "optional": true, + "type": "string", + }, + { + "name": "paddingInline", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "content", + "optional": true, + "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + }, + { + "inlineType": { + "name": "object", + "properties": [ + { + "inlineType": { + "name": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }", + "properties": [ + { + "name": "borderColor", + "optional": true, + "type": "string", + }, + { + "name": "borderWidth", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "divider", + "optional": true, + "type": "{ borderColor?: string | undefined; borderWidth?: string | undefined; }", + }, + { + "inlineType": { + "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + "properties": [ + { + "name": "paddingBlock", + "optional": true, + "type": "string", + }, + { + "name": "paddingInline", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "root", + "optional": true, + "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + }, + ], + "type": "object", + }, + "name": "footer", + "optional": true, + "type": "{ root?: { paddingBlock?: string | undefined; paddingInline?: string | undefined; } | undefined; divider?: { borderColor?: string | undefined; borderWidth?: string | undefined; } | undefined; }", + }, + { + "inlineType": { + "name": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + "properties": [ + { + "name": "paddingBlock", + "optional": true, + "type": "string", + }, + { + "name": "paddingInline", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "header", + "optional": true, + "type": "{ paddingBlock?: string | undefined; paddingInline?: string | undefined; }", + }, + { + "inlineType": { + "name": "object", + "properties": [ + { + "name": "background", + "optional": true, + "type": "string", + }, + { + "name": "borderColor", + "optional": true, + "type": "string", + }, + { + "name": "borderRadius", + "optional": true, + "type": "string", + }, + { + "name": "borderWidth", + "optional": true, + "type": "string", + }, + { + "name": "boxShadow", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "root", + "optional": true, + "type": "{ background?: string | undefined; borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; boxShadow?: string | undefined; }", + }, + ], + "type": "object", + }, + "name": "style", + "optional": true, + "systemTags": [ + "core", + ], + "type": "ItemCardProps.Style", + }, + { + "defaultValue": "'default'", + "description": "Specifies the visual variant of the item card, which controls the border radius and padding. + +- \`default\` - Uses container-level border radius and padding (larger). +- \`embedded\` - Uses compact border radius and padding (smaller).", + "inlineType": { + "name": "ItemCardProps.Variant", + "type": "union", + "values": [ + "default", + "embedded", + ], + }, + "name": "variant", + "optional": true, + "type": "string", + }, + ], + "regions": [ + { + "description": "Actions to display in the item card header area, typically buttons or links.", + "isDefault": false, + "name": "actions", + }, + { + "description": "Main content of the item card.", + "isDefault": true, + "name": "children", + }, + { + "description": "A description or subtitle displayed below the header.", + "isDefault": false, + "name": "description", + }, + { + "description": "Footer content displayed at the bottom of the item card.", + "isDefault": false, + "name": "footer", + }, + { + "description": "Heading element of the item card. Use this to add a title or header text.", + "isDefault": false, + "name": "header", + }, + { + "description": "Icon content displayed next to the header.", + "isDefault": false, + "name": "icon", + }, + ], + "releaseStatus": "stable", +} +`; + exports[`Components definition for key-value-pairs matches the snapshot: key-value-pairs 1`] = ` { "dashCaseName": "key-value-pairs", @@ -38355,6 +38623,95 @@ The dismiss button is only rendered when the \`dismissible\` property is set to "methods": [], "name": "IconWrapper", }, + { + "methods": [ + { + "description": "Finds the action slot of the item card.", + "name": "findActions", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Finds the content slot of the item card.", + "name": "findContent", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Finds the description slot of the item card.", + "name": "findDescription", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Finds the footer slot of the item card.", + "name": "findFooter", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Finds the header slot of the item card.", + "name": "findHeader", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + { + "description": "Finds the icon slot of the item card.", + "name": "findIcon", + "parameters": [], + "returnType": { + "isNullable": true, + "name": "ElementWrapper", + "typeArguments": [ + { + "name": "HTMLElement", + }, + ], + }, + }, + ], + "name": "ItemCardWrapper", + }, { "methods": [ { @@ -48179,6 +48536,65 @@ The dismiss button is only rendered when the \`dismissible\` property is set to "methods": [], "name": "IconWrapper", }, + { + "methods": [ + { + "description": "Finds the action slot of the item card.", + "name": "findActions", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Finds the content slot of the item card.", + "name": "findContent", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Finds the description slot of the item card.", + "name": "findDescription", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Finds the footer slot of the item card.", + "name": "findFooter", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Finds the header slot of the item card.", + "name": "findHeader", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + { + "description": "Finds the icon slot of the item card.", + "name": "findIcon", + "parameters": [], + "returnType": { + "isNullable": false, + "name": "ElementWrapper", + }, + }, + ], + "name": "ItemCardWrapper", + }, { "methods": [ { diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 3ecacd0926..f73b686ba6 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -432,6 +432,14 @@ exports[`test-utils selectors 1`] = ` "awsui_value_10ipo", "awsui_wrapper_1wepg", ], + "item-card": [ + "awsui_body_n1fwt", + "awsui_description_n1fwt", + "awsui_footer_n1fwt", + "awsui_header_n1fwt", + "awsui_icon_n1fwt", + "awsui_root_n1fwt", + ], "key-value-pairs": [ "awsui_detail_1y9fy", "awsui_group-list-item_1y9fy", diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index 3416b14a95..46e44cb400 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -53,6 +53,7 @@ import HelpPanelWrapper from './help-panel'; import HotspotWrapper from './hotspot'; import IconWrapper from './icon'; import InputWrapper from './input'; +import ItemCardWrapper from './item-card'; import KeyValuePairsWrapper from './key-value-pairs'; import LineChartWrapper from './line-chart'; import LinkWrapper from './link'; @@ -144,6 +145,7 @@ export { HelpPanelWrapper }; export { HotspotWrapper }; export { IconWrapper }; export { InputWrapper }; +export { ItemCardWrapper }; export { KeyValuePairsWrapper }; export { LineChartWrapper }; export { LinkWrapper }; @@ -212,15 +214,6 @@ findAlert(selector?: string): AlertWrapper | null; * @returns {Array} */ findAllAlerts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Alert for the current element, - * or the element itself if it is an instance of Alert. - * If no Alert is found, returns \`null\`. - * - * @returns {AlertWrapper | null} - */ -findClosestAlert(): AlertWrapper | null; /** * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation. @@ -240,15 +233,6 @@ findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null; * @returns {Array} */ findAllAnchorNavigations(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent AnchorNavigation for the current element, - * or the element itself if it is an instance of AnchorNavigation. - * If no AnchorNavigation is found, returns \`null\`. - * - * @returns {AnchorNavigationWrapper | null} - */ -findClosestAnchorNavigation(): AnchorNavigationWrapper | null; /** * Returns the wrapper of the first Annotation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Annotation. @@ -268,15 +252,6 @@ findAnnotation(selector?: string): AnnotationWrapper | null; * @returns {Array} */ findAllAnnotations(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Annotation for the current element, - * or the element itself if it is an instance of Annotation. - * If no Annotation is found, returns \`null\`. - * - * @returns {AnnotationWrapper | null} - */ -findClosestAnnotation(): AnnotationWrapper | null; /** * Returns the wrapper of the first AppLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AppLayout. @@ -296,15 +271,6 @@ findAppLayout(selector?: string): AppLayoutWrapper | null; * @returns {Array} */ findAllAppLayouts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent AppLayout for the current element, - * or the element itself if it is an instance of AppLayout. - * If no AppLayout is found, returns \`null\`. - * - * @returns {AppLayoutWrapper | null} - */ -findClosestAppLayout(): AppLayoutWrapper | null; /** * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar. @@ -324,15 +290,6 @@ findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null; * @returns {Array} */ findAllAppLayoutToolbars(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent AppLayoutToolbar for the current element, - * or the element itself if it is an instance of AppLayoutToolbar. - * If no AppLayoutToolbar is found, returns \`null\`. - * - * @returns {AppLayoutToolbarWrapper | null} - */ -findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null; /** * Returns the wrapper of the first AreaChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AreaChart. @@ -352,15 +309,6 @@ findAreaChart(selector?: string): AreaChartWrapper | null; * @returns {Array} */ findAllAreaCharts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent AreaChart for the current element, - * or the element itself if it is an instance of AreaChart. - * If no AreaChart is found, returns \`null\`. - * - * @returns {AreaChartWrapper | null} - */ -findClosestAreaChart(): AreaChartWrapper | null; /** * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AttributeEditor. @@ -380,15 +328,6 @@ findAttributeEditor(selector?: string): AttributeEditorWrapper | null; * @returns {Array} */ findAllAttributeEditors(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent AttributeEditor for the current element, - * or the element itself if it is an instance of AttributeEditor. - * If no AttributeEditor is found, returns \`null\`. - * - * @returns {AttributeEditorWrapper | null} - */ -findClosestAttributeEditor(): AttributeEditorWrapper | null; /** * Returns the wrapper of the first Autosuggest that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Autosuggest. @@ -408,15 +347,6 @@ findAutosuggest(selector?: string): AutosuggestWrapper | null; * @returns {Array} */ findAllAutosuggests(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Autosuggest for the current element, - * or the element itself if it is an instance of Autosuggest. - * If no Autosuggest is found, returns \`null\`. - * - * @returns {AutosuggestWrapper | null} - */ -findClosestAutosuggest(): AutosuggestWrapper | null; /** * Returns the wrapper of the first Badge that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Badge. @@ -436,15 +366,6 @@ findBadge(selector?: string): BadgeWrapper | null; * @returns {Array} */ findAllBadges(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Badge for the current element, - * or the element itself if it is an instance of Badge. - * If no Badge is found, returns \`null\`. - * - * @returns {BadgeWrapper | null} - */ -findClosestBadge(): BadgeWrapper | null; /** * Returns the wrapper of the first BarChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first BarChart. @@ -464,15 +385,6 @@ findBarChart(selector?: string): BarChartWrapper | null; * @returns {Array} */ findAllBarCharts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent BarChart for the current element, - * or the element itself if it is an instance of BarChart. - * If no BarChart is found, returns \`null\`. - * - * @returns {BarChartWrapper | null} - */ -findClosestBarChart(): BarChartWrapper | null; /** * Returns the wrapper of the first Box that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Box. @@ -492,15 +404,6 @@ findBox(selector?: string): BoxWrapper | null; * @returns {Array} */ findAllBoxes(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Box for the current element, - * or the element itself if it is an instance of Box. - * If no Box is found, returns \`null\`. - * - * @returns {BoxWrapper | null} - */ -findClosestBox(): BoxWrapper | null; /** * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup. @@ -520,15 +423,6 @@ findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null; * @returns {Array} */ findAllBreadcrumbGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent BreadcrumbGroup for the current element, - * or the element itself if it is an instance of BreadcrumbGroup. - * If no BreadcrumbGroup is found, returns \`null\`. - * - * @returns {BreadcrumbGroupWrapper | null} - */ -findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null; /** * Returns the wrapper of the first Button that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Button. @@ -548,15 +442,6 @@ findButton(selector?: string): ButtonWrapper | null; * @returns {Array} */ findAllButtons(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Button for the current element, - * or the element itself if it is an instance of Button. - * If no Button is found, returns \`null\`. - * - * @returns {ButtonWrapper | null} - */ -findClosestButton(): ButtonWrapper | null; /** * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown. @@ -576,15 +461,6 @@ findButtonDropdown(selector?: string): ButtonDropdownWrapper | null; * @returns {Array} */ findAllButtonDropdowns(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ButtonDropdown for the current element, - * or the element itself if it is an instance of ButtonDropdown. - * If no ButtonDropdown is found, returns \`null\`. - * - * @returns {ButtonDropdownWrapper | null} - */ -findClosestButtonDropdown(): ButtonDropdownWrapper | null; /** * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ButtonGroup. @@ -604,15 +480,6 @@ findButtonGroup(selector?: string): ButtonGroupWrapper | null; * @returns {Array} */ findAllButtonGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ButtonGroup for the current element, - * or the element itself if it is an instance of ButtonGroup. - * If no ButtonGroup is found, returns \`null\`. - * - * @returns {ButtonGroupWrapper | null} - */ -findClosestButtonGroup(): ButtonGroupWrapper | null; /** * Returns the wrapper of the first Calendar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Calendar. @@ -632,15 +499,6 @@ findCalendar(selector?: string): CalendarWrapper | null; * @returns {Array} */ findAllCalendars(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Calendar for the current element, - * or the element itself if it is an instance of Calendar. - * If no Calendar is found, returns \`null\`. - * - * @returns {CalendarWrapper | null} - */ -findClosestCalendar(): CalendarWrapper | null; /** * Returns the wrapper of the first Cards that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Cards. @@ -660,15 +518,6 @@ findCards(selector?: string): CardsWrapper | null; * @returns {Array} */ findAllCards(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Cards for the current element, - * or the element itself if it is an instance of Cards. - * If no Cards is found, returns \`null\`. - * - * @returns {CardsWrapper | null} - */ -findClosestCards(): CardsWrapper | null; /** * Returns the wrapper of the first Checkbox that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Checkbox. @@ -688,15 +537,6 @@ findCheckbox(selector?: string): CheckboxWrapper | null; * @returns {Array} */ findAllCheckboxes(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Checkbox for the current element, - * or the element itself if it is an instance of Checkbox. - * If no Checkbox is found, returns \`null\`. - * - * @returns {CheckboxWrapper | null} - */ -findClosestCheckbox(): CheckboxWrapper | null; /** * Returns the wrapper of the first CodeEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CodeEditor. @@ -716,15 +556,6 @@ findCodeEditor(selector?: string): CodeEditorWrapper | null; * @returns {Array} */ findAllCodeEditors(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent CodeEditor for the current element, - * or the element itself if it is an instance of CodeEditor. - * If no CodeEditor is found, returns \`null\`. - * - * @returns {CodeEditorWrapper | null} - */ -findClosestCodeEditor(): CodeEditorWrapper | null; /** * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences. @@ -744,15 +575,6 @@ findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | nul * @returns {Array} */ findAllCollectionPreferences(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent CollectionPreferences for the current element, - * or the element itself if it is an instance of CollectionPreferences. - * If no CollectionPreferences is found, returns \`null\`. - * - * @returns {CollectionPreferencesWrapper | null} - */ -findClosestCollectionPreferences(): CollectionPreferencesWrapper | null; /** * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ColumnLayout. @@ -772,15 +594,6 @@ findColumnLayout(selector?: string): ColumnLayoutWrapper | null; * @returns {Array} */ findAllColumnLayouts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ColumnLayout for the current element, - * or the element itself if it is an instance of ColumnLayout. - * If no ColumnLayout is found, returns \`null\`. - * - * @returns {ColumnLayoutWrapper | null} - */ -findClosestColumnLayout(): ColumnLayoutWrapper | null; /** * Returns the wrapper of the first Container that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Container. @@ -800,15 +613,6 @@ findContainer(selector?: string): ContainerWrapper | null; * @returns {Array} */ findAllContainers(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Container for the current element, - * or the element itself if it is an instance of Container. - * If no Container is found, returns \`null\`. - * - * @returns {ContainerWrapper | null} - */ -findClosestContainer(): ContainerWrapper | null; /** * Returns the wrapper of the first ContentLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ContentLayout. @@ -828,15 +632,6 @@ findContentLayout(selector?: string): ContentLayoutWrapper | null; * @returns {Array} */ findAllContentLayouts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ContentLayout for the current element, - * or the element itself if it is an instance of ContentLayout. - * If no ContentLayout is found, returns \`null\`. - * - * @returns {ContentLayoutWrapper | null} - */ -findClosestContentLayout(): ContentLayoutWrapper | null; /** * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard. @@ -856,15 +651,6 @@ findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null; * @returns {Array} */ findAllCopyToClipboards(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent CopyToClipboard for the current element, - * or the element itself if it is an instance of CopyToClipboard. - * If no CopyToClipboard is found, returns \`null\`. - * - * @returns {CopyToClipboardWrapper | null} - */ -findClosestCopyToClipboard(): CopyToClipboardWrapper | null; /** * Returns the wrapper of the first DateInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DateInput. @@ -884,15 +670,6 @@ findDateInput(selector?: string): DateInputWrapper | null; * @returns {Array} */ findAllDateInputs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent DateInput for the current element, - * or the element itself if it is an instance of DateInput. - * If no DateInput is found, returns \`null\`. - * - * @returns {DateInputWrapper | null} - */ -findClosestDateInput(): DateInputWrapper | null; /** * Returns the wrapper of the first DatePicker that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DatePicker. @@ -912,15 +689,6 @@ findDatePicker(selector?: string): DatePickerWrapper | null; * @returns {Array} */ findAllDatePickers(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent DatePicker for the current element, - * or the element itself if it is an instance of DatePicker. - * If no DatePicker is found, returns \`null\`. - * - * @returns {DatePickerWrapper | null} - */ -findClosestDatePicker(): DatePickerWrapper | null; /** * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DateRangePicker. @@ -940,15 +708,6 @@ findDateRangePicker(selector?: string): DateRangePickerWrapper | null; * @returns {Array} */ findAllDateRangePickers(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent DateRangePicker for the current element, - * or the element itself if it is an instance of DateRangePicker. - * If no DateRangePicker is found, returns \`null\`. - * - * @returns {DateRangePickerWrapper | null} - */ -findClosestDateRangePicker(): DateRangePickerWrapper | null; /** * Returns the wrapper of the first Drawer that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Drawer. @@ -968,43 +727,6 @@ findDrawer(selector?: string): DrawerWrapper | null; * @returns {Array} */ findAllDrawers(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Drawer for the current element, - * or the element itself if it is an instance of Drawer. - * If no Drawer is found, returns \`null\`. - * - * @returns {DrawerWrapper | null} - */ -findClosestDrawer(): DrawerWrapper | null; -/** - * Returns the wrapper of the first Dropdown that matches the specified CSS selector. - * If no CSS selector is specified, returns the wrapper of the first Dropdown. - * If no matching Dropdown is found, returns \`null\`. - * - * @param {string} [selector] CSS Selector - * @returns {DropdownWrapper | null} - */ -findDropdown(selector?: string): DropdownWrapper | null; - -/** - * Returns an array of Dropdown wrapper that matches the specified CSS selector. - * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper. - * If no matching Dropdown is found, returns an empty array. - * - * @param {string} [selector] CSS Selector - * @returns {Array} - */ -findAllDropdowns(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Dropdown for the current element, - * or the element itself if it is an instance of Dropdown. - * If no Dropdown is found, returns \`null\`. - * - * @returns {DropdownWrapper | null} - */ -findClosestDropdown(): DropdownWrapper | null; /** * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary. @@ -1024,15 +746,6 @@ findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null; * @returns {Array} */ findAllErrorBoundaries(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ErrorBoundary for the current element, - * or the element itself if it is an instance of ErrorBoundary. - * If no ErrorBoundary is found, returns \`null\`. - * - * @returns {ErrorBoundaryWrapper | null} - */ -findClosestErrorBoundary(): ErrorBoundaryWrapper | null; /** * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ExpandableSection. @@ -1052,15 +765,6 @@ findExpandableSection(selector?: string): ExpandableSectionWrapper | null; * @returns {Array} */ findAllExpandableSections(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ExpandableSection for the current element, - * or the element itself if it is an instance of ExpandableSection. - * If no ExpandableSection is found, returns \`null\`. - * - * @returns {ExpandableSectionWrapper | null} - */ -findClosestExpandableSection(): ExpandableSectionWrapper | null; /** * Returns the wrapper of the first FileDropzone that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileDropzone. @@ -1080,15 +784,6 @@ findFileDropzone(selector?: string): FileDropzoneWrapper | null; * @returns {Array} */ findAllFileDropzones(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent FileDropzone for the current element, - * or the element itself if it is an instance of FileDropzone. - * If no FileDropzone is found, returns \`null\`. - * - * @returns {FileDropzoneWrapper | null} - */ -findClosestFileDropzone(): FileDropzoneWrapper | null; /** * Returns the wrapper of the first FileInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileInput. @@ -1108,15 +803,6 @@ findFileInput(selector?: string): FileInputWrapper | null; * @returns {Array} */ findAllFileInputs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent FileInput for the current element, - * or the element itself if it is an instance of FileInput. - * If no FileInput is found, returns \`null\`. - * - * @returns {FileInputWrapper | null} - */ -findClosestFileInput(): FileInputWrapper | null; /** * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup. @@ -1136,15 +822,6 @@ findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null; * @returns {Array} */ findAllFileTokenGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent FileTokenGroup for the current element, - * or the element itself if it is an instance of FileTokenGroup. - * If no FileTokenGroup is found, returns \`null\`. - * - * @returns {FileTokenGroupWrapper | null} - */ -findClosestFileTokenGroup(): FileTokenGroupWrapper | null; /** * Returns the wrapper of the first FileUpload that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileUpload. @@ -1164,15 +841,6 @@ findFileUpload(selector?: string): FileUploadWrapper | null; * @returns {Array} */ findAllFileUploads(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent FileUpload for the current element, - * or the element itself if it is an instance of FileUpload. - * If no FileUpload is found, returns \`null\`. - * - * @returns {FileUploadWrapper | null} - */ -findClosestFileUpload(): FileUploadWrapper | null; /** * Returns the wrapper of the first Flashbar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Flashbar. @@ -1192,15 +860,6 @@ findFlashbar(selector?: string): FlashbarWrapper | null; * @returns {Array} */ findAllFlashbars(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Flashbar for the current element, - * or the element itself if it is an instance of Flashbar. - * If no Flashbar is found, returns \`null\`. - * - * @returns {FlashbarWrapper | null} - */ -findClosestFlashbar(): FlashbarWrapper | null; /** * Returns the wrapper of the first Form that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Form. @@ -1220,15 +879,6 @@ findForm(selector?: string): FormWrapper | null; * @returns {Array} */ findAllForms(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Form for the current element, - * or the element itself if it is an instance of Form. - * If no Form is found, returns \`null\`. - * - * @returns {FormWrapper | null} - */ -findClosestForm(): FormWrapper | null; /** * Returns the wrapper of the first FormField that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FormField. @@ -1248,15 +898,6 @@ findFormField(selector?: string): FormFieldWrapper | null; * @returns {Array} */ findAllFormFields(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent FormField for the current element, - * or the element itself if it is an instance of FormField. - * If no FormField is found, returns \`null\`. - * - * @returns {FormFieldWrapper | null} - */ -findClosestFormField(): FormFieldWrapper | null; /** * Returns the wrapper of the first Grid that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Grid. @@ -1276,15 +917,6 @@ findGrid(selector?: string): GridWrapper | null; * @returns {Array} */ findAllGrids(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Grid for the current element, - * or the element itself if it is an instance of Grid. - * If no Grid is found, returns \`null\`. - * - * @returns {GridWrapper | null} - */ -findClosestGrid(): GridWrapper | null; /** * Returns the wrapper of the first Header that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Header. @@ -1304,15 +936,6 @@ findHeader(selector?: string): HeaderWrapper | null; * @returns {Array} */ findAllHeaders(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Header for the current element, - * or the element itself if it is an instance of Header. - * If no Header is found, returns \`null\`. - * - * @returns {HeaderWrapper | null} - */ -findClosestHeader(): HeaderWrapper | null; /** * Returns the wrapper of the first HelpPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first HelpPanel. @@ -1332,15 +955,6 @@ findHelpPanel(selector?: string): HelpPanelWrapper | null; * @returns {Array} */ findAllHelpPanels(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent HelpPanel for the current element, - * or the element itself if it is an instance of HelpPanel. - * If no HelpPanel is found, returns \`null\`. - * - * @returns {HelpPanelWrapper | null} - */ -findClosestHelpPanel(): HelpPanelWrapper | null; /** * Returns the wrapper of the first Hotspot that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Hotspot. @@ -1360,15 +974,6 @@ findHotspot(selector?: string): HotspotWrapper | null; * @returns {Array} */ findAllHotspots(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Hotspot for the current element, - * or the element itself if it is an instance of Hotspot. - * If no Hotspot is found, returns \`null\`. - * - * @returns {HotspotWrapper | null} - */ -findClosestHotspot(): HotspotWrapper | null; /** * Returns the wrapper of the first Icon that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Icon. @@ -1388,15 +993,6 @@ findIcon(selector?: string): IconWrapper | null; * @returns {Array} */ findAllIcons(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Icon for the current element, - * or the element itself if it is an instance of Icon. - * If no Icon is found, returns \`null\`. - * - * @returns {IconWrapper | null} - */ -findClosestIcon(): IconWrapper | null; /** * Returns the wrapper of the first Input that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Input. @@ -1416,15 +1012,25 @@ findInput(selector?: string): InputWrapper | null; * @returns {Array} */ findAllInputs(selector?: string): Array; +/** + * Returns the wrapper of the first ItemCard that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first ItemCard. + * If no matching ItemCard is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {ItemCardWrapper | null} + */ +findItemCard(selector?: string): ItemCardWrapper | null; /** - * Returns the wrapper of the closest parent Input for the current element, - * or the element itself if it is an instance of Input. - * If no Input is found, returns \`null\`. + * Returns an array of ItemCard wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the ItemCards inside the current wrapper. + * If no matching ItemCard is found, returns an empty array. * - * @returns {InputWrapper | null} + * @param {string} [selector] CSS Selector + * @returns {Array} */ -findClosestInput(): InputWrapper | null; +findAllItemCards(selector?: string): Array; /** * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs. @@ -1444,15 +1050,6 @@ findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null; * @returns {Array} */ findAllKeyValuePairs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent KeyValuePairs for the current element, - * or the element itself if it is an instance of KeyValuePairs. - * If no KeyValuePairs is found, returns \`null\`. - * - * @returns {KeyValuePairsWrapper | null} - */ -findClosestKeyValuePairs(): KeyValuePairsWrapper | null; /** * Returns the wrapper of the first LineChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first LineChart. @@ -1472,15 +1069,6 @@ findLineChart(selector?: string): LineChartWrapper | null; * @returns {Array} */ findAllLineCharts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent LineChart for the current element, - * or the element itself if it is an instance of LineChart. - * If no LineChart is found, returns \`null\`. - * - * @returns {LineChartWrapper | null} - */ -findClosestLineChart(): LineChartWrapper | null; /** * Returns the wrapper of the first Link that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Link. @@ -1500,15 +1088,6 @@ findLink(selector?: string): LinkWrapper | null; * @returns {Array} */ findAllLinks(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Link for the current element, - * or the element itself if it is an instance of Link. - * If no Link is found, returns \`null\`. - * - * @returns {LinkWrapper | null} - */ -findClosestLink(): LinkWrapper | null; /** * Returns the wrapper of the first List that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first List. @@ -1528,15 +1107,6 @@ findList(selector?: string): ListWrapper | null; * @returns {Array} */ findAllLists(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent List for the current element, - * or the element itself if it is an instance of List. - * If no List is found, returns \`null\`. - * - * @returns {ListWrapper | null} - */ -findClosestList(): ListWrapper | null; /** * Returns the wrapper of the first LiveRegion that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first LiveRegion. @@ -1556,15 +1126,6 @@ findLiveRegion(selector?: string): LiveRegionWrapper | null; * @returns {Array} */ findAllLiveRegions(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent LiveRegion for the current element, - * or the element itself if it is an instance of LiveRegion. - * If no LiveRegion is found, returns \`null\`. - * - * @returns {LiveRegionWrapper | null} - */ -findClosestLiveRegion(): LiveRegionWrapper | null; /** * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart. @@ -1584,15 +1145,6 @@ findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null; * @returns {Array} */ findAllMixedLineBarCharts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent MixedLineBarChart for the current element, - * or the element itself if it is an instance of MixedLineBarChart. - * If no MixedLineBarChart is found, returns \`null\`. - * - * @returns {MixedLineBarChartWrapper | null} - */ -findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null; /** * Returns the wrapper of the first Modal that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Modal. @@ -1612,15 +1164,6 @@ findModal(selector?: string): ModalWrapper | null; * @returns {Array} */ findAllModals(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Modal for the current element, - * or the element itself if it is an instance of Modal. - * If no Modal is found, returns \`null\`. - * - * @returns {ModalWrapper | null} - */ -findClosestModal(): ModalWrapper | null; /** * Returns the wrapper of the first Multiselect that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Multiselect. @@ -1640,15 +1183,6 @@ findMultiselect(selector?: string): MultiselectWrapper | null; * @returns {Array} */ findAllMultiselects(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Multiselect for the current element, - * or the element itself if it is an instance of Multiselect. - * If no Multiselect is found, returns \`null\`. - * - * @returns {MultiselectWrapper | null} - */ -findClosestMultiselect(): MultiselectWrapper | null; /** * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first NavigableGroup. @@ -1668,15 +1202,6 @@ findNavigableGroup(selector?: string): NavigableGroupWrapper | null; * @returns {Array} */ findAllNavigableGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent NavigableGroup for the current element, - * or the element itself if it is an instance of NavigableGroup. - * If no NavigableGroup is found, returns \`null\`. - * - * @returns {NavigableGroupWrapper | null} - */ -findClosestNavigableGroup(): NavigableGroupWrapper | null; /** * Returns the wrapper of the first Pagination that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Pagination. @@ -1696,15 +1221,6 @@ findPagination(selector?: string): PaginationWrapper | null; * @returns {Array} */ findAllPaginations(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Pagination for the current element, - * or the element itself if it is an instance of Pagination. - * If no Pagination is found, returns \`null\`. - * - * @returns {PaginationWrapper | null} - */ -findClosestPagination(): PaginationWrapper | null; /** * Returns the wrapper of the first PanelLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PanelLayout. @@ -1724,15 +1240,6 @@ findPanelLayout(selector?: string): PanelLayoutWrapper | null; * @returns {Array} */ findAllPanelLayouts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent PanelLayout for the current element, - * or the element itself if it is an instance of PanelLayout. - * If no PanelLayout is found, returns \`null\`. - * - * @returns {PanelLayoutWrapper | null} - */ -findClosestPanelLayout(): PanelLayoutWrapper | null; /** * Returns the wrapper of the first PieChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PieChart. @@ -1752,15 +1259,6 @@ findPieChart(selector?: string): PieChartWrapper | null; * @returns {Array} */ findAllPieCharts(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent PieChart for the current element, - * or the element itself if it is an instance of PieChart. - * If no PieChart is found, returns \`null\`. - * - * @returns {PieChartWrapper | null} - */ -findClosestPieChart(): PieChartWrapper | null; /** * Returns the wrapper of the first Popover that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Popover. @@ -1780,15 +1278,6 @@ findPopover(selector?: string): PopoverWrapper | null; * @returns {Array} */ findAllPopovers(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Popover for the current element, - * or the element itself if it is an instance of Popover. - * If no Popover is found, returns \`null\`. - * - * @returns {PopoverWrapper | null} - */ -findClosestPopover(): PopoverWrapper | null; /** * Returns the wrapper of the first ProgressBar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ProgressBar. @@ -1808,15 +1297,6 @@ findProgressBar(selector?: string): ProgressBarWrapper | null; * @returns {Array} */ findAllProgressBars(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ProgressBar for the current element, - * or the element itself if it is an instance of ProgressBar. - * If no ProgressBar is found, returns \`null\`. - * - * @returns {ProgressBarWrapper | null} - */ -findClosestProgressBar(): ProgressBarWrapper | null; /** * Returns the wrapper of the first PromptInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PromptInput. @@ -1836,15 +1316,6 @@ findPromptInput(selector?: string): PromptInputWrapper | null; * @returns {Array} */ findAllPromptInputs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent PromptInput for the current element, - * or the element itself if it is an instance of PromptInput. - * If no PromptInput is found, returns \`null\`. - * - * @returns {PromptInputWrapper | null} - */ -findClosestPromptInput(): PromptInputWrapper | null; /** * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PropertyFilter. @@ -1864,15 +1335,6 @@ findPropertyFilter(selector?: string): PropertyFilterWrapper | null; * @returns {Array} */ findAllPropertyFilters(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent PropertyFilter for the current element, - * or the element itself if it is an instance of PropertyFilter. - * If no PropertyFilter is found, returns \`null\`. - * - * @returns {PropertyFilterWrapper | null} - */ -findClosestPropertyFilter(): PropertyFilterWrapper | null; /** * Returns the wrapper of the first RadioButton that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first RadioButton. @@ -1892,15 +1354,6 @@ findRadioButton(selector?: string): RadioButtonWrapper | null; * @returns {Array} */ findAllRadioButtons(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent RadioButton for the current element, - * or the element itself if it is an instance of RadioButton. - * If no RadioButton is found, returns \`null\`. - * - * @returns {RadioButtonWrapper | null} - */ -findClosestRadioButton(): RadioButtonWrapper | null; /** * Returns the wrapper of the first RadioGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first RadioGroup. @@ -1920,15 +1373,6 @@ findRadioGroup(selector?: string): RadioGroupWrapper | null; * @returns {Array} */ findAllRadioGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent RadioGroup for the current element, - * or the element itself if it is an instance of RadioGroup. - * If no RadioGroup is found, returns \`null\`. - * - * @returns {RadioGroupWrapper | null} - */ -findClosestRadioGroup(): RadioGroupWrapper | null; /** * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector. @@ -1948,15 +1392,6 @@ findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null; * @returns {Array} */ findAllS3ResourceSelectors(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent S3ResourceSelector for the current element, - * or the element itself if it is an instance of S3ResourceSelector. - * If no S3ResourceSelector is found, returns \`null\`. - * - * @returns {S3ResourceSelectorWrapper | null} - */ -findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null; /** * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SegmentedControl. @@ -1976,15 +1411,6 @@ findSegmentedControl(selector?: string): SegmentedControlWrapper | null; * @returns {Array} */ findAllSegmentedControls(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent SegmentedControl for the current element, - * or the element itself if it is an instance of SegmentedControl. - * If no SegmentedControl is found, returns \`null\`. - * - * @returns {SegmentedControlWrapper | null} - */ -findClosestSegmentedControl(): SegmentedControlWrapper | null; /** * Returns the wrapper of the first Select that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Select. @@ -2004,15 +1430,6 @@ findSelect(selector?: string): SelectWrapper | null; * @returns {Array} */ findAllSelects(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Select for the current element, - * or the element itself if it is an instance of Select. - * If no Select is found, returns \`null\`. - * - * @returns {SelectWrapper | null} - */ -findClosestSelect(): SelectWrapper | null; /** * Returns the wrapper of the first SideNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SideNavigation. @@ -2032,15 +1449,6 @@ findSideNavigation(selector?: string): SideNavigationWrapper | null; * @returns {Array} */ findAllSideNavigations(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent SideNavigation for the current element, - * or the element itself if it is an instance of SideNavigation. - * If no SideNavigation is found, returns \`null\`. - * - * @returns {SideNavigationWrapper | null} - */ -findClosestSideNavigation(): SideNavigationWrapper | null; /** * Returns the wrapper of the first Slider that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Slider. @@ -2060,15 +1468,6 @@ findSlider(selector?: string): SliderWrapper | null; * @returns {Array} */ findAllSliders(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Slider for the current element, - * or the element itself if it is an instance of Slider. - * If no Slider is found, returns \`null\`. - * - * @returns {SliderWrapper | null} - */ -findClosestSlider(): SliderWrapper | null; /** * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SpaceBetween. @@ -2088,15 +1487,6 @@ findSpaceBetween(selector?: string): SpaceBetweenWrapper | null; * @returns {Array} */ findAllSpaceBetweens(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent SpaceBetween for the current element, - * or the element itself if it is an instance of SpaceBetween. - * If no SpaceBetween is found, returns \`null\`. - * - * @returns {SpaceBetweenWrapper | null} - */ -findClosestSpaceBetween(): SpaceBetweenWrapper | null; /** * Returns the wrapper of the first Spinner that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Spinner. @@ -2116,15 +1506,6 @@ findSpinner(selector?: string): SpinnerWrapper | null; * @returns {Array} */ findAllSpinners(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Spinner for the current element, - * or the element itself if it is an instance of Spinner. - * If no Spinner is found, returns \`null\`. - * - * @returns {SpinnerWrapper | null} - */ -findClosestSpinner(): SpinnerWrapper | null; /** * Returns the wrapper of the first SplitPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SplitPanel. @@ -2144,15 +1525,6 @@ findSplitPanel(selector?: string): SplitPanelWrapper | null; * @returns {Array} */ findAllSplitPanels(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent SplitPanel for the current element, - * or the element itself if it is an instance of SplitPanel. - * If no SplitPanel is found, returns \`null\`. - * - * @returns {SplitPanelWrapper | null} - */ -findClosestSplitPanel(): SplitPanelWrapper | null; /** * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first StatusIndicator. @@ -2172,15 +1544,6 @@ findStatusIndicator(selector?: string): StatusIndicatorWrapper | null; * @returns {Array} */ findAllStatusIndicators(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent StatusIndicator for the current element, - * or the element itself if it is an instance of StatusIndicator. - * If no StatusIndicator is found, returns \`null\`. - * - * @returns {StatusIndicatorWrapper | null} - */ -findClosestStatusIndicator(): StatusIndicatorWrapper | null; /** * Returns the wrapper of the first Steps that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Steps. @@ -2200,15 +1563,6 @@ findSteps(selector?: string): StepsWrapper | null; * @returns {Array} */ findAllSteps(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Steps for the current element, - * or the element itself if it is an instance of Steps. - * If no Steps is found, returns \`null\`. - * - * @returns {StepsWrapper | null} - */ -findClosestSteps(): StepsWrapper | null; /** * Returns the wrapper of the first Table that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Table. @@ -2228,15 +1582,6 @@ findTable(selector?: string): TableWrapper | null; * @returns {Array} */ findAllTables(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Table for the current element, - * or the element itself if it is an instance of Table. - * If no Table is found, returns \`null\`. - * - * @returns {TableWrapper | null} - */ -findClosestTable(): TableWrapper | null; /** * Returns the wrapper of the first Tabs that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tabs. @@ -2256,15 +1601,6 @@ findTabs(selector?: string): TabsWrapper | null; * @returns {Array} */ findAllTabs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Tabs for the current element, - * or the element itself if it is an instance of Tabs. - * If no Tabs is found, returns \`null\`. - * - * @returns {TabsWrapper | null} - */ -findClosestTabs(): TabsWrapper | null; /** * Returns the wrapper of the first TagEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TagEditor. @@ -2284,15 +1620,6 @@ findTagEditor(selector?: string): TagEditorWrapper | null; * @returns {Array} */ findAllTagEditors(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TagEditor for the current element, - * or the element itself if it is an instance of TagEditor. - * If no TagEditor is found, returns \`null\`. - * - * @returns {TagEditorWrapper | null} - */ -findClosestTagEditor(): TagEditorWrapper | null; /** * Returns the wrapper of the first TextContent that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TextContent. @@ -2312,15 +1639,6 @@ findTextContent(selector?: string): TextContentWrapper | null; * @returns {Array} */ findAllTextContents(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TextContent for the current element, - * or the element itself if it is an instance of TextContent. - * If no TextContent is found, returns \`null\`. - * - * @returns {TextContentWrapper | null} - */ -findClosestTextContent(): TextContentWrapper | null; /** * Returns the wrapper of the first TextFilter that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TextFilter. @@ -2340,15 +1658,6 @@ findTextFilter(selector?: string): TextFilterWrapper | null; * @returns {Array} */ findAllTextFilters(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TextFilter for the current element, - * or the element itself if it is an instance of TextFilter. - * If no TextFilter is found, returns \`null\`. - * - * @returns {TextFilterWrapper | null} - */ -findClosestTextFilter(): TextFilterWrapper | null; /** * Returns the wrapper of the first Textarea that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Textarea. @@ -2368,15 +1677,6 @@ findTextarea(selector?: string): TextareaWrapper | null; * @returns {Array} */ findAllTextareas(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Textarea for the current element, - * or the element itself if it is an instance of Textarea. - * If no Textarea is found, returns \`null\`. - * - * @returns {TextareaWrapper | null} - */ -findClosestTextarea(): TextareaWrapper | null; /** * Returns the wrapper of the first Tiles that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tiles. @@ -2396,15 +1696,6 @@ findTiles(selector?: string): TilesWrapper | null; * @returns {Array} */ findAllTiles(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Tiles for the current element, - * or the element itself if it is an instance of Tiles. - * If no Tiles is found, returns \`null\`. - * - * @returns {TilesWrapper | null} - */ -findClosestTiles(): TilesWrapper | null; /** * Returns the wrapper of the first TimeInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TimeInput. @@ -2424,15 +1715,6 @@ findTimeInput(selector?: string): TimeInputWrapper | null; * @returns {Array} */ findAllTimeInputs(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TimeInput for the current element, - * or the element itself if it is an instance of TimeInput. - * If no TimeInput is found, returns \`null\`. - * - * @returns {TimeInputWrapper | null} - */ -findClosestTimeInput(): TimeInputWrapper | null; /** * Returns the wrapper of the first Toggle that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Toggle. @@ -2452,15 +1734,6 @@ findToggle(selector?: string): ToggleWrapper | null; * @returns {Array} */ findAllToggles(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Toggle for the current element, - * or the element itself if it is an instance of Toggle. - * If no Toggle is found, returns \`null\`. - * - * @returns {ToggleWrapper | null} - */ -findClosestToggle(): ToggleWrapper | null; /** * Returns the wrapper of the first ToggleButton that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ToggleButton. @@ -2480,15 +1753,6 @@ findToggleButton(selector?: string): ToggleButtonWrapper | null; * @returns {Array} */ findAllToggleButtons(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent ToggleButton for the current element, - * or the element itself if it is an instance of ToggleButton. - * If no ToggleButton is found, returns \`null\`. - * - * @returns {ToggleButtonWrapper | null} - */ -findClosestToggleButton(): ToggleButtonWrapper | null; /** * Returns the wrapper of the first Token that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Token. @@ -2508,15 +1772,6 @@ findToken(selector?: string): TokenWrapper | null; * @returns {Array} */ findAllTokens(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Token for the current element, - * or the element itself if it is an instance of Token. - * If no Token is found, returns \`null\`. - * - * @returns {TokenWrapper | null} - */ -findClosestToken(): TokenWrapper | null; /** * Returns the wrapper of the first TokenGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TokenGroup. @@ -2536,15 +1791,6 @@ findTokenGroup(selector?: string): TokenGroupWrapper | null; * @returns {Array} */ findAllTokenGroups(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TokenGroup for the current element, - * or the element itself if it is an instance of TokenGroup. - * If no TokenGroup is found, returns \`null\`. - * - * @returns {TokenGroupWrapper | null} - */ -findClosestTokenGroup(): TokenGroupWrapper | null; /** * Returns the wrapper of the first Tooltip that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tooltip. @@ -2564,15 +1810,6 @@ findTooltip(selector?: string): TooltipWrapper | null; * @returns {Array} */ findAllTooltips(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Tooltip for the current element, - * or the element itself if it is an instance of Tooltip. - * If no Tooltip is found, returns \`null\`. - * - * @returns {TooltipWrapper | null} - */ -findClosestTooltip(): TooltipWrapper | null; /** * Returns the wrapper of the first TopNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TopNavigation. @@ -2592,15 +1829,6 @@ findTopNavigation(selector?: string): TopNavigationWrapper | null; * @returns {Array} */ findAllTopNavigations(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TopNavigation for the current element, - * or the element itself if it is an instance of TopNavigation. - * If no TopNavigation is found, returns \`null\`. - * - * @returns {TopNavigationWrapper | null} - */ -findClosestTopNavigation(): TopNavigationWrapper | null; /** * Returns the wrapper of the first TreeView that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TreeView. @@ -2620,15 +1848,6 @@ findTreeView(selector?: string): TreeViewWrapper | null; * @returns {Array} */ findAllTreeViews(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TreeView for the current element, - * or the element itself if it is an instance of TreeView. - * If no TreeView is found, returns \`null\`. - * - * @returns {TreeViewWrapper | null} - */ -findClosestTreeView(): TreeViewWrapper | null; /** * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TutorialPanel. @@ -2648,15 +1867,6 @@ findTutorialPanel(selector?: string): TutorialPanelWrapper | null; * @returns {Array} */ findAllTutorialPanels(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent TutorialPanel for the current element, - * or the element itself if it is an instance of TutorialPanel. - * If no TutorialPanel is found, returns \`null\`. - * - * @returns {TutorialPanelWrapper | null} - */ -findClosestTutorialPanel(): TutorialPanelWrapper | null; /** * Returns the wrapper of the first Wizard that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Wizard. @@ -2676,15 +1886,6 @@ findWizard(selector?: string): WizardWrapper | null; * @returns {Array} */ findAllWizards(selector?: string): Array; - -/** - * Returns the wrapper of the closest parent Wizard for the current element, - * or the element itself if it is an instance of Wizard. - * If no Wizard is found, returns \`null\`. - * - * @returns {WizardWrapper | null} - */ -findClosestWizard(): WizardWrapper | null; } } @@ -3261,6 +2462,19 @@ ElementWrapper.prototype.findInput = function(selector) { ElementWrapper.prototype.findAllInputs = function(selector) { return this.findAllComponents(InputWrapper, selector); }; +ElementWrapper.prototype.findItemCard = function(selector) { + let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`; + if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`; + } + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper); +}; + +ElementWrapper.prototype.findAllItemCards = function(selector) { + return this.findAllComponents(ItemCardWrapper, selector); +}; ElementWrapper.prototype.findKeyValuePairs = function(selector) { let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`; if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){ @@ -3562,737 +2776,292 @@ ElementWrapper.prototype.findAllSliders = function(selector) { }; ElementWrapper.prototype.findSpaceBetween = function(selector) { let rootSelector = \`.\${SpaceBetweenWrapper.rootSelector}\`; - if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper); -}; - -ElementWrapper.prototype.findAllSpaceBetweens = function(selector) { - return this.findAllComponents(SpaceBetweenWrapper, selector); -}; -ElementWrapper.prototype.findSpinner = function(selector) { - let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`; - if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper); -}; - -ElementWrapper.prototype.findAllSpinners = function(selector) { - return this.findAllComponents(SpinnerWrapper, selector); -}; -ElementWrapper.prototype.findSplitPanel = function(selector) { - let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`; - if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper); -}; - -ElementWrapper.prototype.findAllSplitPanels = function(selector) { - return this.findAllComponents(SplitPanelWrapper, selector); -}; -ElementWrapper.prototype.findStatusIndicator = function(selector) { - let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`; - if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper); -}; - -ElementWrapper.prototype.findAllStatusIndicators = function(selector) { - return this.findAllComponents(StatusIndicatorWrapper, selector); -}; -ElementWrapper.prototype.findSteps = function(selector) { - let rootSelector = \`.\${StepsWrapper.rootSelector}\`; - if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper); -}; - -ElementWrapper.prototype.findAllSteps = function(selector) { - return this.findAllComponents(StepsWrapper, selector); -}; -ElementWrapper.prototype.findTable = function(selector) { - let rootSelector = \`.\${TableWrapper.rootSelector}\`; - if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper); -}; - -ElementWrapper.prototype.findAllTables = function(selector) { - return this.findAllComponents(TableWrapper, selector); -}; -ElementWrapper.prototype.findTabs = function(selector) { - let rootSelector = \`.\${TabsWrapper.rootSelector}\`; - if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper); -}; - -ElementWrapper.prototype.findAllTabs = function(selector) { - return this.findAllComponents(TabsWrapper, selector); -}; -ElementWrapper.prototype.findTagEditor = function(selector) { - let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`; - if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper); -}; - -ElementWrapper.prototype.findAllTagEditors = function(selector) { - return this.findAllComponents(TagEditorWrapper, selector); -}; -ElementWrapper.prototype.findTextContent = function(selector) { - let rootSelector = \`.\${TextContentWrapper.rootSelector}\`; - if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper); -}; - -ElementWrapper.prototype.findAllTextContents = function(selector) { - return this.findAllComponents(TextContentWrapper, selector); -}; -ElementWrapper.prototype.findTextFilter = function(selector) { - let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`; - if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper); -}; - -ElementWrapper.prototype.findAllTextFilters = function(selector) { - return this.findAllComponents(TextFilterWrapper, selector); -}; -ElementWrapper.prototype.findTextarea = function(selector) { - let rootSelector = \`.\${TextareaWrapper.rootSelector}\`; - if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper); -}; - -ElementWrapper.prototype.findAllTextareas = function(selector) { - return this.findAllComponents(TextareaWrapper, selector); -}; -ElementWrapper.prototype.findTiles = function(selector) { - let rootSelector = \`.\${TilesWrapper.rootSelector}\`; - if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper); -}; - -ElementWrapper.prototype.findAllTiles = function(selector) { - return this.findAllComponents(TilesWrapper, selector); -}; -ElementWrapper.prototype.findTimeInput = function(selector) { - let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`; - if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper); -}; - -ElementWrapper.prototype.findAllTimeInputs = function(selector) { - return this.findAllComponents(TimeInputWrapper, selector); -}; -ElementWrapper.prototype.findToggle = function(selector) { - let rootSelector = \`.\${ToggleWrapper.rootSelector}\`; - if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper); -}; - -ElementWrapper.prototype.findAllToggles = function(selector) { - return this.findAllComponents(ToggleWrapper, selector); -}; -ElementWrapper.prototype.findToggleButton = function(selector) { - let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`; - if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper); -}; - -ElementWrapper.prototype.findAllToggleButtons = function(selector) { - return this.findAllComponents(ToggleButtonWrapper, selector); -}; -ElementWrapper.prototype.findToken = function(selector) { - let rootSelector = \`.\${TokenWrapper.rootSelector}\`; - if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper); -}; - -ElementWrapper.prototype.findAllTokens = function(selector) { - return this.findAllComponents(TokenWrapper, selector); -}; -ElementWrapper.prototype.findTokenGroup = function(selector) { - let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`; - if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper); -}; - -ElementWrapper.prototype.findAllTokenGroups = function(selector) { - return this.findAllComponents(TokenGroupWrapper, selector); -}; -ElementWrapper.prototype.findTooltip = function(selector) { - let rootSelector = \`.\${TooltipWrapper.rootSelector}\`; - if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper); -}; - -ElementWrapper.prototype.findAllTooltips = function(selector) { - return this.findAllComponents(TooltipWrapper, selector); -}; -ElementWrapper.prototype.findTopNavigation = function(selector) { - let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`; - if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper); -}; - -ElementWrapper.prototype.findAllTopNavigations = function(selector) { - return this.findAllComponents(TopNavigationWrapper, selector); -}; -ElementWrapper.prototype.findTreeView = function(selector) { - let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`; - if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper); -}; - -ElementWrapper.prototype.findAllTreeViews = function(selector) { - return this.findAllComponents(TreeViewWrapper, selector); -}; -ElementWrapper.prototype.findTutorialPanel = function(selector) { - let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`; - if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper); -}; - -ElementWrapper.prototype.findAllTutorialPanels = function(selector) { - return this.findAllComponents(TutorialPanelWrapper, selector); -}; -ElementWrapper.prototype.findWizard = function(selector) { - let rootSelector = \`.\${WizardWrapper.rootSelector}\`; - if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){ - rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`; - } - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper); -}; - -ElementWrapper.prototype.findAllWizards = function(selector) { - return this.findAllComponents(WizardWrapper, selector); -}; - -ElementWrapper.prototype.findClosestAlert = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AlertWrapper); -}; -ElementWrapper.prototype.findClosestAnchorNavigation = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AnchorNavigationWrapper); -}; -ElementWrapper.prototype.findClosestAnnotation = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AnnotationWrapper); -}; -ElementWrapper.prototype.findClosestAppLayout = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AppLayoutWrapper); -}; -ElementWrapper.prototype.findClosestAppLayoutToolbar = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AppLayoutToolbarWrapper); -}; -ElementWrapper.prototype.findClosestAreaChart = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AreaChartWrapper); -}; -ElementWrapper.prototype.findClosestAttributeEditor = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AttributeEditorWrapper); -}; -ElementWrapper.prototype.findClosestAutosuggest = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(AutosuggestWrapper); -}; -ElementWrapper.prototype.findClosestBadge = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(BadgeWrapper); -}; -ElementWrapper.prototype.findClosestBarChart = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(BarChartWrapper); -}; -ElementWrapper.prototype.findClosestBox = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(BoxWrapper); -}; -ElementWrapper.prototype.findClosestBreadcrumbGroup = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(BreadcrumbGroupWrapper); -}; -ElementWrapper.prototype.findClosestButton = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ButtonWrapper); -}; -ElementWrapper.prototype.findClosestButtonDropdown = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ButtonDropdownWrapper); -}; -ElementWrapper.prototype.findClosestButtonGroup = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ButtonGroupWrapper); -}; -ElementWrapper.prototype.findClosestCalendar = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CalendarWrapper); -}; -ElementWrapper.prototype.findClosestCards = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CardsWrapper); -}; -ElementWrapper.prototype.findClosestCheckbox = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CheckboxWrapper); -}; -ElementWrapper.prototype.findClosestCodeEditor = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CodeEditorWrapper); -}; -ElementWrapper.prototype.findClosestCollectionPreferences = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CollectionPreferencesWrapper); -}; -ElementWrapper.prototype.findClosestColumnLayout = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ColumnLayoutWrapper); -}; -ElementWrapper.prototype.findClosestContainer = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ContainerWrapper); -}; -ElementWrapper.prototype.findClosestContentLayout = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ContentLayoutWrapper); -}; -ElementWrapper.prototype.findClosestCopyToClipboard = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(CopyToClipboardWrapper); -}; -ElementWrapper.prototype.findClosestDateInput = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(DateInputWrapper); -}; -ElementWrapper.prototype.findClosestDatePicker = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(DatePickerWrapper); -}; -ElementWrapper.prototype.findClosestDateRangePicker = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(DateRangePickerWrapper); -}; -ElementWrapper.prototype.findClosestDrawer = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(DrawerWrapper); -}; -ElementWrapper.prototype.findClosestDropdown = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(DropdownWrapper); -}; -ElementWrapper.prototype.findClosestErrorBoundary = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ErrorBoundaryWrapper); -}; -ElementWrapper.prototype.findClosestExpandableSection = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ExpandableSectionWrapper); -}; -ElementWrapper.prototype.findClosestFileDropzone = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FileDropzoneWrapper); -}; -ElementWrapper.prototype.findClosestFileInput = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FileInputWrapper); -}; -ElementWrapper.prototype.findClosestFileTokenGroup = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FileTokenGroupWrapper); -}; -ElementWrapper.prototype.findClosestFileUpload = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FileUploadWrapper); -}; -ElementWrapper.prototype.findClosestFlashbar = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FlashbarWrapper); -}; -ElementWrapper.prototype.findClosestForm = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FormWrapper); -}; -ElementWrapper.prototype.findClosestFormField = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(FormFieldWrapper); -}; -ElementWrapper.prototype.findClosestGrid = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(GridWrapper); -}; -ElementWrapper.prototype.findClosestHeader = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(HeaderWrapper); -}; -ElementWrapper.prototype.findClosestHelpPanel = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(HelpPanelWrapper); -}; -ElementWrapper.prototype.findClosestHotspot = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(HotspotWrapper); -}; -ElementWrapper.prototype.findClosestIcon = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(IconWrapper); -}; -ElementWrapper.prototype.findClosestInput = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(InputWrapper); -}; -ElementWrapper.prototype.findClosestKeyValuePairs = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(KeyValuePairsWrapper); -}; -ElementWrapper.prototype.findClosestLineChart = function() { + if("legacyRootSelector" in SpaceBetweenWrapper && SpaceBetweenWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${SpaceBetweenWrapper.rootSelector}, .\${SpaceBetweenWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(LineChartWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpaceBetweenWrapper); }; -ElementWrapper.prototype.findClosestLink = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(LinkWrapper); + +ElementWrapper.prototype.findAllSpaceBetweens = function(selector) { + return this.findAllComponents(SpaceBetweenWrapper, selector); }; -ElementWrapper.prototype.findClosestList = function() { +ElementWrapper.prototype.findSpinner = function(selector) { + let rootSelector = \`.\${SpinnerWrapper.rootSelector}\`; + if("legacyRootSelector" in SpinnerWrapper && SpinnerWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${SpinnerWrapper.rootSelector}, .\${SpinnerWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ListWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SpinnerWrapper); }; -ElementWrapper.prototype.findClosestLiveRegion = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(LiveRegionWrapper); + +ElementWrapper.prototype.findAllSpinners = function(selector) { + return this.findAllComponents(SpinnerWrapper, selector); }; -ElementWrapper.prototype.findClosestMixedLineBarChart = function() { +ElementWrapper.prototype.findSplitPanel = function(selector) { + let rootSelector = \`.\${SplitPanelWrapper.rootSelector}\`; + if("legacyRootSelector" in SplitPanelWrapper && SplitPanelWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${SplitPanelWrapper.rootSelector}, .\${SplitPanelWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(MixedLineBarChartWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SplitPanelWrapper); }; -ElementWrapper.prototype.findClosestModal = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ModalWrapper); + +ElementWrapper.prototype.findAllSplitPanels = function(selector) { + return this.findAllComponents(SplitPanelWrapper, selector); }; -ElementWrapper.prototype.findClosestMultiselect = function() { +ElementWrapper.prototype.findStatusIndicator = function(selector) { + let rootSelector = \`.\${StatusIndicatorWrapper.rootSelector}\`; + if("legacyRootSelector" in StatusIndicatorWrapper && StatusIndicatorWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${StatusIndicatorWrapper.rootSelector}, .\${StatusIndicatorWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(MultiselectWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StatusIndicatorWrapper); }; -ElementWrapper.prototype.findClosestNavigableGroup = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(NavigableGroupWrapper); + +ElementWrapper.prototype.findAllStatusIndicators = function(selector) { + return this.findAllComponents(StatusIndicatorWrapper, selector); }; -ElementWrapper.prototype.findClosestPagination = function() { +ElementWrapper.prototype.findSteps = function(selector) { + let rootSelector = \`.\${StepsWrapper.rootSelector}\`; + if("legacyRootSelector" in StepsWrapper && StepsWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${StepsWrapper.rootSelector}, .\${StepsWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PaginationWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, StepsWrapper); }; -ElementWrapper.prototype.findClosestPanelLayout = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PanelLayoutWrapper); + +ElementWrapper.prototype.findAllSteps = function(selector) { + return this.findAllComponents(StepsWrapper, selector); }; -ElementWrapper.prototype.findClosestPieChart = function() { +ElementWrapper.prototype.findTable = function(selector) { + let rootSelector = \`.\${TableWrapper.rootSelector}\`; + if("legacyRootSelector" in TableWrapper && TableWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TableWrapper.rootSelector}, .\${TableWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PieChartWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TableWrapper); }; -ElementWrapper.prototype.findClosestPopover = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PopoverWrapper); + +ElementWrapper.prototype.findAllTables = function(selector) { + return this.findAllComponents(TableWrapper, selector); }; -ElementWrapper.prototype.findClosestProgressBar = function() { +ElementWrapper.prototype.findTabs = function(selector) { + let rootSelector = \`.\${TabsWrapper.rootSelector}\`; + if("legacyRootSelector" in TabsWrapper && TabsWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TabsWrapper.rootSelector}, .\${TabsWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ProgressBarWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TabsWrapper); }; -ElementWrapper.prototype.findClosestPromptInput = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PromptInputWrapper); + +ElementWrapper.prototype.findAllTabs = function(selector) { + return this.findAllComponents(TabsWrapper, selector); }; -ElementWrapper.prototype.findClosestPropertyFilter = function() { +ElementWrapper.prototype.findTagEditor = function(selector) { + let rootSelector = \`.\${TagEditorWrapper.rootSelector}\`; + if("legacyRootSelector" in TagEditorWrapper && TagEditorWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TagEditorWrapper.rootSelector}, .\${TagEditorWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(PropertyFilterWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TagEditorWrapper); }; -ElementWrapper.prototype.findClosestRadioButton = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(RadioButtonWrapper); + +ElementWrapper.prototype.findAllTagEditors = function(selector) { + return this.findAllComponents(TagEditorWrapper, selector); }; -ElementWrapper.prototype.findClosestRadioGroup = function() { +ElementWrapper.prototype.findTextContent = function(selector) { + let rootSelector = \`.\${TextContentWrapper.rootSelector}\`; + if("legacyRootSelector" in TextContentWrapper && TextContentWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TextContentWrapper.rootSelector}, .\${TextContentWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(RadioGroupWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextContentWrapper); }; -ElementWrapper.prototype.findClosestS3ResourceSelector = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(S3ResourceSelectorWrapper); + +ElementWrapper.prototype.findAllTextContents = function(selector) { + return this.findAllComponents(TextContentWrapper, selector); }; -ElementWrapper.prototype.findClosestSegmentedControl = function() { +ElementWrapper.prototype.findTextFilter = function(selector) { + let rootSelector = \`.\${TextFilterWrapper.rootSelector}\`; + if("legacyRootSelector" in TextFilterWrapper && TextFilterWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TextFilterWrapper.rootSelector}, .\${TextFilterWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SegmentedControlWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextFilterWrapper); }; -ElementWrapper.prototype.findClosestSelect = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SelectWrapper); + +ElementWrapper.prototype.findAllTextFilters = function(selector) { + return this.findAllComponents(TextFilterWrapper, selector); }; -ElementWrapper.prototype.findClosestSideNavigation = function() { +ElementWrapper.prototype.findTextarea = function(selector) { + let rootSelector = \`.\${TextareaWrapper.rootSelector}\`; + if("legacyRootSelector" in TextareaWrapper && TextareaWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TextareaWrapper.rootSelector}, .\${TextareaWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SideNavigationWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TextareaWrapper); }; -ElementWrapper.prototype.findClosestSlider = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SliderWrapper); + +ElementWrapper.prototype.findAllTextareas = function(selector) { + return this.findAllComponents(TextareaWrapper, selector); }; -ElementWrapper.prototype.findClosestSpaceBetween = function() { +ElementWrapper.prototype.findTiles = function(selector) { + let rootSelector = \`.\${TilesWrapper.rootSelector}\`; + if("legacyRootSelector" in TilesWrapper && TilesWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TilesWrapper.rootSelector}, .\${TilesWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SpaceBetweenWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TilesWrapper); }; -ElementWrapper.prototype.findClosestSpinner = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SpinnerWrapper); + +ElementWrapper.prototype.findAllTiles = function(selector) { + return this.findAllComponents(TilesWrapper, selector); }; -ElementWrapper.prototype.findClosestSplitPanel = function() { +ElementWrapper.prototype.findTimeInput = function(selector) { + let rootSelector = \`.\${TimeInputWrapper.rootSelector}\`; + if("legacyRootSelector" in TimeInputWrapper && TimeInputWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TimeInputWrapper.rootSelector}, .\${TimeInputWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(SplitPanelWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TimeInputWrapper); }; -ElementWrapper.prototype.findClosestStatusIndicator = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(StatusIndicatorWrapper); + +ElementWrapper.prototype.findAllTimeInputs = function(selector) { + return this.findAllComponents(TimeInputWrapper, selector); }; -ElementWrapper.prototype.findClosestSteps = function() { +ElementWrapper.prototype.findToggle = function(selector) { + let rootSelector = \`.\${ToggleWrapper.rootSelector}\`; + if("legacyRootSelector" in ToggleWrapper && ToggleWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ToggleWrapper.rootSelector}, .\${ToggleWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(StepsWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleWrapper); }; -ElementWrapper.prototype.findClosestTable = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TableWrapper); + +ElementWrapper.prototype.findAllToggles = function(selector) { + return this.findAllComponents(ToggleWrapper, selector); }; -ElementWrapper.prototype.findClosestTabs = function() { +ElementWrapper.prototype.findToggleButton = function(selector) { + let rootSelector = \`.\${ToggleButtonWrapper.rootSelector}\`; + if("legacyRootSelector" in ToggleButtonWrapper && ToggleButtonWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ToggleButtonWrapper.rootSelector}, .\${ToggleButtonWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TabsWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ToggleButtonWrapper); }; -ElementWrapper.prototype.findClosestTagEditor = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TagEditorWrapper); + +ElementWrapper.prototype.findAllToggleButtons = function(selector) { + return this.findAllComponents(ToggleButtonWrapper, selector); }; -ElementWrapper.prototype.findClosestTextContent = function() { +ElementWrapper.prototype.findToken = function(selector) { + let rootSelector = \`.\${TokenWrapper.rootSelector}\`; + if("legacyRootSelector" in TokenWrapper && TokenWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TokenWrapper.rootSelector}, .\${TokenWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TextContentWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenWrapper); }; -ElementWrapper.prototype.findClosestTextFilter = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TextFilterWrapper); + +ElementWrapper.prototype.findAllTokens = function(selector) { + return this.findAllComponents(TokenWrapper, selector); }; -ElementWrapper.prototype.findClosestTextarea = function() { +ElementWrapper.prototype.findTokenGroup = function(selector) { + let rootSelector = \`.\${TokenGroupWrapper.rootSelector}\`; + if("legacyRootSelector" in TokenGroupWrapper && TokenGroupWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TokenGroupWrapper.rootSelector}, .\${TokenGroupWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TextareaWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TokenGroupWrapper); }; -ElementWrapper.prototype.findClosestTiles = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TilesWrapper); + +ElementWrapper.prototype.findAllTokenGroups = function(selector) { + return this.findAllComponents(TokenGroupWrapper, selector); }; -ElementWrapper.prototype.findClosestTimeInput = function() { +ElementWrapper.prototype.findTooltip = function(selector) { + let rootSelector = \`.\${TooltipWrapper.rootSelector}\`; + if("legacyRootSelector" in TooltipWrapper && TooltipWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TooltipWrapper.rootSelector}, .\${TooltipWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TimeInputWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TooltipWrapper); }; -ElementWrapper.prototype.findClosestToggle = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ToggleWrapper); + +ElementWrapper.prototype.findAllTooltips = function(selector) { + return this.findAllComponents(TooltipWrapper, selector); }; -ElementWrapper.prototype.findClosestToggleButton = function() { +ElementWrapper.prototype.findTopNavigation = function(selector) { + let rootSelector = \`.\${TopNavigationWrapper.rootSelector}\`; + if("legacyRootSelector" in TopNavigationWrapper && TopNavigationWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TopNavigationWrapper.rootSelector}, .\${TopNavigationWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(ToggleButtonWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TopNavigationWrapper); }; -ElementWrapper.prototype.findClosestToken = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TokenWrapper); + +ElementWrapper.prototype.findAllTopNavigations = function(selector) { + return this.findAllComponents(TopNavigationWrapper, selector); }; -ElementWrapper.prototype.findClosestTokenGroup = function() { +ElementWrapper.prototype.findTreeView = function(selector) { + let rootSelector = \`.\${TreeViewWrapper.rootSelector}\`; + if("legacyRootSelector" in TreeViewWrapper && TreeViewWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TreeViewWrapper.rootSelector}, .\${TreeViewWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TokenGroupWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TreeViewWrapper); }; -ElementWrapper.prototype.findClosestTooltip = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TooltipWrapper); + +ElementWrapper.prototype.findAllTreeViews = function(selector) { + return this.findAllComponents(TreeViewWrapper, selector); }; -ElementWrapper.prototype.findClosestTopNavigation = function() { +ElementWrapper.prototype.findTutorialPanel = function(selector) { + let rootSelector = \`.\${TutorialPanelWrapper.rootSelector}\`; + if("legacyRootSelector" in TutorialPanelWrapper && TutorialPanelWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${TutorialPanelWrapper.rootSelector}, .\${TutorialPanelWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TopNavigationWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, TutorialPanelWrapper); }; -ElementWrapper.prototype.findClosestTreeView = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TreeViewWrapper); + +ElementWrapper.prototype.findAllTutorialPanels = function(selector) { + return this.findAllComponents(TutorialPanelWrapper, selector); }; -ElementWrapper.prototype.findClosestTutorialPanel = function() { +ElementWrapper.prototype.findWizard = function(selector) { + let rootSelector = \`.\${WizardWrapper.rootSelector}\`; + if("legacyRootSelector" in WizardWrapper && WizardWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${WizardWrapper.rootSelector}, .\${WizardWrapper.legacyRootSelector})\`; + } // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(TutorialPanelWrapper); + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, WizardWrapper); }; -ElementWrapper.prototype.findClosestWizard = function() { - // casting to 'any' is needed to avoid this issue with generics - // https://github.com/microsoft/TypeScript/issues/29132 - return (this as any).findClosestComponent(WizardWrapper); + +ElementWrapper.prototype.findAllWizards = function(selector) { + return this.findAllComponents(WizardWrapper, selector); }; + export default function wrapper(root: Element = document.body) { if (document && document.body && !document.body.contains(root)) { console.warn('[AwsUi] [test-utils] provided element is not part of the document body, interactions may work incorrectly') @@ -4355,6 +3124,7 @@ import HelpPanelWrapper from './help-panel'; import HotspotWrapper from './hotspot'; import IconWrapper from './icon'; import InputWrapper from './input'; +import ItemCardWrapper from './item-card'; import KeyValuePairsWrapper from './key-value-pairs'; import LineChartWrapper from './line-chart'; import LinkWrapper from './link'; @@ -4446,6 +3216,7 @@ export { HelpPanelWrapper }; export { HotspotWrapper }; export { IconWrapper }; export { InputWrapper }; +export { ItemCardWrapper }; export { KeyValuePairsWrapper }; export { LineChartWrapper }; export { LinkWrapper }; @@ -5243,6 +4014,23 @@ findInput(selector?: string): InputWrapper; * @returns {MultiElementWrapper} */ findAllInputs(selector?: string): MultiElementWrapper; +/** + * Returns a wrapper that matches the ItemCards with the specified CSS selector. + * If no CSS selector is specified, returns a wrapper that matches ItemCards. + * + * @param {string} [selector] CSS Selector + * @returns {ItemCardWrapper} + */ +findItemCard(selector?: string): ItemCardWrapper; + +/** + * Returns a multi-element wrapper that matches ItemCards with the specified CSS selector. + * If no CSS selector is specified, returns a multi-element wrapper that matches ItemCards. + * + * @param {string} [selector] CSS Selector + * @returns {MultiElementWrapper} + */ +findAllItemCards(selector?: string): MultiElementWrapper; /** * Returns a wrapper that matches the KeyValuePairs with the specified CSS selector. * If no CSS selector is specified, returns a wrapper that matches KeyValuePairs. @@ -6584,6 +5372,19 @@ ElementWrapper.prototype.findInput = function(selector) { ElementWrapper.prototype.findAllInputs = function(selector) { return this.findAllComponents(InputWrapper, selector); }; +ElementWrapper.prototype.findItemCard = function(selector) { + let rootSelector = \`.\${ItemCardWrapper.rootSelector}\`; + if("legacyRootSelector" in ItemCardWrapper && ItemCardWrapper.legacyRootSelector){ + rootSelector = \`:is(.\${ItemCardWrapper.rootSelector}, .\${ItemCardWrapper.legacyRootSelector})\`; + } + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ItemCardWrapper); +}; + +ElementWrapper.prototype.findAllItemCards = function(selector) { + return this.findAllComponents(ItemCardWrapper, selector); +}; ElementWrapper.prototype.findKeyValuePairs = function(selector) { let rootSelector = \`.\${KeyValuePairsWrapper.rootSelector}\`; if("legacyRootSelector" in KeyValuePairsWrapper && KeyValuePairsWrapper.legacyRootSelector){ diff --git a/src/cards/index.tsx b/src/cards/index.tsx index 0b97831189..b88d98a922 100644 --- a/src/cards/index.tsx +++ b/src/cards/index.tsx @@ -12,7 +12,6 @@ import { InternalContainerAsSubstep } from '../container/internal'; import { useInternalI18n } from '../i18n/context'; import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel'; import { getBaseProps } from '../internal/base-component'; -import Card from '../internal/components/card'; import { CollectionLabelContext } from '../internal/context/collection-label-context'; import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context'; import useBaseComponent from '../internal/hooks/use-base-component'; @@ -20,6 +19,7 @@ import { useMobile } from '../internal/hooks/use-mobile'; import useMouseDownTarget from '../internal/hooks/use-mouse-down-target'; import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { applyDisplayName } from '../internal/utils/apply-display-name'; +import InternalItemCard from '../item-card/internal'; import InternalLiveRegion from '../live-region/internal'; import InternalStatusIndicator from '../status-indicator/internal'; import { @@ -336,8 +336,9 @@ const CardsList = ({ }, })} > -
({ {content ?
{content(item)}
: ''}
))} - + ); })} diff --git a/src/cards/styles.scss b/src/cards/styles.scss index a8e5360076..3589e124e5 100644 --- a/src/cards/styles.scss +++ b/src/cards/styles.scss @@ -47,11 +47,11 @@ .selection-control { position: absolute; box-sizing: border-box; - inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal})); + inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal-default})); inset-block-start: 0; inset-inline-end: 0; - padding-block: awsui.$space-card-vertical; - padding-inline: awsui.$space-card-horizontal; + padding-block: awsui.$space-card-vertical-default; + padding-inline: awsui.$space-card-horizontal-default; } .loading, @@ -87,7 +87,7 @@ &-header { @include styles.font-heading-m; &-inner { - padding-block-start: styles.$control-padding-vertical; + /* used in test-utils */ &-selectable { inline-size: 90%; } diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap index 8f029aebbb..41335e803e 100644 --- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-focus-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-background-readonly-u09ddc": undefined, - "--awsui-style-border-color-default-u09ddc": undefined, - "--awsui-style-border-color-disabled-u09ddc": undefined, - "--awsui-style-border-color-focus-u09ddc": undefined, - "--awsui-style-border-color-hover-u09ddc": undefined, - "--awsui-style-border-color-readonly-u09ddc": undefined, - "--awsui-style-box-shadow-default-u09ddc": undefined, - "--awsui-style-box-shadow-disabled-u09ddc": undefined, - "--awsui-style-box-shadow-focus-u09ddc": undefined, - "--awsui-style-box-shadow-hover-u09ddc": undefined, - "--awsui-style-box-shadow-readonly-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-focus-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-color-readonly-u09ddc": undefined, - "--awsui-style-placeholder-color-u09ddc": undefined, - "--awsui-style-placeholder-font-size-u09ddc": undefined, - "--awsui-style-placeholder-font-style-u09ddc": undefined, - "--awsui-style-placeholder-font-weight-u09ddc": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-focus-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-background-readonly-q49t2v": undefined, + "--awsui-style-border-color-default-q49t2v": undefined, + "--awsui-style-border-color-disabled-q49t2v": undefined, + "--awsui-style-border-color-focus-q49t2v": undefined, + "--awsui-style-border-color-hover-q49t2v": undefined, + "--awsui-style-border-color-readonly-q49t2v": undefined, + "--awsui-style-box-shadow-default-q49t2v": undefined, + "--awsui-style-box-shadow-disabled-q49t2v": undefined, + "--awsui-style-box-shadow-focus-q49t2v": undefined, + "--awsui-style-box-shadow-hover-q49t2v": undefined, + "--awsui-style-box-shadow-readonly-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-focus-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-color-readonly-q49t2v": undefined, + "--awsui-style-placeholder-color-q49t2v": undefined, + "--awsui-style-placeholder-font-size-q49t2v": undefined, + "--awsui-style-placeholder-font-style-q49t2v": undefined, + "--awsui-style-placeholder-font-weight-q49t2v": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` exports[`getInputStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-focus-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-background-readonly-u09ddc": undefined, - "--awsui-style-border-color-default-u09ddc": undefined, - "--awsui-style-border-color-disabled-u09ddc": undefined, - "--awsui-style-border-color-focus-u09ddc": undefined, - "--awsui-style-border-color-hover-u09ddc": undefined, - "--awsui-style-border-color-readonly-u09ddc": undefined, - "--awsui-style-box-shadow-default-u09ddc": undefined, - "--awsui-style-box-shadow-disabled-u09ddc": undefined, - "--awsui-style-box-shadow-focus-u09ddc": undefined, - "--awsui-style-box-shadow-hover-u09ddc": undefined, - "--awsui-style-box-shadow-readonly-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-focus-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-color-readonly-u09ddc": undefined, - "--awsui-style-placeholder-color-u09ddc": undefined, - "--awsui-style-placeholder-font-size-u09ddc": undefined, - "--awsui-style-placeholder-font-style-u09ddc": undefined, - "--awsui-style-placeholder-font-weight-u09ddc": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-focus-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-background-readonly-q49t2v": undefined, + "--awsui-style-border-color-default-q49t2v": undefined, + "--awsui-style-border-color-disabled-q49t2v": undefined, + "--awsui-style-border-color-focus-q49t2v": undefined, + "--awsui-style-border-color-hover-q49t2v": undefined, + "--awsui-style-border-color-readonly-q49t2v": undefined, + "--awsui-style-box-shadow-default-q49t2v": undefined, + "--awsui-style-box-shadow-disabled-q49t2v": undefined, + "--awsui-style-box-shadow-focus-q49t2v": undefined, + "--awsui-style-box-shadow-hover-q49t2v": undefined, + "--awsui-style-box-shadow-readonly-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-focus-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-color-readonly-q49t2v": undefined, + "--awsui-style-placeholder-color-q49t2v": undefined, + "--awsui-style-placeholder-font-size-q49t2v": undefined, + "--awsui-style-placeholder-font-style-q49t2v": undefined, + "--awsui-style-placeholder-font-weight-q49t2v": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = ` exports[`getInputStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-u09ddc": "#ffffff", - "--awsui-style-background-disabled-u09ddc": "#f0f0f0", - "--awsui-style-background-focus-u09ddc": "#ffffff", - "--awsui-style-background-hover-u09ddc": "#fafafa", - "--awsui-style-background-readonly-u09ddc": "#ffffff", - "--awsui-style-border-color-default-u09ddc": "#cccccc", - "--awsui-style-border-color-disabled-u09ddc": "#e0e0e0", - "--awsui-style-border-color-focus-u09ddc": "#0073bb", - "--awsui-style-border-color-hover-u09ddc": "#999999", - "--awsui-style-border-color-readonly-u09ddc": "#e0e0e0", - "--awsui-style-box-shadow-default-u09ddc": "none", - "--awsui-style-box-shadow-disabled-u09ddc": "none", - "--awsui-style-box-shadow-focus-u09ddc": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-u09ddc": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-u09ddc": "none", - "--awsui-style-color-default-u09ddc": "#000000", - "--awsui-style-color-disabled-u09ddc": "#999999", - "--awsui-style-color-focus-u09ddc": "#000000", - "--awsui-style-color-hover-u09ddc": "#000000", - "--awsui-style-color-readonly-u09ddc": "#000000", - "--awsui-style-placeholder-color-u09ddc": "#999999", - "--awsui-style-placeholder-font-size-u09ddc": "14px", - "--awsui-style-placeholder-font-style-u09ddc": "italic", - "--awsui-style-placeholder-font-weight-u09ddc": "400", + "--awsui-style-background-default-q49t2v": "#ffffff", + "--awsui-style-background-disabled-q49t2v": "#f0f0f0", + "--awsui-style-background-focus-q49t2v": "#ffffff", + "--awsui-style-background-hover-q49t2v": "#fafafa", + "--awsui-style-background-readonly-q49t2v": "#ffffff", + "--awsui-style-border-color-default-q49t2v": "#cccccc", + "--awsui-style-border-color-disabled-q49t2v": "#e0e0e0", + "--awsui-style-border-color-focus-q49t2v": "#0073bb", + "--awsui-style-border-color-hover-q49t2v": "#999999", + "--awsui-style-border-color-readonly-q49t2v": "#e0e0e0", + "--awsui-style-box-shadow-default-q49t2v": "none", + "--awsui-style-box-shadow-disabled-q49t2v": "none", + "--awsui-style-box-shadow-focus-q49t2v": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-q49t2v": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-q49t2v": "none", + "--awsui-style-color-default-q49t2v": "#000000", + "--awsui-style-color-disabled-q49t2v": "#999999", + "--awsui-style-color-focus-q49t2v": "#000000", + "--awsui-style-color-hover-q49t2v": "#000000", + "--awsui-style-color-readonly-q49t2v": "#000000", + "--awsui-style-placeholder-color-q49t2v": "#999999", + "--awsui-style-placeholder-font-size-q49t2v": "14px", + "--awsui-style-placeholder-font-style-q49t2v": "italic", + "--awsui-style-placeholder-font-weight-q49t2v": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/internal/components/card/index.tsx b/src/internal/components/card/index.tsx deleted file mode 100644 index 3cecc4ddc6..0000000000 --- a/src/internal/components/card/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; -import clsx from 'clsx'; - -import { useVisualRefresh } from '../../hooks/use-visual-mode'; -import InternalStructuredItem from '../structured-item'; -import { InternalCardProps } from './interfaces'; - -import styles from './styles.css.js'; - -export default function Card({ - actions, - selected, - children, - className, - header, - description, - icon, - metadataAttributes, - onClick, - disableHeaderPaddings, - disableContentPaddings, -}: InternalCardProps) { - const isRefresh = useVisualRefresh(); - - const headerRowEmpty = !header && !description && !icon && !actions; - - return ( -
-
- {header}
} - secondaryContent={description &&
{description}
} - icon={icon} - actions={actions} - disablePaddings={disableHeaderPaddings} - wrapActions={false} - /> -
-
{children}
- - ); -} diff --git a/src/internal/components/card/interfaces.ts b/src/internal/components/card/interfaces.ts deleted file mode 100644 index adf72487b9..0000000000 --- a/src/internal/components/card/interfaces.ts +++ /dev/null @@ -1,57 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; - -import { BaseComponentProps } from '../../base-component'; - -export interface BaseCardProps extends BaseComponentProps { - /** - * Heading text. - */ - header?: React.ReactNode; - - /** - * Supplementary text below the heading. - */ - description?: React.ReactNode; - - /** - * Specifies actions for the card. - */ - actions?: React.ReactNode; - - /** - * Primary content displayed in the card. - */ - children?: React.ReactNode; - - /** - * Icon which will be displayed at the top of the card, - * aligned with the start of the content. - */ - icon?: React.ReactNode; - - /** - * Determines whether the card header has padding. If `true`, removes the default padding from the header. - */ - disableHeaderPaddings?: boolean; - - /** - * Determines whether the card content has padding. If `true`, removes the default padding from the content area. - */ - disableContentPaddings?: boolean; -} - -export interface InternalCardProps extends BaseCardProps { - /** - * Called when the user clicks on the card. - */ - onClick?: React.MouseEventHandler; - - /** - * Specifies whether the card is in active state. - */ - selected?: boolean; - - metadataAttributes?: Record; -} diff --git a/src/internal/components/card/styles.scss b/src/internal/components/card/styles.scss deleted file mode 100644 index f68442a87e..0000000000 --- a/src/internal/components/card/styles.scss +++ /dev/null @@ -1,113 +0,0 @@ -/* - Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. - SPDX-License-Identifier: Apache-2.0 -*/ - -@use 'sass:math'; - -@use '../../styles' as styles; -@use '../../styles/tokens' as awsui; -@use './motion'; - -@mixin card-style { - border-start-start-radius: awsui.$border-radius-container; - border-start-end-radius: awsui.$border-radius-container; - border-end-start-radius: awsui.$border-radius-container; - border-end-end-radius: awsui.$border-radius-container; - box-sizing: border-box; - block-size: 100%; - - &::before { - @include styles.base-pseudo-element; - // Reset border color to prevent it from flashing black during card selection animation - border-color: transparent; - border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top; - border-start-start-radius: awsui.$border-radius-container; - border-start-end-radius: awsui.$border-radius-container; - border-end-start-radius: awsui.$border-radius-container; - border-end-end-radius: awsui.$border-radius-container; - z-index: 1; - } - - &::after { - @include styles.base-pseudo-element; - border-start-start-radius: awsui.$border-radius-container; - border-start-end-radius: awsui.$border-radius-container; - border-end-start-radius: awsui.$border-radius-container; - border-end-end-radius: awsui.$border-radius-container; - } - &:not(.refresh)::after { - box-shadow: awsui.$shadow-container; - } - &.refresh::after { - border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default; - border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default; - } -} - -.root { - @include styles.styles-reset(); - box-sizing: border-box; - position: relative; - background-color: awsui.$color-background-container-content; - min-inline-size: 0; - @include card-style; -} - -$button-padding-vertical: styles.$control-padding-vertical; -$button-padding-horizontal: awsui.$space-xxs; -$padding-block-start-base: calc(awsui.$space-card-vertical - $button-padding-vertical); - -.header { - &:not(.no-padding) { - padding-block-end: awsui.$space-xxs; - padding-inline-start: awsui.$space-card-horizontal; - &:not(.with-actions) { - padding-block-start: $padding-block-start-base; - padding-inline-end: awsui.$space-card-horizontal; - } - &.with-actions { - // Compensate the padding given by the buttons in the actions slot - padding-block-start: calc($padding-block-start-base - $button-padding-vertical); - padding-inline-end: calc(awsui.$space-card-horizontal - $button-padding-horizontal); - } - } - &-inner { - @include styles.font-heading-s; - } -} - -.body { - &:not(.no-padding) { - padding-block-start: awsui.$space-xxs; - padding-block-end: awsui.$space-card-vertical; - padding-inline: awsui.$space-card-horizontal; - } - &.no-padding { - border-end-start-radius: awsui.$border-radius-container; - border-end-end-radius: awsui.$border-radius-container; - } -} - -.no-header, -.no-content { - // No need to preserve the space between header and content when one of them is missing. - > .header:not(.no-padding) { - padding-block-end: 0; - } - > .body:not(.no-padding) { - padding-block-start: 0; - } -} - -.selected { - background-color: awsui.$color-background-item-selected; - &::before { - border-block: awsui.$border-item-width solid awsui.$color-border-item-selected; - border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected; - } -} - -.description { - color: awsui.$color-text-heading-secondary; -} diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap new file mode 100644 index 0000000000..4a48e7f163 --- /dev/null +++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap @@ -0,0 +1,52 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`getContentStyles handles all possible style configurations 1`] = `{}`; + +exports[`getContentStyles handles all possible style configurations 2`] = `{}`; + +exports[`getContentStyles handles all possible style configurations 3`] = ` +{ + "paddingBlock": "16px", + "paddingInline": "20px", +} +`; + +exports[`getFooterStyles handles all possible style configurations 1`] = `{}`; + +exports[`getFooterStyles handles all possible style configurations 2`] = `{}`; + +exports[`getFooterStyles handles all possible style configurations 3`] = ` +{ + "borderBlockStartColor": "#e0e0e0", + "borderBlockStartStyle": "solid", + "borderBlockStartWidth": "1px", + "paddingBlock": "12px", + "paddingInline": "20px", +} +`; + +exports[`getHeaderStyles handles all possible style configurations 1`] = `{}`; + +exports[`getHeaderStyles handles all possible style configurations 2`] = `{}`; + +exports[`getHeaderStyles handles all possible style configurations 3`] = ` +{ + "paddingBlock": "12px", + "paddingInline": "20px", +} +`; + +exports[`getRootStyles handles all possible style configurations 1`] = `{}`; + +exports[`getRootStyles handles all possible style configurations 2`] = `{}`; + +exports[`getRootStyles handles all possible style configurations 3`] = ` +{ + "--awsui-style-item-card-background-default-q49t2v": "#ffffff", + "--awsui-style-item-card-border-color-default-q49t2v": "#e0e0e0", + "--awsui-style-item-card-border-radius-q49t2v": "8px", + "--awsui-style-item-card-border-width-default-q49t2v": "1px", + "--awsui-style-item-card-box-shadow-default-q49t2v": "0 1px 3px rgba(0,0,0,0.1)", + "borderRadius": "8px", +} +`; diff --git a/src/item-card/__tests__/card.test.tsx b/src/item-card/__tests__/card.test.tsx new file mode 100644 index 0000000000..cb2656bc3b --- /dev/null +++ b/src/item-card/__tests__/card.test.tsx @@ -0,0 +1,357 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; +import { fireEvent, render } from '@testing-library/react'; + +import Icon from '../../../lib/components/icon'; +import ItemCard from '../../../lib/components/item-card'; +import InternalItemCard from '../../../lib/components/item-card/internal'; +import createWrapper from '../../../lib/components/test-utils/dom'; + +import styles from '../../../lib/components/item-card/styles.css.js'; + +function renderItemCard(jsx: React.ReactElement) { + const { container } = render(jsx); + const wrapper = createWrapper(container); + const itemCard = wrapper.findItemCard()!; + return { wrapper, itemCard }; +} + +test('renders children content', () => { + const { itemCard } = renderItemCard(test content); + expect(itemCard.getElement()).toHaveTextContent('test content'); +}); + +test('renders without header, footer, or actions by default', () => { + const { itemCard } = renderItemCard(content only); + expect(itemCard.findHeader()).toBeNull(); + expect(itemCard.findFooter()).toBeNull(); + expect(itemCard.getElement()).toHaveTextContent('content only'); +}); + +test('renders header when provided', () => { + const { itemCard } = renderItemCard(content); + const header = itemCard.findHeader(); + expect(header).not.toBeNull(); + expect(header!.getElement()).toHaveTextContent('Card title'); +}); + +test('renders header-inner element for header text', () => { + const { itemCard } = renderItemCard(content); + const headerInner = itemCard.findByClassName(styles['header-inner']); + expect(headerInner).not.toBeNull(); + expect(headerInner!.getElement()).toHaveTextContent('My Header'); +}); + +test('renders description when provided', () => { + const { itemCard } = renderItemCard( + + content + + ); + const description = itemCard.findDescription(); + expect(description).not.toBeNull(); + expect(description!.getElement()).toHaveTextContent('A description'); +}); + +test('renders footer when provided', () => { + const { itemCard } = renderItemCard(content); + const footer = itemCard.findFooter(); + expect(footer).not.toBeNull(); + expect(footer!.getElement()).toHaveTextContent('Footer text'); +}); + +test('does not render footer element when footer is not provided', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.findFooter()).toBeNull(); +}); + +test('renders actions in the header area', () => { + const { itemCard } = renderItemCard( + Action}> + content + + ); + const actions = itemCard.findActions(); + expect(actions).not.toBeNull(); + expect(actions!.getElement()).toHaveTextContent('Action'); +}); + +test('renders header with with-actions class when actions are provided', () => { + const { itemCard } = renderItemCard( + Action}> + content + + ); + const header = itemCard.findHeader(); + expect(header!.getElement()).toHaveClass(styles['with-actions']); +}); + +test('renders header without with-actions class when no actions', () => { + const { itemCard } = renderItemCard(content); + const header = itemCard.findHeader(); + expect(header!.getElement()).not.toHaveClass(styles['with-actions']); +}); + +test('renders all parts together: header, description, actions, children, footer', () => { + const { itemCard } = renderItemCard( + Act} footer="Footer"> + Body + + ); + expect(itemCard.findHeader()).not.toBeNull(); + expect(itemCard.findByClassName(styles['header-inner'])!.getElement()).toHaveTextContent('Header'); + expect(itemCard.findDescription()!.getElement()).toHaveTextContent('Description'); + expect(itemCard.findContent()!.getElement()).toHaveTextContent('Body'); + expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Footer'); +}); + +test('does not render body when children are not provided', () => { + const { itemCard } = renderItemCard(); + expect(itemCard.findContent()).toBeNull(); +}); + +describe('disableHeaderPaddings', () => { + test('applies no-padding class to header when disableHeaderPaddings is true', () => { + const { itemCard } = renderItemCard( + + content + + ); + const header = itemCard.findHeader(); + expect(header!.getElement()).toHaveClass(styles['no-padding']); + }); + + test('does not apply no-padding class to header by default', () => { + const { itemCard } = renderItemCard(content); + const header = itemCard.findHeader(); + expect(header!.getElement()).not.toHaveClass(styles['no-padding']); + }); +}); + +describe('disableContentPaddings', () => { + test('applies no-padding class to body when disableContentPaddings is true', () => { + const { itemCard } = renderItemCard(content); + const body = itemCard.findContent(); + expect(body!.getElement()).toHaveClass(styles['no-padding']); + }); + + test('does not apply no-padding class to body by default', () => { + const { itemCard } = renderItemCard(content); + const body = itemCard.findContent(); + expect(body!.getElement()).not.toHaveClass(styles['no-padding']); + }); +}); + +describe('disableFooterPaddings', () => { + test('applies no-padding class to footer when disableFooterPaddings is true', () => { + const { itemCard } = renderItemCard( + + content + + ); + const footer = itemCard.findFooter(); + expect(footer!.getElement()).toHaveClass(styles['no-padding']); + }); + + test('does not apply no-padding class to footer by default', () => { + const { itemCard } = renderItemCard(content); + const footer = itemCard.findFooter(); + expect(footer!.getElement()).not.toHaveClass(styles['no-padding']); + }); +}); + +describe('icon', () => { + test('renders icon when icon is provided', () => { + const { itemCard } = renderItemCard( + }> + content + + ); + expect(itemCard.findIcon()).not.toBeNull(); + expect(itemCard.findHeader()).not.toBeNull(); + }); + + test('renders icon and header area when icon is provided without header text', () => { + const { itemCard } = renderItemCard(}>content); + expect(itemCard.findIcon()).not.toBeNull(); + }); + + test('does not render icon when icon is not provided', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.findIcon()).toBeNull(); + }); +}); + +describe('Style API', () => { + test('applies style properties to root element', () => { + const { itemCard } = renderItemCard( + + Content + + ); + + expect(getComputedStyle(itemCard.getElement()).getPropertyValue('border-radius')).toBe('20px'); + + const body = itemCard.findContent()!; + expect(getComputedStyle(body.getElement()).getPropertyValue('padding-block')).toBe('30px'); + expect(getComputedStyle(body.getElement()).getPropertyValue('padding-inline')).toBe('40px'); + + const header = itemCard.findHeader()!; + expect(getComputedStyle(header.getElement()).getPropertyValue('padding-block')).toBe('10px'); + expect(getComputedStyle(header.getElement()).getPropertyValue('padding-inline')).toBe('20px'); + + const footer = itemCard.findFooter()!; + expect(getComputedStyle(footer.getElement()).getPropertyValue('border-block-start-color')).toBe('red'); + expect(getComputedStyle(footer.getElement()).getPropertyValue('border-block-start-width')).toBe('2px'); + expect(getComputedStyle(footer.getElement()).getPropertyValue('padding-block')).toBe('15px'); + expect(getComputedStyle(footer.getElement()).getPropertyValue('padding-inline')).toBe('25px'); + }); +}); + +test('renders with empty header still shows header area when actions provided', () => { + const { itemCard } = renderItemCard(Click}>content); + expect(itemCard.findHeader()).not.toBeNull(); +}); + +test('renders with only footer and children', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.findHeader()).toBeNull(); + expect(itemCard.findFooter()).not.toBeNull(); + expect(itemCard.findContent()).not.toBeNull(); +}); + +test('renders with only header and no children', () => { + const { itemCard } = renderItemCard(); + expect(itemCard.findHeader()).not.toBeNull(); + expect(itemCard.findContent()).toBeNull(); + expect(itemCard.findFooter()).toBeNull(); +}); + +test('renders with React nodes as header and footer', () => { + const { itemCard } = renderItemCard( + Custom Header} footer={
Custom Footer
}> + content + + ); + expect(itemCard.findByClassName(styles['header-inner'])!.getElement()).toHaveTextContent('Custom Header'); + expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Custom Footer'); +}); + +describe('variant', () => { + test('applies variant-default class by default', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles['variant-default']); + }); + + test('applies variant-default class when variant is "default"', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles['variant-default']); + expect(itemCard.getElement()).not.toHaveClass(styles['variant-embedded']); + }); + + test('applies variant-embedded class when variant is "embedded"', () => { + const { itemCard } = renderItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles['variant-embedded']); + expect(itemCard.getElement()).not.toHaveClass(styles['variant-default']); + }); +}); + +describe('nativeAttributes', () => { + test('forwards data-* attributes to the root element', () => { + const { itemCard } = renderItemCard( + content + ); + expect(itemCard.getElement()).toHaveAttribute('data-testid', 'my-card'); + expect(itemCard.getElement()).toHaveAttribute('data-custom', 'value'); + }); + + test('forwards aria-* attributes to the root element', () => { + const { itemCard } = renderItemCard( + content + ); + expect(itemCard.getElement()).toHaveAttribute('aria-label', 'Card label'); + expect(itemCard.getElement()).toHaveAttribute('aria-describedby', 'desc-id'); + }); + + test('forwards event handlers via nativeAttributes', () => { + const onMouseEnter = jest.fn(); + const { itemCard } = renderItemCard(content); + fireEvent.mouseEnter(itemCard.getElement()); + expect(onMouseEnter).toHaveBeenCalledTimes(1); + }); +}); + +describe('highlighted (internal prop)', () => { + function renderInternalItemCard(jsx: React.ReactElement) { + const { container } = render(jsx); + const wrapper = createWrapper(container); + const itemCard = wrapper.findItemCard()!; + return { wrapper, itemCard }; + } + + test('applies highlighted class when highlighted is true', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles.highlighted); + }); + + test('does not apply highlighted class by default', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).not.toHaveClass(styles.highlighted); + }); + + test('does not apply highlighted class when highlighted is false', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).not.toHaveClass(styles.highlighted); + }); +}); + +describe('fullHeight (internal prop)', () => { + function renderInternalItemCard(jsx: React.ReactElement) { + const { container } = render(jsx); + const wrapper = createWrapper(container); + const itemCard = wrapper.findItemCard()!; + return { wrapper, itemCard }; + } + + test('applies full-height class when fullHeight is true', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles['full-height']); + }); + + test('does not apply full-height class by default', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).not.toHaveClass(styles['full-height']); + }); + + test('does not apply full-height class when fullHeight is false', () => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).not.toHaveClass(styles['full-height']); + }); +}); diff --git a/src/item-card/__tests__/styles.test.tsx b/src/item-card/__tests__/styles.test.tsx new file mode 100644 index 0000000000..8bf07a2148 --- /dev/null +++ b/src/item-card/__tests__/styles.test.tsx @@ -0,0 +1,131 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { getContentStyles, getFooterStyles, getHeaderStyles, getRootStyles } from '../style'; + +jest.mock('../../internal/environment', () => ({ + SYSTEM: 'core', +})); + +const allStyles = { + root: { + background: '#ffffff', + borderColor: '#e0e0e0', + borderRadius: '8px', + borderWidth: '1px', + boxShadow: '0 1px 3px rgba(0,0,0,0.1)', + }, + content: { + paddingBlock: '16px', + paddingInline: '20px', + }, + header: { + paddingBlock: '12px', + paddingInline: '20px', + }, + footer: { + root: { + paddingBlock: '12px', + paddingInline: '20px', + }, + divider: { + borderColor: '#e0e0e0', + borderWidth: '1px', + }, + }, +}; + +describe('getRootStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('handles all possible style configurations', () => { + expect(getRootStyles(undefined)).toMatchSnapshot(); + expect(getRootStyles({})).toMatchSnapshot(); + expect(getRootStyles(allStyles)).toMatchSnapshot(); + }); + + test('returns empty object when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getRootStyles: getRootStylesNonCore } = await import('../style'); + + const result = getRootStylesNonCore(allStyles); + expect(result).toEqual({}); + }); +}); + +describe('getContentStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('handles all possible style configurations', () => { + expect(getContentStyles(undefined)).toMatchSnapshot(); + expect(getContentStyles({})).toMatchSnapshot(); + expect(getContentStyles(allStyles)).toMatchSnapshot(); + }); + + test('returns empty object when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getContentStyles: getContentStylesNonCore } = await import('../style'); + + const result = getContentStylesNonCore(allStyles); + expect(result).toEqual({}); + }); +}); + +describe('getHeaderStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('handles all possible style configurations', () => { + expect(getHeaderStyles(undefined)).toMatchSnapshot(); + expect(getHeaderStyles({})).toMatchSnapshot(); + expect(getHeaderStyles(allStyles)).toMatchSnapshot(); + }); + + test('returns empty object when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getHeaderStyles: getHeaderStylesNonCore } = await import('../style'); + + const result = getHeaderStylesNonCore(allStyles); + expect(result).toEqual({}); + }); +}); + +describe('getFooterStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('handles all possible style configurations', () => { + expect(getFooterStyles(undefined)).toMatchSnapshot(); + expect(getFooterStyles({})).toMatchSnapshot(); + expect(getFooterStyles(allStyles)).toMatchSnapshot(); + }); + + test('returns empty object when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getFooterStyles: getFooterStylesNonCore } = await import('../style'); + + const result = getFooterStylesNonCore(allStyles); + expect(result).toEqual({}); + }); +}); diff --git a/src/item-card/index.tsx b/src/item-card/index.tsx new file mode 100644 index 0000000000..0827c40c80 --- /dev/null +++ b/src/item-card/index.tsx @@ -0,0 +1,44 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +'use client'; +import React from 'react'; + +import useBaseComponent from '../internal/hooks/use-base-component'; +import { applyDisplayName } from '../internal/utils/apply-display-name'; +import { getExternalProps } from '../internal/utils/external-props'; +import { ItemCardProps } from './interfaces'; +import InternalItemCard from './internal'; + +export { ItemCardProps }; +const ItemCard = ({ + disableHeaderPaddings = false, + disableContentPaddings = false, + disableFooterPaddings = false, + variant = 'default', + ...props +}: ItemCardProps) => { + const baseComponentProps = useBaseComponent('ItemCard', { + props: { + disableHeaderPaddings, + disableContentPaddings, + disableFooterPaddings, + variant, + }, + }); + + const externalProps = getExternalProps(props); + + return ( + + ); +}; + +applyDisplayName(ItemCard, 'ItemCard'); +export default ItemCard; diff --git a/src/item-card/interfaces.ts b/src/item-card/interfaces.ts new file mode 100644 index 0000000000..4db3f3b3c9 --- /dev/null +++ b/src/item-card/interfaces.ts @@ -0,0 +1,143 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { BaseComponentProps } from '../internal/base-component'; +import { InternalBaseComponentProps } from '../internal/hooks/use-base-component'; +/** + * @awsuiSystem core + */ +import { NativeAttributes } from '../internal/utils/with-native-attributes'; + +export interface ItemCardProps extends BaseComponentProps { + /** + * Heading element of the item card. Use this to add a title or header text. + */ + header?: React.ReactNode; + + /** + * A description or subtitle displayed below the header. + */ + description?: React.ReactNode; + + /** + * Footer content displayed at the bottom of the item card. + */ + footer?: React.ReactNode; + + /** + * Actions to display in the item card header area, typically buttons or links. + */ + actions?: React.ReactNode; + + /** + * Main content of the item card. + */ + children?: React.ReactNode; + + /** + * Icon content displayed next to the header. + */ + icon?: React.ReactNode; + + /** + * Removes the default padding from the header area. + * @default false + */ + disableHeaderPaddings?: boolean; + + /** + * Removes the default padding from the content area. + * @default false + */ + disableContentPaddings?: boolean; + + /** + * Removes the default padding from the footer area. + * @default false + */ + disableFooterPaddings?: boolean; + + /** + * Specifies the visual variant of the item card, which controls the border radius and padding. + * + * - `default` - Uses container-level border radius and padding (larger). + * - `embedded` - Uses compact border radius and padding (smaller). + * + * @default 'default' + */ + variant?: ItemCardProps.Variant; + + /** + * An object containing CSS properties to customize the item card's visual appearance. + * Refer to the [style](/components/item-card/?tabId=style) tab for more details. + * @awsuiSystem core + */ + style?: ItemCardProps.Style; + + /** + * Attributes to add to the native root element. + * Some attributes will be automatically combined with internal attribute values: + * - `className` will be appended. + * - Event handlers will be chained, unless the default is prevented. + * + * We do not support using this attribute to apply custom styling. + * + * @awsuiSystem core + */ + nativeAttributes?: NativeAttributes>; +} + +export namespace ItemCardProps { + export type Variant = 'embedded' | 'default'; + + export interface Style { + root?: { + background?: string; + borderColor?: string; + borderRadius?: string; + borderWidth?: string; + boxShadow?: string; + }; + content?: { + paddingBlock?: string; + paddingInline?: string; + }; + header?: { + paddingBlock?: string; + paddingInline?: string; + }; + footer?: { + root?: { + paddingBlock?: string; + paddingInline?: string; + }; + divider?: { + borderColor?: string; + borderWidth?: string; + }; + }; + } +} + +export interface InternalItemCardProps extends ItemCardProps, InternalBaseComponentProps { + /** + * Called when the user clicks on the item card. + */ + onClick?: React.MouseEventHandler; + + /** + * Specifies whether the item card is in highlighted state. + */ + highlighted?: boolean; + + /** + * Makes the item card stretch to fill the full height of its container. + */ + fullHeight?: boolean; + + /** + * Specifies metadata for analytics in cards + */ + metadataAttributes?: Record; +} diff --git a/src/item-card/internal.tsx b/src/item-card/internal.tsx new file mode 100644 index 0000000000..1bd2f0d73e --- /dev/null +++ b/src/item-card/internal.tsx @@ -0,0 +1,97 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; +import clsx from 'clsx'; + +import { getBaseProps } from '../internal/base-component'; +import InternalStructuredItem from '../internal/components/structured-item'; +import { processAttributes } from '../internal/utils/with-native-attributes'; +import { InternalItemCardProps } from './interfaces'; +import { getContentStyles, getFooterStyles, getHeaderStyles, getRootStyles } from './style'; + +import styles from './styles.css.js'; + +export default function InternalItemCard({ + actions, + highlighted, + children, + className, + header, + description, + footer, + icon, + style, + metadataAttributes, + nativeAttributes, + onClick, + disableHeaderPaddings, + disableContentPaddings, + disableFooterPaddings, + fullHeight, + variant = 'default', + __internalRootRef, + ...restProps +}: InternalItemCardProps) { + const baseProps = getBaseProps(restProps); + + const headerRowEmpty = !header && !description && !icon && !actions; + + const rootAttributes = processAttributes>( + { + className: clsx( + className, + styles.root, + highlighted && styles.highlighted, + fullHeight && styles['full-height'], + styles[`variant-${variant}`] + ), + ...metadataAttributes, + onClick, + style: getRootStyles(style), + }, + nativeAttributes, + 'Card' + ); + + return ( +
+
+ {!headerRowEmpty && ( +
+ {header}
} + secondaryContent={description &&
{description}
} + icon={icon &&
{icon}
} + actions={actions} + disablePaddings={disableHeaderPaddings} + wrapActions={false} + /> +
+ )} + {children && ( +
+ {children} +
+ )} + {footer && ( +
+ {footer} +
+ )} +
+ + ); +} diff --git a/src/internal/components/card/motion.scss b/src/item-card/motion.scss similarity index 89% rename from src/internal/components/card/motion.scss rename to src/item-card/motion.scss index d17e521a8b..1cf811db27 100644 --- a/src/internal/components/card/motion.scss +++ b/src/item-card/motion.scss @@ -3,8 +3,8 @@ SPDX-License-Identifier: Apache-2.0 */ -@use '../../styles' as styles; -@use '../../styles/tokens' as awsui; +@use '../internal/styles' as styles; +@use '../internal/styles/tokens' as awsui; .root { @include styles.with-motion { diff --git a/src/item-card/style.tsx b/src/item-card/style.tsx new file mode 100644 index 0000000000..437035000e --- /dev/null +++ b/src/item-card/style.tsx @@ -0,0 +1,60 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { SYSTEM } from '../internal/environment'; +import customCssProps from '../internal/generated/custom-css-properties'; +import { ItemCardProps } from './interfaces'; + +export function getRootStyles(style: ItemCardProps.Style | undefined) { + if (SYSTEM !== 'core') { + return {}; + } + + return { + ...(style?.root?.background && { [customCssProps.styleItemCardBackgroundDefault]: style.root.background }), + ...(style?.root?.borderRadius && { + [customCssProps.styleItemCardBorderRadius]: style.root.borderRadius, + borderRadius: style.root.borderRadius, + }), + ...(style?.root?.borderColor && { [customCssProps.styleItemCardBorderColorDefault]: style.root.borderColor }), + ...(style?.root?.borderWidth && { [customCssProps.styleItemCardBorderWidthDefault]: style.root.borderWidth }), + ...(style?.root?.boxShadow && { [customCssProps.styleItemCardBoxShadowDefault]: style.root.boxShadow }), + }; +} + +export function getContentStyles(style: ItemCardProps.Style | undefined) { + if (SYSTEM !== 'core') { + return {}; + } + + return { + ...(style?.content?.paddingBlock && { paddingBlock: style.content.paddingBlock }), + ...(style?.content?.paddingInline && { paddingInline: style.content.paddingInline }), + }; +} + +export function getHeaderStyles(style: ItemCardProps.Style | undefined) { + if (SYSTEM !== 'core') { + return {}; + } + + return { + ...(style?.header?.paddingBlock && { paddingBlock: style.header.paddingBlock }), + ...(style?.header?.paddingInline && { paddingInline: style.header.paddingInline }), + }; +} + +export function getFooterStyles(style: ItemCardProps.Style | undefined) { + if (SYSTEM !== 'core') { + return {}; + } + + const hasDivider = style?.footer?.divider?.borderColor || style?.footer?.divider?.borderWidth; + + return { + ...(hasDivider && { borderBlockStartStyle: 'solid' as const }), + ...(style?.footer?.divider?.borderColor && { borderBlockStartColor: style.footer.divider.borderColor }), + ...(style?.footer?.divider?.borderWidth && { borderBlockStartWidth: style.footer.divider.borderWidth }), + ...(style?.footer?.root?.paddingBlock && { paddingBlock: style.footer.root.paddingBlock }), + ...(style?.footer?.root?.paddingInline && { paddingInline: style.footer.root.paddingInline }), + }; +} diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss new file mode 100644 index 0000000000..11166316a5 --- /dev/null +++ b/src/item-card/styles.scss @@ -0,0 +1,160 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use 'sass:map'; +@use 'sass:math'; + +@use '../internal/styles' as styles; +@use '../internal/styles/tokens' as awsui; +@use '../internal/generated/custom-css-properties/index.scss' as custom-props; +@use './motion'; + +// Variant configuration maps — adjust values here for easy customization +$variant-border-radius: ( + 'embedded': awsui.$border-radius-card-embedded, + 'default': awsui.$border-radius-card-default, +); + +$variant-padding-block: ( + 'embedded': awsui.$space-card-vertical-embedded, + 'default': awsui.$space-card-vertical-default, +); + +$variant-padding-inline: ( + 'embedded': awsui.$space-card-horizontal-embedded, + 'default': awsui.$space-card-horizontal-default, +); + +$action-padding-vertical: styles.$control-padding-vertical; +$action-padding-horizontal: awsui.$space-xxs; + +@mixin apply-border-radius($variant: 'default') { + $radius: map.get($variant-border-radius, $variant); + border-start-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius); + border-start-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius); + border-end-start-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius); + border-end-end-radius: var(#{custom-props.$styleItemCardBorderRadius}, $radius); +} + +.header { + &-inner { + @include styles.font-heading-s; + } + &:not(:has(+ .body)) { + flex: 1; + } +} + +.body { + flex: 1; +} + +.footer { + &:first-child { + margin-block-start: auto; + } +} + +.root { + @include styles.styles-reset(); + box-sizing: border-box; + position: relative; + background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card); + min-inline-size: 0; + box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); + + &:before { + @include styles.base-pseudo-element; + + box-shadow: none; + + border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + } + &.highlighted { + background-color: awsui.$color-background-item-selected; + + &:before { + border-block: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted; + border-inline: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted; + } + } + + &.variant-embedded, + &.variant-default { + > .inner-card { + display: flex; + flex-direction: column; + block-size: 100%; + inline-size: 100%; + + > .header + .body, + > .header + .footer, + > .body + .footer { + &:not(.no-padding) { + padding-block-start: awsui.$space-xxs; + } + } + + > .header, + > .body { + &:not(.no-padding):has(+ .body, + .footer) { + padding-block-end: awsui.$space-xxs; + } + } + } + } + + // Generate variant styles from the configuration maps + @each $variant in ('embedded', 'default') { + &.variant-#{$variant} { + &, + &:before, + > .inner-card { + @include apply-border-radius($variant); + } + + $padding-block: map.get($variant-padding-block, $variant); + $padding-inline: map.get($variant-padding-inline, $variant); + + > .inner-card > .header, + > .inner-card > .body, + > .inner-card > .footer { + &:not(.no-padding) { + padding-block: $padding-block; + padding-inline-start: $padding-inline; + &:not(.with-actions) { + padding-inline-end: $padding-inline; + } + &.with-actions { + padding-inline-end: calc($padding-inline - $action-padding-horizontal); + } + } + } + + > .inner-card > .header:not(.no-padding).with-actions { + padding-block: calc($padding-block - $action-padding-vertical); + &:has(+ .body, + .footer) { + padding-block-end: awsui.$space-xxs; + } + } + } + } +} + +.full-height { + block-size: 100%; +} + +.description { + color: awsui.$color-text-heading-secondary; + @include styles.font-body-s; +} + +.icon { + /* used in test-utils */ +} diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap index 15649abf77..e6c87d0726 100644 --- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap @@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-active-u09ddc": undefined, - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-color-active-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-focus-ring-border-color-u09ddc": undefined, - "--awsui-style-focus-ring-border-radius-u09ddc": undefined, - "--awsui-style-focus-ring-border-width-u09ddc": undefined, + "--awsui-style-background-active-q49t2v": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-color-active-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-focus-ring-border-color-q49t2v": undefined, + "--awsui-style-focus-ring-border-radius-q49t2v": undefined, + "--awsui-style-focus-ring-border-width-q49t2v": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-active-u09ddc": undefined, - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-color-active-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-focus-ring-border-color-u09ddc": undefined, - "--awsui-style-focus-ring-border-radius-u09ddc": undefined, - "--awsui-style-focus-ring-border-width-u09ddc": undefined, + "--awsui-style-background-active-q49t2v": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-color-active-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-focus-ring-border-color-q49t2v": undefined, + "--awsui-style-focus-ring-border-radius-q49t2v": undefined, + "--awsui-style-focus-ring-border-width-q49t2v": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-active-u09ddc": "#0073bb", - "--awsui-style-background-default-u09ddc": "#ffffff", - "--awsui-style-background-disabled-u09ddc": "#f0f0f0", - "--awsui-style-background-hover-u09ddc": "#fafafa", - "--awsui-style-color-active-u09ddc": "#ffffff", - "--awsui-style-color-default-u09ddc": "#000000", - "--awsui-style-color-disabled-u09ddc": "#999999", - "--awsui-style-color-hover-u09ddc": "#000000", - "--awsui-style-focus-ring-border-color-u09ddc": "#0073bb", - "--awsui-style-focus-ring-border-radius-u09ddc": "8px", - "--awsui-style-focus-ring-border-width-u09ddc": "2px", + "--awsui-style-background-active-q49t2v": "#0073bb", + "--awsui-style-background-default-q49t2v": "#ffffff", + "--awsui-style-background-disabled-q49t2v": "#f0f0f0", + "--awsui-style-background-hover-q49t2v": "#fafafa", + "--awsui-style-color-active-q49t2v": "#ffffff", + "--awsui-style-color-default-q49t2v": "#000000", + "--awsui-style-color-disabled-q49t2v": "#999999", + "--awsui-style-color-hover-q49t2v": "#000000", + "--awsui-style-focus-ring-border-color-q49t2v": "#0073bb", + "--awsui-style-focus-ring-border-radius-q49t2v": "8px", + "--awsui-style-focus-ring-border-width-q49t2v": "2px", "borderRadius": "6px", "fontSize": "14px", "paddingBlock": "8px", diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap index b0e2bb7918..f3cfa7b3ec 100644 --- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,36 +2,36 @@ exports[`getSliderStyles handles all possible style configurations 1`] = ` { - "--awsui-style-slider-handle-background-active-u09ddc": undefined, - "--awsui-style-slider-handle-background-default-u09ddc": undefined, - "--awsui-style-slider-handle-background-hover-u09ddc": undefined, - "--awsui-style-slider-handle-border-radius-u09ddc": undefined, - "--awsui-style-slider-range-background-active-u09ddc": undefined, - "--awsui-style-slider-range-background-default-u09ddc": undefined, - "--awsui-style-slider-track-background-color-u09ddc": undefined, + "--awsui-style-slider-handle-background-active-q49t2v": undefined, + "--awsui-style-slider-handle-background-default-q49t2v": undefined, + "--awsui-style-slider-handle-background-hover-q49t2v": undefined, + "--awsui-style-slider-handle-border-radius-q49t2v": undefined, + "--awsui-style-slider-range-background-active-q49t2v": undefined, + "--awsui-style-slider-range-background-default-q49t2v": undefined, + "--awsui-style-slider-track-background-color-q49t2v": undefined, } `; exports[`getSliderStyles handles all possible style configurations 2`] = ` { - "--awsui-style-slider-handle-background-active-u09ddc": undefined, - "--awsui-style-slider-handle-background-default-u09ddc": undefined, - "--awsui-style-slider-handle-background-hover-u09ddc": undefined, - "--awsui-style-slider-handle-border-radius-u09ddc": undefined, - "--awsui-style-slider-range-background-active-u09ddc": undefined, - "--awsui-style-slider-range-background-default-u09ddc": undefined, - "--awsui-style-slider-track-background-color-u09ddc": undefined, + "--awsui-style-slider-handle-background-active-q49t2v": undefined, + "--awsui-style-slider-handle-background-default-q49t2v": undefined, + "--awsui-style-slider-handle-background-hover-q49t2v": undefined, + "--awsui-style-slider-handle-border-radius-q49t2v": undefined, + "--awsui-style-slider-range-background-active-q49t2v": undefined, + "--awsui-style-slider-range-background-default-q49t2v": undefined, + "--awsui-style-slider-track-background-color-q49t2v": undefined, } `; exports[`getSliderStyles handles all possible style configurations 3`] = ` { - "--awsui-style-slider-handle-background-active-u09ddc": "#1d4ed8", - "--awsui-style-slider-handle-background-default-u09ddc": "#3b82f6", - "--awsui-style-slider-handle-background-hover-u09ddc": "#2563eb", - "--awsui-style-slider-handle-border-radius-u09ddc": "50%", - "--awsui-style-slider-range-background-active-u09ddc": "#2563eb", - "--awsui-style-slider-range-background-default-u09ddc": "#3b82f6", - "--awsui-style-slider-track-background-color-u09ddc": "#dbeafe", + "--awsui-style-slider-handle-background-active-q49t2v": "#1d4ed8", + "--awsui-style-slider-handle-background-default-q49t2v": "#3b82f6", + "--awsui-style-slider-handle-background-hover-q49t2v": "#2563eb", + "--awsui-style-slider-handle-border-radius-q49t2v": "50%", + "--awsui-style-slider-range-background-active-q49t2v": "#2563eb", + "--awsui-style-slider-range-background-default-q49t2v": "#3b82f6", + "--awsui-style-slider-track-background-color-q49t2v": "#dbeafe", } `; diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap index 1f3da2473a..2654a9bc20 100644 --- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,21 +2,21 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` { - "--awsui-style-background-active-u09ddc": "#bfdbfe", - "--awsui-style-background-default-u09ddc": "#dbeafe", - "--awsui-style-background-disabled-u09ddc": "#f3f4f6", - "--awsui-style-background-hover-u09ddc": "#eff6ff", - "--awsui-style-border-color-active-u09ddc": "#1d4ed8", - "--awsui-style-border-color-default-u09ddc": "#3b82f6", - "--awsui-style-border-color-disabled-u09ddc": "#93c5fd", - "--awsui-style-border-color-hover-u09ddc": "#2563eb", - "--awsui-style-color-active-u09ddc": "#1e3a8a", - "--awsui-style-color-default-u09ddc": "#1e40af", - "--awsui-style-color-disabled-u09ddc": "#93c5fd", - "--awsui-style-color-hover-u09ddc": "#1e40af", - "--awsui-style-focus-ring-border-color-u09ddc": "#3b82f6", - "--awsui-style-focus-ring-border-radius-u09ddc": "4px", - "--awsui-style-focus-ring-border-width-u09ddc": "2px", + "--awsui-style-background-active-q49t2v": "#bfdbfe", + "--awsui-style-background-default-q49t2v": "#dbeafe", + "--awsui-style-background-disabled-q49t2v": "#f3f4f6", + "--awsui-style-background-hover-q49t2v": "#eff6ff", + "--awsui-style-border-color-active-q49t2v": "#1d4ed8", + "--awsui-style-border-color-default-q49t2v": "#3b82f6", + "--awsui-style-border-color-disabled-q49t2v": "#93c5fd", + "--awsui-style-border-color-hover-q49t2v": "#2563eb", + "--awsui-style-color-active-q49t2v": "#1e3a8a", + "--awsui-style-color-default-q49t2v": "#1e40af", + "--awsui-style-color-disabled-q49t2v": "#93c5fd", + "--awsui-style-color-hover-q49t2v": "#1e40af", + "--awsui-style-focus-ring-border-color-q49t2v": "#3b82f6", + "--awsui-style-focus-ring-border-radius-q49t2v": "4px", + "--awsui-style-focus-ring-border-width-q49t2v": "2px", "borderRadius": "4px", "borderWidth": "2px", "fontSize": "16px", @@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` exports[`getTabStyles transforms tab styles to CSS properties 2`] = ` { - "--awsui-style-tabs-active-indicator-border-radius-u09ddc": "2px", - "--awsui-style-tabs-active-indicator-color-u09ddc": "#1d4ed8", - "--awsui-style-tabs-active-indicator-width-u09ddc": "3px", - "--awsui-style-tabs-separator-color-u09ddc": "#cbd5e1", - "--awsui-style-tabs-separator-width-u09ddc": "2px", + "--awsui-style-tabs-active-indicator-border-radius-q49t2v": "2px", + "--awsui-style-tabs-active-indicator-color-q49t2v": "#1d4ed8", + "--awsui-style-tabs-active-indicator-width-q49t2v": "3px", + "--awsui-style-tabs-separator-color-q49t2v": "#cbd5e1", + "--awsui-style-tabs-separator-width-q49t2v": "2px", } `; diff --git a/src/test-utils/dom/item-card/index.ts b/src/test-utils/dom/item-card/index.ts new file mode 100644 index 0000000000..23179bf81e --- /dev/null +++ b/src/test-utils/dom/item-card/index.ts @@ -0,0 +1,52 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom'; + +import structuredItemStyles from '../../../internal/components/structured-item/test-classes/styles.selectors.js'; +import styles from '../../../item-card/styles.selectors.js'; + +export default class ItemCardWrapper extends ComponentWrapper { + static rootSelector: string = styles.root; + + /** + * Finds the action slot of the item card. + */ + findActions(): ElementWrapper | null { + return this.findByClassName(structuredItemStyles.actions); + } + + /** + * Finds the content slot of the item card. + */ + findContent(): ElementWrapper | null { + return this.findByClassName(styles.body); + } + + /** + * Finds the description slot of the item card. + */ + findDescription(): ElementWrapper | null { + return this.findByClassName(styles.description); + } + + /** + * Finds the header slot of the item card. + */ + findHeader(): ElementWrapper | null { + return this.findByClassName(styles.header); + } + + /** + * Finds the footer slot of the item card. + */ + findFooter(): ElementWrapper | null { + return this.findByClassName(styles.footer); + } + + /** + * Finds the icon slot of the item card. + */ + findIcon(): ElementWrapper | null { + return this.findByClassName(styles.icon); + } +} diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap index c01110fd53..515245ff4a 100644 --- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-focus-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-background-readonly-u09ddc": undefined, - "--awsui-style-border-color-default-u09ddc": undefined, - "--awsui-style-border-color-disabled-u09ddc": undefined, - "--awsui-style-border-color-focus-u09ddc": undefined, - "--awsui-style-border-color-hover-u09ddc": undefined, - "--awsui-style-border-color-readonly-u09ddc": undefined, - "--awsui-style-box-shadow-default-u09ddc": undefined, - "--awsui-style-box-shadow-disabled-u09ddc": undefined, - "--awsui-style-box-shadow-focus-u09ddc": undefined, - "--awsui-style-box-shadow-hover-u09ddc": undefined, - "--awsui-style-box-shadow-readonly-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-focus-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-color-readonly-u09ddc": undefined, - "--awsui-style-placeholder-color-u09ddc": undefined, - "--awsui-style-placeholder-font-size-u09ddc": undefined, - "--awsui-style-placeholder-font-style-u09ddc": undefined, - "--awsui-style-placeholder-font-weight-u09ddc": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-focus-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-background-readonly-q49t2v": undefined, + "--awsui-style-border-color-default-q49t2v": undefined, + "--awsui-style-border-color-disabled-q49t2v": undefined, + "--awsui-style-border-color-focus-q49t2v": undefined, + "--awsui-style-border-color-hover-q49t2v": undefined, + "--awsui-style-border-color-readonly-q49t2v": undefined, + "--awsui-style-box-shadow-default-q49t2v": undefined, + "--awsui-style-box-shadow-disabled-q49t2v": undefined, + "--awsui-style-box-shadow-focus-q49t2v": undefined, + "--awsui-style-box-shadow-hover-q49t2v": undefined, + "--awsui-style-box-shadow-readonly-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-focus-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-color-readonly-q49t2v": undefined, + "--awsui-style-placeholder-color-q49t2v": undefined, + "--awsui-style-placeholder-font-size-q49t2v": undefined, + "--awsui-style-placeholder-font-style-q49t2v": undefined, + "--awsui-style-placeholder-font-weight-q49t2v": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` exports[`getTextFilterStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-u09ddc": undefined, - "--awsui-style-background-disabled-u09ddc": undefined, - "--awsui-style-background-focus-u09ddc": undefined, - "--awsui-style-background-hover-u09ddc": undefined, - "--awsui-style-background-readonly-u09ddc": undefined, - "--awsui-style-border-color-default-u09ddc": undefined, - "--awsui-style-border-color-disabled-u09ddc": undefined, - "--awsui-style-border-color-focus-u09ddc": undefined, - "--awsui-style-border-color-hover-u09ddc": undefined, - "--awsui-style-border-color-readonly-u09ddc": undefined, - "--awsui-style-box-shadow-default-u09ddc": undefined, - "--awsui-style-box-shadow-disabled-u09ddc": undefined, - "--awsui-style-box-shadow-focus-u09ddc": undefined, - "--awsui-style-box-shadow-hover-u09ddc": undefined, - "--awsui-style-box-shadow-readonly-u09ddc": undefined, - "--awsui-style-color-default-u09ddc": undefined, - "--awsui-style-color-disabled-u09ddc": undefined, - "--awsui-style-color-focus-u09ddc": undefined, - "--awsui-style-color-hover-u09ddc": undefined, - "--awsui-style-color-readonly-u09ddc": undefined, - "--awsui-style-placeholder-color-u09ddc": undefined, - "--awsui-style-placeholder-font-size-u09ddc": undefined, - "--awsui-style-placeholder-font-style-u09ddc": undefined, - "--awsui-style-placeholder-font-weight-u09ddc": undefined, + "--awsui-style-background-default-q49t2v": undefined, + "--awsui-style-background-disabled-q49t2v": undefined, + "--awsui-style-background-focus-q49t2v": undefined, + "--awsui-style-background-hover-q49t2v": undefined, + "--awsui-style-background-readonly-q49t2v": undefined, + "--awsui-style-border-color-default-q49t2v": undefined, + "--awsui-style-border-color-disabled-q49t2v": undefined, + "--awsui-style-border-color-focus-q49t2v": undefined, + "--awsui-style-border-color-hover-q49t2v": undefined, + "--awsui-style-border-color-readonly-q49t2v": undefined, + "--awsui-style-box-shadow-default-q49t2v": undefined, + "--awsui-style-box-shadow-disabled-q49t2v": undefined, + "--awsui-style-box-shadow-focus-q49t2v": undefined, + "--awsui-style-box-shadow-hover-q49t2v": undefined, + "--awsui-style-box-shadow-readonly-q49t2v": undefined, + "--awsui-style-color-default-q49t2v": undefined, + "--awsui-style-color-disabled-q49t2v": undefined, + "--awsui-style-color-focus-q49t2v": undefined, + "--awsui-style-color-hover-q49t2v": undefined, + "--awsui-style-color-readonly-q49t2v": undefined, + "--awsui-style-placeholder-color-q49t2v": undefined, + "--awsui-style-placeholder-font-size-q49t2v": undefined, + "--awsui-style-placeholder-font-style-q49t2v": undefined, + "--awsui-style-placeholder-font-weight-q49t2v": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = ` exports[`getTextFilterStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-u09ddc": "#ffffff", - "--awsui-style-background-disabled-u09ddc": "#f0f0f0", - "--awsui-style-background-focus-u09ddc": "#ffffff", - "--awsui-style-background-hover-u09ddc": "#fafafa", - "--awsui-style-background-readonly-u09ddc": "#ffffff", - "--awsui-style-border-color-default-u09ddc": "#cccccc", - "--awsui-style-border-color-disabled-u09ddc": "#e0e0e0", - "--awsui-style-border-color-focus-u09ddc": "#0073bb", - "--awsui-style-border-color-hover-u09ddc": "#999999", - "--awsui-style-border-color-readonly-u09ddc": "#e0e0e0", - "--awsui-style-box-shadow-default-u09ddc": "none", - "--awsui-style-box-shadow-disabled-u09ddc": "none", - "--awsui-style-box-shadow-focus-u09ddc": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-u09ddc": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-u09ddc": "none", - "--awsui-style-color-default-u09ddc": "#000000", - "--awsui-style-color-disabled-u09ddc": "#999999", - "--awsui-style-color-focus-u09ddc": "#000000", - "--awsui-style-color-hover-u09ddc": "#000000", - "--awsui-style-color-readonly-u09ddc": "#000000", - "--awsui-style-placeholder-color-u09ddc": "#999999", - "--awsui-style-placeholder-font-size-u09ddc": "14px", - "--awsui-style-placeholder-font-style-u09ddc": "italic", - "--awsui-style-placeholder-font-weight-u09ddc": "400", + "--awsui-style-background-default-q49t2v": "#ffffff", + "--awsui-style-background-disabled-q49t2v": "#f0f0f0", + "--awsui-style-background-focus-q49t2v": "#ffffff", + "--awsui-style-background-hover-q49t2v": "#fafafa", + "--awsui-style-background-readonly-q49t2v": "#ffffff", + "--awsui-style-border-color-default-q49t2v": "#cccccc", + "--awsui-style-border-color-disabled-q49t2v": "#e0e0e0", + "--awsui-style-border-color-focus-q49t2v": "#0073bb", + "--awsui-style-border-color-hover-q49t2v": "#999999", + "--awsui-style-border-color-readonly-q49t2v": "#e0e0e0", + "--awsui-style-box-shadow-default-q49t2v": "none", + "--awsui-style-box-shadow-disabled-q49t2v": "none", + "--awsui-style-box-shadow-focus-q49t2v": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-q49t2v": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-q49t2v": "none", + "--awsui-style-color-default-q49t2v": "#000000", + "--awsui-style-color-disabled-q49t2v": "#999999", + "--awsui-style-color-focus-q49t2v": "#000000", + "--awsui-style-color-hover-q49t2v": "#000000", + "--awsui-style-color-readonly-q49t2v": "#000000", + "--awsui-style-placeholder-color-q49t2v": "#999999", + "--awsui-style-placeholder-font-size-q49t2v": "14px", + "--awsui-style-placeholder-font-style-q49t2v": "italic", + "--awsui-style-placeholder-font-weight-q49t2v": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts index 40f4df14ec..af0f0c8bb5 100644 --- a/style-dictionary/classic/borders.ts +++ b/style-dictionary/classic/borders.ts @@ -38,6 +38,7 @@ const tokens: StyleDictionary.BordersDictionary = { borderLinkFocusRingShadowSpread: '0px', borderWidthAlert: '1px', borderWidthButton: '1px', + borderWidthCard: '0px', borderWidthDropdown: '1px', borderWidthField: '1px', borderWidthPopover: '1px', diff --git a/style-dictionary/classic/shadows.ts b/style-dictionary/classic/shadows.ts index a83be0b458..7957f19185 100644 --- a/style-dictionary/classic/shadows.ts +++ b/style-dictionary/classic/shadows.ts @@ -7,6 +7,11 @@ import { StyleDictionary } from '../utils/interfaces.js'; import { tokens as parentTokens } from '../visual-refresh/shadows.js'; const tokens: StyleDictionary.ShadowsDictionary = { + shadowCard: { + light: + '0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)', + dark: '0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.08)', + }, shadowContainer: { light: '0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)', diff --git a/style-dictionary/classic/spacing.ts b/style-dictionary/classic/spacing.ts index 2255af898a..8bee0f2cb0 100644 --- a/style-dictionary/classic/spacing.ts +++ b/style-dictionary/classic/spacing.ts @@ -20,7 +20,10 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceCalendarGridFocusOutlineGutter: '0px', spaceCalendarGridSelectedFocusOutlineGutter: '2px', spaceCalendarGridGutter: '0px', - spaceCardVertical: '{spaceScaledL}', + spaceCardHorizontalDefault: '{spaceContainerHorizontal}', + spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' }, + spaceCardVerticalDefault: '{spaceScaledL}', + spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' }, spaceCodeEditorStatusFocusOutlineGutter: '3px', spaceContainerContentTop: '{spaceScaledM}', spaceContainerHeaderTop: '{spaceScaledS}', diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 736ed1882b..fd791ece8e 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -523,6 +523,7 @@ export type ColorsTokenName = | 'colorBackgroundCodeEditorLoading' | 'colorBackgroundCodeEditorPaneItemHover' | 'colorBackgroundCodeEditorStatusBar' + | 'colorBackgroundCard' | 'colorBackgroundContainerContent' | 'colorBackgroundContainerHeader' | 'colorBackgroundControlChecked' @@ -612,6 +613,8 @@ export type ColorsTokenName = | 'colorBorderCodeEditorAceActiveLineDarkTheme' | 'colorBorderCodeEditorDefault' | 'colorBorderCodeEditorPaneItemHover' + | 'colorBorderCard' + | 'colorBorderCardHighlighted' | 'colorBorderContainerDivider' | 'colorBorderContainerTop' | 'colorBorderControlChecked' @@ -845,6 +848,8 @@ export type BordersTokenName = | 'borderRadiusBadge' | 'borderRadiusButton' | 'borderRadiusCalendarDayFocusRing' + | 'borderRadiusCardDefault' + | 'borderRadiusCardEmbedded' | 'borderRadiusCodeEditor' | 'borderRadiusContainer' | 'borderRadiusControlCircularFocusRing' @@ -864,6 +869,8 @@ export type BordersTokenName = | 'borderLinkFocusRingOutline' | 'borderLinkFocusRingShadowSpread' | 'borderWidthAlert' + | 'borderWidthCard' + | 'borderWidthCardHighlighted' | 'borderWidthButton' | 'borderWidthDropdown' | 'borderWidthField' @@ -940,8 +947,10 @@ export type SpacingTokenName = | 'spaceCalendarGridFocusOutlineGutter' | 'spaceCalendarGridSelectedFocusOutlineGutter' | 'spaceCalendarGridGutter' - | 'spaceCardHorizontal' - | 'spaceCardVertical' + | 'spaceCardHorizontalDefault' + | 'spaceCardHorizontalEmbedded' + | 'spaceCardVerticalDefault' + | 'spaceCardVerticalEmbedded' | 'spaceCodeEditorStatusFocusOutlineGutter' | 'spaceContainerContentTop' | 'spaceContainerHeaderTop' @@ -1028,6 +1037,7 @@ export type SpacingTokenName = | 'spaceXxxl' | 'spaceXxxs'; export type ShadowsTokenName = + | 'shadowCard' | 'shadowContainer' | 'shadowContainerActive' | 'shadowDropdown' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index ea3b3d3b89..6bae311727 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -24,6 +24,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderRadiusButton: '20px', borderRadiusCalendarDayFocusRing: '3px', borderRadiusCodeEditor: '{borderRadiusInput}', + borderRadiusCardDefault: '{borderRadiusContainer}', + borderRadiusCardEmbedded: '{borderRadiusChatBubble}', borderRadiusContainer: '16px', borderRadiusControlCircularFocusRing: '4px', borderRadiusControlDefaultFocusRing: '4px', @@ -41,6 +43,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderTableStickyWidth: '1px', borderLinkFocusRingOutline: '0', borderLinkFocusRingShadowSpread: '2px', + borderWidthCard: '{borderDividerSectionWidth}', + borderWidthCardHighlighted: '{borderItemWidth}', borderWidthAlert: '2px', borderWidthButton: '2px', borderWidthDropdown: '2px', diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f6a6c8d3cf..ec7adff6a6 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -40,6 +40,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundCodeEditorLoading: { light: '{colorNeutral100}', dark: '{colorNeutral800}' }, colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, + colorBackgroundCard: '{colorBackgroundContainerContent}', colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, @@ -132,6 +133,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderCodeEditorAceActiveLineDarkTheme: '{colorNeutral600}', colorBorderCodeEditorDefault: { light: '{colorNeutral300}', dark: '{colorNeutral600}' }, colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}', + colorBorderCard: '{colorBorderDividerDefault}', + colorBorderCardHighlighted: '{colorBorderItemSelected}', colorBorderContainerDivider: 'transparent', colorBorderContainerTop: 'transparent', colorBorderControlChecked: '{colorBackgroundControlChecked}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index bfe420cac7..86bdd396d1 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -164,6 +164,16 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderRadiusCardDefault: { + description: 'The border radius of default cards.', + public: true, + themeable: true, + }, + borderRadiusCardEmbedded: { + description: 'The border radius of embedded cards.', + public: true, + themeable: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/shadows.ts b/style-dictionary/visual-refresh/shadows.ts index 730a7c1ff2..32ec398448 100644 --- a/style-dictionary/visual-refresh/shadows.ts +++ b/style-dictionary/visual-refresh/shadows.ts @@ -4,6 +4,7 @@ import { expandColorDictionary } from '../utils/index.js'; import { StyleDictionary } from '../utils/interfaces.js'; const tokens: StyleDictionary.ShadowsDictionary = { + shadowCard: 'none', shadowContainer: { light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)', diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 18e97743f0..76c306aacb 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -17,8 +17,10 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceCalendarGridFocusOutlineGutter: '-5px', spaceCalendarGridSelectedFocusOutlineGutter: '{spaceCalendarGridFocusOutlineGutter}', spaceCalendarGridGutter: '6px', - spaceCardHorizontal: '{spaceContainerHorizontal}', - spaceCardVertical: '{spaceScaledM}', + spaceCardHorizontalDefault: '{spaceContainerHorizontal}', + spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' }, + spaceCardVerticalDefault: '{spaceScaledM}', + spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' }, spaceCodeEditorStatusFocusOutlineGutter: '-7px', spaceContainerContentTop: '{spaceXxs}', spaceContainerHeaderTop: '{spaceS}', From 3112af8a0bd923e2e4d11b0e06337582b1b73cb8 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 26 Mar 2026 12:01:36 +0100 Subject: [PATCH 02/12] chore: Update snapshots --- .../__snapshots__/styles.test.tsx.snap | 144 +++++++++--------- .../__snapshots__/styles.test.tsx.snap | 10 +- .../__snapshots__/styles.test.tsx.snap | 66 ++++---- .../__snapshots__/styles.test.tsx.snap | 42 ++--- .../__snapshots__/styles.test.tsx.snap | 40 ++--- .../__snapshots__/styles.test.tsx.snap | 144 +++++++++--------- .../__snapshots__/styles.test.tsx.snap | 26 ++-- 7 files changed, 236 insertions(+), 236 deletions(-) diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap index 41335e803e..ccc5ad5e71 100644 --- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-focus-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-background-readonly-q49t2v": undefined, - "--awsui-style-border-color-default-q49t2v": undefined, - "--awsui-style-border-color-disabled-q49t2v": undefined, - "--awsui-style-border-color-focus-q49t2v": undefined, - "--awsui-style-border-color-hover-q49t2v": undefined, - "--awsui-style-border-color-readonly-q49t2v": undefined, - "--awsui-style-box-shadow-default-q49t2v": undefined, - "--awsui-style-box-shadow-disabled-q49t2v": undefined, - "--awsui-style-box-shadow-focus-q49t2v": undefined, - "--awsui-style-box-shadow-hover-q49t2v": undefined, - "--awsui-style-box-shadow-readonly-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-focus-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-color-readonly-q49t2v": undefined, - "--awsui-style-placeholder-color-q49t2v": undefined, - "--awsui-style-placeholder-font-size-q49t2v": undefined, - "--awsui-style-placeholder-font-style-q49t2v": undefined, - "--awsui-style-placeholder-font-weight-q49t2v": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-focus-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-background-readonly-rvkgb9": undefined, + "--awsui-style-border-color-default-rvkgb9": undefined, + "--awsui-style-border-color-disabled-rvkgb9": undefined, + "--awsui-style-border-color-focus-rvkgb9": undefined, + "--awsui-style-border-color-hover-rvkgb9": undefined, + "--awsui-style-border-color-readonly-rvkgb9": undefined, + "--awsui-style-box-shadow-default-rvkgb9": undefined, + "--awsui-style-box-shadow-disabled-rvkgb9": undefined, + "--awsui-style-box-shadow-focus-rvkgb9": undefined, + "--awsui-style-box-shadow-hover-rvkgb9": undefined, + "--awsui-style-box-shadow-readonly-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-focus-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-color-readonly-rvkgb9": undefined, + "--awsui-style-placeholder-color-rvkgb9": undefined, + "--awsui-style-placeholder-font-size-rvkgb9": undefined, + "--awsui-style-placeholder-font-style-rvkgb9": undefined, + "--awsui-style-placeholder-font-weight-rvkgb9": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` exports[`getInputStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-focus-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-background-readonly-q49t2v": undefined, - "--awsui-style-border-color-default-q49t2v": undefined, - "--awsui-style-border-color-disabled-q49t2v": undefined, - "--awsui-style-border-color-focus-q49t2v": undefined, - "--awsui-style-border-color-hover-q49t2v": undefined, - "--awsui-style-border-color-readonly-q49t2v": undefined, - "--awsui-style-box-shadow-default-q49t2v": undefined, - "--awsui-style-box-shadow-disabled-q49t2v": undefined, - "--awsui-style-box-shadow-focus-q49t2v": undefined, - "--awsui-style-box-shadow-hover-q49t2v": undefined, - "--awsui-style-box-shadow-readonly-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-focus-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-color-readonly-q49t2v": undefined, - "--awsui-style-placeholder-color-q49t2v": undefined, - "--awsui-style-placeholder-font-size-q49t2v": undefined, - "--awsui-style-placeholder-font-style-q49t2v": undefined, - "--awsui-style-placeholder-font-weight-q49t2v": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-focus-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-background-readonly-rvkgb9": undefined, + "--awsui-style-border-color-default-rvkgb9": undefined, + "--awsui-style-border-color-disabled-rvkgb9": undefined, + "--awsui-style-border-color-focus-rvkgb9": undefined, + "--awsui-style-border-color-hover-rvkgb9": undefined, + "--awsui-style-border-color-readonly-rvkgb9": undefined, + "--awsui-style-box-shadow-default-rvkgb9": undefined, + "--awsui-style-box-shadow-disabled-rvkgb9": undefined, + "--awsui-style-box-shadow-focus-rvkgb9": undefined, + "--awsui-style-box-shadow-hover-rvkgb9": undefined, + "--awsui-style-box-shadow-readonly-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-focus-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-color-readonly-rvkgb9": undefined, + "--awsui-style-placeholder-color-rvkgb9": undefined, + "--awsui-style-placeholder-font-size-rvkgb9": undefined, + "--awsui-style-placeholder-font-style-rvkgb9": undefined, + "--awsui-style-placeholder-font-weight-rvkgb9": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = ` exports[`getInputStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-q49t2v": "#ffffff", - "--awsui-style-background-disabled-q49t2v": "#f0f0f0", - "--awsui-style-background-focus-q49t2v": "#ffffff", - "--awsui-style-background-hover-q49t2v": "#fafafa", - "--awsui-style-background-readonly-q49t2v": "#ffffff", - "--awsui-style-border-color-default-q49t2v": "#cccccc", - "--awsui-style-border-color-disabled-q49t2v": "#e0e0e0", - "--awsui-style-border-color-focus-q49t2v": "#0073bb", - "--awsui-style-border-color-hover-q49t2v": "#999999", - "--awsui-style-border-color-readonly-q49t2v": "#e0e0e0", - "--awsui-style-box-shadow-default-q49t2v": "none", - "--awsui-style-box-shadow-disabled-q49t2v": "none", - "--awsui-style-box-shadow-focus-q49t2v": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-q49t2v": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-q49t2v": "none", - "--awsui-style-color-default-q49t2v": "#000000", - "--awsui-style-color-disabled-q49t2v": "#999999", - "--awsui-style-color-focus-q49t2v": "#000000", - "--awsui-style-color-hover-q49t2v": "#000000", - "--awsui-style-color-readonly-q49t2v": "#000000", - "--awsui-style-placeholder-color-q49t2v": "#999999", - "--awsui-style-placeholder-font-size-q49t2v": "14px", - "--awsui-style-placeholder-font-style-q49t2v": "italic", - "--awsui-style-placeholder-font-weight-q49t2v": "400", + "--awsui-style-background-default-rvkgb9": "#ffffff", + "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", + "--awsui-style-background-focus-rvkgb9": "#ffffff", + "--awsui-style-background-hover-rvkgb9": "#fafafa", + "--awsui-style-background-readonly-rvkgb9": "#ffffff", + "--awsui-style-border-color-default-rvkgb9": "#cccccc", + "--awsui-style-border-color-disabled-rvkgb9": "#e0e0e0", + "--awsui-style-border-color-focus-rvkgb9": "#0073bb", + "--awsui-style-border-color-hover-rvkgb9": "#999999", + "--awsui-style-border-color-readonly-rvkgb9": "#e0e0e0", + "--awsui-style-box-shadow-default-rvkgb9": "none", + "--awsui-style-box-shadow-disabled-rvkgb9": "none", + "--awsui-style-box-shadow-focus-rvkgb9": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-rvkgb9": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-rvkgb9": "none", + "--awsui-style-color-default-rvkgb9": "#000000", + "--awsui-style-color-disabled-rvkgb9": "#999999", + "--awsui-style-color-focus-rvkgb9": "#000000", + "--awsui-style-color-hover-rvkgb9": "#000000", + "--awsui-style-color-readonly-rvkgb9": "#000000", + "--awsui-style-placeholder-color-rvkgb9": "#999999", + "--awsui-style-placeholder-font-size-rvkgb9": "14px", + "--awsui-style-placeholder-font-style-rvkgb9": "italic", + "--awsui-style-placeholder-font-weight-rvkgb9": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap index 4a48e7f163..eb2e7bba04 100644 --- a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap @@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`; exports[`getRootStyles handles all possible style configurations 3`] = ` { - "--awsui-style-item-card-background-default-q49t2v": "#ffffff", - "--awsui-style-item-card-border-color-default-q49t2v": "#e0e0e0", - "--awsui-style-item-card-border-radius-q49t2v": "8px", - "--awsui-style-item-card-border-width-default-q49t2v": "1px", - "--awsui-style-item-card-box-shadow-default-q49t2v": "0 1px 3px rgba(0,0,0,0.1)", + "--awsui-style-item-card-background-default-rvkgb9": "#ffffff", + "--awsui-style-item-card-border-color-default-rvkgb9": "#e0e0e0", + "--awsui-style-item-card-border-radius-rvkgb9": "8px", + "--awsui-style-item-card-border-width-default-rvkgb9": "1px", + "--awsui-style-item-card-box-shadow-default-rvkgb9": "0 1px 3px rgba(0,0,0,0.1)", "borderRadius": "8px", } `; diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap index e6c87d0726..dce91ec53a 100644 --- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap @@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-active-q49t2v": undefined, - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-color-active-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-focus-ring-border-color-q49t2v": undefined, - "--awsui-style-focus-ring-border-radius-q49t2v": undefined, - "--awsui-style-focus-ring-border-width-q49t2v": undefined, + "--awsui-style-background-active-rvkgb9": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-color-active-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-focus-ring-border-color-rvkgb9": undefined, + "--awsui-style-focus-ring-border-radius-rvkgb9": undefined, + "--awsui-style-focus-ring-border-width-rvkgb9": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-active-q49t2v": undefined, - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-color-active-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-focus-ring-border-color-q49t2v": undefined, - "--awsui-style-focus-ring-border-radius-q49t2v": undefined, - "--awsui-style-focus-ring-border-width-q49t2v": undefined, + "--awsui-style-background-active-rvkgb9": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-color-active-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-focus-ring-border-color-rvkgb9": undefined, + "--awsui-style-focus-ring-border-radius-rvkgb9": undefined, + "--awsui-style-focus-ring-border-width-rvkgb9": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-active-q49t2v": "#0073bb", - "--awsui-style-background-default-q49t2v": "#ffffff", - "--awsui-style-background-disabled-q49t2v": "#f0f0f0", - "--awsui-style-background-hover-q49t2v": "#fafafa", - "--awsui-style-color-active-q49t2v": "#ffffff", - "--awsui-style-color-default-q49t2v": "#000000", - "--awsui-style-color-disabled-q49t2v": "#999999", - "--awsui-style-color-hover-q49t2v": "#000000", - "--awsui-style-focus-ring-border-color-q49t2v": "#0073bb", - "--awsui-style-focus-ring-border-radius-q49t2v": "8px", - "--awsui-style-focus-ring-border-width-q49t2v": "2px", + "--awsui-style-background-active-rvkgb9": "#0073bb", + "--awsui-style-background-default-rvkgb9": "#ffffff", + "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", + "--awsui-style-background-hover-rvkgb9": "#fafafa", + "--awsui-style-color-active-rvkgb9": "#ffffff", + "--awsui-style-color-default-rvkgb9": "#000000", + "--awsui-style-color-disabled-rvkgb9": "#999999", + "--awsui-style-color-hover-rvkgb9": "#000000", + "--awsui-style-focus-ring-border-color-rvkgb9": "#0073bb", + "--awsui-style-focus-ring-border-radius-rvkgb9": "8px", + "--awsui-style-focus-ring-border-width-rvkgb9": "2px", "borderRadius": "6px", "fontSize": "14px", "paddingBlock": "8px", diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap index f3cfa7b3ec..08d030dde7 100644 --- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,36 +2,36 @@ exports[`getSliderStyles handles all possible style configurations 1`] = ` { - "--awsui-style-slider-handle-background-active-q49t2v": undefined, - "--awsui-style-slider-handle-background-default-q49t2v": undefined, - "--awsui-style-slider-handle-background-hover-q49t2v": undefined, - "--awsui-style-slider-handle-border-radius-q49t2v": undefined, - "--awsui-style-slider-range-background-active-q49t2v": undefined, - "--awsui-style-slider-range-background-default-q49t2v": undefined, - "--awsui-style-slider-track-background-color-q49t2v": undefined, + "--awsui-style-slider-handle-background-active-rvkgb9": undefined, + "--awsui-style-slider-handle-background-default-rvkgb9": undefined, + "--awsui-style-slider-handle-background-hover-rvkgb9": undefined, + "--awsui-style-slider-handle-border-radius-rvkgb9": undefined, + "--awsui-style-slider-range-background-active-rvkgb9": undefined, + "--awsui-style-slider-range-background-default-rvkgb9": undefined, + "--awsui-style-slider-track-background-color-rvkgb9": undefined, } `; exports[`getSliderStyles handles all possible style configurations 2`] = ` { - "--awsui-style-slider-handle-background-active-q49t2v": undefined, - "--awsui-style-slider-handle-background-default-q49t2v": undefined, - "--awsui-style-slider-handle-background-hover-q49t2v": undefined, - "--awsui-style-slider-handle-border-radius-q49t2v": undefined, - "--awsui-style-slider-range-background-active-q49t2v": undefined, - "--awsui-style-slider-range-background-default-q49t2v": undefined, - "--awsui-style-slider-track-background-color-q49t2v": undefined, + "--awsui-style-slider-handle-background-active-rvkgb9": undefined, + "--awsui-style-slider-handle-background-default-rvkgb9": undefined, + "--awsui-style-slider-handle-background-hover-rvkgb9": undefined, + "--awsui-style-slider-handle-border-radius-rvkgb9": undefined, + "--awsui-style-slider-range-background-active-rvkgb9": undefined, + "--awsui-style-slider-range-background-default-rvkgb9": undefined, + "--awsui-style-slider-track-background-color-rvkgb9": undefined, } `; exports[`getSliderStyles handles all possible style configurations 3`] = ` { - "--awsui-style-slider-handle-background-active-q49t2v": "#1d4ed8", - "--awsui-style-slider-handle-background-default-q49t2v": "#3b82f6", - "--awsui-style-slider-handle-background-hover-q49t2v": "#2563eb", - "--awsui-style-slider-handle-border-radius-q49t2v": "50%", - "--awsui-style-slider-range-background-active-q49t2v": "#2563eb", - "--awsui-style-slider-range-background-default-q49t2v": "#3b82f6", - "--awsui-style-slider-track-background-color-q49t2v": "#dbeafe", + "--awsui-style-slider-handle-background-active-rvkgb9": "#1d4ed8", + "--awsui-style-slider-handle-background-default-rvkgb9": "#3b82f6", + "--awsui-style-slider-handle-background-hover-rvkgb9": "#2563eb", + "--awsui-style-slider-handle-border-radius-rvkgb9": "50%", + "--awsui-style-slider-range-background-active-rvkgb9": "#2563eb", + "--awsui-style-slider-range-background-default-rvkgb9": "#3b82f6", + "--awsui-style-slider-track-background-color-rvkgb9": "#dbeafe", } `; diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap index 2654a9bc20..9e82f5b121 100644 --- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,21 +2,21 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` { - "--awsui-style-background-active-q49t2v": "#bfdbfe", - "--awsui-style-background-default-q49t2v": "#dbeafe", - "--awsui-style-background-disabled-q49t2v": "#f3f4f6", - "--awsui-style-background-hover-q49t2v": "#eff6ff", - "--awsui-style-border-color-active-q49t2v": "#1d4ed8", - "--awsui-style-border-color-default-q49t2v": "#3b82f6", - "--awsui-style-border-color-disabled-q49t2v": "#93c5fd", - "--awsui-style-border-color-hover-q49t2v": "#2563eb", - "--awsui-style-color-active-q49t2v": "#1e3a8a", - "--awsui-style-color-default-q49t2v": "#1e40af", - "--awsui-style-color-disabled-q49t2v": "#93c5fd", - "--awsui-style-color-hover-q49t2v": "#1e40af", - "--awsui-style-focus-ring-border-color-q49t2v": "#3b82f6", - "--awsui-style-focus-ring-border-radius-q49t2v": "4px", - "--awsui-style-focus-ring-border-width-q49t2v": "2px", + "--awsui-style-background-active-rvkgb9": "#bfdbfe", + "--awsui-style-background-default-rvkgb9": "#dbeafe", + "--awsui-style-background-disabled-rvkgb9": "#f3f4f6", + "--awsui-style-background-hover-rvkgb9": "#eff6ff", + "--awsui-style-border-color-active-rvkgb9": "#1d4ed8", + "--awsui-style-border-color-default-rvkgb9": "#3b82f6", + "--awsui-style-border-color-disabled-rvkgb9": "#93c5fd", + "--awsui-style-border-color-hover-rvkgb9": "#2563eb", + "--awsui-style-color-active-rvkgb9": "#1e3a8a", + "--awsui-style-color-default-rvkgb9": "#1e40af", + "--awsui-style-color-disabled-rvkgb9": "#93c5fd", + "--awsui-style-color-hover-rvkgb9": "#1e40af", + "--awsui-style-focus-ring-border-color-rvkgb9": "#3b82f6", + "--awsui-style-focus-ring-border-radius-rvkgb9": "4px", + "--awsui-style-focus-ring-border-width-rvkgb9": "2px", "borderRadius": "4px", "borderWidth": "2px", "fontSize": "16px", @@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` exports[`getTabStyles transforms tab styles to CSS properties 2`] = ` { - "--awsui-style-tabs-active-indicator-border-radius-q49t2v": "2px", - "--awsui-style-tabs-active-indicator-color-q49t2v": "#1d4ed8", - "--awsui-style-tabs-active-indicator-width-q49t2v": "3px", - "--awsui-style-tabs-separator-color-q49t2v": "#cbd5e1", - "--awsui-style-tabs-separator-width-q49t2v": "2px", + "--awsui-style-tabs-active-indicator-border-radius-rvkgb9": "2px", + "--awsui-style-tabs-active-indicator-color-rvkgb9": "#1d4ed8", + "--awsui-style-tabs-active-indicator-width-rvkgb9": "3px", + "--awsui-style-tabs-separator-color-rvkgb9": "#cbd5e1", + "--awsui-style-tabs-separator-width-rvkgb9": "2px", } `; diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap index 515245ff4a..4b25d9f34a 100644 --- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-focus-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-background-readonly-q49t2v": undefined, - "--awsui-style-border-color-default-q49t2v": undefined, - "--awsui-style-border-color-disabled-q49t2v": undefined, - "--awsui-style-border-color-focus-q49t2v": undefined, - "--awsui-style-border-color-hover-q49t2v": undefined, - "--awsui-style-border-color-readonly-q49t2v": undefined, - "--awsui-style-box-shadow-default-q49t2v": undefined, - "--awsui-style-box-shadow-disabled-q49t2v": undefined, - "--awsui-style-box-shadow-focus-q49t2v": undefined, - "--awsui-style-box-shadow-hover-q49t2v": undefined, - "--awsui-style-box-shadow-readonly-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-focus-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-color-readonly-q49t2v": undefined, - "--awsui-style-placeholder-color-q49t2v": undefined, - "--awsui-style-placeholder-font-size-q49t2v": undefined, - "--awsui-style-placeholder-font-style-q49t2v": undefined, - "--awsui-style-placeholder-font-weight-q49t2v": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-focus-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-background-readonly-rvkgb9": undefined, + "--awsui-style-border-color-default-rvkgb9": undefined, + "--awsui-style-border-color-disabled-rvkgb9": undefined, + "--awsui-style-border-color-focus-rvkgb9": undefined, + "--awsui-style-border-color-hover-rvkgb9": undefined, + "--awsui-style-border-color-readonly-rvkgb9": undefined, + "--awsui-style-box-shadow-default-rvkgb9": undefined, + "--awsui-style-box-shadow-disabled-rvkgb9": undefined, + "--awsui-style-box-shadow-focus-rvkgb9": undefined, + "--awsui-style-box-shadow-hover-rvkgb9": undefined, + "--awsui-style-box-shadow-readonly-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-focus-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-color-readonly-rvkgb9": undefined, + "--awsui-style-placeholder-color-rvkgb9": undefined, + "--awsui-style-placeholder-font-size-rvkgb9": undefined, + "--awsui-style-placeholder-font-style-rvkgb9": undefined, + "--awsui-style-placeholder-font-weight-rvkgb9": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` exports[`getTextFilterStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-q49t2v": undefined, - "--awsui-style-background-disabled-q49t2v": undefined, - "--awsui-style-background-focus-q49t2v": undefined, - "--awsui-style-background-hover-q49t2v": undefined, - "--awsui-style-background-readonly-q49t2v": undefined, - "--awsui-style-border-color-default-q49t2v": undefined, - "--awsui-style-border-color-disabled-q49t2v": undefined, - "--awsui-style-border-color-focus-q49t2v": undefined, - "--awsui-style-border-color-hover-q49t2v": undefined, - "--awsui-style-border-color-readonly-q49t2v": undefined, - "--awsui-style-box-shadow-default-q49t2v": undefined, - "--awsui-style-box-shadow-disabled-q49t2v": undefined, - "--awsui-style-box-shadow-focus-q49t2v": undefined, - "--awsui-style-box-shadow-hover-q49t2v": undefined, - "--awsui-style-box-shadow-readonly-q49t2v": undefined, - "--awsui-style-color-default-q49t2v": undefined, - "--awsui-style-color-disabled-q49t2v": undefined, - "--awsui-style-color-focus-q49t2v": undefined, - "--awsui-style-color-hover-q49t2v": undefined, - "--awsui-style-color-readonly-q49t2v": undefined, - "--awsui-style-placeholder-color-q49t2v": undefined, - "--awsui-style-placeholder-font-size-q49t2v": undefined, - "--awsui-style-placeholder-font-style-q49t2v": undefined, - "--awsui-style-placeholder-font-weight-q49t2v": undefined, + "--awsui-style-background-default-rvkgb9": undefined, + "--awsui-style-background-disabled-rvkgb9": undefined, + "--awsui-style-background-focus-rvkgb9": undefined, + "--awsui-style-background-hover-rvkgb9": undefined, + "--awsui-style-background-readonly-rvkgb9": undefined, + "--awsui-style-border-color-default-rvkgb9": undefined, + "--awsui-style-border-color-disabled-rvkgb9": undefined, + "--awsui-style-border-color-focus-rvkgb9": undefined, + "--awsui-style-border-color-hover-rvkgb9": undefined, + "--awsui-style-border-color-readonly-rvkgb9": undefined, + "--awsui-style-box-shadow-default-rvkgb9": undefined, + "--awsui-style-box-shadow-disabled-rvkgb9": undefined, + "--awsui-style-box-shadow-focus-rvkgb9": undefined, + "--awsui-style-box-shadow-hover-rvkgb9": undefined, + "--awsui-style-box-shadow-readonly-rvkgb9": undefined, + "--awsui-style-color-default-rvkgb9": undefined, + "--awsui-style-color-disabled-rvkgb9": undefined, + "--awsui-style-color-focus-rvkgb9": undefined, + "--awsui-style-color-hover-rvkgb9": undefined, + "--awsui-style-color-readonly-rvkgb9": undefined, + "--awsui-style-placeholder-color-rvkgb9": undefined, + "--awsui-style-placeholder-font-size-rvkgb9": undefined, + "--awsui-style-placeholder-font-style-rvkgb9": undefined, + "--awsui-style-placeholder-font-weight-rvkgb9": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = ` exports[`getTextFilterStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-q49t2v": "#ffffff", - "--awsui-style-background-disabled-q49t2v": "#f0f0f0", - "--awsui-style-background-focus-q49t2v": "#ffffff", - "--awsui-style-background-hover-q49t2v": "#fafafa", - "--awsui-style-background-readonly-q49t2v": "#ffffff", - "--awsui-style-border-color-default-q49t2v": "#cccccc", - "--awsui-style-border-color-disabled-q49t2v": "#e0e0e0", - "--awsui-style-border-color-focus-q49t2v": "#0073bb", - "--awsui-style-border-color-hover-q49t2v": "#999999", - "--awsui-style-border-color-readonly-q49t2v": "#e0e0e0", - "--awsui-style-box-shadow-default-q49t2v": "none", - "--awsui-style-box-shadow-disabled-q49t2v": "none", - "--awsui-style-box-shadow-focus-q49t2v": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-q49t2v": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-q49t2v": "none", - "--awsui-style-color-default-q49t2v": "#000000", - "--awsui-style-color-disabled-q49t2v": "#999999", - "--awsui-style-color-focus-q49t2v": "#000000", - "--awsui-style-color-hover-q49t2v": "#000000", - "--awsui-style-color-readonly-q49t2v": "#000000", - "--awsui-style-placeholder-color-q49t2v": "#999999", - "--awsui-style-placeholder-font-size-q49t2v": "14px", - "--awsui-style-placeholder-font-style-q49t2v": "italic", - "--awsui-style-placeholder-font-weight-q49t2v": "400", + "--awsui-style-background-default-rvkgb9": "#ffffff", + "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", + "--awsui-style-background-focus-rvkgb9": "#ffffff", + "--awsui-style-background-hover-rvkgb9": "#fafafa", + "--awsui-style-background-readonly-rvkgb9": "#ffffff", + "--awsui-style-border-color-default-rvkgb9": "#cccccc", + "--awsui-style-border-color-disabled-rvkgb9": "#e0e0e0", + "--awsui-style-border-color-focus-rvkgb9": "#0073bb", + "--awsui-style-border-color-hover-rvkgb9": "#999999", + "--awsui-style-border-color-readonly-rvkgb9": "#e0e0e0", + "--awsui-style-box-shadow-default-rvkgb9": "none", + "--awsui-style-box-shadow-disabled-rvkgb9": "none", + "--awsui-style-box-shadow-focus-rvkgb9": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-rvkgb9": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-rvkgb9": "none", + "--awsui-style-color-default-rvkgb9": "#000000", + "--awsui-style-color-disabled-rvkgb9": "#999999", + "--awsui-style-color-focus-rvkgb9": "#000000", + "--awsui-style-color-hover-rvkgb9": "#000000", + "--awsui-style-color-readonly-rvkgb9": "#000000", + "--awsui-style-placeholder-color-rvkgb9": "#999999", + "--awsui-style-placeholder-font-size-rvkgb9": "14px", + "--awsui-style-placeholder-font-style-rvkgb9": "italic", + "--awsui-style-placeholder-font-weight-rvkgb9": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap index 77360a56c2..491872dcec 100644 --- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,19 +2,19 @@ exports[`getTokenRootStyles handles all possible style configurations 1`] = ` { - "--awsui-style-focus-ring-border-color-u09ddc": "#6366f1", - "--awsui-style-focus-ring-border-radius-u09ddc": "12px", - "--awsui-style-focus-ring-border-width-u09ddc": "2px", - "--awsui-token-style-background-default-u09ddc": "#eef2ff", - "--awsui-token-style-background-disabled-u09ddc": "#f1f5f9", - "--awsui-token-style-background-read-only-u09ddc": "#f8fafc", - "--awsui-token-style-border-color-default-u09ddc": "#c7d2fe", - "--awsui-token-style-border-color-disabled-u09ddc": "#e2e8f0", - "--awsui-token-style-border-color-read-only-u09ddc": "#cbd5e1", - "--awsui-token-style-dismiss-color-default-u09ddc": "#6366f1", - "--awsui-token-style-dismiss-color-disabled-u09ddc": "#cbd5e1", - "--awsui-token-style-dismiss-color-hover-u09ddc": "#4338ca", - "--awsui-token-style-dismiss-color-read-only-u09ddc": "#94a3b8", + "--awsui-style-focus-ring-border-color-rvkgb9": "#6366f1", + "--awsui-style-focus-ring-border-radius-rvkgb9": "12px", + "--awsui-style-focus-ring-border-width-rvkgb9": "2px", + "--awsui-token-style-background-default-rvkgb9": "#eef2ff", + "--awsui-token-style-background-disabled-rvkgb9": "#f1f5f9", + "--awsui-token-style-background-read-only-rvkgb9": "#f8fafc", + "--awsui-token-style-border-color-default-rvkgb9": "#c7d2fe", + "--awsui-token-style-border-color-disabled-rvkgb9": "#e2e8f0", + "--awsui-token-style-border-color-read-only-rvkgb9": "#cbd5e1", + "--awsui-token-style-dismiss-color-default-rvkgb9": "#6366f1", + "--awsui-token-style-dismiss-color-disabled-rvkgb9": "#cbd5e1", + "--awsui-token-style-dismiss-color-hover-rvkgb9": "#4338ca", + "--awsui-token-style-dismiss-color-read-only-rvkgb9": "#94a3b8", "borderRadius": "24px", "borderWidth": "2px", "paddingBlock": "4px", From d0386f62f8ad839754b0d653462678688948bf8f Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 26 Mar 2026 12:08:17 +0100 Subject: [PATCH 03/12] chore: Update snapshots --- .../test-utils-wrappers.test.tsx.snap | 1246 +++++++++++++++++ 1 file changed, 1246 insertions(+) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index 46e44cb400..63f8b8a0a9 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -214,6 +214,15 @@ findAlert(selector?: string): AlertWrapper | null; * @returns {Array} */ findAllAlerts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Alert for the current element, + * or the element itself if it is an instance of Alert. + * If no Alert is found, returns \`null\`. + * + * @returns {AlertWrapper | null} + */ +findClosestAlert(): AlertWrapper | null; /** * Returns the wrapper of the first AnchorNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AnchorNavigation. @@ -233,6 +242,15 @@ findAnchorNavigation(selector?: string): AnchorNavigationWrapper | null; * @returns {Array} */ findAllAnchorNavigations(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent AnchorNavigation for the current element, + * or the element itself if it is an instance of AnchorNavigation. + * If no AnchorNavigation is found, returns \`null\`. + * + * @returns {AnchorNavigationWrapper | null} + */ +findClosestAnchorNavigation(): AnchorNavigationWrapper | null; /** * Returns the wrapper of the first Annotation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Annotation. @@ -252,6 +270,15 @@ findAnnotation(selector?: string): AnnotationWrapper | null; * @returns {Array} */ findAllAnnotations(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Annotation for the current element, + * or the element itself if it is an instance of Annotation. + * If no Annotation is found, returns \`null\`. + * + * @returns {AnnotationWrapper | null} + */ +findClosestAnnotation(): AnnotationWrapper | null; /** * Returns the wrapper of the first AppLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AppLayout. @@ -271,6 +298,15 @@ findAppLayout(selector?: string): AppLayoutWrapper | null; * @returns {Array} */ findAllAppLayouts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent AppLayout for the current element, + * or the element itself if it is an instance of AppLayout. + * If no AppLayout is found, returns \`null\`. + * + * @returns {AppLayoutWrapper | null} + */ +findClosestAppLayout(): AppLayoutWrapper | null; /** * Returns the wrapper of the first AppLayoutToolbar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AppLayoutToolbar. @@ -290,6 +326,15 @@ findAppLayoutToolbar(selector?: string): AppLayoutToolbarWrapper | null; * @returns {Array} */ findAllAppLayoutToolbars(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent AppLayoutToolbar for the current element, + * or the element itself if it is an instance of AppLayoutToolbar. + * If no AppLayoutToolbar is found, returns \`null\`. + * + * @returns {AppLayoutToolbarWrapper | null} + */ +findClosestAppLayoutToolbar(): AppLayoutToolbarWrapper | null; /** * Returns the wrapper of the first AreaChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AreaChart. @@ -309,6 +354,15 @@ findAreaChart(selector?: string): AreaChartWrapper | null; * @returns {Array} */ findAllAreaCharts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent AreaChart for the current element, + * or the element itself if it is an instance of AreaChart. + * If no AreaChart is found, returns \`null\`. + * + * @returns {AreaChartWrapper | null} + */ +findClosestAreaChart(): AreaChartWrapper | null; /** * Returns the wrapper of the first AttributeEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first AttributeEditor. @@ -328,6 +382,15 @@ findAttributeEditor(selector?: string): AttributeEditorWrapper | null; * @returns {Array} */ findAllAttributeEditors(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent AttributeEditor for the current element, + * or the element itself if it is an instance of AttributeEditor. + * If no AttributeEditor is found, returns \`null\`. + * + * @returns {AttributeEditorWrapper | null} + */ +findClosestAttributeEditor(): AttributeEditorWrapper | null; /** * Returns the wrapper of the first Autosuggest that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Autosuggest. @@ -347,6 +410,15 @@ findAutosuggest(selector?: string): AutosuggestWrapper | null; * @returns {Array} */ findAllAutosuggests(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Autosuggest for the current element, + * or the element itself if it is an instance of Autosuggest. + * If no Autosuggest is found, returns \`null\`. + * + * @returns {AutosuggestWrapper | null} + */ +findClosestAutosuggest(): AutosuggestWrapper | null; /** * Returns the wrapper of the first Badge that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Badge. @@ -366,6 +438,15 @@ findBadge(selector?: string): BadgeWrapper | null; * @returns {Array} */ findAllBadges(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Badge for the current element, + * or the element itself if it is an instance of Badge. + * If no Badge is found, returns \`null\`. + * + * @returns {BadgeWrapper | null} + */ +findClosestBadge(): BadgeWrapper | null; /** * Returns the wrapper of the first BarChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first BarChart. @@ -385,6 +466,15 @@ findBarChart(selector?: string): BarChartWrapper | null; * @returns {Array} */ findAllBarCharts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent BarChart for the current element, + * or the element itself if it is an instance of BarChart. + * If no BarChart is found, returns \`null\`. + * + * @returns {BarChartWrapper | null} + */ +findClosestBarChart(): BarChartWrapper | null; /** * Returns the wrapper of the first Box that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Box. @@ -404,6 +494,15 @@ findBox(selector?: string): BoxWrapper | null; * @returns {Array} */ findAllBoxes(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Box for the current element, + * or the element itself if it is an instance of Box. + * If no Box is found, returns \`null\`. + * + * @returns {BoxWrapper | null} + */ +findClosestBox(): BoxWrapper | null; /** * Returns the wrapper of the first BreadcrumbGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first BreadcrumbGroup. @@ -423,6 +522,15 @@ findBreadcrumbGroup(selector?: string): BreadcrumbGroupWrapper | null; * @returns {Array} */ findAllBreadcrumbGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent BreadcrumbGroup for the current element, + * or the element itself if it is an instance of BreadcrumbGroup. + * If no BreadcrumbGroup is found, returns \`null\`. + * + * @returns {BreadcrumbGroupWrapper | null} + */ +findClosestBreadcrumbGroup(): BreadcrumbGroupWrapper | null; /** * Returns the wrapper of the first Button that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Button. @@ -442,6 +550,15 @@ findButton(selector?: string): ButtonWrapper | null; * @returns {Array} */ findAllButtons(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Button for the current element, + * or the element itself if it is an instance of Button. + * If no Button is found, returns \`null\`. + * + * @returns {ButtonWrapper | null} + */ +findClosestButton(): ButtonWrapper | null; /** * Returns the wrapper of the first ButtonDropdown that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ButtonDropdown. @@ -461,6 +578,15 @@ findButtonDropdown(selector?: string): ButtonDropdownWrapper | null; * @returns {Array} */ findAllButtonDropdowns(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ButtonDropdown for the current element, + * or the element itself if it is an instance of ButtonDropdown. + * If no ButtonDropdown is found, returns \`null\`. + * + * @returns {ButtonDropdownWrapper | null} + */ +findClosestButtonDropdown(): ButtonDropdownWrapper | null; /** * Returns the wrapper of the first ButtonGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ButtonGroup. @@ -480,6 +606,15 @@ findButtonGroup(selector?: string): ButtonGroupWrapper | null; * @returns {Array} */ findAllButtonGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ButtonGroup for the current element, + * or the element itself if it is an instance of ButtonGroup. + * If no ButtonGroup is found, returns \`null\`. + * + * @returns {ButtonGroupWrapper | null} + */ +findClosestButtonGroup(): ButtonGroupWrapper | null; /** * Returns the wrapper of the first Calendar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Calendar. @@ -499,6 +634,15 @@ findCalendar(selector?: string): CalendarWrapper | null; * @returns {Array} */ findAllCalendars(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Calendar for the current element, + * or the element itself if it is an instance of Calendar. + * If no Calendar is found, returns \`null\`. + * + * @returns {CalendarWrapper | null} + */ +findClosestCalendar(): CalendarWrapper | null; /** * Returns the wrapper of the first Cards that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Cards. @@ -518,6 +662,15 @@ findCards(selector?: string): CardsWrapper | null; * @returns {Array} */ findAllCards(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Cards for the current element, + * or the element itself if it is an instance of Cards. + * If no Cards is found, returns \`null\`. + * + * @returns {CardsWrapper | null} + */ +findClosestCards(): CardsWrapper | null; /** * Returns the wrapper of the first Checkbox that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Checkbox. @@ -537,6 +690,15 @@ findCheckbox(selector?: string): CheckboxWrapper | null; * @returns {Array} */ findAllCheckboxes(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Checkbox for the current element, + * or the element itself if it is an instance of Checkbox. + * If no Checkbox is found, returns \`null\`. + * + * @returns {CheckboxWrapper | null} + */ +findClosestCheckbox(): CheckboxWrapper | null; /** * Returns the wrapper of the first CodeEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CodeEditor. @@ -556,6 +718,15 @@ findCodeEditor(selector?: string): CodeEditorWrapper | null; * @returns {Array} */ findAllCodeEditors(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent CodeEditor for the current element, + * or the element itself if it is an instance of CodeEditor. + * If no CodeEditor is found, returns \`null\`. + * + * @returns {CodeEditorWrapper | null} + */ +findClosestCodeEditor(): CodeEditorWrapper | null; /** * Returns the wrapper of the first CollectionPreferences that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CollectionPreferences. @@ -575,6 +746,15 @@ findCollectionPreferences(selector?: string): CollectionPreferencesWrapper | nul * @returns {Array} */ findAllCollectionPreferences(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent CollectionPreferences for the current element, + * or the element itself if it is an instance of CollectionPreferences. + * If no CollectionPreferences is found, returns \`null\`. + * + * @returns {CollectionPreferencesWrapper | null} + */ +findClosestCollectionPreferences(): CollectionPreferencesWrapper | null; /** * Returns the wrapper of the first ColumnLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ColumnLayout. @@ -594,6 +774,15 @@ findColumnLayout(selector?: string): ColumnLayoutWrapper | null; * @returns {Array} */ findAllColumnLayouts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ColumnLayout for the current element, + * or the element itself if it is an instance of ColumnLayout. + * If no ColumnLayout is found, returns \`null\`. + * + * @returns {ColumnLayoutWrapper | null} + */ +findClosestColumnLayout(): ColumnLayoutWrapper | null; /** * Returns the wrapper of the first Container that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Container. @@ -613,6 +802,15 @@ findContainer(selector?: string): ContainerWrapper | null; * @returns {Array} */ findAllContainers(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Container for the current element, + * or the element itself if it is an instance of Container. + * If no Container is found, returns \`null\`. + * + * @returns {ContainerWrapper | null} + */ +findClosestContainer(): ContainerWrapper | null; /** * Returns the wrapper of the first ContentLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ContentLayout. @@ -632,6 +830,15 @@ findContentLayout(selector?: string): ContentLayoutWrapper | null; * @returns {Array} */ findAllContentLayouts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ContentLayout for the current element, + * or the element itself if it is an instance of ContentLayout. + * If no ContentLayout is found, returns \`null\`. + * + * @returns {ContentLayoutWrapper | null} + */ +findClosestContentLayout(): ContentLayoutWrapper | null; /** * Returns the wrapper of the first CopyToClipboard that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first CopyToClipboard. @@ -651,6 +858,15 @@ findCopyToClipboard(selector?: string): CopyToClipboardWrapper | null; * @returns {Array} */ findAllCopyToClipboards(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent CopyToClipboard for the current element, + * or the element itself if it is an instance of CopyToClipboard. + * If no CopyToClipboard is found, returns \`null\`. + * + * @returns {CopyToClipboardWrapper | null} + */ +findClosestCopyToClipboard(): CopyToClipboardWrapper | null; /** * Returns the wrapper of the first DateInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DateInput. @@ -670,6 +886,15 @@ findDateInput(selector?: string): DateInputWrapper | null; * @returns {Array} */ findAllDateInputs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent DateInput for the current element, + * or the element itself if it is an instance of DateInput. + * If no DateInput is found, returns \`null\`. + * + * @returns {DateInputWrapper | null} + */ +findClosestDateInput(): DateInputWrapper | null; /** * Returns the wrapper of the first DatePicker that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DatePicker. @@ -689,6 +914,15 @@ findDatePicker(selector?: string): DatePickerWrapper | null; * @returns {Array} */ findAllDatePickers(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent DatePicker for the current element, + * or the element itself if it is an instance of DatePicker. + * If no DatePicker is found, returns \`null\`. + * + * @returns {DatePickerWrapper | null} + */ +findClosestDatePicker(): DatePickerWrapper | null; /** * Returns the wrapper of the first DateRangePicker that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first DateRangePicker. @@ -708,6 +942,15 @@ findDateRangePicker(selector?: string): DateRangePickerWrapper | null; * @returns {Array} */ findAllDateRangePickers(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent DateRangePicker for the current element, + * or the element itself if it is an instance of DateRangePicker. + * If no DateRangePicker is found, returns \`null\`. + * + * @returns {DateRangePickerWrapper | null} + */ +findClosestDateRangePicker(): DateRangePickerWrapper | null; /** * Returns the wrapper of the first Drawer that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Drawer. @@ -727,6 +970,15 @@ findDrawer(selector?: string): DrawerWrapper | null; * @returns {Array} */ findAllDrawers(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Drawer for the current element, + * or the element itself if it is an instance of Drawer. + * If no Drawer is found, returns \`null\`. + * + * @returns {DrawerWrapper | null} + */ +findClosestDrawer(): DrawerWrapper | null; /** * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary. @@ -746,6 +998,15 @@ findErrorBoundary(selector?: string): ErrorBoundaryWrapper | null; * @returns {Array} */ findAllErrorBoundaries(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ErrorBoundary for the current element, + * or the element itself if it is an instance of ErrorBoundary. + * If no ErrorBoundary is found, returns \`null\`. + * + * @returns {ErrorBoundaryWrapper | null} + */ +findClosestErrorBoundary(): ErrorBoundaryWrapper | null; /** * Returns the wrapper of the first ExpandableSection that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ExpandableSection. @@ -765,6 +1026,15 @@ findExpandableSection(selector?: string): ExpandableSectionWrapper | null; * @returns {Array} */ findAllExpandableSections(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ExpandableSection for the current element, + * or the element itself if it is an instance of ExpandableSection. + * If no ExpandableSection is found, returns \`null\`. + * + * @returns {ExpandableSectionWrapper | null} + */ +findClosestExpandableSection(): ExpandableSectionWrapper | null; /** * Returns the wrapper of the first FileDropzone that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileDropzone. @@ -784,6 +1054,15 @@ findFileDropzone(selector?: string): FileDropzoneWrapper | null; * @returns {Array} */ findAllFileDropzones(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent FileDropzone for the current element, + * or the element itself if it is an instance of FileDropzone. + * If no FileDropzone is found, returns \`null\`. + * + * @returns {FileDropzoneWrapper | null} + */ +findClosestFileDropzone(): FileDropzoneWrapper | null; /** * Returns the wrapper of the first FileInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileInput. @@ -803,6 +1082,15 @@ findFileInput(selector?: string): FileInputWrapper | null; * @returns {Array} */ findAllFileInputs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent FileInput for the current element, + * or the element itself if it is an instance of FileInput. + * If no FileInput is found, returns \`null\`. + * + * @returns {FileInputWrapper | null} + */ +findClosestFileInput(): FileInputWrapper | null; /** * Returns the wrapper of the first FileTokenGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileTokenGroup. @@ -822,6 +1110,15 @@ findFileTokenGroup(selector?: string): FileTokenGroupWrapper | null; * @returns {Array} */ findAllFileTokenGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent FileTokenGroup for the current element, + * or the element itself if it is an instance of FileTokenGroup. + * If no FileTokenGroup is found, returns \`null\`. + * + * @returns {FileTokenGroupWrapper | null} + */ +findClosestFileTokenGroup(): FileTokenGroupWrapper | null; /** * Returns the wrapper of the first FileUpload that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FileUpload. @@ -841,6 +1138,15 @@ findFileUpload(selector?: string): FileUploadWrapper | null; * @returns {Array} */ findAllFileUploads(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent FileUpload for the current element, + * or the element itself if it is an instance of FileUpload. + * If no FileUpload is found, returns \`null\`. + * + * @returns {FileUploadWrapper | null} + */ +findClosestFileUpload(): FileUploadWrapper | null; /** * Returns the wrapper of the first Flashbar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Flashbar. @@ -860,6 +1166,15 @@ findFlashbar(selector?: string): FlashbarWrapper | null; * @returns {Array} */ findAllFlashbars(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Flashbar for the current element, + * or the element itself if it is an instance of Flashbar. + * If no Flashbar is found, returns \`null\`. + * + * @returns {FlashbarWrapper | null} + */ +findClosestFlashbar(): FlashbarWrapper | null; /** * Returns the wrapper of the first Form that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Form. @@ -879,6 +1194,15 @@ findForm(selector?: string): FormWrapper | null; * @returns {Array} */ findAllForms(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Form for the current element, + * or the element itself if it is an instance of Form. + * If no Form is found, returns \`null\`. + * + * @returns {FormWrapper | null} + */ +findClosestForm(): FormWrapper | null; /** * Returns the wrapper of the first FormField that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first FormField. @@ -898,6 +1222,15 @@ findFormField(selector?: string): FormFieldWrapper | null; * @returns {Array} */ findAllFormFields(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent FormField for the current element, + * or the element itself if it is an instance of FormField. + * If no FormField is found, returns \`null\`. + * + * @returns {FormFieldWrapper | null} + */ +findClosestFormField(): FormFieldWrapper | null; /** * Returns the wrapper of the first Grid that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Grid. @@ -917,6 +1250,15 @@ findGrid(selector?: string): GridWrapper | null; * @returns {Array} */ findAllGrids(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Grid for the current element, + * or the element itself if it is an instance of Grid. + * If no Grid is found, returns \`null\`. + * + * @returns {GridWrapper | null} + */ +findClosestGrid(): GridWrapper | null; /** * Returns the wrapper of the first Header that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Header. @@ -936,6 +1278,15 @@ findHeader(selector?: string): HeaderWrapper | null; * @returns {Array} */ findAllHeaders(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Header for the current element, + * or the element itself if it is an instance of Header. + * If no Header is found, returns \`null\`. + * + * @returns {HeaderWrapper | null} + */ +findClosestHeader(): HeaderWrapper | null; /** * Returns the wrapper of the first HelpPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first HelpPanel. @@ -955,6 +1306,15 @@ findHelpPanel(selector?: string): HelpPanelWrapper | null; * @returns {Array} */ findAllHelpPanels(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent HelpPanel for the current element, + * or the element itself if it is an instance of HelpPanel. + * If no HelpPanel is found, returns \`null\`. + * + * @returns {HelpPanelWrapper | null} + */ +findClosestHelpPanel(): HelpPanelWrapper | null; /** * Returns the wrapper of the first Hotspot that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Hotspot. @@ -974,6 +1334,15 @@ findHotspot(selector?: string): HotspotWrapper | null; * @returns {Array} */ findAllHotspots(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Hotspot for the current element, + * or the element itself if it is an instance of Hotspot. + * If no Hotspot is found, returns \`null\`. + * + * @returns {HotspotWrapper | null} + */ +findClosestHotspot(): HotspotWrapper | null; /** * Returns the wrapper of the first Icon that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Icon. @@ -993,6 +1362,15 @@ findIcon(selector?: string): IconWrapper | null; * @returns {Array} */ findAllIcons(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Icon for the current element, + * or the element itself if it is an instance of Icon. + * If no Icon is found, returns \`null\`. + * + * @returns {IconWrapper | null} + */ +findClosestIcon(): IconWrapper | null; /** * Returns the wrapper of the first Input that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Input. @@ -1012,6 +1390,15 @@ findInput(selector?: string): InputWrapper | null; * @returns {Array} */ findAllInputs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Input for the current element, + * or the element itself if it is an instance of Input. + * If no Input is found, returns \`null\`. + * + * @returns {InputWrapper | null} + */ +findClosestInput(): InputWrapper | null; /** * Returns the wrapper of the first ItemCard that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ItemCard. @@ -1031,6 +1418,15 @@ findItemCard(selector?: string): ItemCardWrapper | null; * @returns {Array} */ findAllItemCards(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ItemCard for the current element, + * or the element itself if it is an instance of ItemCard. + * If no ItemCard is found, returns \`null\`. + * + * @returns {ItemCardWrapper | null} + */ +findClosestItemCard(): ItemCardWrapper | null; /** * Returns the wrapper of the first KeyValuePairs that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first KeyValuePairs. @@ -1050,6 +1446,15 @@ findKeyValuePairs(selector?: string): KeyValuePairsWrapper | null; * @returns {Array} */ findAllKeyValuePairs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent KeyValuePairs for the current element, + * or the element itself if it is an instance of KeyValuePairs. + * If no KeyValuePairs is found, returns \`null\`. + * + * @returns {KeyValuePairsWrapper | null} + */ +findClosestKeyValuePairs(): KeyValuePairsWrapper | null; /** * Returns the wrapper of the first LineChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first LineChart. @@ -1069,6 +1474,15 @@ findLineChart(selector?: string): LineChartWrapper | null; * @returns {Array} */ findAllLineCharts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent LineChart for the current element, + * or the element itself if it is an instance of LineChart. + * If no LineChart is found, returns \`null\`. + * + * @returns {LineChartWrapper | null} + */ +findClosestLineChart(): LineChartWrapper | null; /** * Returns the wrapper of the first Link that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Link. @@ -1088,6 +1502,15 @@ findLink(selector?: string): LinkWrapper | null; * @returns {Array} */ findAllLinks(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Link for the current element, + * or the element itself if it is an instance of Link. + * If no Link is found, returns \`null\`. + * + * @returns {LinkWrapper | null} + */ +findClosestLink(): LinkWrapper | null; /** * Returns the wrapper of the first List that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first List. @@ -1107,6 +1530,15 @@ findList(selector?: string): ListWrapper | null; * @returns {Array} */ findAllLists(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent List for the current element, + * or the element itself if it is an instance of List. + * If no List is found, returns \`null\`. + * + * @returns {ListWrapper | null} + */ +findClosestList(): ListWrapper | null; /** * Returns the wrapper of the first LiveRegion that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first LiveRegion. @@ -1126,6 +1558,15 @@ findLiveRegion(selector?: string): LiveRegionWrapper | null; * @returns {Array} */ findAllLiveRegions(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent LiveRegion for the current element, + * or the element itself if it is an instance of LiveRegion. + * If no LiveRegion is found, returns \`null\`. + * + * @returns {LiveRegionWrapper | null} + */ +findClosestLiveRegion(): LiveRegionWrapper | null; /** * Returns the wrapper of the first MixedLineBarChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first MixedLineBarChart. @@ -1145,6 +1586,15 @@ findMixedLineBarChart(selector?: string): MixedLineBarChartWrapper | null; * @returns {Array} */ findAllMixedLineBarCharts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent MixedLineBarChart for the current element, + * or the element itself if it is an instance of MixedLineBarChart. + * If no MixedLineBarChart is found, returns \`null\`. + * + * @returns {MixedLineBarChartWrapper | null} + */ +findClosestMixedLineBarChart(): MixedLineBarChartWrapper | null; /** * Returns the wrapper of the first Modal that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Modal. @@ -1164,6 +1614,15 @@ findModal(selector?: string): ModalWrapper | null; * @returns {Array} */ findAllModals(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Modal for the current element, + * or the element itself if it is an instance of Modal. + * If no Modal is found, returns \`null\`. + * + * @returns {ModalWrapper | null} + */ +findClosestModal(): ModalWrapper | null; /** * Returns the wrapper of the first Multiselect that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Multiselect. @@ -1183,6 +1642,15 @@ findMultiselect(selector?: string): MultiselectWrapper | null; * @returns {Array} */ findAllMultiselects(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Multiselect for the current element, + * or the element itself if it is an instance of Multiselect. + * If no Multiselect is found, returns \`null\`. + * + * @returns {MultiselectWrapper | null} + */ +findClosestMultiselect(): MultiselectWrapper | null; /** * Returns the wrapper of the first NavigableGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first NavigableGroup. @@ -1202,6 +1670,15 @@ findNavigableGroup(selector?: string): NavigableGroupWrapper | null; * @returns {Array} */ findAllNavigableGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent NavigableGroup for the current element, + * or the element itself if it is an instance of NavigableGroup. + * If no NavigableGroup is found, returns \`null\`. + * + * @returns {NavigableGroupWrapper | null} + */ +findClosestNavigableGroup(): NavigableGroupWrapper | null; /** * Returns the wrapper of the first Pagination that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Pagination. @@ -1221,6 +1698,15 @@ findPagination(selector?: string): PaginationWrapper | null; * @returns {Array} */ findAllPaginations(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Pagination for the current element, + * or the element itself if it is an instance of Pagination. + * If no Pagination is found, returns \`null\`. + * + * @returns {PaginationWrapper | null} + */ +findClosestPagination(): PaginationWrapper | null; /** * Returns the wrapper of the first PanelLayout that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PanelLayout. @@ -1240,6 +1726,15 @@ findPanelLayout(selector?: string): PanelLayoutWrapper | null; * @returns {Array} */ findAllPanelLayouts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent PanelLayout for the current element, + * or the element itself if it is an instance of PanelLayout. + * If no PanelLayout is found, returns \`null\`. + * + * @returns {PanelLayoutWrapper | null} + */ +findClosestPanelLayout(): PanelLayoutWrapper | null; /** * Returns the wrapper of the first PieChart that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PieChart. @@ -1259,6 +1754,15 @@ findPieChart(selector?: string): PieChartWrapper | null; * @returns {Array} */ findAllPieCharts(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent PieChart for the current element, + * or the element itself if it is an instance of PieChart. + * If no PieChart is found, returns \`null\`. + * + * @returns {PieChartWrapper | null} + */ +findClosestPieChart(): PieChartWrapper | null; /** * Returns the wrapper of the first Popover that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Popover. @@ -1278,6 +1782,15 @@ findPopover(selector?: string): PopoverWrapper | null; * @returns {Array} */ findAllPopovers(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Popover for the current element, + * or the element itself if it is an instance of Popover. + * If no Popover is found, returns \`null\`. + * + * @returns {PopoverWrapper | null} + */ +findClosestPopover(): PopoverWrapper | null; /** * Returns the wrapper of the first ProgressBar that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ProgressBar. @@ -1297,6 +1810,15 @@ findProgressBar(selector?: string): ProgressBarWrapper | null; * @returns {Array} */ findAllProgressBars(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ProgressBar for the current element, + * or the element itself if it is an instance of ProgressBar. + * If no ProgressBar is found, returns \`null\`. + * + * @returns {ProgressBarWrapper | null} + */ +findClosestProgressBar(): ProgressBarWrapper | null; /** * Returns the wrapper of the first PromptInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PromptInput. @@ -1316,6 +1838,15 @@ findPromptInput(selector?: string): PromptInputWrapper | null; * @returns {Array} */ findAllPromptInputs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent PromptInput for the current element, + * or the element itself if it is an instance of PromptInput. + * If no PromptInput is found, returns \`null\`. + * + * @returns {PromptInputWrapper | null} + */ +findClosestPromptInput(): PromptInputWrapper | null; /** * Returns the wrapper of the first PropertyFilter that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first PropertyFilter. @@ -1335,6 +1866,15 @@ findPropertyFilter(selector?: string): PropertyFilterWrapper | null; * @returns {Array} */ findAllPropertyFilters(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent PropertyFilter for the current element, + * or the element itself if it is an instance of PropertyFilter. + * If no PropertyFilter is found, returns \`null\`. + * + * @returns {PropertyFilterWrapper | null} + */ +findClosestPropertyFilter(): PropertyFilterWrapper | null; /** * Returns the wrapper of the first RadioButton that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first RadioButton. @@ -1354,6 +1894,15 @@ findRadioButton(selector?: string): RadioButtonWrapper | null; * @returns {Array} */ findAllRadioButtons(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent RadioButton for the current element, + * or the element itself if it is an instance of RadioButton. + * If no RadioButton is found, returns \`null\`. + * + * @returns {RadioButtonWrapper | null} + */ +findClosestRadioButton(): RadioButtonWrapper | null; /** * Returns the wrapper of the first RadioGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first RadioGroup. @@ -1373,6 +1922,15 @@ findRadioGroup(selector?: string): RadioGroupWrapper | null; * @returns {Array} */ findAllRadioGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent RadioGroup for the current element, + * or the element itself if it is an instance of RadioGroup. + * If no RadioGroup is found, returns \`null\`. + * + * @returns {RadioGroupWrapper | null} + */ +findClosestRadioGroup(): RadioGroupWrapper | null; /** * Returns the wrapper of the first S3ResourceSelector that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first S3ResourceSelector. @@ -1392,6 +1950,15 @@ findS3ResourceSelector(selector?: string): S3ResourceSelectorWrapper | null; * @returns {Array} */ findAllS3ResourceSelectors(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent S3ResourceSelector for the current element, + * or the element itself if it is an instance of S3ResourceSelector. + * If no S3ResourceSelector is found, returns \`null\`. + * + * @returns {S3ResourceSelectorWrapper | null} + */ +findClosestS3ResourceSelector(): S3ResourceSelectorWrapper | null; /** * Returns the wrapper of the first SegmentedControl that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SegmentedControl. @@ -1411,6 +1978,15 @@ findSegmentedControl(selector?: string): SegmentedControlWrapper | null; * @returns {Array} */ findAllSegmentedControls(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent SegmentedControl for the current element, + * or the element itself if it is an instance of SegmentedControl. + * If no SegmentedControl is found, returns \`null\`. + * + * @returns {SegmentedControlWrapper | null} + */ +findClosestSegmentedControl(): SegmentedControlWrapper | null; /** * Returns the wrapper of the first Select that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Select. @@ -1430,6 +2006,15 @@ findSelect(selector?: string): SelectWrapper | null; * @returns {Array} */ findAllSelects(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Select for the current element, + * or the element itself if it is an instance of Select. + * If no Select is found, returns \`null\`. + * + * @returns {SelectWrapper | null} + */ +findClosestSelect(): SelectWrapper | null; /** * Returns the wrapper of the first SideNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SideNavigation. @@ -1449,6 +2034,15 @@ findSideNavigation(selector?: string): SideNavigationWrapper | null; * @returns {Array} */ findAllSideNavigations(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent SideNavigation for the current element, + * or the element itself if it is an instance of SideNavigation. + * If no SideNavigation is found, returns \`null\`. + * + * @returns {SideNavigationWrapper | null} + */ +findClosestSideNavigation(): SideNavigationWrapper | null; /** * Returns the wrapper of the first Slider that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Slider. @@ -1468,6 +2062,15 @@ findSlider(selector?: string): SliderWrapper | null; * @returns {Array} */ findAllSliders(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Slider for the current element, + * or the element itself if it is an instance of Slider. + * If no Slider is found, returns \`null\`. + * + * @returns {SliderWrapper | null} + */ +findClosestSlider(): SliderWrapper | null; /** * Returns the wrapper of the first SpaceBetween that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SpaceBetween. @@ -1487,6 +2090,15 @@ findSpaceBetween(selector?: string): SpaceBetweenWrapper | null; * @returns {Array} */ findAllSpaceBetweens(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent SpaceBetween for the current element, + * or the element itself if it is an instance of SpaceBetween. + * If no SpaceBetween is found, returns \`null\`. + * + * @returns {SpaceBetweenWrapper | null} + */ +findClosestSpaceBetween(): SpaceBetweenWrapper | null; /** * Returns the wrapper of the first Spinner that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Spinner. @@ -1506,6 +2118,15 @@ findSpinner(selector?: string): SpinnerWrapper | null; * @returns {Array} */ findAllSpinners(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Spinner for the current element, + * or the element itself if it is an instance of Spinner. + * If no Spinner is found, returns \`null\`. + * + * @returns {SpinnerWrapper | null} + */ +findClosestSpinner(): SpinnerWrapper | null; /** * Returns the wrapper of the first SplitPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first SplitPanel. @@ -1525,6 +2146,15 @@ findSplitPanel(selector?: string): SplitPanelWrapper | null; * @returns {Array} */ findAllSplitPanels(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent SplitPanel for the current element, + * or the element itself if it is an instance of SplitPanel. + * If no SplitPanel is found, returns \`null\`. + * + * @returns {SplitPanelWrapper | null} + */ +findClosestSplitPanel(): SplitPanelWrapper | null; /** * Returns the wrapper of the first StatusIndicator that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first StatusIndicator. @@ -1544,6 +2174,15 @@ findStatusIndicator(selector?: string): StatusIndicatorWrapper | null; * @returns {Array} */ findAllStatusIndicators(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent StatusIndicator for the current element, + * or the element itself if it is an instance of StatusIndicator. + * If no StatusIndicator is found, returns \`null\`. + * + * @returns {StatusIndicatorWrapper | null} + */ +findClosestStatusIndicator(): StatusIndicatorWrapper | null; /** * Returns the wrapper of the first Steps that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Steps. @@ -1563,6 +2202,15 @@ findSteps(selector?: string): StepsWrapper | null; * @returns {Array} */ findAllSteps(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Steps for the current element, + * or the element itself if it is an instance of Steps. + * If no Steps is found, returns \`null\`. + * + * @returns {StepsWrapper | null} + */ +findClosestSteps(): StepsWrapper | null; /** * Returns the wrapper of the first Table that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Table. @@ -1582,6 +2230,15 @@ findTable(selector?: string): TableWrapper | null; * @returns {Array} */ findAllTables(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Table for the current element, + * or the element itself if it is an instance of Table. + * If no Table is found, returns \`null\`. + * + * @returns {TableWrapper | null} + */ +findClosestTable(): TableWrapper | null; /** * Returns the wrapper of the first Tabs that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tabs. @@ -1601,6 +2258,15 @@ findTabs(selector?: string): TabsWrapper | null; * @returns {Array} */ findAllTabs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Tabs for the current element, + * or the element itself if it is an instance of Tabs. + * If no Tabs is found, returns \`null\`. + * + * @returns {TabsWrapper | null} + */ +findClosestTabs(): TabsWrapper | null; /** * Returns the wrapper of the first TagEditor that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TagEditor. @@ -1620,6 +2286,15 @@ findTagEditor(selector?: string): TagEditorWrapper | null; * @returns {Array} */ findAllTagEditors(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TagEditor for the current element, + * or the element itself if it is an instance of TagEditor. + * If no TagEditor is found, returns \`null\`. + * + * @returns {TagEditorWrapper | null} + */ +findClosestTagEditor(): TagEditorWrapper | null; /** * Returns the wrapper of the first TextContent that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TextContent. @@ -1639,6 +2314,15 @@ findTextContent(selector?: string): TextContentWrapper | null; * @returns {Array} */ findAllTextContents(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TextContent for the current element, + * or the element itself if it is an instance of TextContent. + * If no TextContent is found, returns \`null\`. + * + * @returns {TextContentWrapper | null} + */ +findClosestTextContent(): TextContentWrapper | null; /** * Returns the wrapper of the first TextFilter that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TextFilter. @@ -1658,6 +2342,15 @@ findTextFilter(selector?: string): TextFilterWrapper | null; * @returns {Array} */ findAllTextFilters(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TextFilter for the current element, + * or the element itself if it is an instance of TextFilter. + * If no TextFilter is found, returns \`null\`. + * + * @returns {TextFilterWrapper | null} + */ +findClosestTextFilter(): TextFilterWrapper | null; /** * Returns the wrapper of the first Textarea that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Textarea. @@ -1677,6 +2370,15 @@ findTextarea(selector?: string): TextareaWrapper | null; * @returns {Array} */ findAllTextareas(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Textarea for the current element, + * or the element itself if it is an instance of Textarea. + * If no Textarea is found, returns \`null\`. + * + * @returns {TextareaWrapper | null} + */ +findClosestTextarea(): TextareaWrapper | null; /** * Returns the wrapper of the first Tiles that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tiles. @@ -1696,6 +2398,15 @@ findTiles(selector?: string): TilesWrapper | null; * @returns {Array} */ findAllTiles(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Tiles for the current element, + * or the element itself if it is an instance of Tiles. + * If no Tiles is found, returns \`null\`. + * + * @returns {TilesWrapper | null} + */ +findClosestTiles(): TilesWrapper | null; /** * Returns the wrapper of the first TimeInput that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TimeInput. @@ -1715,6 +2426,15 @@ findTimeInput(selector?: string): TimeInputWrapper | null; * @returns {Array} */ findAllTimeInputs(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TimeInput for the current element, + * or the element itself if it is an instance of TimeInput. + * If no TimeInput is found, returns \`null\`. + * + * @returns {TimeInputWrapper | null} + */ +findClosestTimeInput(): TimeInputWrapper | null; /** * Returns the wrapper of the first Toggle that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Toggle. @@ -1734,6 +2454,15 @@ findToggle(selector?: string): ToggleWrapper | null; * @returns {Array} */ findAllToggles(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Toggle for the current element, + * or the element itself if it is an instance of Toggle. + * If no Toggle is found, returns \`null\`. + * + * @returns {ToggleWrapper | null} + */ +findClosestToggle(): ToggleWrapper | null; /** * Returns the wrapper of the first ToggleButton that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ToggleButton. @@ -1753,6 +2482,15 @@ findToggleButton(selector?: string): ToggleButtonWrapper | null; * @returns {Array} */ findAllToggleButtons(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent ToggleButton for the current element, + * or the element itself if it is an instance of ToggleButton. + * If no ToggleButton is found, returns \`null\`. + * + * @returns {ToggleButtonWrapper | null} + */ +findClosestToggleButton(): ToggleButtonWrapper | null; /** * Returns the wrapper of the first Token that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Token. @@ -1772,6 +2510,15 @@ findToken(selector?: string): TokenWrapper | null; * @returns {Array} */ findAllTokens(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Token for the current element, + * or the element itself if it is an instance of Token. + * If no Token is found, returns \`null\`. + * + * @returns {TokenWrapper | null} + */ +findClosestToken(): TokenWrapper | null; /** * Returns the wrapper of the first TokenGroup that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TokenGroup. @@ -1791,6 +2538,15 @@ findTokenGroup(selector?: string): TokenGroupWrapper | null; * @returns {Array} */ findAllTokenGroups(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TokenGroup for the current element, + * or the element itself if it is an instance of TokenGroup. + * If no TokenGroup is found, returns \`null\`. + * + * @returns {TokenGroupWrapper | null} + */ +findClosestTokenGroup(): TokenGroupWrapper | null; /** * Returns the wrapper of the first Tooltip that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Tooltip. @@ -1810,6 +2566,15 @@ findTooltip(selector?: string): TooltipWrapper | null; * @returns {Array} */ findAllTooltips(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Tooltip for the current element, + * or the element itself if it is an instance of Tooltip. + * If no Tooltip is found, returns \`null\`. + * + * @returns {TooltipWrapper | null} + */ +findClosestTooltip(): TooltipWrapper | null; /** * Returns the wrapper of the first TopNavigation that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TopNavigation. @@ -1829,6 +2594,15 @@ findTopNavigation(selector?: string): TopNavigationWrapper | null; * @returns {Array} */ findAllTopNavigations(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TopNavigation for the current element, + * or the element itself if it is an instance of TopNavigation. + * If no TopNavigation is found, returns \`null\`. + * + * @returns {TopNavigationWrapper | null} + */ +findClosestTopNavigation(): TopNavigationWrapper | null; /** * Returns the wrapper of the first TreeView that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TreeView. @@ -1848,6 +2622,15 @@ findTreeView(selector?: string): TreeViewWrapper | null; * @returns {Array} */ findAllTreeViews(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TreeView for the current element, + * or the element itself if it is an instance of TreeView. + * If no TreeView is found, returns \`null\`. + * + * @returns {TreeViewWrapper | null} + */ +findClosestTreeView(): TreeViewWrapper | null; /** * Returns the wrapper of the first TutorialPanel that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first TutorialPanel. @@ -1867,6 +2650,15 @@ findTutorialPanel(selector?: string): TutorialPanelWrapper | null; * @returns {Array} */ findAllTutorialPanels(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent TutorialPanel for the current element, + * or the element itself if it is an instance of TutorialPanel. + * If no TutorialPanel is found, returns \`null\`. + * + * @returns {TutorialPanelWrapper | null} + */ +findClosestTutorialPanel(): TutorialPanelWrapper | null; /** * Returns the wrapper of the first Wizard that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first Wizard. @@ -1886,6 +2678,15 @@ findWizard(selector?: string): WizardWrapper | null; * @returns {Array} */ findAllWizards(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Wizard for the current element, + * or the element itself if it is an instance of Wizard. + * If no Wizard is found, returns \`null\`. + * + * @returns {WizardWrapper | null} + */ +findClosestWizard(): WizardWrapper | null; } } @@ -3061,6 +3862,451 @@ ElementWrapper.prototype.findAllWizards = function(selector) { return this.findAllComponents(WizardWrapper, selector); }; +ElementWrapper.prototype.findClosestAlert = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AlertWrapper); +}; +ElementWrapper.prototype.findClosestAnchorNavigation = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AnchorNavigationWrapper); +}; +ElementWrapper.prototype.findClosestAnnotation = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AnnotationWrapper); +}; +ElementWrapper.prototype.findClosestAppLayout = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AppLayoutWrapper); +}; +ElementWrapper.prototype.findClosestAppLayoutToolbar = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AppLayoutToolbarWrapper); +}; +ElementWrapper.prototype.findClosestAreaChart = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AreaChartWrapper); +}; +ElementWrapper.prototype.findClosestAttributeEditor = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AttributeEditorWrapper); +}; +ElementWrapper.prototype.findClosestAutosuggest = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(AutosuggestWrapper); +}; +ElementWrapper.prototype.findClosestBadge = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(BadgeWrapper); +}; +ElementWrapper.prototype.findClosestBarChart = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(BarChartWrapper); +}; +ElementWrapper.prototype.findClosestBox = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(BoxWrapper); +}; +ElementWrapper.prototype.findClosestBreadcrumbGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(BreadcrumbGroupWrapper); +}; +ElementWrapper.prototype.findClosestButton = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ButtonWrapper); +}; +ElementWrapper.prototype.findClosestButtonDropdown = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ButtonDropdownWrapper); +}; +ElementWrapper.prototype.findClosestButtonGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ButtonGroupWrapper); +}; +ElementWrapper.prototype.findClosestCalendar = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CalendarWrapper); +}; +ElementWrapper.prototype.findClosestCards = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CardsWrapper); +}; +ElementWrapper.prototype.findClosestCheckbox = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CheckboxWrapper); +}; +ElementWrapper.prototype.findClosestCodeEditor = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CodeEditorWrapper); +}; +ElementWrapper.prototype.findClosestCollectionPreferences = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CollectionPreferencesWrapper); +}; +ElementWrapper.prototype.findClosestColumnLayout = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ColumnLayoutWrapper); +}; +ElementWrapper.prototype.findClosestContainer = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ContainerWrapper); +}; +ElementWrapper.prototype.findClosestContentLayout = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ContentLayoutWrapper); +}; +ElementWrapper.prototype.findClosestCopyToClipboard = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(CopyToClipboardWrapper); +}; +ElementWrapper.prototype.findClosestDateInput = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(DateInputWrapper); +}; +ElementWrapper.prototype.findClosestDatePicker = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(DatePickerWrapper); +}; +ElementWrapper.prototype.findClosestDateRangePicker = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(DateRangePickerWrapper); +}; +ElementWrapper.prototype.findClosestDrawer = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(DrawerWrapper); +}; +ElementWrapper.prototype.findClosestErrorBoundary = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ErrorBoundaryWrapper); +}; +ElementWrapper.prototype.findClosestExpandableSection = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ExpandableSectionWrapper); +}; +ElementWrapper.prototype.findClosestFileDropzone = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FileDropzoneWrapper); +}; +ElementWrapper.prototype.findClosestFileInput = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FileInputWrapper); +}; +ElementWrapper.prototype.findClosestFileTokenGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FileTokenGroupWrapper); +}; +ElementWrapper.prototype.findClosestFileUpload = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FileUploadWrapper); +}; +ElementWrapper.prototype.findClosestFlashbar = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FlashbarWrapper); +}; +ElementWrapper.prototype.findClosestForm = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FormWrapper); +}; +ElementWrapper.prototype.findClosestFormField = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(FormFieldWrapper); +}; +ElementWrapper.prototype.findClosestGrid = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(GridWrapper); +}; +ElementWrapper.prototype.findClosestHeader = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(HeaderWrapper); +}; +ElementWrapper.prototype.findClosestHelpPanel = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(HelpPanelWrapper); +}; +ElementWrapper.prototype.findClosestHotspot = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(HotspotWrapper); +}; +ElementWrapper.prototype.findClosestIcon = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(IconWrapper); +}; +ElementWrapper.prototype.findClosestInput = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(InputWrapper); +}; +ElementWrapper.prototype.findClosestItemCard = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ItemCardWrapper); +}; +ElementWrapper.prototype.findClosestKeyValuePairs = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(KeyValuePairsWrapper); +}; +ElementWrapper.prototype.findClosestLineChart = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(LineChartWrapper); +}; +ElementWrapper.prototype.findClosestLink = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(LinkWrapper); +}; +ElementWrapper.prototype.findClosestList = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ListWrapper); +}; +ElementWrapper.prototype.findClosestLiveRegion = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(LiveRegionWrapper); +}; +ElementWrapper.prototype.findClosestMixedLineBarChart = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(MixedLineBarChartWrapper); +}; +ElementWrapper.prototype.findClosestModal = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ModalWrapper); +}; +ElementWrapper.prototype.findClosestMultiselect = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(MultiselectWrapper); +}; +ElementWrapper.prototype.findClosestNavigableGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(NavigableGroupWrapper); +}; +ElementWrapper.prototype.findClosestPagination = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PaginationWrapper); +}; +ElementWrapper.prototype.findClosestPanelLayout = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PanelLayoutWrapper); +}; +ElementWrapper.prototype.findClosestPieChart = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PieChartWrapper); +}; +ElementWrapper.prototype.findClosestPopover = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PopoverWrapper); +}; +ElementWrapper.prototype.findClosestProgressBar = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ProgressBarWrapper); +}; +ElementWrapper.prototype.findClosestPromptInput = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PromptInputWrapper); +}; +ElementWrapper.prototype.findClosestPropertyFilter = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(PropertyFilterWrapper); +}; +ElementWrapper.prototype.findClosestRadioButton = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(RadioButtonWrapper); +}; +ElementWrapper.prototype.findClosestRadioGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(RadioGroupWrapper); +}; +ElementWrapper.prototype.findClosestS3ResourceSelector = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(S3ResourceSelectorWrapper); +}; +ElementWrapper.prototype.findClosestSegmentedControl = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SegmentedControlWrapper); +}; +ElementWrapper.prototype.findClosestSelect = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SelectWrapper); +}; +ElementWrapper.prototype.findClosestSideNavigation = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SideNavigationWrapper); +}; +ElementWrapper.prototype.findClosestSlider = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SliderWrapper); +}; +ElementWrapper.prototype.findClosestSpaceBetween = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SpaceBetweenWrapper); +}; +ElementWrapper.prototype.findClosestSpinner = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SpinnerWrapper); +}; +ElementWrapper.prototype.findClosestSplitPanel = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(SplitPanelWrapper); +}; +ElementWrapper.prototype.findClosestStatusIndicator = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(StatusIndicatorWrapper); +}; +ElementWrapper.prototype.findClosestSteps = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(StepsWrapper); +}; +ElementWrapper.prototype.findClosestTable = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TableWrapper); +}; +ElementWrapper.prototype.findClosestTabs = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TabsWrapper); +}; +ElementWrapper.prototype.findClosestTagEditor = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TagEditorWrapper); +}; +ElementWrapper.prototype.findClosestTextContent = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TextContentWrapper); +}; +ElementWrapper.prototype.findClosestTextFilter = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TextFilterWrapper); +}; +ElementWrapper.prototype.findClosestTextarea = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TextareaWrapper); +}; +ElementWrapper.prototype.findClosestTiles = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TilesWrapper); +}; +ElementWrapper.prototype.findClosestTimeInput = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TimeInputWrapper); +}; +ElementWrapper.prototype.findClosestToggle = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ToggleWrapper); +}; +ElementWrapper.prototype.findClosestToggleButton = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(ToggleButtonWrapper); +}; +ElementWrapper.prototype.findClosestToken = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TokenWrapper); +}; +ElementWrapper.prototype.findClosestTokenGroup = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TokenGroupWrapper); +}; +ElementWrapper.prototype.findClosestTooltip = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TooltipWrapper); +}; +ElementWrapper.prototype.findClosestTopNavigation = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TopNavigationWrapper); +}; +ElementWrapper.prototype.findClosestTreeView = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TreeViewWrapper); +}; +ElementWrapper.prototype.findClosestTutorialPanel = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(TutorialPanelWrapper); +}; +ElementWrapper.prototype.findClosestWizard = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(WizardWrapper); +}; export default function wrapper(root: Element = document.body) { if (document && document.body && !document.body.contains(root)) { From ff7dc9de03df9eef9cb2f5e7b35657575743cda6 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 12:23:59 +0100 Subject: [PATCH 04/12] refactor: Remove unnecessary tests, improve backwards compatibility, use test-classes styles --- .../test-utils-selectors.test.tsx.snap | 4 +-- src/item-card/__tests__/card.test.tsx | 26 ++++++-------- src/item-card/internal.tsx | 6 +++- src/item-card/styles.scss | 36 +++++++++++++------ src/item-card/test-classes/styles.scss | 8 +++++ src/test-utils/dom/item-card/index.ts | 5 +-- 6 files changed, 54 insertions(+), 31 deletions(-) create mode 100644 src/item-card/test-classes/styles.scss diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index f73b686ba6..3f5b4f97e0 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -436,8 +436,8 @@ exports[`test-utils selectors 1`] = ` "awsui_body_n1fwt", "awsui_description_n1fwt", "awsui_footer_n1fwt", - "awsui_header_n1fwt", - "awsui_icon_n1fwt", + "awsui_header-inner_n1fwt", + "awsui_icon_14an4", "awsui_root_n1fwt", ], "key-value-pairs": [ diff --git a/src/item-card/__tests__/card.test.tsx b/src/item-card/__tests__/card.test.tsx index cb2656bc3b..1c7c0eca6e 100644 --- a/src/item-card/__tests__/card.test.tsx +++ b/src/item-card/__tests__/card.test.tsx @@ -36,11 +36,11 @@ test('renders header when provided', () => { expect(header!.getElement()).toHaveTextContent('Card title'); }); -test('renders header-inner element for header text', () => { +test('renders header text content', () => { const { itemCard } = renderItemCard(content); - const headerInner = itemCard.findByClassName(styles['header-inner']); - expect(headerInner).not.toBeNull(); - expect(headerInner!.getElement()).toHaveTextContent('My Header'); + const header = itemCard.findHeader(); + expect(header).not.toBeNull(); + expect(header!.getElement()).toHaveTextContent('My Header'); }); test('renders description when provided', () => { @@ -77,20 +77,14 @@ test('renders actions in the header area', () => { expect(actions!.getElement()).toHaveTextContent('Action'); }); -test('renders header with with-actions class when actions are provided', () => { +test('renders header and actions together', () => { const { itemCard } = renderItemCard( Action}> content ); - const header = itemCard.findHeader(); - expect(header!.getElement()).toHaveClass(styles['with-actions']); -}); - -test('renders header without with-actions class when no actions', () => { - const { itemCard } = renderItemCard(content); - const header = itemCard.findHeader(); - expect(header!.getElement()).not.toHaveClass(styles['with-actions']); + expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Title'); + expect(itemCard.findActions()!.getElement()).toHaveTextContent('Action'); }); test('renders all parts together: header, description, actions, children, footer', () => { @@ -99,9 +93,9 @@ test('renders all parts together: header, description, actions, children, footer Body ); - expect(itemCard.findHeader()).not.toBeNull(); - expect(itemCard.findByClassName(styles['header-inner'])!.getElement()).toHaveTextContent('Header'); + expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Header'); expect(itemCard.findDescription()!.getElement()).toHaveTextContent('Description'); + expect(itemCard.findActions()!.getElement()).toHaveTextContent('Act'); expect(itemCard.findContent()!.getElement()).toHaveTextContent('Body'); expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Footer'); }); @@ -260,7 +254,7 @@ test('renders with React nodes as header and footer', () => { content ); - expect(itemCard.findByClassName(styles['header-inner'])!.getElement()).toHaveTextContent('Custom Header'); + expect(itemCard.findHeader()!.getElement()).toHaveTextContent('Custom Header'); expect(itemCard.findFooter()!.getElement()).toHaveTextContent('Custom Footer'); }); diff --git a/src/item-card/internal.tsx b/src/item-card/internal.tsx index 1bd2f0d73e..a0f42f77fa 100644 --- a/src/item-card/internal.tsx +++ b/src/item-card/internal.tsx @@ -5,11 +5,13 @@ import clsx from 'clsx'; import { getBaseProps } from '../internal/base-component'; import InternalStructuredItem from '../internal/components/structured-item'; +import { useVisualRefresh } from '../internal/hooks/use-visual-mode'; import { processAttributes } from '../internal/utils/with-native-attributes'; import { InternalItemCardProps } from './interfaces'; import { getContentStyles, getFooterStyles, getHeaderStyles, getRootStyles } from './style'; import styles from './styles.css.js'; +import testStyles from './test-classes/styles.css.js'; export default function InternalItemCard({ actions, @@ -33,6 +35,7 @@ export default function InternalItemCard({ ...restProps }: InternalItemCardProps) { const baseProps = getBaseProps(restProps); + const isRefresh = useVisualRefresh(); const headerRowEmpty = !header && !description && !icon && !actions; @@ -43,6 +46,7 @@ export default function InternalItemCard({ styles.root, highlighted && styles.highlighted, fullHeight && styles['full-height'], + isRefresh && styles.refresh, styles[`variant-${variant}`] ), ...metadataAttributes, @@ -68,7 +72,7 @@ export default function InternalItemCard({ {header}} secondaryContent={description &&
{description}
} - icon={icon &&
{icon}
} + icon={icon &&
{icon}
} actions={actions} disablePaddings={disableHeaderPaddings} wrapActions={false} diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss index 11166316a5..5d61dbbad9 100644 --- a/src/item-card/styles.scss +++ b/src/item-card/styles.scss @@ -63,18 +63,37 @@ $action-padding-horizontal: awsui.$space-xxs; position: relative; background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card); min-inline-size: 0; - box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); &:before { @include styles.base-pseudo-element; - box-shadow: none; + border-color: transparent; + } + + &::after { + @include styles.base-pseudo-element; + } - border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); - border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + &:not(.refresh) { + &::before { + border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top; + } + &::after { + box-shadow: awsui.$shadow-container; + } } + + &.refresh { + box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); + + &:before { + border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + } + } + &.highlighted { background-color: awsui.$color-background-item-selected; @@ -114,6 +133,7 @@ $action-padding-horizontal: awsui.$space-xxs; &.variant-#{$variant} { &, &:before, + &::after, > .inner-card { @include apply-border-radius($variant); } @@ -154,7 +174,3 @@ $action-padding-horizontal: awsui.$space-xxs; color: awsui.$color-text-heading-secondary; @include styles.font-body-s; } - -.icon { - /* used in test-utils */ -} diff --git a/src/item-card/test-classes/styles.scss b/src/item-card/test-classes/styles.scss new file mode 100644 index 0000000000..79db34bd20 --- /dev/null +++ b/src/item-card/test-classes/styles.scss @@ -0,0 +1,8 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +.icon { + /* used in test-utils */ +} diff --git a/src/test-utils/dom/item-card/index.ts b/src/test-utils/dom/item-card/index.ts index 23179bf81e..96329d7ba2 100644 --- a/src/test-utils/dom/item-card/index.ts +++ b/src/test-utils/dom/item-card/index.ts @@ -4,6 +4,7 @@ import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils- import structuredItemStyles from '../../../internal/components/structured-item/test-classes/styles.selectors.js'; import styles from '../../../item-card/styles.selectors.js'; +import testStyles from '../../../item-card/test-classes/styles.selectors.js'; export default class ItemCardWrapper extends ComponentWrapper { static rootSelector: string = styles.root; @@ -33,7 +34,7 @@ export default class ItemCardWrapper extends ComponentWrapper { * Finds the header slot of the item card. */ findHeader(): ElementWrapper | null { - return this.findByClassName(styles.header); + return this.findByClassName(styles['header-inner']); } /** @@ -47,6 +48,6 @@ export default class ItemCardWrapper extends ComponentWrapper { * Finds the icon slot of the item card. */ findIcon(): ElementWrapper | null { - return this.findByClassName(styles.icon); + return this.findByClassName(testStyles.icon); } } From 5910530651753fdbc282411541de91c9db01457f Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 12:39:55 +0100 Subject: [PATCH 05/12] refactor: Improve readability of item card tests --- src/item-card/__tests__/card.test.tsx | 59 +++++++++++---------------- 1 file changed, 24 insertions(+), 35 deletions(-) diff --git a/src/item-card/__tests__/card.test.tsx b/src/item-card/__tests__/card.test.tsx index 1c7c0eca6e..d2803c5309 100644 --- a/src/item-card/__tests__/card.test.tsx +++ b/src/item-card/__tests__/card.test.tsx @@ -302,7 +302,7 @@ describe('nativeAttributes', () => { }); }); -describe('highlighted (internal prop)', () => { +describe('internal props', () => { function renderInternalItemCard(jsx: React.ReactElement) { const { container } = render(jsx); const wrapper = createWrapper(container); @@ -310,42 +310,31 @@ describe('highlighted (internal prop)', () => { return { wrapper, itemCard }; } - test('applies highlighted class when highlighted is true', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).toHaveClass(styles.highlighted); + describe('highlighted', () => { + it.each([true])('applies highlighted class when highlighted=%s', highlighted => { + const { itemCard } = renderInternalItemCard( + content + ); + expect(itemCard.getElement()).toHaveClass(styles.highlighted); + }); + + it.each([false, undefined])('does not apply highlighted class when highlighted=%s', highlighted => { + const { itemCard } = renderInternalItemCard( + content + ); + expect(itemCard.getElement()).not.toHaveClass(styles.highlighted); + }); }); - test('does not apply highlighted class by default', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).not.toHaveClass(styles.highlighted); - }); - - test('does not apply highlighted class when highlighted is false', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).not.toHaveClass(styles.highlighted); - }); -}); - -describe('fullHeight (internal prop)', () => { - function renderInternalItemCard(jsx: React.ReactElement) { - const { container } = render(jsx); - const wrapper = createWrapper(container); - const itemCard = wrapper.findItemCard()!; - return { wrapper, itemCard }; - } - - test('applies full-height class when fullHeight is true', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).toHaveClass(styles['full-height']); - }); - - test('does not apply full-height class by default', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).not.toHaveClass(styles['full-height']); - }); + describe('fullHeight', () => { + it.each([true])('applies full-height class when fullHeight=%s', fullHeight => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).toHaveClass(styles['full-height']); + }); - test('does not apply full-height class when fullHeight is false', () => { - const { itemCard } = renderInternalItemCard(content); - expect(itemCard.getElement()).not.toHaveClass(styles['full-height']); + it.each([false, undefined])('does not apply full-height class when fullHeight=%s', fullHeight => { + const { itemCard } = renderInternalItemCard(content); + expect(itemCard.getElement()).not.toHaveClass(styles['full-height']); + }); }); }); From f0478e3df7000f2505a93919189570d0fb42975a Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 12:53:20 +0100 Subject: [PATCH 06/12] chore: Update snapshots --- .../test-utils-wrappers.test.tsx.snap | 33 ++++ .../__snapshots__/styles.test.tsx.snap | 6 +- .../__snapshots__/styles.test.tsx.snap | 144 +++++++++--------- .../__snapshots__/styles.test.tsx.snap | 10 +- .../__snapshots__/styles.test.tsx.snap | 66 ++++---- .../__snapshots__/styles.test.tsx.snap | 42 ++--- .../__snapshots__/styles.test.tsx.snap | 40 ++--- .../__snapshots__/styles.test.tsx.snap | 144 +++++++++--------- .../__snapshots__/styles.test.tsx.snap | 26 ++-- 9 files changed, 272 insertions(+), 239 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap index 63f8b8a0a9..c3891760d6 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap @@ -979,6 +979,34 @@ findAllDrawers(selector?: string): Array; * @returns {DrawerWrapper | null} */ findClosestDrawer(): DrawerWrapper | null; +/** + * Returns the wrapper of the first Dropdown that matches the specified CSS selector. + * If no CSS selector is specified, returns the wrapper of the first Dropdown. + * If no matching Dropdown is found, returns \`null\`. + * + * @param {string} [selector] CSS Selector + * @returns {DropdownWrapper | null} + */ +findDropdown(selector?: string): DropdownWrapper | null; + +/** + * Returns an array of Dropdown wrapper that matches the specified CSS selector. + * If no CSS selector is specified, returns all of the Dropdowns inside the current wrapper. + * If no matching Dropdown is found, returns an empty array. + * + * @param {string} [selector] CSS Selector + * @returns {Array} + */ +findAllDropdowns(selector?: string): Array; + +/** + * Returns the wrapper of the closest parent Dropdown for the current element, + * or the element itself if it is an instance of Dropdown. + * If no Dropdown is found, returns \`null\`. + * + * @returns {DropdownWrapper | null} + */ +findClosestDropdown(): DropdownWrapper | null; /** * Returns the wrapper of the first ErrorBoundary that matches the specified CSS selector. * If no CSS selector is specified, returns the wrapper of the first ErrorBoundary. @@ -4002,6 +4030,11 @@ ElementWrapper.prototype.findClosestDrawer = function() { // https://github.com/microsoft/TypeScript/issues/29132 return (this as any).findClosestComponent(DrawerWrapper); }; +ElementWrapper.prototype.findClosestDropdown = function() { + // casting to 'any' is needed to avoid this issue with generics + // https://github.com/microsoft/TypeScript/issues/29132 + return (this as any).findClosestComponent(DropdownWrapper); +}; ElementWrapper.prototype.findClosestErrorBoundary = function() { // casting to 'any' is needed to avoid this issue with generics // https://github.com/microsoft/TypeScript/issues/29132 diff --git a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap index 08f099e43c..e365408648 100644 --- a/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/dropdown/__tests__/__snapshots__/styles.test.tsx.snap @@ -6,9 +6,9 @@ exports[`getDropdownStyles handles all possible style configurations 2`] = `unde exports[`getDropdownStyles handles all possible style configurations 3`] = ` { - "--awsui-dropdown-content-border-color-u09ddc": "rgb(0, 0, 0)", - "--awsui-dropdown-content-border-radius-u09ddc": "8px", - "--awsui-dropdown-content-border-width-u09ddc": "2px", + "--awsui-dropdown-content-border-color-6b9ypa": "rgb(0, 0, 0)", + "--awsui-dropdown-content-border-radius-6b9ypa": "8px", + "--awsui-dropdown-content-border-width-6b9ypa": "2px", "background": "rgb(255, 255, 255)", } `; diff --git a/src/input/__tests__/__snapshots__/styles.test.tsx.snap b/src/input/__tests__/__snapshots__/styles.test.tsx.snap index ccc5ad5e71..85c1053781 100644 --- a/src/input/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/input/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-focus-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-background-readonly-rvkgb9": undefined, - "--awsui-style-border-color-default-rvkgb9": undefined, - "--awsui-style-border-color-disabled-rvkgb9": undefined, - "--awsui-style-border-color-focus-rvkgb9": undefined, - "--awsui-style-border-color-hover-rvkgb9": undefined, - "--awsui-style-border-color-readonly-rvkgb9": undefined, - "--awsui-style-box-shadow-default-rvkgb9": undefined, - "--awsui-style-box-shadow-disabled-rvkgb9": undefined, - "--awsui-style-box-shadow-focus-rvkgb9": undefined, - "--awsui-style-box-shadow-hover-rvkgb9": undefined, - "--awsui-style-box-shadow-readonly-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-focus-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-color-readonly-rvkgb9": undefined, - "--awsui-style-placeholder-color-rvkgb9": undefined, - "--awsui-style-placeholder-font-size-rvkgb9": undefined, - "--awsui-style-placeholder-font-style-rvkgb9": undefined, - "--awsui-style-placeholder-font-weight-rvkgb9": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-focus-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-background-readonly-6b9ypa": undefined, + "--awsui-style-border-color-default-6b9ypa": undefined, + "--awsui-style-border-color-disabled-6b9ypa": undefined, + "--awsui-style-border-color-focus-6b9ypa": undefined, + "--awsui-style-border-color-hover-6b9ypa": undefined, + "--awsui-style-border-color-readonly-6b9ypa": undefined, + "--awsui-style-box-shadow-default-6b9ypa": undefined, + "--awsui-style-box-shadow-disabled-6b9ypa": undefined, + "--awsui-style-box-shadow-focus-6b9ypa": undefined, + "--awsui-style-box-shadow-hover-6b9ypa": undefined, + "--awsui-style-box-shadow-readonly-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-focus-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-color-readonly-6b9ypa": undefined, + "--awsui-style-placeholder-color-6b9ypa": undefined, + "--awsui-style-placeholder-font-size-6b9ypa": undefined, + "--awsui-style-placeholder-font-style-6b9ypa": undefined, + "--awsui-style-placeholder-font-weight-6b9ypa": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getInputStyles handles all possible style configurations 1`] = ` exports[`getInputStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-focus-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-background-readonly-rvkgb9": undefined, - "--awsui-style-border-color-default-rvkgb9": undefined, - "--awsui-style-border-color-disabled-rvkgb9": undefined, - "--awsui-style-border-color-focus-rvkgb9": undefined, - "--awsui-style-border-color-hover-rvkgb9": undefined, - "--awsui-style-border-color-readonly-rvkgb9": undefined, - "--awsui-style-box-shadow-default-rvkgb9": undefined, - "--awsui-style-box-shadow-disabled-rvkgb9": undefined, - "--awsui-style-box-shadow-focus-rvkgb9": undefined, - "--awsui-style-box-shadow-hover-rvkgb9": undefined, - "--awsui-style-box-shadow-readonly-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-focus-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-color-readonly-rvkgb9": undefined, - "--awsui-style-placeholder-color-rvkgb9": undefined, - "--awsui-style-placeholder-font-size-rvkgb9": undefined, - "--awsui-style-placeholder-font-style-rvkgb9": undefined, - "--awsui-style-placeholder-font-weight-rvkgb9": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-focus-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-background-readonly-6b9ypa": undefined, + "--awsui-style-border-color-default-6b9ypa": undefined, + "--awsui-style-border-color-disabled-6b9ypa": undefined, + "--awsui-style-border-color-focus-6b9ypa": undefined, + "--awsui-style-border-color-hover-6b9ypa": undefined, + "--awsui-style-border-color-readonly-6b9ypa": undefined, + "--awsui-style-box-shadow-default-6b9ypa": undefined, + "--awsui-style-box-shadow-disabled-6b9ypa": undefined, + "--awsui-style-box-shadow-focus-6b9ypa": undefined, + "--awsui-style-box-shadow-hover-6b9ypa": undefined, + "--awsui-style-box-shadow-readonly-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-focus-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-color-readonly-6b9ypa": undefined, + "--awsui-style-placeholder-color-6b9ypa": undefined, + "--awsui-style-placeholder-font-size-6b9ypa": undefined, + "--awsui-style-placeholder-font-style-6b9ypa": undefined, + "--awsui-style-placeholder-font-weight-6b9ypa": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getInputStyles handles all possible style configurations 2`] = ` exports[`getInputStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-rvkgb9": "#ffffff", - "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", - "--awsui-style-background-focus-rvkgb9": "#ffffff", - "--awsui-style-background-hover-rvkgb9": "#fafafa", - "--awsui-style-background-readonly-rvkgb9": "#ffffff", - "--awsui-style-border-color-default-rvkgb9": "#cccccc", - "--awsui-style-border-color-disabled-rvkgb9": "#e0e0e0", - "--awsui-style-border-color-focus-rvkgb9": "#0073bb", - "--awsui-style-border-color-hover-rvkgb9": "#999999", - "--awsui-style-border-color-readonly-rvkgb9": "#e0e0e0", - "--awsui-style-box-shadow-default-rvkgb9": "none", - "--awsui-style-box-shadow-disabled-rvkgb9": "none", - "--awsui-style-box-shadow-focus-rvkgb9": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-rvkgb9": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-rvkgb9": "none", - "--awsui-style-color-default-rvkgb9": "#000000", - "--awsui-style-color-disabled-rvkgb9": "#999999", - "--awsui-style-color-focus-rvkgb9": "#000000", - "--awsui-style-color-hover-rvkgb9": "#000000", - "--awsui-style-color-readonly-rvkgb9": "#000000", - "--awsui-style-placeholder-color-rvkgb9": "#999999", - "--awsui-style-placeholder-font-size-rvkgb9": "14px", - "--awsui-style-placeholder-font-style-rvkgb9": "italic", - "--awsui-style-placeholder-font-weight-rvkgb9": "400", + "--awsui-style-background-default-6b9ypa": "#ffffff", + "--awsui-style-background-disabled-6b9ypa": "#f0f0f0", + "--awsui-style-background-focus-6b9ypa": "#ffffff", + "--awsui-style-background-hover-6b9ypa": "#fafafa", + "--awsui-style-background-readonly-6b9ypa": "#ffffff", + "--awsui-style-border-color-default-6b9ypa": "#cccccc", + "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0", + "--awsui-style-border-color-focus-6b9ypa": "#0073bb", + "--awsui-style-border-color-hover-6b9ypa": "#999999", + "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0", + "--awsui-style-box-shadow-default-6b9ypa": "none", + "--awsui-style-box-shadow-disabled-6b9ypa": "none", + "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-6b9ypa": "none", + "--awsui-style-color-default-6b9ypa": "#000000", + "--awsui-style-color-disabled-6b9ypa": "#999999", + "--awsui-style-color-focus-6b9ypa": "#000000", + "--awsui-style-color-hover-6b9ypa": "#000000", + "--awsui-style-color-readonly-6b9ypa": "#000000", + "--awsui-style-placeholder-color-6b9ypa": "#999999", + "--awsui-style-placeholder-font-size-6b9ypa": "14px", + "--awsui-style-placeholder-font-style-6b9ypa": "italic", + "--awsui-style-placeholder-font-weight-6b9ypa": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap index eb2e7bba04..ecc1b65139 100644 --- a/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/item-card/__tests__/__snapshots__/styles.test.tsx.snap @@ -42,11 +42,11 @@ exports[`getRootStyles handles all possible style configurations 2`] = `{}`; exports[`getRootStyles handles all possible style configurations 3`] = ` { - "--awsui-style-item-card-background-default-rvkgb9": "#ffffff", - "--awsui-style-item-card-border-color-default-rvkgb9": "#e0e0e0", - "--awsui-style-item-card-border-radius-rvkgb9": "8px", - "--awsui-style-item-card-border-width-default-rvkgb9": "1px", - "--awsui-style-item-card-box-shadow-default-rvkgb9": "0 1px 3px rgba(0,0,0,0.1)", + "--awsui-style-item-card-background-default-6b9ypa": "#ffffff", + "--awsui-style-item-card-border-color-default-6b9ypa": "#e0e0e0", + "--awsui-style-item-card-border-radius-6b9ypa": "8px", + "--awsui-style-item-card-border-width-default-6b9ypa": "1px", + "--awsui-style-item-card-box-shadow-default-6b9ypa": "0 1px 3px rgba(0,0,0,0.1)", "borderRadius": "8px", } `; diff --git a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap index dce91ec53a..9cfed12417 100644 --- a/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap @@ -20,17 +20,17 @@ exports[`getSegmentedControlRootStyles handles all possible style configurations exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-active-rvkgb9": undefined, - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-color-active-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-focus-ring-border-color-rvkgb9": undefined, - "--awsui-style-focus-ring-border-radius-rvkgb9": undefined, - "--awsui-style-focus-ring-border-width-rvkgb9": undefined, + "--awsui-style-background-active-6b9ypa": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-color-active-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-focus-ring-border-color-6b9ypa": undefined, + "--awsui-style-focus-ring-border-radius-6b9ypa": undefined, + "--awsui-style-focus-ring-border-width-6b9ypa": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -40,17 +40,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-active-rvkgb9": undefined, - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-color-active-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-focus-ring-border-color-rvkgb9": undefined, - "--awsui-style-focus-ring-border-radius-rvkgb9": undefined, - "--awsui-style-focus-ring-border-width-rvkgb9": undefined, + "--awsui-style-background-active-6b9ypa": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-color-active-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-focus-ring-border-color-6b9ypa": undefined, + "--awsui-style-focus-ring-border-radius-6b9ypa": undefined, + "--awsui-style-focus-ring-border-width-6b9ypa": undefined, "borderRadius": undefined, "fontSize": undefined, "paddingBlock": undefined, @@ -60,17 +60,17 @@ exports[`getSegmentedControlSegmentStyles handles all possible style configurati exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-active-rvkgb9": "#0073bb", - "--awsui-style-background-default-rvkgb9": "#ffffff", - "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", - "--awsui-style-background-hover-rvkgb9": "#fafafa", - "--awsui-style-color-active-rvkgb9": "#ffffff", - "--awsui-style-color-default-rvkgb9": "#000000", - "--awsui-style-color-disabled-rvkgb9": "#999999", - "--awsui-style-color-hover-rvkgb9": "#000000", - "--awsui-style-focus-ring-border-color-rvkgb9": "#0073bb", - "--awsui-style-focus-ring-border-radius-rvkgb9": "8px", - "--awsui-style-focus-ring-border-width-rvkgb9": "2px", + "--awsui-style-background-active-6b9ypa": "#0073bb", + "--awsui-style-background-default-6b9ypa": "#ffffff", + "--awsui-style-background-disabled-6b9ypa": "#f0f0f0", + "--awsui-style-background-hover-6b9ypa": "#fafafa", + "--awsui-style-color-active-6b9ypa": "#ffffff", + "--awsui-style-color-default-6b9ypa": "#000000", + "--awsui-style-color-disabled-6b9ypa": "#999999", + "--awsui-style-color-hover-6b9ypa": "#000000", + "--awsui-style-focus-ring-border-color-6b9ypa": "#0073bb", + "--awsui-style-focus-ring-border-radius-6b9ypa": "8px", + "--awsui-style-focus-ring-border-width-6b9ypa": "2px", "borderRadius": "6px", "fontSize": "14px", "paddingBlock": "8px", diff --git a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap index 08d030dde7..2ee8224105 100644 --- a/src/slider/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/slider/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,36 +2,36 @@ exports[`getSliderStyles handles all possible style configurations 1`] = ` { - "--awsui-style-slider-handle-background-active-rvkgb9": undefined, - "--awsui-style-slider-handle-background-default-rvkgb9": undefined, - "--awsui-style-slider-handle-background-hover-rvkgb9": undefined, - "--awsui-style-slider-handle-border-radius-rvkgb9": undefined, - "--awsui-style-slider-range-background-active-rvkgb9": undefined, - "--awsui-style-slider-range-background-default-rvkgb9": undefined, - "--awsui-style-slider-track-background-color-rvkgb9": undefined, + "--awsui-style-slider-handle-background-active-6b9ypa": undefined, + "--awsui-style-slider-handle-background-default-6b9ypa": undefined, + "--awsui-style-slider-handle-background-hover-6b9ypa": undefined, + "--awsui-style-slider-handle-border-radius-6b9ypa": undefined, + "--awsui-style-slider-range-background-active-6b9ypa": undefined, + "--awsui-style-slider-range-background-default-6b9ypa": undefined, + "--awsui-style-slider-track-background-color-6b9ypa": undefined, } `; exports[`getSliderStyles handles all possible style configurations 2`] = ` { - "--awsui-style-slider-handle-background-active-rvkgb9": undefined, - "--awsui-style-slider-handle-background-default-rvkgb9": undefined, - "--awsui-style-slider-handle-background-hover-rvkgb9": undefined, - "--awsui-style-slider-handle-border-radius-rvkgb9": undefined, - "--awsui-style-slider-range-background-active-rvkgb9": undefined, - "--awsui-style-slider-range-background-default-rvkgb9": undefined, - "--awsui-style-slider-track-background-color-rvkgb9": undefined, + "--awsui-style-slider-handle-background-active-6b9ypa": undefined, + "--awsui-style-slider-handle-background-default-6b9ypa": undefined, + "--awsui-style-slider-handle-background-hover-6b9ypa": undefined, + "--awsui-style-slider-handle-border-radius-6b9ypa": undefined, + "--awsui-style-slider-range-background-active-6b9ypa": undefined, + "--awsui-style-slider-range-background-default-6b9ypa": undefined, + "--awsui-style-slider-track-background-color-6b9ypa": undefined, } `; exports[`getSliderStyles handles all possible style configurations 3`] = ` { - "--awsui-style-slider-handle-background-active-rvkgb9": "#1d4ed8", - "--awsui-style-slider-handle-background-default-rvkgb9": "#3b82f6", - "--awsui-style-slider-handle-background-hover-rvkgb9": "#2563eb", - "--awsui-style-slider-handle-border-radius-rvkgb9": "50%", - "--awsui-style-slider-range-background-active-rvkgb9": "#2563eb", - "--awsui-style-slider-range-background-default-rvkgb9": "#3b82f6", - "--awsui-style-slider-track-background-color-rvkgb9": "#dbeafe", + "--awsui-style-slider-handle-background-active-6b9ypa": "#1d4ed8", + "--awsui-style-slider-handle-background-default-6b9ypa": "#3b82f6", + "--awsui-style-slider-handle-background-hover-6b9ypa": "#2563eb", + "--awsui-style-slider-handle-border-radius-6b9ypa": "50%", + "--awsui-style-slider-range-background-active-6b9ypa": "#2563eb", + "--awsui-style-slider-range-background-default-6b9ypa": "#3b82f6", + "--awsui-style-slider-track-background-color-6b9ypa": "#dbeafe", } `; diff --git a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap index 9e82f5b121..369fed8a6e 100644 --- a/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/tabs/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,21 +2,21 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` { - "--awsui-style-background-active-rvkgb9": "#bfdbfe", - "--awsui-style-background-default-rvkgb9": "#dbeafe", - "--awsui-style-background-disabled-rvkgb9": "#f3f4f6", - "--awsui-style-background-hover-rvkgb9": "#eff6ff", - "--awsui-style-border-color-active-rvkgb9": "#1d4ed8", - "--awsui-style-border-color-default-rvkgb9": "#3b82f6", - "--awsui-style-border-color-disabled-rvkgb9": "#93c5fd", - "--awsui-style-border-color-hover-rvkgb9": "#2563eb", - "--awsui-style-color-active-rvkgb9": "#1e3a8a", - "--awsui-style-color-default-rvkgb9": "#1e40af", - "--awsui-style-color-disabled-rvkgb9": "#93c5fd", - "--awsui-style-color-hover-rvkgb9": "#1e40af", - "--awsui-style-focus-ring-border-color-rvkgb9": "#3b82f6", - "--awsui-style-focus-ring-border-radius-rvkgb9": "4px", - "--awsui-style-focus-ring-border-width-rvkgb9": "2px", + "--awsui-style-background-active-6b9ypa": "#bfdbfe", + "--awsui-style-background-default-6b9ypa": "#dbeafe", + "--awsui-style-background-disabled-6b9ypa": "#f3f4f6", + "--awsui-style-background-hover-6b9ypa": "#eff6ff", + "--awsui-style-border-color-active-6b9ypa": "#1d4ed8", + "--awsui-style-border-color-default-6b9ypa": "#3b82f6", + "--awsui-style-border-color-disabled-6b9ypa": "#93c5fd", + "--awsui-style-border-color-hover-6b9ypa": "#2563eb", + "--awsui-style-color-active-6b9ypa": "#1e3a8a", + "--awsui-style-color-default-6b9ypa": "#1e40af", + "--awsui-style-color-disabled-6b9ypa": "#93c5fd", + "--awsui-style-color-hover-6b9ypa": "#1e40af", + "--awsui-style-focus-ring-border-color-6b9ypa": "#3b82f6", + "--awsui-style-focus-ring-border-radius-6b9ypa": "4px", + "--awsui-style-focus-ring-border-width-6b9ypa": "2px", "borderRadius": "4px", "borderWidth": "2px", "fontSize": "16px", @@ -28,10 +28,10 @@ exports[`getTabStyles transforms tab styles to CSS properties 1`] = ` exports[`getTabStyles transforms tab styles to CSS properties 2`] = ` { - "--awsui-style-tabs-active-indicator-border-radius-rvkgb9": "2px", - "--awsui-style-tabs-active-indicator-color-rvkgb9": "#1d4ed8", - "--awsui-style-tabs-active-indicator-width-rvkgb9": "3px", - "--awsui-style-tabs-separator-color-rvkgb9": "#cbd5e1", - "--awsui-style-tabs-separator-width-rvkgb9": "2px", + "--awsui-style-tabs-active-indicator-border-radius-6b9ypa": "2px", + "--awsui-style-tabs-active-indicator-color-6b9ypa": "#1d4ed8", + "--awsui-style-tabs-active-indicator-width-6b9ypa": "3px", + "--awsui-style-tabs-separator-color-6b9ypa": "#cbd5e1", + "--awsui-style-tabs-separator-width-6b9ypa": "2px", } `; diff --git a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap index 4b25d9f34a..daf5208fe6 100644 --- a/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/text-filter/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,30 +2,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` { - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-focus-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-background-readonly-rvkgb9": undefined, - "--awsui-style-border-color-default-rvkgb9": undefined, - "--awsui-style-border-color-disabled-rvkgb9": undefined, - "--awsui-style-border-color-focus-rvkgb9": undefined, - "--awsui-style-border-color-hover-rvkgb9": undefined, - "--awsui-style-border-color-readonly-rvkgb9": undefined, - "--awsui-style-box-shadow-default-rvkgb9": undefined, - "--awsui-style-box-shadow-disabled-rvkgb9": undefined, - "--awsui-style-box-shadow-focus-rvkgb9": undefined, - "--awsui-style-box-shadow-hover-rvkgb9": undefined, - "--awsui-style-box-shadow-readonly-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-focus-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-color-readonly-rvkgb9": undefined, - "--awsui-style-placeholder-color-rvkgb9": undefined, - "--awsui-style-placeholder-font-size-rvkgb9": undefined, - "--awsui-style-placeholder-font-style-rvkgb9": undefined, - "--awsui-style-placeholder-font-weight-rvkgb9": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-focus-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-background-readonly-6b9ypa": undefined, + "--awsui-style-border-color-default-6b9ypa": undefined, + "--awsui-style-border-color-disabled-6b9ypa": undefined, + "--awsui-style-border-color-focus-6b9ypa": undefined, + "--awsui-style-border-color-hover-6b9ypa": undefined, + "--awsui-style-border-color-readonly-6b9ypa": undefined, + "--awsui-style-box-shadow-default-6b9ypa": undefined, + "--awsui-style-box-shadow-disabled-6b9ypa": undefined, + "--awsui-style-box-shadow-focus-6b9ypa": undefined, + "--awsui-style-box-shadow-hover-6b9ypa": undefined, + "--awsui-style-box-shadow-readonly-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-focus-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-color-readonly-6b9ypa": undefined, + "--awsui-style-placeholder-color-6b9ypa": undefined, + "--awsui-style-placeholder-font-size-6b9ypa": undefined, + "--awsui-style-placeholder-font-style-6b9ypa": undefined, + "--awsui-style-placeholder-font-weight-6b9ypa": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -37,30 +37,30 @@ exports[`getTextFilterStyles handles all possible style configurations 1`] = ` exports[`getTextFilterStyles handles all possible style configurations 2`] = ` { - "--awsui-style-background-default-rvkgb9": undefined, - "--awsui-style-background-disabled-rvkgb9": undefined, - "--awsui-style-background-focus-rvkgb9": undefined, - "--awsui-style-background-hover-rvkgb9": undefined, - "--awsui-style-background-readonly-rvkgb9": undefined, - "--awsui-style-border-color-default-rvkgb9": undefined, - "--awsui-style-border-color-disabled-rvkgb9": undefined, - "--awsui-style-border-color-focus-rvkgb9": undefined, - "--awsui-style-border-color-hover-rvkgb9": undefined, - "--awsui-style-border-color-readonly-rvkgb9": undefined, - "--awsui-style-box-shadow-default-rvkgb9": undefined, - "--awsui-style-box-shadow-disabled-rvkgb9": undefined, - "--awsui-style-box-shadow-focus-rvkgb9": undefined, - "--awsui-style-box-shadow-hover-rvkgb9": undefined, - "--awsui-style-box-shadow-readonly-rvkgb9": undefined, - "--awsui-style-color-default-rvkgb9": undefined, - "--awsui-style-color-disabled-rvkgb9": undefined, - "--awsui-style-color-focus-rvkgb9": undefined, - "--awsui-style-color-hover-rvkgb9": undefined, - "--awsui-style-color-readonly-rvkgb9": undefined, - "--awsui-style-placeholder-color-rvkgb9": undefined, - "--awsui-style-placeholder-font-size-rvkgb9": undefined, - "--awsui-style-placeholder-font-style-rvkgb9": undefined, - "--awsui-style-placeholder-font-weight-rvkgb9": undefined, + "--awsui-style-background-default-6b9ypa": undefined, + "--awsui-style-background-disabled-6b9ypa": undefined, + "--awsui-style-background-focus-6b9ypa": undefined, + "--awsui-style-background-hover-6b9ypa": undefined, + "--awsui-style-background-readonly-6b9ypa": undefined, + "--awsui-style-border-color-default-6b9ypa": undefined, + "--awsui-style-border-color-disabled-6b9ypa": undefined, + "--awsui-style-border-color-focus-6b9ypa": undefined, + "--awsui-style-border-color-hover-6b9ypa": undefined, + "--awsui-style-border-color-readonly-6b9ypa": undefined, + "--awsui-style-box-shadow-default-6b9ypa": undefined, + "--awsui-style-box-shadow-disabled-6b9ypa": undefined, + "--awsui-style-box-shadow-focus-6b9ypa": undefined, + "--awsui-style-box-shadow-hover-6b9ypa": undefined, + "--awsui-style-box-shadow-readonly-6b9ypa": undefined, + "--awsui-style-color-default-6b9ypa": undefined, + "--awsui-style-color-disabled-6b9ypa": undefined, + "--awsui-style-color-focus-6b9ypa": undefined, + "--awsui-style-color-hover-6b9ypa": undefined, + "--awsui-style-color-readonly-6b9ypa": undefined, + "--awsui-style-placeholder-color-6b9ypa": undefined, + "--awsui-style-placeholder-font-size-6b9ypa": undefined, + "--awsui-style-placeholder-font-style-6b9ypa": undefined, + "--awsui-style-placeholder-font-weight-6b9ypa": undefined, "borderRadius": undefined, "borderWidth": undefined, "fontSize": undefined, @@ -72,30 +72,30 @@ exports[`getTextFilterStyles handles all possible style configurations 2`] = ` exports[`getTextFilterStyles handles all possible style configurations 3`] = ` { - "--awsui-style-background-default-rvkgb9": "#ffffff", - "--awsui-style-background-disabled-rvkgb9": "#f0f0f0", - "--awsui-style-background-focus-rvkgb9": "#ffffff", - "--awsui-style-background-hover-rvkgb9": "#fafafa", - "--awsui-style-background-readonly-rvkgb9": "#ffffff", - "--awsui-style-border-color-default-rvkgb9": "#cccccc", - "--awsui-style-border-color-disabled-rvkgb9": "#e0e0e0", - "--awsui-style-border-color-focus-rvkgb9": "#0073bb", - "--awsui-style-border-color-hover-rvkgb9": "#999999", - "--awsui-style-border-color-readonly-rvkgb9": "#e0e0e0", - "--awsui-style-box-shadow-default-rvkgb9": "none", - "--awsui-style-box-shadow-disabled-rvkgb9": "none", - "--awsui-style-box-shadow-focus-rvkgb9": "0 0 0 2px #0073bb", - "--awsui-style-box-shadow-hover-rvkgb9": "0 1px 2px rgba(0,0,0,0.1)", - "--awsui-style-box-shadow-readonly-rvkgb9": "none", - "--awsui-style-color-default-rvkgb9": "#000000", - "--awsui-style-color-disabled-rvkgb9": "#999999", - "--awsui-style-color-focus-rvkgb9": "#000000", - "--awsui-style-color-hover-rvkgb9": "#000000", - "--awsui-style-color-readonly-rvkgb9": "#000000", - "--awsui-style-placeholder-color-rvkgb9": "#999999", - "--awsui-style-placeholder-font-size-rvkgb9": "14px", - "--awsui-style-placeholder-font-style-rvkgb9": "italic", - "--awsui-style-placeholder-font-weight-rvkgb9": "400", + "--awsui-style-background-default-6b9ypa": "#ffffff", + "--awsui-style-background-disabled-6b9ypa": "#f0f0f0", + "--awsui-style-background-focus-6b9ypa": "#ffffff", + "--awsui-style-background-hover-6b9ypa": "#fafafa", + "--awsui-style-background-readonly-6b9ypa": "#ffffff", + "--awsui-style-border-color-default-6b9ypa": "#cccccc", + "--awsui-style-border-color-disabled-6b9ypa": "#e0e0e0", + "--awsui-style-border-color-focus-6b9ypa": "#0073bb", + "--awsui-style-border-color-hover-6b9ypa": "#999999", + "--awsui-style-border-color-readonly-6b9ypa": "#e0e0e0", + "--awsui-style-box-shadow-default-6b9ypa": "none", + "--awsui-style-box-shadow-disabled-6b9ypa": "none", + "--awsui-style-box-shadow-focus-6b9ypa": "0 0 0 2px #0073bb", + "--awsui-style-box-shadow-hover-6b9ypa": "0 1px 2px rgba(0,0,0,0.1)", + "--awsui-style-box-shadow-readonly-6b9ypa": "none", + "--awsui-style-color-default-6b9ypa": "#000000", + "--awsui-style-color-disabled-6b9ypa": "#999999", + "--awsui-style-color-focus-6b9ypa": "#000000", + "--awsui-style-color-hover-6b9ypa": "#000000", + "--awsui-style-color-readonly-6b9ypa": "#000000", + "--awsui-style-placeholder-color-6b9ypa": "#999999", + "--awsui-style-placeholder-font-size-6b9ypa": "14px", + "--awsui-style-placeholder-font-style-6b9ypa": "italic", + "--awsui-style-placeholder-font-weight-6b9ypa": "400", "borderRadius": "4px", "borderWidth": "1px", "fontSize": "14px", diff --git a/src/token/__tests__/__snapshots__/styles.test.tsx.snap b/src/token/__tests__/__snapshots__/styles.test.tsx.snap index 491872dcec..6e76a3e401 100644 --- a/src/token/__tests__/__snapshots__/styles.test.tsx.snap +++ b/src/token/__tests__/__snapshots__/styles.test.tsx.snap @@ -2,19 +2,19 @@ exports[`getTokenRootStyles handles all possible style configurations 1`] = ` { - "--awsui-style-focus-ring-border-color-rvkgb9": "#6366f1", - "--awsui-style-focus-ring-border-radius-rvkgb9": "12px", - "--awsui-style-focus-ring-border-width-rvkgb9": "2px", - "--awsui-token-style-background-default-rvkgb9": "#eef2ff", - "--awsui-token-style-background-disabled-rvkgb9": "#f1f5f9", - "--awsui-token-style-background-read-only-rvkgb9": "#f8fafc", - "--awsui-token-style-border-color-default-rvkgb9": "#c7d2fe", - "--awsui-token-style-border-color-disabled-rvkgb9": "#e2e8f0", - "--awsui-token-style-border-color-read-only-rvkgb9": "#cbd5e1", - "--awsui-token-style-dismiss-color-default-rvkgb9": "#6366f1", - "--awsui-token-style-dismiss-color-disabled-rvkgb9": "#cbd5e1", - "--awsui-token-style-dismiss-color-hover-rvkgb9": "#4338ca", - "--awsui-token-style-dismiss-color-read-only-rvkgb9": "#94a3b8", + "--awsui-style-focus-ring-border-color-6b9ypa": "#6366f1", + "--awsui-style-focus-ring-border-radius-6b9ypa": "12px", + "--awsui-style-focus-ring-border-width-6b9ypa": "2px", + "--awsui-token-style-background-default-6b9ypa": "#eef2ff", + "--awsui-token-style-background-disabled-6b9ypa": "#f1f5f9", + "--awsui-token-style-background-read-only-6b9ypa": "#f8fafc", + "--awsui-token-style-border-color-default-6b9ypa": "#c7d2fe", + "--awsui-token-style-border-color-disabled-6b9ypa": "#e2e8f0", + "--awsui-token-style-border-color-read-only-6b9ypa": "#cbd5e1", + "--awsui-token-style-dismiss-color-default-6b9ypa": "#6366f1", + "--awsui-token-style-dismiss-color-disabled-6b9ypa": "#cbd5e1", + "--awsui-token-style-dismiss-color-hover-6b9ypa": "#4338ca", + "--awsui-token-style-dismiss-color-read-only-6b9ypa": "#94a3b8", "borderRadius": "24px", "borderWidth": "2px", "paddingBlock": "4px", From 75caf682c2b0bdacb524b3d3728cd6d54fa95d15 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 13:48:09 +0100 Subject: [PATCH 07/12] fix: Unit tests failing --- src/item-card/__tests__/card.test.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/item-card/__tests__/card.test.tsx b/src/item-card/__tests__/card.test.tsx index d2803c5309..b401888d94 100644 --- a/src/item-card/__tests__/card.test.tsx +++ b/src/item-card/__tests__/card.test.tsx @@ -112,14 +112,14 @@ describe('disableHeaderPaddings', () => { content ); - const header = itemCard.findHeader(); - expect(header!.getElement()).toHaveClass(styles['no-padding']); + const headerWrapper = itemCard.findByClassName(styles.header); + expect(headerWrapper!.getElement()).toHaveClass(styles['no-padding']); }); test('does not apply no-padding class to header by default', () => { const { itemCard } = renderItemCard(content); - const header = itemCard.findHeader(); - expect(header!.getElement()).not.toHaveClass(styles['no-padding']); + const headerWrapper = itemCard.findByClassName(styles.header); + expect(headerWrapper!.getElement()).not.toHaveClass(styles['no-padding']); }); }); @@ -217,9 +217,9 @@ describe('Style API', () => { expect(getComputedStyle(body.getElement()).getPropertyValue('padding-block')).toBe('30px'); expect(getComputedStyle(body.getElement()).getPropertyValue('padding-inline')).toBe('40px'); - const header = itemCard.findHeader()!; - expect(getComputedStyle(header.getElement()).getPropertyValue('padding-block')).toBe('10px'); - expect(getComputedStyle(header.getElement()).getPropertyValue('padding-inline')).toBe('20px'); + const headerWrapper = itemCard.findByClassName(styles.header)!; + expect(getComputedStyle(headerWrapper.getElement()).getPropertyValue('padding-block')).toBe('10px'); + expect(getComputedStyle(headerWrapper.getElement()).getPropertyValue('padding-inline')).toBe('20px'); const footer = itemCard.findFooter()!; expect(getComputedStyle(footer.getElement()).getPropertyValue('border-block-start-color')).toBe('red'); @@ -229,9 +229,10 @@ describe('Style API', () => { }); }); -test('renders with empty header still shows header area when actions provided', () => { +test('renders actions even when header text is not provided', () => { const { itemCard } = renderItemCard(Click}>content); - expect(itemCard.findHeader()).not.toBeNull(); + expect(itemCard.findActions()).not.toBeNull(); + expect(itemCard.findActions()!.getElement()).toHaveTextContent('Click'); }); test('renders with only footer and children', () => { From a5a6e32c3a855070c32667e1e485afc851866c09 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 14:08:49 +0100 Subject: [PATCH 08/12] test: Use test-classes instead of styled classes for testing --- src/item-card/internal.tsx | 10 ++++++---- src/item-card/test-classes/styles.scss | 16 ++++++++++++++++ src/test-utils/dom/item-card/index.ts | 8 ++++---- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/item-card/internal.tsx b/src/item-card/internal.tsx index a0f42f77fa..0252a9dc37 100644 --- a/src/item-card/internal.tsx +++ b/src/item-card/internal.tsx @@ -70,8 +70,10 @@ export default function InternalItemCard({ style={getHeaderStyles(style)} > {header}} - secondaryContent={description &&
{description}
} + content={header &&
{header}
} + secondaryContent={ + description &&
{description}
+ } icon={icon &&
{icon}
} actions={actions} disablePaddings={disableHeaderPaddings} @@ -81,7 +83,7 @@ export default function InternalItemCard({ )} {children && (
{children} @@ -89,7 +91,7 @@ export default function InternalItemCard({ )} {footer && (
{footer} diff --git a/src/item-card/test-classes/styles.scss b/src/item-card/test-classes/styles.scss index 79db34bd20..eadca55107 100644 --- a/src/item-card/test-classes/styles.scss +++ b/src/item-card/test-classes/styles.scss @@ -6,3 +6,19 @@ .icon { /* used in test-utils */ } + +.body { + /* used in test-utils */ +} + +.description { + /* used in test-utils */ +} + +.header { + /* used in test-utils */ +} + +.footer { + /* used in test-utils */ +} diff --git a/src/test-utils/dom/item-card/index.ts b/src/test-utils/dom/item-card/index.ts index 96329d7ba2..0e4955b76b 100644 --- a/src/test-utils/dom/item-card/index.ts +++ b/src/test-utils/dom/item-card/index.ts @@ -20,28 +20,28 @@ export default class ItemCardWrapper extends ComponentWrapper { * Finds the content slot of the item card. */ findContent(): ElementWrapper | null { - return this.findByClassName(styles.body); + return this.findByClassName(testStyles.body); } /** * Finds the description slot of the item card. */ findDescription(): ElementWrapper | null { - return this.findByClassName(styles.description); + return this.findByClassName(testStyles.description); } /** * Finds the header slot of the item card. */ findHeader(): ElementWrapper | null { - return this.findByClassName(styles['header-inner']); + return this.findByClassName(testStyles.header); } /** * Finds the footer slot of the item card. */ findFooter(): ElementWrapper | null { - return this.findByClassName(styles.footer); + return this.findByClassName(testStyles.footer); } /** From 2360f3459279a49cd8273280ce9e93c089c6635a Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 14:15:44 +0100 Subject: [PATCH 09/12] chore: Update snapshots --- .../__snapshots__/test-utils-selectors.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap index 3f5b4f97e0..ff0f1a847c 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap @@ -433,10 +433,10 @@ exports[`test-utils selectors 1`] = ` "awsui_wrapper_1wepg", ], "item-card": [ - "awsui_body_n1fwt", - "awsui_description_n1fwt", - "awsui_footer_n1fwt", - "awsui_header-inner_n1fwt", + "awsui_body_14an4", + "awsui_description_14an4", + "awsui_footer_14an4", + "awsui_header_14an4", "awsui_icon_14an4", "awsui_root_n1fwt", ], From c71cdee00ca8c5a869eb8ebd8fdbba29555a1ef6 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 14:39:35 +0100 Subject: [PATCH 10/12] fix: remove shadow from classic item card --- style-dictionary/classic/shadows.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/style-dictionary/classic/shadows.ts b/style-dictionary/classic/shadows.ts index 7957f19185..b80dbdbdf4 100644 --- a/style-dictionary/classic/shadows.ts +++ b/style-dictionary/classic/shadows.ts @@ -7,11 +7,7 @@ import { StyleDictionary } from '../utils/interfaces.js'; import { tokens as parentTokens } from '../visual-refresh/shadows.js'; const tokens: StyleDictionary.ShadowsDictionary = { - shadowCard: { - light: - '0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)', - dark: '0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.08)', - }, + shadowCard: '{shadowContainer}', shadowContainer: { light: '0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)', From 5802dde77cd08dc147502dff89e2198309cd19ae Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 14:46:01 +0100 Subject: [PATCH 11/12] chore: Update snapshots --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 67951a70d4..34358bd451 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -651,7 +651,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", - "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -1428,7 +1428,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", - "shadow-card": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.08)", + "shadow-card": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-container": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", @@ -2205,7 +2205,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", - "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -2982,7 +2982,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "motion-keyframes-fade-out": "awsui-fade-out-35003c", "motion-keyframes-scale-popup": "awsui-none-35003c", "motion-keyframes-status-icon-error": "awsui-none-35003c", - "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15), inset 0 1px 0 0 rgba(0, 28, 36, 0.08)", + "shadow-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-container-active": "0px 4px 8px rgba(0, 28, 36, 0.45)", "shadow-dropdown": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", From 2d8d08896a548df8de54946bdc25ac0d058a9637 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Fri, 27 Mar 2026 14:57:12 +0100 Subject: [PATCH 12/12] fix: Style api in classic mode --- src/item-card/styles.scss | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss index 5d61dbbad9..7226f944e1 100644 --- a/src/item-card/styles.scss +++ b/src/item-card/styles.scss @@ -63,35 +63,25 @@ $action-padding-horizontal: awsui.$space-xxs; position: relative; background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card); min-inline-size: 0; + box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); &:before { @include styles.base-pseudo-element; box-shadow: none; border-color: transparent; + border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); } &::after { @include styles.base-pseudo-element; } - &:not(.refresh) { - &::before { - border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top; - } - &::after { - box-shadow: awsui.$shadow-container; - } - } - - &.refresh { - box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); - - &:before { - border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); - border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); - } + &:not(.refresh)::before { + border-block-start: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-container-top-width) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-container-top); } &.highlighted {