Extending Button with additional properties

[thomasxb]

Enhancement

The Button widget may be themed, but it is not possible to add custom styles to it.

Enhancing the button to add a style property is currently not possible because:

1. there is no mechanism to add additional properties
2. subclassing Button won't help as all methods/fields are private

Package Version:

Code

The underlying DOM object supports the style property, but the widget does not

Expected behavior:

Support a style property for the Button widget (or in general all widgets), or more general: support all properties of the underlying DOM object

Actual behavior:

The widget does not support the underlying DOM object's properties

[tomdye]

@thomasxb widgets are not able to accept a styles property as they are made up of multiple nodes and thus they would not know where to apply them. Furthermore, we have no plans to open up all properties of the underlying DOM object as that would differ across nodes in more complex widgets.

If you wish to pass a custom class to a widget you can do so either by using the classes property or via the existing theming mechanism.

What is the problem that you are trying to solve?

[thomasxb]

Please see https://discourse.dojo.io/t/setting-background-color-for-a-widget/422

I've been asked by Dylan to file an enhancement report.

[tomdye]

Looking at your original issue, I would say that your best approach is to use classes and pass it a root class that contains your custom colour choice as a background-color.

Something like:

// tsx
<Button classes={"@dojo/widgets/button": { "root": myCss.buttonRoot } } />

// myCss.m.css
.buttonRoot {
    background-color: red;
}

[thomasxb]

I do understand, this may be an option, but how shall I cope with the color not being statically defined, but a value in a database (and different for multiple buttons)?

Is it possible to dynamically define the "myCss.buttonRoot"? If yes, how? Unfortunately I'm neither a Typescript nor a dojo pro yet...

Having a solution not requiring me to completely copy the button code would of course be preferred

[tomdye]

@thomasxb I believe you could use css-variables to achieve this dynamic colour changing. You would define this css-variable in your css module file and change it in your typescript. Something like this:

// myCss.m.css
:root {
   --button-background: white; //default to white
}

.buttonRoot {
   background-color: var(--button-background);
}

// tsx
const root = document.documentElement;
root.style.setProperty('--button-background', `${rgbFromDatabase}`;

[thomasxb]

OK, but this still requires me to define a different .buttonRootXXX for every button I have. And this definition has to be done statically.

As far as I understand, your suggestions allows me to change a statically defined class, but this is exactly what I do NOT need. See my first posting at discourse.

[tomdye]

It would allow you to dynamically change the value that is used within the css-class css-variable. So it would allow you to dynamically change the button colour as you initially asked. If you need to do this for multiple different buttons in different colours then you would need a different class name and css-variable for each button variation on the page. If this it not sufficient, then at this point I would advise you to either write your own Button widget or simply use an html button node.

[thomasxb]

Thanks, Tom,

creating my own Button widget was exactly what I did and Dylan asked me to file an enhancement issue here.

Did that. Won't work. Close the issue :-)

Unfortunately this means, that the button widget is not usable for my application. For me it shows the difference between what can be done (e.g. using old Dojo) and what should be done (using Dojo2+). Widgets are a bit hard to use if they are not customizable dynamically.

[tomdye]

No problem, this is indeed a very niche scenario. Good luck with your application.