[🐛 BUG] Improve and fix stylekit to make UI elements more consistent

[FlorianJacta]

What went wrong? 🤔

Here is a list of UI components. The stylekit should provide a consistent set of UI elements. Some viz elements are higher than others.

Expected Behavior

Some elements should be fixed, and others may be improved. I don't have any specific recommendations for improvement.

Steps to Reproduce Issue

Run this code.

from taipy.gui import Gui, notify
import taipy.gui.builder as tgb


with tgb.Page() as page:
    with tgb.layout(columns="1 1 1 1 1"):
        tgb.selector(dropdown=True)
        tgb.selector(dropdown=True, filter=True)
        tgb.selector(
            dropdown=True,
            label="City",
        )
        tgb.selector(dropdown=True, label="City", filter=True)
        tgb.input("Some Text")
        tgb.input("Some Text", label="Write some text")
        tgb.number(10)
        tgb.number(10, label="Write a number")
        tgb.date("2021-01-01")
        tgb.date("2021-01-01", label="Pick a date")
        tgb.date("2021-01-01", with_time=True)
        tgb.date_range(["2021-01-01", "2022-01-01"])
        tgb.date_range(
            ["2021-01-01", "2022-01-01"], label_start="Start", label_end="End"
        )
        tgb.slider(10)
        tgb.slider(10, label="Pick a number")  # No label
        tgb.toggle(lov=["Yes", "No"])
        tgb.toggle(lov=["Yes", "No"], label="Yes or No")  # Misplaced label
        tgb.toggle(True)
        tgb.toggle(True, label="Yes or No")
        tgb.button("Click me")
        tgb.button("Click me full and plain", class_name="fullwidth plain")
        tgb.file_download()
        tgb.file_selector()
        tgb.file_selector(label="Pick a file")
        tgb.status("Ready")


Gui(page).run()

Other example

#2262

Visual elements should have the similar position and layouts in the default stylekit. For example, if I place a selector and a button side by side, they should be aligned:

from taipy.gui import Gui
import taipy.gui.builder as tgb


with tgb.Page() as page:
    with tgb.layout(columns="1 1 10"):
        with tgb.part():
            tgb.button("Click me")
        with tgb.part():
            tgb.selector("{selected}", lov="Furniture;Desk", dropdown=True)

Gui(page=page).run()

Here, they are misaligned:

This issue makes layouts a CSS nightmare in any application:

Browsers

Chrome

OS

Windows

Version of Taipy

4.0.1

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[FredLL-Avaiga]

[FlorianJacta]

Do you have this example too?

from taipy.gui import Gui
import taipy.gui.builder as tgb


with tgb.Page() as page:
    with tgb.layout(columns="1 1 10"):
        with tgb.part():
            tgb.button("Click me")
        with tgb.part():
            tgb.selector("{selected}", lov="Furniture;Desk", dropdown=True)

Gui(page=page).run()

[FredLL-Avaiga]

When I change taipy-selector's margin to 0 in selector.css (I'll side load this in my current PR)

[FlorianJacta]

There is still a slight issue of alignment here

[FredLL-Avaiga]

Some code?

[FlorianJacta]

It is the one from the issue. The top right of the screen

[AlexandreSajus]

Fixed in 4.0.2.dev2. Beautiful!