Issue Description: Make more MUI classes available for Buttons (#588)

Issue Description

Taipy uses the MUI library. In the MUI library it is possible to set different sizes for inputs and buttons. For buttons it is possible to set the size as small, medium(default) and large. For the inputs it is only possible to set the size as small and medium(default).

With this, in Taipy this functionality was not working, all sizes were having the same height, like this:

Image:

Code:

from taipy.gui import Gui

buttons = """
<|button|size=small|label=Small|>
<|button|label=Medium|>
<|button|size=large|label=Big|>
"""

Gui(buttons).run()

This issue could be fixed as described in this document, checking also the PR #2507 and the original Issue #588.

Requirements

User Stories

• As a user, I want to define the sizes of my inputs/buttons based on MUI elements props.
• As a maintainer, I want the inputs/buttons to have a defined height based on each size.

Refactor Description

So currently the way to implement different sizes is done as in the issue description code example. As we can see in that sizes are not having effect as expected.

After some conversation with the maintainer I reached out to a crucial solution for this problem, the --input_button_height prop set in the python stylekit.

With this prop it was possible to reach where it was been used. But as I didn't have that much knowledge about the project I couldn't reach it at the beginning so I tried a different solution. At the beginning I changed the Input and Button components forcing the style change inside them. I noticed as well that the Input component didn't have already the size prop so I added it in the Input.tsx, included in the type of the Input in utils.ts and in the end add in the documentation viselements.json. After this I added a test to check if the size value was working in the Input.spec.tsx

The maintainer didn't like that much this initial solution so he told me that it was nice to see where the variable initially told was being used in Taipy. And with this info I reached stylekit.ts where this variable was being used and started fixing the height for all the sizes based on the information that the maintainers gave me. With this I could fix the issue and even added more value to the project by adding the size prop to the input, which was not initially related to the issue.

The final solution was reached and the output was this one, now with the Input verification too:

The PR with the changes are here.

Source code files

To implement our solution, we made alterations to:

• viselements.json (documentation)
• factory.py (implementation)
• stylekit.ts (implementation)
• utils.ts (implementation)
• Input.tsx (implementation)
• Input.spec.tsx (testing)

Solution Description

The solution to this issue required a systematic approach to ensure proper implementation of the size property across Taipy's components:

Component Modifications

1. Input Component Enhancement

The Input component was enhanced to support the size property by:

• Adding the size property with a default value of "medium" in the component props
• Passing this property to the Material-UI TextField component through the JSX structure
• Ensuring proper typing by adding the size property to the TaipyInputProps interface in utils.ts with two possible values: "small" and "medium"

This change made the Input component more flexible and consistent with MUI's design standards.

2. Stylekit Modifications

The core of the solution involved modifying the stylekit.ts file to properly handle different component sizes with appropriate height values:

• For the Input component:

  • Added specific styling for the "small" size input through the MuiInputBase-inputSizeSmall class, ensuring it has appropriate dimensions
  • Set minHeight: 'unset' to allow proper sizing based on the component's size prop

• For the Button component:

  • Removed the fixed minHeight property that was previously applied to all buttons regardless of size
  • Added size-specific styling for each button size:
    • Medium-sized buttons now use the inputButtonHeight value from the stylekit configuration
    • Large-sized buttons have an appropriate lineHeight setting to ensure proper vertical alignment

These adjustments ensured that the components would respond correctly to the size property, providing visual consistency across the application.

Documentation and Testing

To ensure the changes were well-documented and verified:

• Added comprehensive documentation in viselements.json, explaining the size property and its possible values
• Implemented a test case in Input.spec.tsx to verify that the size property correctly applies the appropriate CSS class
• Made the necessary addition to factory.py to expose the size property in Taipy's Python API

Integration with Taipy's Configuration

The solution leverages Taipy's existing stylekit configuration by:

• Using the window.taipyConfig?.stylekit?.inputButtonHeight variable for consistent sizing that respects the application's global configuration
• Ensuring that custom configurations applied by users will be respected across all component sizes

Solution Design

┌────────────────────────────────────────────────────────────────────┐
│                           User Code                                │
│                                                                    │
│                                                                    │
│  <|button|size=small|label=Small|>                                 │
│  <|button|label=Medium|>                                           │
│  <|button|size=large|label=Big|>                                   │
│                                                                    │
└───────────────────────────┬────────────────────────────────────────┘
                            │
                            ▼
┌────────────────────────────────────────────────────────────────────┐
│                          Taipy GUI                                 │
│  ┌─────────────────────┐           ┌───────────────────────────┐   │
│  │    factory.py       │           │     viselements.json      │   │
│  │                     │           │                           │   │
│  │ Added "size" prop   │           │ Documentation for size    │   │
│  │ to Input element    │           │ property and values       │   │
│  └─────────────────────┘           └───────────────────────────┘   │
│                                                                    │
└───────────────────────────┬────────────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────────────┐
│                       Frontend Components                           │ 
│                                                                     │
│  ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────┐    │
│  │     utils.ts    │   │    Input.tsx    │   │ Input.spec.tsx  │    │
│  │                 │   │                 │   │                 │    │
│  │ Added size prop │   │ Added size prop │   │ Test for size   │    │
│  │ to interface    │   │ with default    │   │ prop behavior   │    │
│  └────────┬────────┘   └────────┬────────┘   └─────────────────┘    │
│           │                     │                                   │
│           └──────────┬──────────┘                                   │
│                      │                                              │
│           ┌──────────▼──────────┐                                   │
│           │     stylekit.ts     │                                   │
│           │                     │                                   │
│           │ • Removed fixed     │                                   │
│           │   minHeight         │                                   │
│           │ • Added size-       │                                   │
│           │   specific styling  │                                   │
│           │ • Used config       │                                   │
│           │   height values     │                                   │
│           └──────────┬──────────┘                                   │
│                      │                                              │
└──────────────────────┼──────────────────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────────────────┐
│                         MUI Components                              │
│                                                                     │
│  ┌─────────────────┐                  ┌─────────────────────┐       │
│  │  MUI Button     │                  │  MUI TextField      │       │
│  │                 │                  │                     │       │
│  │ small, medium,  │                  │ small, medium       │       │
│  │ large sizes     │                  │ sizes               │       │
│  └─────────────────┘                  └─────────────────────┘       │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Conclusion

This refactoring successfully addresses the issue of inconsistent sizing for buttons and input components in Taipy's UI. By implementing proper support for the size property and ensuring appropriate styling for each size variant, the solution provides several benefits:

1. Enhanced UI Consistency: Components now follow MUI's size conventions, providing users with expected behavior and visual consistency.

2. Improved Developer Experience: Developers can now easily control component sizes using standard MUI size properties without needing custom styling.

3. Better Accessibility: Different size options allow developers to create more accessible interfaces for different contexts and user needs.

4. Extended Functionality: Added the previously missing size property to Input components, extending Taipy's capabilities beyond the initial requirements.

The implementation follows best practices for UI customization by:

• Maintaining a consistent visual hierarchy across components
• Supporting standard size specifications that match the underlying MUI library
• Providing proper documentation and testing to ensure reliability

This improvement aligns with user expectations for modern UI frameworks and enhances Taipy's value as a development tool by ensuring components can be easily sized according to design requirements, without the need for custom CSS or workarounds.