From 456735cb607db2d97eb4f147084ea0ecb3f7b6c4 Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Thu, 28 Nov 2024 12:08:08 +0100 Subject: [PATCH 1/2] chore(date_picker_range): add a VRT for the full width variant --- ...op_Forms_EuiDatePickerRange_Full_Width.png | Bin 0 -> 1258 bytes ...le_Forms_EuiDatePickerRange_Full_Width.png | Bin 0 -> 2081 bytes .../date_picker/date_picker_range.stories.tsx | 78 +++++++++++------- 3 files changed, 46 insertions(+), 32 deletions(-) create mode 100644 packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png create mode 100644 packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png new file mode 100644 index 0000000000000000000000000000000000000000..46012eb6d4c2390097a6be85ae7439abf12f1043 GIT binary patch literal 1258 zcmXX_e>~H982>mWk+>I^xFX%fI%*wGe#_#}%j8GuB|lE*SEQvjLnHFzDr#ZjFt;Nw z#AP})4K>ug*!i(C48v7!cC(F4CD!IX-|6$m_j%sW^Sqw#^LgIy&kcV+FC8soEdYRy zkGDr40Go56kJ8kDU%x?R5;SV~Krakv9@-^>U=tqWb3zlIbj|4N5Z>|ea6gesl}>XC z!sB*pycJH7I#*(21Mk1E@+fB)9%;+=Kij&0#~-NfV_j9h|Ev|9=&r}lYrfy`y!PzY z_h?l3S01SEe$9W?6YQRFh7^{Ub!s=js-xHP-IYbC#F1tPIJ#p%6Q^iyp&2EeN68cd)3rz?NUSu+ zj*X4AJ_ry5rA${1H5k`XFh<*uR7`FpY4S}t)rf&g*sQBh>xA;j%+ zt=2<00OJ-0J%|PJT+B|yM$*O^n2%SZbk8T~AUKO?Kt~@qd~Lyjz(*?uQ$H4H0Q{VBo6rQVzvIF@R4~<{6g21xStsnHs?@rjK9k-g7&1 zy@Q#w#9CFDDn~vyFwdnk?N;S7W*Ke`5=8oo%StsjT*r$_Nu{O#^p&yRz3RQA34mQ( zsMc%U9ZwIFG(gsqH(qX^X0Yo`jkl=E!Np6_7hlh6Zvvq5;Q_B7os%ThVs6()ATS>767);wr6^%|1yN({0?Y$SjzI`1l~X;hYdJdwBsXcTiEwXh_Y7XF3o#)eO8U z(2{eIm6k?2SfUbJYEH9!X)lNxh_0v`u4+by(;*CtX$4sXG2oMtgDht0Rtz2sdnT z$>=B}O4Yt)@Fb5%sqtpE+|;=h2Lb%>Ex`dNRNO literal 0 HcmV?d00001 diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png new file mode 100644 index 0000000000000000000000000000000000000000..88226d2cdf3981d055c621a4b20340139d2d81ae GIT binary patch literal 2081 zcmbVNdpMNa8eiqkC?q>}?|r-rIWD`+HZ4lcSBYqLv~6 zKpA6u1`EJ;CNy`FmxaD_H%)NRuq^^>V*x68dp|-y(h(LIXL;zkA@6$!0J%=g8FS}r zIrF1uiF*Syxl6*XxwQG!1qPuyx7}8OU7#Xe>ZBhzt`;^UV|8D}IbX-AWnXE*(LV{a zCk5LHhj7PL2?jR}7zs3$iBtpWcETic+*LtAy`UuIaub<7wz|NZo8Kj3d8H6!^ob#A(nGKq&{*N5{(a0 z!5CzAmJLnbfAa!w{*59Jkm&WX*f!kjc=v|Hw8N3Q&d~!_ODpCovPVt{{{eqP zZQ0ohA-%@oC+u12o3rBY-T3Uz_xy56)WcdWv`JI?gkey(?iD+=QAq);G7{!*>3%G|7`%!6r?>NJ>TumC80k& zT_pqIdMd>K3F;+3k0fs1X=}R&XYPQ^L?u@$Now<1BW0A6j8sUTr%X&N`YBNhNvggr1 zRy4(|#%-)7Wv+|_^&z9aTYZ~axwora2h@Cgn4Z>i${%+FF@6)imTVZu#_b0>PRMtKW1%xd*x-y z=u{9@KOVBRiP8Fs(j7j2I&tONAzK@> zW_%+BVDexjZQh1L(qkS=Y#Nvb@dL53{@6v{TU+19agGk6M>fs$_KSda6mmz4whs5S z>Ijwr7*Q5=-dcO80xbv1BR5L9W`k?OTvow!51SEKU-F9?$+Vyh=th$yPP15O!H)V# zpJYu-&^ypr;?tRi0Hn-^qS}~{<;$r4*v}$w`zAPeg80{#LX_*hPi}$&jnijmvZx4S zCg|1n514jK!i^zi^WA!@Wk6jwj~A5Sq?B(%cHm}cdP+*B-^eXPp&rDjX+t#+DeIB` z4fRZ|3$L(h%B$r#`8LgAN9V%<-m_5;q7UB~*=UoDj&tHt(K(R^K~=E!PG+TNKOgH6 z@%gisj@HP1WB-7F$=XO3s>TfXcJFK!Ul}<7o^c14GzG8EQtjw^dU~ro)R3BR%WR8X zW*qQGCY%zu)%CvLi(Kua=B&P$^3X=Eu&6l@ALB_~ z-8~q)0v{CmOFnONIRJU}U7uFh^e!RC{m{(2=TceMzGzw?AijAqCM8<~x|mY3gu?N; z{~w|MyB6E9aXkPveEZVx)(0gFXIh=hAu6}f2w7pw;G@}uK}m-rdPEeT2+}I)%1OVw z&qV7#i!Ez#4AkZ8f>E)yQ1t@9hNt$s6L=%cpZb{E82VzgVuEfr9|GbXl!|QgeuyG! z3sP)U=W-C5*ivUZ)=3C@$AekoE?jt!X4;R-*ey&wZ0b&fA4@EGm2OvN1+_a6g~b^> z(tKG|m$+`)nMHq48*Wg3OMt5=D-LH-$P$TO2RnQFvY{Y4;|2a)h98EWhGV~Rtm+)_ z8<=&$ETt<{ie81~sK0_z4?=dAzJ@vDE;#RLb-VFiPBwjCdxKlKB9lHPxr1s7(}zsm zOAZLariPh&x#vV59X@`+Vws1Kn4W94|J(gL6G7b9$?hyVZp literal 0 HcmV?d00001 diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx index 6db83766ac6..a9699630406 100644 --- a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx +++ b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx @@ -40,6 +40,41 @@ const meta: Meta = { export default meta; type Story = StoryObj; +const StatefulPlayground = ({ + startDateControl, + endDateControl, + ...rest +}: EuiDatePickerRangeProps) => { + const [selectedStartDate, setSelectedStartDate] = useState( + startDateControl.props.selected + ); + const [selectedEndDate, setSelectedEndDate] = useState( + endDateControl.props.selected + ); + + const startControl = React.cloneElement(startDateControl, { + selected: selectedStartDate, + onChange: setSelectedStartDate, + startDate: selectedStartDate, + endDate: selectedEndDate, + }); + + const endControl = React.cloneElement(endDateControl, { + selected: selectedEndDate, + onChange: setSelectedEndDate, + startDate: selectedStartDate, + endDate: selectedEndDate, + }); + + return ( + + ); +}; + export const Playground: Story = { parameters: { controls: { @@ -104,37 +139,16 @@ export const RestrictedSelection: Story = { render: (args) => , }; -const StatefulPlayground = ({ - startDateControl, - endDateControl, - ...rest -}: EuiDatePickerRangeProps) => { - const [selectedStartDate, setSelectedStartDate] = useState( - startDateControl.props.selected - ); - const [selectedEndDate, setSelectedEndDate] = useState( - endDateControl.props.selected - ); - - const startControl = React.cloneElement(startDateControl, { - selected: selectedStartDate, - onChange: setSelectedStartDate, - startDate: selectedStartDate, - endDate: selectedEndDate, - }); - - const endControl = React.cloneElement(endDateControl, { - selected: selectedEndDate, - onChange: setSelectedEndDate, - startDate: selectedStartDate, - endDate: selectedEndDate, - }); +/** + * VRT only stories + */ - return ( - - ); +export const FullWidth: Story = { + tags: ['vrt-only'], + args: { + startDateControl: , + endDateControl: , + fullWidth: true, + }, + render: (args) => , }; From bed8bdd490511f28615c0c3b67401e0af97725be Mon Sep 17 00:00:00 2001 From: Weronika Olejniczak Date: Thu, 28 Nov 2024 16:49:45 +0100 Subject: [PATCH 2/2] chore(date_picker_range): move helper component to the bottom of the file --- .../date_picker/date_picker_range.stories.tsx | 74 ++++++++++--------- 1 file changed, 39 insertions(+), 35 deletions(-) diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx index a9699630406..fb6a21b5711 100644 --- a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx +++ b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx @@ -40,41 +40,6 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const StatefulPlayground = ({ - startDateControl, - endDateControl, - ...rest -}: EuiDatePickerRangeProps) => { - const [selectedStartDate, setSelectedStartDate] = useState( - startDateControl.props.selected - ); - const [selectedEndDate, setSelectedEndDate] = useState( - endDateControl.props.selected - ); - - const startControl = React.cloneElement(startDateControl, { - selected: selectedStartDate, - onChange: setSelectedStartDate, - startDate: selectedStartDate, - endDate: selectedEndDate, - }); - - const endControl = React.cloneElement(endDateControl, { - selected: selectedEndDate, - onChange: setSelectedEndDate, - startDate: selectedStartDate, - endDate: selectedEndDate, - }); - - return ( - - ); -}; - export const Playground: Story = { parameters: { controls: { @@ -152,3 +117,42 @@ export const FullWidth: Story = { }, render: (args) => , }; + +/** + * Helpers + */ + +const StatefulPlayground = ({ + startDateControl, + endDateControl, + ...rest +}: EuiDatePickerRangeProps) => { + const [selectedStartDate, setSelectedStartDate] = useState( + startDateControl.props.selected + ); + const [selectedEndDate, setSelectedEndDate] = useState( + endDateControl.props.selected + ); + + const startControl = React.cloneElement(startDateControl, { + selected: selectedStartDate, + onChange: setSelectedStartDate, + startDate: selectedStartDate, + endDate: selectedEndDate, + }); + + const endControl = React.cloneElement(endDateControl, { + selected: selectedEndDate, + onChange: setSelectedEndDate, + startDate: selectedStartDate, + endDate: selectedEndDate, + }); + + return ( + + ); +};