TEHIK-EE / tedi-design-system

TEDI is TEHIK design system
4 stars 11 forks source link

Tooltip #210

Open airikej opened 1 month ago

airikej commented 1 month ago

https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/%E2%9D%97TEDI-READY%E2%9D%97(follow-the-badges-in-header-to-see-which-components-are-ready-(designed%2Fdeveloped))?node-id=5797-117363&t=pQAO0g4IeKdgAGJz-4

Sõltuvus:

tarmokullas commented 1 month ago

Edastan tiimiliikme poolt tulnud kommentaarid (muutmata kujul). Video on küll hägune, kuna githubi jaoks tuli fail väiksemaks teha. Peamine point on siiski videost arussaadav.

===

https://github.com/user-attachments/assets/3d913c00-3c8b-450f-9f2c-5807ce39fdc3

Pööra siis tähelepanu sellele, mis toimub DOMis kui tooltip nähtavale tuleb - kõikidele DOMi elementidele kirjutatakse mingi atribuut juurde. Ning kui tooltip peitu läheb, võetakse need uuesti ära. See ei kõla üldse optimaalse lahendusena.

Ajasin ka natuke jälge ning see tuleb läbi TEHIKu tedi libra, kus kasutatakse tooltippide implementatsioonis floating-ui teeki. Selle teegi kohaselt lisatakse data-floating-ui-inert atribuut igale poole screenreaderite fookuse ja accessibility jaoks. Minu jaoks ei kõla see aga üldse optimaalsena. Tegin ka Chrome'i devtoolsi performance analüüsi, aga see vajab põhjalikumat süvenemist.

Lisaks sellele on DOMi body lõpus igale tooltipile oma portaal, mis samuti optimaalsena ei tundu. Kui vaatan floating-ui dokumentatsiooni (https://floating-ui.com/docs/floatingportal), siis tundub, et võiks olla ainult üks floating portal ning seegi tuleks renderdada ainult siis kui vaja.

===

Ehk on hoopis meie enda implementasiooni viga? Kõikides tooltippi kuvavates kohtades on oleme TooltipProvideri- wrappinud

<TooltipProvider>
  <Tooltip>
    {tooltip}
  </Tooltip>
  <TooltipTrigger>
    {trigger}
  </TooltipTrigger>
</TooltipProvider>

Äkki peaks siis ainult üks TooltipProvider rakenduse peale olema?