Feat(web): Introduce Placement dictionary and use it in Dropdown and Tooltip #DS-923

[adamkudrna]

Description

• Introduce Placement dictionary
• Use it in Dropdown and Tooltip components

Additional context

Issue reference

https://jira.lmc.cz/browse/DS-923

[netlify]

✅ Deploy Preview for spirit-design-system-demo ready!

Name	Link
🔨 Latest commit	1382252
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-demo/deploys/652e91554b0c7300083a2c9f
😎 Deploy Preview	https://deploy-preview-1092--spirit-design-system-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-validations canceled.

Name	Link
🔨 Latest commit	1382252
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-validations/deploys/652e9155c760360009003ab6

[netlify]

✅ Deploy Preview for spirit-design-system-storybook ready!

Name	Link
🔨 Latest commit	1382252
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-storybook/deploys/652e9155c4f0a90008911c7c
😎 Deploy Preview	https://deploy-preview-1092--spirit-design-system-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for spirit-design-system-react ready!

Name	Link
🔨 Latest commit	1382252
🔍 Latest deploy log	https://app.netlify.com/sites/spirit-design-system-react/deploys/652e9155c2d9d80008d7779f
😎 Deploy Preview	https://deploy-preview-1092--spirit-design-system-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

coverage: 70.053% (-0.9%) from 70.949% when pulling 37f9b5f on feature/web-placement-dictionary into 2094a04 on main.

[literat]

I have written a few suggestions, but nothing blocking. It is looking good. Thanks a lot for your effort, it looks like a really complicated task. 👏

[literat]

I have a question about generating the placements. It is necessary to have placement for each component generated? What about to make it like Tooltip Placement--topLeft? Is this even possible? Or why do we go with the way of generating classes when it adds some extra code that may or may not be used? Thanks.

[crishpeen]

🤕

[adamkudrna]

I have a question about generating the placements. It is necessary to have placement for each component generated? What about to make it like Tooltip Placement--topLeft? Is this even possible? Or why do we go with the way of generating classes when it adds some extra code that may or may not be used? Thanks.

That could be a next level of abstraction. We already abstract things like .text-truncate or .animation-spin-clockwise (we call it "helpers", or "helper classes"), but nothing as complex as the placement logic. Moreover, there is the arrow element which would require something like .placement-top-left > .placement-arrow.

But the idea seems very interesting to me. It's a Tailwind-like tear-down: find what's common, abstract, reuse. Something between design tokens and components.

cc @crishpeen