Should we use native button styles throughout the app?

[jandubois]

The React/Vue? style button look a little bit out-of-place in a native app, and it becomes especially apparent when you have a native dialog on top, that uses the native style:

The screenshot also shows that we do not respect the local aspect colour setting for UI elements, but that is a different issue...

[mook-as]

It seems unlikely that we'll be able to fix all of dashboard to do native button style though, so as long as we intend to keep the dashboard around it'll always have a mismatch of styles.

[jandubois]

making sure the change hasn't made something else out of whack (because the current styling has non-native margins/paddings).

Not sure if this is possible, but maybe just apply the native styling (colour, corner shape, and line hight, assuming it is smaller than the current button styling), and then adjust the margins so the total height and width remain the same. That way it should not affect the placement of other UI elements.

For that matter, platform-native buttons look different on different platforms, so we'd need to do the check everywhere

Not sure what you mean: you check which platform you are running on, and then select the CSS that matches the platform.

(and hope that the user isn't running Linux with a weird theme with unusual metrics).

I'm fine with falling back on the current button style if we cannot determine the proper native look on Linux. But on recent versions of macOS and Windows we should be able to figure out how buttons are supposed to look.

[rak-phillip]

You can probably override things globally with CSS… the hard part is then going to all of those places and making sure the change hasn't made something else out of whack (because the current styling has non-native margins/paddings).

We would also need to consider what happens when the OS changes native styles look like and updating our styles to reflect these changes.

[jandubois]

We would also need to consider what happens when the OS changes native styles look like and updating our styles to reflect these changes.

Yeah, but that typically only happens every couple of years. So you have to create another button style, and add some logic to select the new style on the new OS.

It is the nature of native apps that they often need to be updated when a new version of the OS is released. As always, the issue is how big the effort is going to be.

[mook-as]

Not sure if this is possible, but maybe just apply the native styling (colour, corner shape, and line hight, assuming it is smaller than the current button styling), and then adjust the margins so the total height and width remain the same. That way it should not affect the placement of other UI elements.

Experience from (people complaining about) XUL indicates that trying to look native and not having native behaviours just leads to more people complaining; it's much better to not even try (unfortunately; I say this as a person who prefers native things).

[jandubois]

trying to look native and not having native behaviours

We obviously do want native behaviour as well. How is the button behaviour different from native buttons beyond the styling? Is there more to it than clicking the button to trigger an action?

[rak-phillip]

We've been leaning toward using custom dialogs in our past discussions. For example, we make use of custom dialogs where we used to use native ones for functions like Factory Reset

The tradeoff being that we would get a more consistent Rancher Desktop experience at the expense of native dialog behavior and design.

[jandubois]

The tradeoff being that we would get a more consistent Rancher Desktop experience at the expense of native dialog behavior and design.

How would we not have a consistent Rancher Desktop experience if we used the same native button style everywhere?

[rak-phillip]

The tradeoff being that we would get a more consistent Rancher Desktop experience at the expense of native dialog behavior and design.

How would we not have a consistent Rancher Desktop experience if we used the same native button style everywhere?

Electron doesn't provide native components like buttons. We'll have to update our Rancher CSS to provide "native" component styles if we wanted a native button style everywhere. I think the path of least friction and increased consistency would be to use what we have available through our Rancher styles, hence the tradeoff.

[jandubois]

I don't know how much effort is involved (which is why this is a "discussion" and not an "issue"), but I would have thought you could easily define a couple of native styles as alternatives, and then pick the one that matches the local look.

Obviously this doesn't make sense if you have to modify each button manually, but if this is just some generated CSS, then I would hope that the effort it manageable.

[jandubois]

Just wanted to save this link somewhere; unfortunately it looks like an abandoned project, but maybe it includes useful info: https://github.com/MauriceConrad/Photon

[kwwii]

I think we should stick to the current button styles. They are used in every app/plugin and better suites the shell/plugin architecture.