Add Stratakit MUI components (WIP) by alexdunae · Pull Request #204 · iTwin/admin-components-react

alexdunae · 2026-05-20T18:56:07Z

Note this branch is based on #202

Posted here for previewing and early review. I can split out some other smaller PRs later.

I tried to strike a balance between keeping the existing API surface while also using MUI idioms.

All these components are exposed via imodel-browser-react/mui with aliases, so consumers can try them by swapping their import path (and then updating any necessary types).

import { ITwinGrid, type ITwinGridProps } from "@itwin/imodel-browser-react/mui";

TODO

Improve I18n
Consistent thumbnail positioning
Fix fallback thumbnails - rendered differently currently
Maybe rename iTwinActions and iModelActions to contextMenuItems
Do we need a replacement for isNew and fullWidth?
Table views
Verify icons on top of different colour thumbnails / backgrounds
Switch to more-horizontal icon when available
Tests

It is pinned to @typescript-eslint/parser 5.x and blocks us from upgrading Typescript. The whole CRA project is deprecated anyways https://github.com/react/create-react-app/blob/main/packages/eslint-config-react-app/package.json We also remove eslint-plugin-flowtype since we don't use Flow at all

kckst8 · 2026-06-01T16:43:23Z

@aruniverse since this PR adds new components without modifying existing, can we publish a new minor after merge? We need to consume this version in our July release (by next Friday)

aruniverse · 2026-06-01T16:49:46Z

@aruniverse since this PR adds new components without modifying existing, can we publish a new minor after merge? We need to consume this version in our July release (by next Friday)

Sure, this repo auto publishes after merges into master based on the change files

mayank99

There are way too many issues in this PR. I spent just a few minutes looking at it and already spotted over a dozen different problems. If I keep going, I'd find even more. I don't want to overwhelm you with even more comments though.

I'd suggest reading the StrataKit docs before you use anything from @stratakit/mui or @mui/material. If anything is unclear from our docs, please ask us questions by opening discussions. We're here to teach you how to use StrataKit (and MUI) correctly.

mayank99 · 2026-06-04T20:03:24Z

    "@itwin/itwinui-react": "~3.17.3",
+    "@mui/material": "~9.0.0",
+    "@mui/system": "~9.0.0",
+    "@mui/x-data-grid": "~9.3.0",
+    "@stratakit/icons": "~0.3.1",
+    "@stratakit/mui": "~0.4.1",


All of these (including iTwinUI) should use ^ instead of ~, otherwise you're blocking future updates to these packages for no good reason.

Also, I don't believe you need @mui/system.

mayank99 · 2026-06-04T20:04:57Z

+
+  const icon = selected ? svgCheckmark : svgItwin;
+
+  return <Icon href={icon} size="regular" color={color} />;


The color SVG attribute does nothing here. You want to use the color CSS property, as documented.

mayank99 · 2026-06-04T20:05:26Z

+
+  const icon = selected ? svgCheckmark : svgImodel;
+
+  return <Icon href={icon} size="regular" color={color} />;


Same comment about color.

mayank99 · 2026-06-04T20:05:51Z

+  );
+  return thumbnail ? (
+    <CardMedia
+      component="img"


component prop should not to be used. Use render instead.

mayank99 · 2026-06-04T20:06:28Z

+
+  return (
+    <>
+      <IconButton


Missing label. See docs.

mayank99 · 2026-06-04T20:13:49Z

+              {
+                borderColor:
+                  status === "positive"
+                    ? "success.main"


This is accessing the MUI colors using the sx prop. You should instead be using the --stratakit-color variables in CSS.

mayank99 · 2026-06-04T20:17:45Z

+      size="small"
+      sx={[
+        (theme) => ({
+          bgcolor: muted ? theme.palette.grey[300] : theme.palette.grey[400],


This is accessing the raw MUI palette using the theme.palette. This is no better than hardcoding hex codes. You should instead be using the semantic --stratakit-color tokens.

In this case though, I would argue all these overrides are unnecessary. This is diverging significantly from the design system. As I've said elsewhere, the Card doesn't currently support placing items in the corner. I'd recommend opening an issue with your use cases. Until then, there are other ways to show secondary actions, as documented.

@kebbn see this note - not sure how to reconcile with the design

it makes sense to map everything to the semantic --stratakit-color tokens, can add this to the next design QA pass.

in terms of placing items in the corner, does that refer to position:absolute ThumbnailIconButton containers on top of the thumbnail image? We currently have two of those in the existing iModelTile that I see used in current products, so would consider that the bare minimum for applications to accept migration

mayank99 · 2026-06-04T20:17:59Z

+          title={
+            <Skeleton variant="text">
+              {/* TODO: i18n */}
+              <Typography variant="h5">Skeleton Name</Typography>


heading variant without render prop again.

mayank99 · 2026-06-04T20:18:50Z

+                alignItems: "center",
+                position: "relative",
+                aspectRatio: "16 / 10",
+                backgroundColor: "var(--stratakit-mui-palette-action-hover)",


This is using (and misusing) the mui palette colors again, and I would again argue that most of these overrides are unnecessary and breaking away from the design system.

As a general rule, you should not need a large amount of styles in most places. The design system should take care of 80% of styles. If you're overriding a lot of styles, it's a sign you're doing something wrong.

For the styles that are legitimately necessary, I would also recommend moving them into .css files so it's easy to keep track of them in one place. Inlining them in JS makes it harder to maintain and easier for mistakes to slip through. (this might be personal preference ultimately)

mayank99 · 2026-06-04T20:19:52Z

+
+    if (actions?.length === 1) {
+      console.warn(
+        `Having a single 'actions' item is a design antipattern. Consider using the 'onClick' prop instead of 'actions' for a single action button.`,


This is not an anti-pattern. onClick is the anti-pattern.

alexdunae and others added 30 commits May 15, 2026 09:22

Change files

a69f63b

less diff noise

af299c1

remove change strings

01c11ec

Switch to none

8e7be25

Update to Typescript 6 / Jest 29

8999d95

Change files

bf20547

.

3460226

tsconfig jest

1f30c8e

allowJS

c48acf2

change files

3542e11

"eslint": "^8.57.0"

e700db9

add ts to storybook pkg

9ecba32

revert

ead8657

Stratakit config

3b085a7

Clone tiles containers

73c87b5

storybook pkgs

c9555b3

more config

9a02e89

BaseCard

21353a7

tidy and impl

7b3b026

basecard tidy

2608e83

context menu

1c6803e

.

0312def

.

828ddd7

tighten

c561384

align

4c615eb

Rename to MUI

8e9ebec

iTwin Grid spike

92704af

thumbnail action buttons

d79200b

MUI config

278a0cd

kebbn reviewed May 29, 2026

View reviewed changes

Comment thread packages/modules/imodel-browser/src/components/baseCard/BaseCard.module.scss Outdated

alexdunae added 19 commits June 2, 2026 14:35

merge main

77a31f4

Add alpha

1eeea75

Fix exports

009c9b0

peerDeps

9733ab6

sx props to deal with CSP

aee4623

deps

c6f0a32

tidy

c44330f

empty state stories

5974e1c

aspect-ratio

0ab6035

merge main

3546a50

Add built output

e6871c2

nothumb

2231c49

defaultthumb

192e30e

Remove built files

db5bcf8

Remove unrelated

912e5ae

Merge branch 'main' into alex/imodelgrid-mui

896d83d

tidy

1c76583

stray config

d0306cb

SVG thumbnail

a97855e

alexdunae marked this pull request as ready for review June 4, 2026 18:35

alexdunae requested review from aruniverse and ben-polinsky as code owners June 4, 2026 18:35

alexdunae requested a review from mayank99 June 4, 2026 18:35

alexdunae added 2 commits June 4, 2026 11:44

tsconfig

451817a

ThumbnailIconButton improvements

48303e5

mayank99 reviewed Jun 4, 2026

View reviewed changes

locators etc

a901277


		const icon = selected ? svgCheckmark : svgItwin;

		return <Icon href={icon} size="regular" color={color} />;

Conversation

alexdunae commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

Uh oh!

kckst8 commented Jun 1, 2026

Uh oh!

aruniverse commented Jun 1, 2026

Uh oh!

mayank99 left a comment

Choose a reason for hiding this comment

Uh oh!

mayank99 Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mayank99 Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mayank99 Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mayank99 Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

alexdunae commented May 20, 2026 •

edited

Loading

mayank99 Jun 4, 2026 •

edited

Loading

mayank99 Jun 4, 2026 •

edited

Loading

mayank99 Jun 4, 2026 •

edited

Loading

mayank99 Jun 4, 2026 •

edited

Loading