iTwin
Tree widget: Inconsistent/Overlapping button spacing
IconButtons with "isActive" property have overlapping backgrounds.
For: "@itwin/tree-widget-react": "^3.7.0"
Is this at 100% browser scaling? I see that the text in Select box is also cut off at the bottom... Also, what's the browser?
This is with electron. The problem does not change with different zoom levels. Changing window size shuffles the buttons a bit where they all might have a single pixel overlap, and the letter "g" in Categories becomes more visible in some cases but never all the way (not sure if there is any browser scaling setting anywhere in electron).
I just compared it with another Electron app, and it looks like the fonts might be slightly different in those Select boxes:
What font styles do you see for that "Categories" span?
Also, what iTwinUI version are you using?
@iTwin/itwinui, I'm seeing the buttons overlap here, too: https://itwin.github.io/iTwinUI/react/?arg-future.themeBridge=true&story=buttongroup--with-icons
Just set the buttons to be "borderless" and make two adjacent buttons "active".
@iTwin/itwinui, I'm seeing the buttons overlap here, too: https://itwin.github.io/iTwinUI/react/?arg-future.themeBridge=true&story=buttongroup--with-icons
I am able to reproduce it.
The overlapping borders is a feature for default buttons, but not strictly necessary for borderless buttons.
Before we try to fix it, I have two questions:
- What is the use case for having multiple active buttons in a toolbar? Usually there should only be one active button.
- Isn't this widget supposed to be using StrataKit toolbar/buttons, where this problem doesn't occur?
- What is the use case for having multiple active buttons in a toolbar? Usually there should only be one active button.
In this specific situation the buttons are coming from the app, but some of the standard widget's buttons use the "active" state to show that they're toggled-on.
- Isn't this widget supposed to be using StrataKit toolbar/buttons, where this problem doesn't occur?
This is the 3.x widget version that uses iTwinUI.
I do think there is a UX/design issue (multiple toggled on buttons should generally not be allowed). But we can look into the CSS issue if someone opens an issue in the iTwinUI repo.
we can look into the CSS issue if someone opens an issue in the iTwinUI repo.
@AntanasBuk can you please do that?
I'm closing this issue as the underlying problem in iTwinUI has been fixed and there's nothing to do about it in our packages.