Unstyled Mode

[zdravkov]

👋 Hey, we just released our new Unstyled Mode for KendoReact!

It can be activated quickly by wrapping the components you to "unstyle" with provider:

<UnstyledContext.Provider value={preset}>
    <Button > Unstyled Button</Button>
</UnstyledContext.Provider>

The preset here is a subset of JSON based object responsible for applying the needed classes for each component by providing options to add class for its different state and variations. Here is an example of the preset of the button:

const preset = {
    uButton: {
        wrapper: {
            main: `mainClass`,
            size: {
                small: `smallClass`,
                medium:  `mediumClasss`,
                large:  `largeClass`
            },
            fillMode: {
                solid: ``,
                outline: ``,
                flat: ``,
                link: ``,
                clear: ``
            },
            themeColor: {
                base: {
                    fillMode: {
                        solid: `solidClass`,
                        outline: ``,
                        ...
                    }
                },
                ...
            },
            rounded: {
                small: ``,
                medium: ``,
                large: ``,
                full: ``,
            },
            iconButton: `iconButtonClass`,
            disabled: `disabledClass`,
            selected: `selected`,
            isRtl: `rtlClass`
        },
        text: `textClass`,
        icon: `iconClass`
    }

For the initial Preview version we have released Unstyled Mode option for the following packages and components:

• Animation
• Buttons – Button, ButtonGroup, DropDownButton
• Common - SvgIcon
• Dropdowns – DropdownList, Combobox
• DateInputs – DateInput, DateTimePicker, TimePicker
• Inputs – Input, TextBox, MaskedTextBox, RadioButton, RadioGroup
• Popup
• Form
• Labels – Label, Floating Label, Hint, Error

You can check our official documentation here and run locally this example - https://github.com/telerik/kendo-react/tree/master/examples/kendo-unstyled-tailwind

---

What we need from you is to share any ideas or questions regarding the new Unstyled Mode option in KendoReact:

• Do you like it
• Do you have any recommendation how to improve it
• Which is the next component you want to see with Unstyled mode

Thank you in advance for participating in this discussion! :)