From b276c7ec209fdebbe6e2900c7e7c4a879d4a3d53 Mon Sep 17 00:00:00 2001 From: Tseho Date: Mon, 19 Feb 2024 14:24:57 +0100 Subject: [PATCH] Updates DSM --- ...t-input-locked-values-correctly-1-snap.png | Bin 0 -> 4779 bytes ...ts-progress-bar-width-correctly-1-snap.png | Bin 7163 -> 6639 bytes ...ts-tooltip-with-title-correctly-1-snap.png | Bin 0 -> 1068 bytes .../src/components/Dropdown/Item/Item.tsx | 1 + .../Input/MultiSelectInput/ChipInput.tsx | 18 ++++++++++--- .../MultiSelectInput.stories.mdx | 24 ++++++++++++++++++ .../MultiSelectInput/MultiSelectInput.tsx | 7 +++++ .../MultiSelectInput.unit.tsx | 20 +++++++++++++++ .../KeyFigure/KeyFigure.stories.mdx | 6 ++++- .../src/components/KeyFigure/KeyFigure.tsx | 2 ++ .../components/ProgressBar/ProgressBar.tsx | 18 +------------ .../components/Tooltip/Tooltip.stories.mdx | 15 +++++++++++ .../src/components/Tooltip/Tooltip.tsx | 10 +++++++- 13 files changed, 98 insertions(+), 23 deletions(-) create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-inputs-multi-select-input-locked-values-correctly-1-snap.png create mode 100644 front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tooltip-with-title-correctly-1-snap.png diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-inputs-multi-select-input-locked-values-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-inputs-multi-select-input-locked-values-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..90c8d09152b5f3c49ea901eaa3584a925e05c6dc GIT binary patch literal 4779 zcmZWtXH-*NvyLJi0R^OpATNpt2-15oB2797NEd<7Apr@!N|!`IK}sTmQVbnKFVcG; z^cv}*x6tbseeb>NTkHNgXV%_lJ$v?=IrGdsF}m8S*Qwa3006*sbv0#u0Dy#O0(dFN zh)?w-gc|X6#ZzAu2q?s`uK)ly?bMZ@82Y4dO#7OcgX(_mYzffNoYohG7L(q*>Il4* zHYBzZUJ?&?EkbJ*j8^{~aW3%lv~YF~%pabd#8tQW3_F>jEbAn+3bZuEdItm^aorYE zx=BILqeLOwqkz9?yqS~|8p@?~6o`Bf?6H)7c!o>1iaeCZ%WvtiYT17;t)@*J52FWC zaJ{9UYg@phxMf92hhqkZH6S)Lv#%OO?&J$~?(UQ|6BK=~I`82(?NWPrcU0(-bc0RQ6} z$A>E+|C)qoV={md>U!MpYJBF~&o_v8L}xw=nG2H0=p_qQ^bbtX@mXR7ZA8ta^4#%&3H>gW@y2N{^iZ zF;&qT-dK@AF3p-_T~)4@Gl}oA0C^Q|>I8u9;^GN^xJWpCk6Eqw{}KP zOTZR8hQQbO!t;F7`nT^hl)N`&fv-Ows{CNDcbe@ZNAVwA>!$^#PgaI4C zWavXH|=0-Z;`c%K0rRNkcP1B? zjM!=IG!Sc8#%HtrC5g5|nsysMfG6)%eh3a_>F4ph(ROcPVPI;+ows+WX|=S2y2|>q zZ3P#KE2O%o$5{?tI^mzXcP(hI%59t_CmEM4cK=>9fV$456wooSFZX@VzEytt>cRKL zPxo5#cf5}V=e!n4wT+MO`61`Zv}9(F$p;NhB%F`9r22!in{NPn7~UkO<`qa5 zyAA8ZVUvg2tSfnx_a3zPcujrF2JEwH?XhZ&xp=?hA@ujDB(kD<74`@&8N&`H6@DqB zGQ;Bg@!!7Rqj{5&W8>vAh_#=VuiHCdReug6|7BGKaCt_)% zeF*Jcl>7SZJf|hx2vzlURovXgR*FA)X=gMr>Q6{oN2yO;k$M59U2d>h)m=>HN^G$}csQGF*|_ig7CEnA z7v8W{y2oDB@gb!EWsm%!9_f^-)hBkNhLBvUK=h=s!(B>6e!3;a^z` zRJy}HUMr2#5`8RI0oeq~+sE0p_(nRrIlkWCy>E$XwszT%*BTlTzsmPRXh^S8DsADd z$%ITbuWVov5~%sUFg2_SszKKS$G^a08$A@PNY-a$mnm{H z`bo*{UR4EQo_dlk#FDYjWqW$jD2Z8vj=jcQw2a$Hj}b>TNVKBJs^yJt8d#v#xO$pCZ7$z=leZ>O< zdCtz;zof0l_S)yHbiI(sw+QWYS=w^vyf0iH{LR2@v?CJTx*YKHBjU$3akm^%mednt z|A)sjPP%yxTg&V_z91;w?GYxpl#Y+jc0b;`h9s*~*+VzPc=d7ZdefN;k!QX(K3T9o z_-!d^md`Gy-fz(Rz*9_(N*k z5oLHM>EM#kg%%Tt$Uy&EAOdNimr>N$LT)73YE^_E+kx=)jp`TkcF(g+qoEES^q+>A z<(*XBD{;~;6|%%c)h`VacS3i$`iHKWQ&R2XXFiDRLPSj7Cn)K-bKZ(`U6#XPrm^6f z?zqktc}v+I!=OqLDGJ@Z?OXz#NB!o_#?Xrv<;be(qPns)c<_okGGNbO%6HP#n=>Fe zit|#)`}{-|z@l~QfI|WERq=ub0Z$_4N1Y0TmhlAd^p2v7{~L0s!mexm&h{HvmB+ zuG0miB%oUvmn=?$ZA8o}rv^0aod$>*5e{{q^Zb3H!{NXE`snl+k~zoz=irxL+-@4)<#s1WI<^l1qVUor9`7i%o zW@0HFH0XC2x^}ciNllrVRYPr^w#E+mRraxZzmsoU|cEs+>10QD0Z6u7qBE<7v&(e*!cYqm2SWb%f%z9$h0dKNS#> zV?fkjq|Mayk)Lj_!;s=$5ZBHW%=t1S3A2~ zA>51#YPL4m-P{`vPJ4SbZl^*P3+u?FyFayM-`ew2957(e%QL)2N=AQ!L&U4c))Sfu z*10Dn7vo>+{n_>SD=!t_i%Wp7hzj0l@RJ0@t>#OQ+1BDkQ2<@YG>LJ=mS7br+ElA^ z!p247ws-K1-e%@H+5)TGhM50t+RJLDs zn2y&I@W^m!i+EQ8) zJu_1yOrHFT&++~=kqvGX7?CI`J5X#`6gC_ZyBis%B@o2m32bmh3AcO}&Ws}goFmwt z>8WW%BZhX6a?!c^dEhaorslAi_*mPmMyMWRMDDgnY1>QjdxA1yQxT3I5ejkBo7Uh> z;LUkN5sjD+^2Q{~BuW2DK(VaLJNt@>9juhQCCEHtr#U^atNk}W5D(?~pf%?is6z=cWaljSsboJ%Gg z*4BCKt+&^+-kg6b7<7++Gs$*7)TH3zX&pxZ+}~U@ zJ|_uDu|`i++B#&~p0fo6BCL+RiQM>M@27IAY2hxW=0Qwcm0eT&s+WRE{>X(QEs1Aa zGcderVnkj43=PY|+GgkUsri@`qcVB!{j$>WvSpDh5@091^jBrJFKe9_Ip6m?+xPp) z7C+cGDO)4$eMa-_IV3ukqPahybt83o)8-m}qX3&LoYHgT>u8r<)neg)-Mbb+Y)%Ip z9_yUcVj!ao$fef1#$b4|WZ8Yi^xk7=h0J@==boY+YU6K1#cP?`j)dYCTQB{)vqXU5BrB^ctu7^VC_)NhzZzwG zM{(?e3a)s`KT;%c&u1~_pGRx^>nC{G+JlO~^(pk1L+#ovZ#Gqbkfhcll?a&B!rq-Ncs-_(8z5mQ&Sk&`dJ#;Q&FR|Pq~f!?pc`e!O6Iy zBG}ln8hdQm*Ojhsuf0Zbu6HarD*C*tEv45B>!vuE8J-nkJ6g#|Vh0rQzZ030q`NJ2 z-X$|5+x{>_A{e0uQN1J`faRiKd}`WdY{$u0c$b|0Y!ap$t;>osY(&IQsqFL&73b zYweg&SaG~y!O6BWo>zwN>@$D7ctk7-Kd1H5x{hV{LuURxEYQe_LKgrdn0*Oe$T2^b_96w<4b%q1_&v82|^d zwzMh_j17s1UCIdDi$=FTOV7>yw%2m%fM(NAnCrOhqYitZpExgV>X%waK4DTX24C)Y zJd$tH)G0b#3oX4`VD#Kcf2!YnHLO+u_7SNP5xXAYs2m9oWDyb;Of83LAFxYBW-6)a z-gP!&oDubq4cwES&&})pl4SF(MoFckC4uc}geX51?0* z7VUOU4swpMLcx7qHJnXu6?O`j=TY6lnl;rf9-49r;aUr9SnV1c6il$0>cLKb&ysq+Z1~I)$86IE>w)oVMa#|RNVsjh1Rgg1sKN6?FeJN+C(MfK6 zy;q$Hxw5)B`|ATk!19RrQ@RxGk-S|#6}(VSJbOKE>CYS(q!f&A$S(Y_HxzSSNzlAj zY&H;IUERi`uzTzdS*BCGKSOq;NF1Ydc4qfcm7u|sudXl9`%{Nw2J9Du<-&A4{#`FF zD7jiRWlT+H$M1xM0D?2Qn{(@RB{wyssHlWL+!!1IclB!KtZUwP-;}4IB9d(J4~Nd5 z-WOkkH+RDpeEd$|xp9Uu7QQ*$`|u@Aco8#g+mro&?g4TQ`QS2pgzp5p_X+gfffeo< zxPDFT>a{3Wd{|eiA0K9Pw>$KZjpj$5w8Ca7@vRh|U&unJ?0yue$-HAa1w%KBGgb`j(~O#78mCT>E+LG*E~l%f zCMp|lwxyVq{}mf(0Dm+O;&`iS3%L8&Y?1qi1n^h1;99!D3iwwP`EUKAWljDf1$au_00U4gX(1r wRT5w3f5dN@zg|AYg*@ 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 literal 7163 zcmd6MXH*kyyLAvn1pyK1O^LLJ8hS?&DT*Myccl|bs8SULqzVXzj?z>x^j?C}OA_h5 z1_6PDUPC#P=Pm2|)>-erbJjZZBbm(HlY6dvu4`X=?|Ju3OO2A8nH&THQEI5G=z>6` zz%I!A8X538!8Moze38I()s#U9H0vJ_h^1OX<$=C`CT_;T|HF&P&h3k;+sYKpS2cKT zUWJ(`^F|0gx^4LUEmv#f>T8N?^wH!LpIt~gt~_8cymFcE^<&RJY!ANO>9}_HUgBl- zJFni)+Ap7lvCwM#%)c|AiNwOOVQGN~LS|q#HB3Q}tZ@darb65@UvERN-lPGx#JPB8 z5OIfw$M&+nVoMkQ;-@|AY5$2v=TM&wh?mdU z-jJS><4YfSX3|EKiO&ih&aG%^9vye}j`-;%BP{LenAo+L2~Cu9%AX0D_um7lK03~l z|5kuYzZ8)uHWJdwg7a^4y$sc0RoDjOOr?snYkl=gP2csEd#b2f33+8rNrD`}pH~n2 zZ#OmGD13T>tn|i7f);6S1>_FhNkz;=xF^^&o&V4Ug~*4#vTWm7pxe7Q6B)PS?WltG z&q0Kn?ESW9_N6SG34^>*vsnK6(P0r7VG-G+{@lCYjkJsB-r~#)5jkpBp0W#GU<&)m z%tzy{l0f`=vxGOQGZFJ+D^B+34qTv5i39pOp|KmTE?QZ>q@86@!ny5AFS*()cCVsBrp*UlwDmdx)x2=CNEV(&!6hsG>@ zsM57Sevb7KKWt~BINB=~>_5VgulccdGh`fquDC~X2$`u(@u()JWKp&jDnxE=$|W(( zo{G%La&mI&Hkb?0XRi)jPwt7Dfv)`QFbl)MQ zkMBP3vpw;4dQ!TOyh=A55jDf_XpE$C7c|B{TV0n*8V{If3^Z!N#B)^|w}f0}@#T2l z^~%n55(WpmEbrph0;-(;tUqf`TK0Nwsa8qH_2j|&`>Ci02^Bl*Z1=c}E_raDUMhMB zUY!H;V(Ru{HOb@&e}&>_-tEeLgm|{!2NL#4@EI%Hx+6Xp{OJCZ(&IzLXW?PWWt4soJ!=;B}gQvQ_%W?yJuCTkExW zj355Pus8axn%Mp^a%T{3U4v6l9xmX2yUaFT%kq?E1gO4){%pngFvFJT&+Q>AScA(| z&b`ROgaY@3NaHeZwh2T2yPs$>uU)r0c~g{j^3$VfeN3n-#HL!FKef$O@-@lyjD@G4 zUkCJR-au4iBfpT)va-vHp(AM-;nyKtlRNu-7Yx@_4QgJenJ$&<8$GLF@SQF@hoiVb zzHIXGYD`iQ)T?m=j`?~SsrsdBJ=^bLGT6wy_4p3gLbJfoTep(`%!ysg8&JpOj-Gm; zx6!|k7f3zI;a{za$buWI9j00~Jz$=9Au?~19ngB6sFZk;5UMeL4I#B13`|9C-+aEKS25aS@2%&&ZoI=p0MmE)}hi%VA2TKM>{YMa%t1CiKd$ms4 zbUCHBZjq{aiHAjseVN+G#fd+gLydZOaAz4Zr!tRJRPy&?gPlRiT>$oW%lP7y$fl=V zpdz=wYY|2Tq30n^(_zC^-lnyC9o8bhevU=Pd@Q9uYRS%;vX;#FV%U*9DN%egID_nt z(%nyqbq#gD%H5vaAR}#|Z2s~LApjJxH6%mh3Fgk4u7D6d#nYgsXp3S?+?xJDiTaG` z$m-2suc=4`9p?>bG3392Uzc)Dd|1)uj>R4j?)dbPoopV1B2@!lj?>?dUHxjUgz}@B zUuJd3K!!J^MONxdHa3DvoonDvjr+N8D22AsSElv%3q*#m7*=~dYN5WK*T#_{_G0g* zWym2oNp}!_vhmC8fN@UC(@RFw-LryDqVHmKVNCVLMq6fwmFQ79zGSv4(juqXuMfUD zF1y%BBQ>vY!$`Jpec0YzYsCn1yKp@AW1j7g5SwSB3yR$cR1v5bF zusVJI;I9vdcXpI#he~OabwwC+%_l_Pj*6zm!ea|F$$mZ;O>#pC?J3A?N~C*f(FjGi z=RaRWaBWRj$;e<#zDw%r4mu4CXM`wlEbi{hb$55?Tb151CC~*$JhrKRtOtM!j@h7& zG5OFiiNS91i(Z~{3wC|9B-)DBy+%0Ar_UumTT7Q!=VR%!qGgn38~f&uvaZ0g%~ig0 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 CRR^>H diff --git a/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tooltip-with-title-correctly-1-snap.png b/front-packages/akeneo-design-system/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tooltip-with-title-correctly-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..5fcb36944ca02febee299e4e4bd0f8016d8f4ed3 GIT binary patch literal 1068 zcmeAS@N?(olHy`uVBq!ia0y~yU4cn7bxp}WI6cH)<|NH*a`B}g1=4(E=_j~XCAN%%v zueaWHH_x1bp+RNO$5qlmSNyYO0+K2&K%$|A14vGoV9q}GLQZK?;>$>#b${ggXTOc8 zz1P{%v2nZGV~4QLU;nm0esOT`#J7^Vdm|Yb60*xgYFRVZZWg@%|BuSP+3|WIKhA8- zs`+!V;*Ff_&7fum28T*6)&{rDvc=|dZpmA113uo0P}Q4LVV@P5`hty-q2bdPUWVQ@ zYrFlwvbS6}Z;M*6saVBs_Fo5}YZ|UQymLR0J-1gk_n)%Tt=G~YpKfK}cujI2FdPH= z?l2g9KYaMk+5bMa-8WZeo$(7@yszH>eBtWz)*ru~J$|^HlYwE%qUYKU-@~E`pKnjM zRgbf()##JE^ZU~OXL&YVv%Amw9>2fqe$V6f%@%WnMS%9bz51Eu!SU+Z`A_~A{(U!j z#_o?A=VJHC&aeCJ4RqV1Ga;tse*0%JFdX>ys*-8LhA$@Nj~;nxi-rIDw|nEQzO>bs zzrX!&?d`9el=MIi=(VDpDkfl9KI&(*`!jcCdZ6^`BZn6Mxo{!wen;ABM({N+1Zm!^Nbx|Kck3osewEWVTO z(4Dnr-PAx}DBMV!J&)nau`+SJf_I5pIepJo=FKX=u!o5@!fN&$U&D%^s>#l<9g?hd2TuVY9Uw7I tK_H=^h@R#JfVvojlz@bT6YUiLV|st+O?**tLqE_W22WQ%mvv4FO#rM@w~YV* literal 0 HcmV?d00001 diff --git a/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx b/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx index 4a2acb1ba51e..f9ed148c24ab 100644 --- a/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx +++ b/front-packages/akeneo-design-system/src/components/Dropdown/Item/Item.tsx @@ -193,6 +193,7 @@ const Item = React.forwardRef( disabled={disabled} aria-disabled={disabled} isActive={isActive} + title={title} {...rest} ref={forwardedRef} > diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx index f8e51b73b450..a8c440af2dcf 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/ChipInput.tsx @@ -24,7 +24,9 @@ const Container = styled.ul` } `; -const Chip = styled.li` +const Chip = styled.li< + AkeneoThemedProps & {isSelected: boolean; readOnly: boolean; isErrored: boolean; isLocked: boolean} +>` list-style-type: none; padding: 3px 15px; padding-left: ${({readOnly}) => (readOnly ? '15px' : '4px')}; @@ -35,8 +37,8 @@ const Chip = styled.li - isErrored ? getColor('red', 100) : readOnly ? getColor('grey', 100) : getColor('grey', 140)}; + color: ${({readOnly, isErrored, isLocked}) => + isErrored ? getColor('red', 100) : readOnly || isLocked ? getColor('grey', 100) : getColor('grey', 140)}; `; const Input = styled.input` @@ -76,6 +78,10 @@ const ReadOnlyIcon = styled(LockIcon)` color: ${getColor('grey', 100)}; `; +const LockedValueIcon = styled(LockIcon)` + padding-right: 5px; +`; + const RemoveButton = styled(IconButton)` background-color: transparent; margin-left: -3px; @@ -100,6 +106,7 @@ type ChipInputProps = { onRemove: (chipCode: string) => void; onSearchChange: (searchValue: string) => void; onFocus?: () => void; + lockedValues?: string[]; }; const ChipInput = React.forwardRef( @@ -116,6 +123,7 @@ const ChipInput = React.forwardRef( onRemove, onSearchChange, onFocus, + lockedValues, }: ChipInputProps, forwardedRef: Ref ) => { @@ -148,10 +156,11 @@ const ChipInput = React.forwardRef( - {!readOnly && ( + {!readOnly && !lockedValues?.includes(chip.code) && ( ( isErrored={invalidValue.includes(chip.code)} /> )} + {lockedValues?.includes(chip.code) && } {chip.label} ))} diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.stories.mdx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.stories.mdx index 3f931aadf4e2..8755bfab62ea 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.stories.mdx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.stories.mdx @@ -102,6 +102,30 @@ The placeholder text provides tips or examples of items to enter. Placeholder te +## Variation on locked values + + + + {args => { + const [value, setValue] = useState(['en_US', 'fr_FR', 'de_DE']); + return ( + + English (United States) + French (France) + German (Germany) + Spanish (Spain) + + ); + }} + + + ## Variation on invalid diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx index 7b196793ecd3..5340f8566dab 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.tsx @@ -146,6 +146,11 @@ type MultiMultiSelectInputProps = Override< */ verticalPosition?: VerticalPosition; + /** + * Values that cannot be unselected + */ + lockedValues?: string[]; + /** * Callback called when the user hit enter on the field. */ @@ -191,6 +196,7 @@ const MultiSelectInput = ({ onNextPage, onSearchChange, disableInternalSearch = false, + lockedValues = [], 'aria-labelledby': ariaLabelledby, ...rest }: MultiMultiSelectInputProps) => { @@ -289,6 +295,7 @@ const MultiSelectInput = ({ onSearchChange={handleSearch} onRemove={handleRemove} onFocus={handleFocus} + lockedValues={lockedValues} /> {!readOnly && ( diff --git a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx index b7ae72c0aa30..353dbc8d10c8 100644 --- a/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx +++ b/front-packages/akeneo-design-system/src/components/Input/MultiSelectInput/MultiSelectInput.unit.tsx @@ -326,6 +326,26 @@ test('MultiSelectInput supports ...rest props', () => { expect(screen.getByTestId('my_value')).toBeInTheDocument(); }); +test('MultiSelectInput supports locked values prop', () => { + const onChange = jest.fn(); + render( + + English + French + Spanish + + ); + expect(screen.getByTestId('my_value')).toBeInTheDocument(); +}); + test('MultiSelectInput does not support duplicated options', () => { const mockConsole = jest.spyOn(console, 'error').mockImplementation(); expect(() => { diff --git a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.stories.mdx b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.stories.mdx index 3efcc183496f..46e6293e3583 100644 --- a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.stories.mdx +++ b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.stories.mdx @@ -1,6 +1,7 @@ import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs'; import {KeyFigure, KeyFigureGrid} from './KeyFigure'; import * as Icons from '../../icons'; +import {Tooltip} from '../Tooltip/Tooltip'; 123 - 456 + + 456 + More informations on this figure + 789454 diff --git a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx index a341ead69ee2..caffb7ea72d9 100644 --- a/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx +++ b/front-packages/akeneo-design-system/src/components/KeyFigure/KeyFigure.tsx @@ -12,6 +12,8 @@ const FigureContainer = styled.div` color: ${getColor('brand', 100)}; font-size: 16px; margin: 0 15px 0 3px; + display: flex; + align-items: center; :only-child { margin: 0; diff --git a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx index cd0ced01d48e..f48a912c34a9 100644 --- a/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx +++ b/front-packages/akeneo-design-system/src/components/ProgressBar/ProgressBar.tsx @@ -14,11 +14,8 @@ const progressBarAnimation = keyframes` const Header = styled.div` display: flex; - align-items: stretch; - flex-direction: row; font-size: ${getFontSize('default')}; - flex-flow: row wrap; - margin-bottom: -4px; + justify-content: space-between; `; const Title = styled.div` @@ -27,24 +24,11 @@ const Title = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; - flex-grow: 1; - margin-bottom: 4px; - - /* When header div is greater than 300px the flex-basic is negative, progress label is on same line */ - /* When header div is lower than 300px the flex-basic is positive, progress label is move to new line */ - flex-basis: calc((301px - 100%) * 999); `; const ProgressLabel = styled.div` color: ${getColor('grey', 120)}; - flex-grow: 0; - flex-basis: auto; - flex-shrink: 1; - margin-bottom: 4px; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; `; const ProgressBarBackground = styled.div<{size: ProgressBarSize} & AkeneoThemedProps>` diff --git a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.stories.mdx b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.stories.mdx index 8c2f18b61a7f..d8a16ffe4884 100644 --- a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.stories.mdx +++ b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.stories.mdx @@ -43,3 +43,18 @@ It's a complementary information that will help the user better understand what + +## With a title + + + + {args => { + return ( + + My wonderful title + The rest of the amazing content + + ); + }} + + diff --git a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx index 7023eb77ea40..98863a12cb3f 100644 --- a/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx +++ b/front-packages/akeneo-design-system/src/components/Tooltip/Tooltip.tsx @@ -40,6 +40,12 @@ const TooltipContent = styled.div<{direction: Direction; width: number; top: num opacity: ${({top, left}) => (-1 === top && -1 === left ? 0 : 1)}; `; +const TooltipTitle = styled.div` + color: ${getColor('blue', 120)}; + font-weight: 700; + margin-bottom: 5px; +`; + const computePosition = ( direction: Direction, parentRef?: RefObject, @@ -104,7 +110,7 @@ export type TooltipProps = Override< } >; -const Tooltip: React.FC = ({direction = 'top', iconSize = 24, width = 200, children, ...rest}) => { +const Tooltip = ({direction = 'top', iconSize = 24, width = 200, children, ...rest}: TooltipProps) => { const [isVisible, showTooltip, hideTooltip] = useBooleanState(false); const portalNode = document.createElement('div'); portalNode.setAttribute('id', 'tooltip-root'); @@ -148,4 +154,6 @@ const Tooltip: React.FC = ({direction = 'top', iconSize = 24, widt ); }; +Tooltip.Title = TooltipTitle; + export {Tooltip};