-
Notifications
You must be signed in to change notification settings - Fork 23
FAQ
Don't see your problem listed here? You can create a discussion or issue.
What is the difference between iTwinUI-css and iTwinUI-react? Do I need one or both?
The base iTwinUI-css package is meant to offer standalone component styling, as well as Sass variables for spacing, color, etc.
The iTwinUI-react package depends on and uses styles from the base iTwinUI-css package to offer React components.
If you only need to use the components in isolation, you only need to install iTwinUI-react. But if you're building a complete app, you might also need to make use of the Sass variables exported in iTwinUI-css.
My project is not using the recommended Open Sans by default.
Webfont loading is a complex issue, so iTwinUI doesn't automatically load the Open Sans webfont. There are many performance optimizations you might want to make, such as self-hosting, preloading, two-stage rendering, etc.
If you just need a quick way to get started (e.g. for prototyping), you can use Google Fonts. Add this to your entry-point:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">A more performative approach is to self-host the font, and use <link rel="preload">. Alternatively, you could also install the font as a dependency using Fontsource (just make sure you only import the necessary styles).
You can also observe the loading of your fonts using a FontFaceObserver, and only enable the Open Sans font family after they finish loading. iTwinUI offers support for this using the $iui-font-loaded-class Sass variable. You should set this variable to the name of a class that can you apply to the body element when fonts finish loading. Example:
// In your scss
$iui-font-loaded-class: my-webfont-loaded;// In your font loading JS
new FontFaceObserver('Open Sans').load().then(() => {
document.body.classList.add('my-webfont-loaded');
});Further reading:
- Optimize WebFont loading and rendering by Ilya Grigorik
- A comprehensive guide to font loading strategies by Zach Leatherman
Which font styles/weights do I need?
iTwinUI components only use these font weights: Light (300), Normal (400), Semi-Bold (600), Bold (700), and in some cases, Normal (400) italic. If you know your application needs a different subset, you can change it on your end (e.g. with Google Fonts or FontSource).
Why does my app font look different on different devices?
If you are not loading the Open Sans webfont on your end, iTwinUI will fallback to the system fonts of the user's platform (e.g. Segoe UI in Windows and San Francisco in macOS).
Our popover components wrap an external library called tippy.js. We recommend going through their documentation if you have trouble using them.
My tooltip does not show up on hover.
This can happen if the child component does not forward its ref (see docs). It can also happen if the child component is disabled. One workaround is to wrap your content in a div or span.
My tooltip appears cut off!
This can happen due to the parent container using CSS overflow or position: absolute or z-index stacking contexts. (By default, Tooltip is appended to the parent container.) The workaround is to use appendTo={() => document.body}.
I want to show my tooltip on a different element
If you want your popover to be triggered on an element that is not a direct child, you can use the reference prop.
Our table is a styled wrapper around react-table. We recommend going through their documentation and issues before opening new issues in iTwinUI-react.
Missing table features
If you find that our table is missing a feature, there may already be an existing issue for it. You can upvote 👍 the relevant issue (and/or leave a comment) to help us prioritize it.
Conflicts with react-table v6
iTwinUI-react uses react-table v7, which can cause problems if your project is also using react-table v6. It can help to use custom aliases in package.json for both react-table v6 and its types:
...
"react-table-v6": "npm:react-table@^6.11.5"
...
"@types/react-table-v6: "npm:@types/react-table@^6.8.8"
...