🚀 - Use providers to inject default configurations

[fynnfeldpausch]

🚀 Feature request

Is your feature request related to a problem?

I would like to adjust the default values for several inputs on different components. In our project for instance, we would like to use the checkbox component in size l. Given the current implementation, we need to add the size input to every checkbox. It would be nice to globally define the default values via a configuration provider. Similar functionality exists on Angular Material and other frameworks.

Describe the solution you'd like

import {TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/kit';
...
{
  imports: [TuiRootModule, ...],
  providers: [{
    provide: TUI_CHECKBOX_DEFAULT_OPTIONS,
    useValue: {
      size: 'l'
    }
  }],
  ...
}
export class AppModule {}

Describe alternatives you've considered

The only alternative currently is to set the size input on every checkbox.

Additional context

Ideally, this would be available for every component and not only for checkboxes. We can help provide PRs if you like the idea.

[MarsiBarsi]

That's a cool idea! I like it

Moreover, I think it could be combined with a concept of controllers. Take a look at textfield controller, for example:

It is a set of directives:

• Docs: https://taiga-ui.dev/tui-textfield-controller
• Source code: https://github.com/TinkoffCreditSystems/taiga-ui/tree/main/projects/core/directives/textfield-controller

And we inject it in DI and use https://github.com/TinkoffCreditSystems/taiga-ui/blob/main/projects/core/components/primitive-textfield/primitive-textfield.component.ts

It allows users to set parameters for textfield itself, for its parent (e.g. tui-input) or set something like tuiTextfieldSize="l" for all inputs in a form

[fynnfeldpausch]

How would that work in detail? Would the default options then not only be injected / used in the respective inputs but also in the TextfieldController?

[fynnfeldpausch]

I have added an example PR to have a better base for discussions. This is the solution I had in mind. Obviously, this would then have to be introduced to all the other components too. It would also be a good place to extract the hard coded icon names, that are used in a bunch of components (e.g. the arrow component or the InputPassword). Those hard coded icon names make it hard to switch to another icon set at the moment.

Usage would be like:

providers: [{
    provide: TUI_CHECKBOX_DEFAULT_OPTIONS,
    useValue: { size: 'l' }
}]

[waterplea]

@vladimirpotekhin could you add configuration for InputTime next, please?

[vladimirpotekhin]

Ok, I'll add

[abhaykeerthy12]

Wow, this is really nice way to style, the components such as buttons are huge in size by default. currently i set size as 'm' for each every button, it will be nice if default options can also be configured for buttons

[waterplea]

Wow, this is really nice way to style, the components such as buttons are huge in size by default. currently i set size as 'm' for each every button, it will be nice if default options can also be configured for buttons

Yes, they will be, eventually. PRs are welcome, so you can make one for button to speed it up 🙂

[splincode]

@waterplea Hello, could you coordinate on which components need more changes for move to the default config. So that we can follow the work plan:

• Button
• Badge
• InputCount
• InputTime
• InputPassword
• InputCheckbox
• ..?

[waterplea]

Anywhere it makes sense really. It's not something we actively do but if we ran into some components where it's a nice to have or needed for some other task — we can add it. It is also a good task for external contributors to chip in.

[waterplea]

I believe the library is mostly covered by tokens now. If anything is still needed, a separate issue can be opened.

Huge thanks to everyone who contributed to getting this done, namely @fynnfeldpausch, @KarimovDev, @mullinsmikey and @zarghamkhandev, you rock! 👍