🐞 - Demo should not use any of "tui-" classes other than spacings

[Clindbergh]

Reproduction url

https://taiga-ui.dev/form

Description

Some of the core layouting building blocks used in Forms is missing documentation. These elements (like row, skeleton, table) seem to be useful for a lot of other contexts, but some more documentation how they are intended to use them would be helpful.

Taiga UI version

4.14.0

Browser Used

Firefox

OS Used

Windows

[waterplea]

It's on purpose, we're phasing out those global styles. I'll change this ticket into "remove deprecated global styles from demo". They were initially released by mistake as our internal set of styles that was a subject to change by another team. We plan to drop them by v5.

[Clindbergh]

Thanks for the quick reply.

I encountered another issue and I was wondering if this is related. tuiSurfaceLayer is used in some demos (like selectable CardMedium), but I cannot find any definitions for it.

Also: Is the website open source? It would be helpful to understand how the demos work.

[waterplea]

tuiSurfaceLayer is part of Surface directive, it's a general use container with some styles preset for itself, ::before and ::after element to simplify creation of various cards with colors, images, gradients, animations etc. When the container itself is not enough, for example, when you want a card to be selectable through checkbox or have a video playing in it — you can introduce layers with this directive. It is purely for CSS purposes.

The website is open source, the entirety of taiga-ui.dev is in this folder:
https://github.com/taiga-family/taiga-ui/tree/main/projects/demo

[Clindbergh]

Ah, that explains it. I tried to use a selectable card, but had problems to set it up. I assumed this was due to the missing tuiSurfaceLayer directive (or what I thought would be a directive).

Good to know about the website. Thanks for the quick response and elaboration.

---

Regarding my original request:

They were initially released by mistake as our internal set of styles that was a subject to change by another team. We plan to drop them by v5.

The form example was actually pretty helpful. It was the only sample that displayed a full form demo where a lot of capabilities are shown. Since you're planning to drop these classes in v5: Do you recommend any other framework for layouting (perhaps known to work well and with similar conventions as taiga)?

[waterplea]

A lot of people use Tailwind with Taiga UI and like it. I don't use layout libraries myself as I prefer to style all the pages myself.

[shiv9604]

Hi @waterplea,

Just wanted to confirm before starting on it, Are we concerned about only Classes mentioned here or we are considering removing other classes as well for example `tui-text_h6, tui-list_, tui-island_ being used in demo. I would like to take on this & you can assign this bug to me.

According to my understanding, I would like to reconfirm on scope for this ticket aiming to remove tui-* prefix classes from demo by localizing them in demo app without affecting existing appearance. I would appriciate if any additional details provided if i am missing out on any aspect of requirement or end goal.

Thanks & Regards
Shivprasad Kounsalye

[waterplea]

Ideally we want to remove everything from this package:
https://github.com/taiga-family/taiga-ui/blob/v3.x/projects/styles/taiga-ui-global.less
It doesn't have to be a single PR, if you can remove classes from form page — that would already be helpful. We are moving away from those global classes to specific layout components. For example tui-island classes interfaces are now supposed to be handled by CardLarge component.

In the end, we want all classes from global styles gone from the demo so we can deprecate and later discontinue the package altogether.

[shiv9604]

That was helpful & descriptive.

In the documentation, as of now we just need to show the notification for its depreciation as displayed here or do we need to fully integrate it in docs with new layout component & change the docs accordingly?

[waterplea]

That was helpful & descriptive.

In the documentation, as of now we just need to show the notification for its depreciation as displayed here or do we need to fully integrate it in docs with new layout component & change the docs accordingly?

You can just start with getting rid of those classes and replacing them with layout components or in-place styles so it looks right. At this point it's more important to drop them from examples so new people will not start using them.

[shiv9604]

Thank you for the clarity!