From cfca0a0a8a1244bb370657576bfc588f5f84c4c1 Mon Sep 17 00:00:00 2001 From: Alex Dunae Date: Mon, 15 Jun 2026 12:46:59 -0700 Subject: [PATCH 1/4] Card aspect ratio and title style updates --- .../storybook/src/imodel-browser/mui/BaseCard.stories.tsx | 2 +- .../imodel-browser/src/mui/components/baseCard/BaseCard.tsx | 5 ++++- .../src/mui/containers/ITwinGrid/ITwinGridMUI.tsx | 2 +- .../src/mui/containers/iModelGrid/IModelGridMUI.tsx | 2 +- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx b/packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx index 89d46459..17983ca1 100644 --- a/packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx +++ b/packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx @@ -176,7 +176,7 @@ export const Statuses = () => ( sx={{ display: "grid", gap: 2, - gridTemplateColumns: "repeat(auto-fill, minmax(22.5rem, 1fr))", + gridTemplateColumns: "repeat(auto-fill, minmax(18rem, 1fr))", }} > {( diff --git a/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.tsx b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.tsx index dd3c6f8d..b2f439a2 100644 --- a/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.tsx +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.tsx @@ -118,12 +118,15 @@ export interface BaseCardProps const baseCardSx = { overflow: "hidden", minWidth: "18rem", - minHeight: "15rem", + width: "21.5rem", + maxWidth: "24rem", display: "flex", flexDirection: "column", }; const textEllipsisSx = { + typography: "body1", + fontWeight: "500", display: "block", overflow: "hidden", textOverflow: "ellipsis", diff --git a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx index 9f6bea7b..89044dea 100644 --- a/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx +++ b/packages/modules/imodel-browser/src/mui/containers/ITwinGrid/ITwinGridMUI.tsx @@ -186,7 +186,7 @@ export const ITwinGridMUI = ({ sx={{ display: "grid", gap: 2, - gridTemplateColumns: "repeat(auto-fill, minmax(22.5rem, 1fr))", + gridTemplateColumns: "repeat(auto-fill, minmax(18rem, 1fr))", listStyle: "none", alignItems: "stretch", "& > li": { diff --git a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx index 12d45c0c..f174dc1c 100644 --- a/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx +++ b/packages/modules/imodel-browser/src/mui/containers/iModelGrid/IModelGridMUI.tsx @@ -339,7 +339,7 @@ const IModelGridInternal = ({ sx={{ display: "grid", gap: 2, - gridTemplateColumns: "repeat(auto-fill, minmax(22.5rem, 1fr))", + gridTemplateColumns: "repeat(auto-fill, minmax(18rem, 1fr))", listStyle: "none", alignItems: "stretch", "& > li": { From f7ae41a8d8e1ebac0842969daba4cdad4cc48816 Mon Sep 17 00:00:00 2001 From: Alex Dunae Date: Mon, 15 Jun 2026 15:00:21 -0700 Subject: [PATCH 2/4] change --- .../alex-mui-tweaks_2026-06-15-22-00.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 common/changes/@itwin/imodel-browser-react/alex-mui-tweaks_2026-06-15-22-00.json diff --git a/common/changes/@itwin/imodel-browser-react/alex-mui-tweaks_2026-06-15-22-00.json b/common/changes/@itwin/imodel-browser-react/alex-mui-tweaks_2026-06-15-22-00.json new file mode 100644 index 00000000..cdf81e20 --- /dev/null +++ b/common/changes/@itwin/imodel-browser-react/alex-mui-tweaks_2026-06-15-22-00.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@itwin/imodel-browser-react", + "comment": "Update Stratakit card aspect ratio and title style", + "type": "patch" + } + ], + "packageName": "@itwin/imodel-browser-react" +} \ No newline at end of file From 36bf92ade5cac8e30752adee838df44003fd9a50 Mon Sep 17 00:00:00 2001 From: Alex Dunae Date: Mon, 15 Jun 2026 15:19:19 -0700 Subject: [PATCH 3/4] Add a snapshot test --- .../modules/imodel-browser/jest.config.js | 11 +- .../mui/components/baseCard/BaseCard.test.tsx | 108 +++++ .../__snapshots__/BaseCard.test.tsx.snap | 397 ++++++++++++++++++ .../src/tests/mocks/fileMock.ts | 3 +- .../modules/imodel-browser/tsconfig.test.json | 11 + 5 files changed, 522 insertions(+), 8 deletions(-) create mode 100644 packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx create mode 100644 packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap create mode 100644 packages/modules/imodel-browser/tsconfig.test.json diff --git a/packages/modules/imodel-browser/jest.config.js b/packages/modules/imodel-browser/jest.config.js index 19dae5e6..e5d37251 100644 --- a/packages/modules/imodel-browser/jest.config.js +++ b/packages/modules/imodel-browser/jest.config.js @@ -5,19 +5,16 @@ module.exports = { roots: ["/src"], transform: { - "^.+\\.(ts|tsx)$": [ + "^.+\\.(ts|tsx|js|jsx)$": [ "ts-jest", { - tsconfig: { - module: "CommonJS", - moduleResolution: "Node10", - types: ["jest", "node"], - }, + tsconfig: "./tsconfig.test.json", + diagnostics: false, }, ], }, transformIgnorePatterns: [ - "[/\\\\]node_modules[/\\\\](?!@bentley/ui).+\\.(js|jsx|ts|tsx)$", + "node_modules/(?!(\\.pnpm/(@stratakit|@ariakit|@mui).*|@bentley/ui|@stratakit|@ariakit|@mui))", "^.+\\.module\\.(css|sass|scss)$", ], testEnvironment: "jsdom", diff --git a/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx new file mode 100644 index 00000000..f82f1b04 --- /dev/null +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx @@ -0,0 +1,108 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import "@testing-library/jest-dom"; + +import Avatar from "@mui/material/Avatar"; +import AvatarGroup from "@mui/material/AvatarGroup"; +import Box from "@mui/material/Box"; +import Chip from "@mui/material/Chip"; +import svgPin from "@stratakit/icons/pin.svg"; +import svgSave from "@stratakit/icons/save.svg"; +import svgStatusWarning from "@stratakit/icons/status-warning.svg"; +import { Root } from "@stratakit/mui"; +import { render } from "@testing-library/react"; +import React from "react"; + +import { BaseCard, BaseCardProps } from "./BaseCard"; +import { ThumbnailIconButton } from "./ThumbnailIconButton"; + +const renderBaseCard = (props: Partial = {}) => + render( + + + + ); + +describe("BaseCard", () => { + it("renders with only a title", () => { + const { container } = renderBaseCard(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders with all the props", () => { + const { container } = renderBaseCard({ + description: + "When there is more than one `action` prop they will be rendered as buttons in the footer of the card and the whole card is not clickable.", + subheader: "This is a subheader", + onContextMenu: jest.fn(), + actions: [ + { key: "open", label: "Open", onClick: jest.fn() }, + { key: "share", label: "Share", onClick: jest.fn() }, + { + key: "disabled", + label: "Disabled", + onClick: jest.fn(), + disabled: true, + }, + ], + moreActions: [ + { + key: "open", + label: "Open with", + onClick: jest.fn(), + }, + { key: "share", label: "Share", onClick: jest.fn() }, + { key: "delete", label: "Delete", onClick: jest.fn() }, + { + key: "disabled", + label: "Disabled option", + onClick: jest.fn(), + disabled: true, + }, + ], + + statusIconHref: svgStatusWarning, + thumbnailTopLeft: ( + + + + + + + + + ), + + thumbnailTopRight: ( + <> + + + + ), + thumbnailBottomLeft: , + thumbnailBottomRight: , + }); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders in loading state", () => { + const { container } = renderBaseCard({ loading: true }); + expect(container.firstChild).toMatchSnapshot(); + }); + + it("renders in disabled state", () => { + const { container } = renderBaseCard({ disabled: true }); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap b/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap new file mode 100644 index 00000000..b3c82af5 --- /dev/null +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap @@ -0,0 +1,397 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BaseCard renders in disabled state 1`] = ` +
+
+
+ +
+
+

+ Test Card +

+

+

+
+
+
+
+`; + +exports[`BaseCard renders in loading state 1`] = ` +
+
+
+ +
+
+
+

+ +

+ +

+

+
+
+ +

+ +

+
+
+`; + +exports[`BaseCard renders with all the props 1`] = ` +
+
+
+
+
+
+ + Top Left + +
+
+
+
+ User 1 +
+
+
+
+ User 2 +
+
+
+
+ User 3 +
+
+
+
+
+
+
+ + +
+
+
+ + Bottom left + +
+
+
+
+ + Bottom right + +
+
+
+ +
+
+ +
+
+

+ +

+

+ This is a subheader +

+
+
+ +
+
+
+

+ When there is more than one \`action\` prop they will be rendered as buttons in the footer of the card and the whole card is not clickable. +

+
+
+ + + +
+
+
+`; + +exports[`BaseCard renders with only a title 1`] = ` +
+
+
+ +
+
+

+ Test Card +

+

+

+
+
+
+
+`; diff --git a/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts b/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts index 65e156fb..64565b3c 100644 --- a/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts +++ b/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts @@ -2,4 +2,5 @@ * Copyright (c) Bentley Systems, Incorporated. All rights reserved. * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ -/** Empty file because we are mapping icons to this file */ +/** Mock file for static asset imports (images, SVGs, fonts, etc.) */ +export default "mock-file-stub"; diff --git a/packages/modules/imodel-browser/tsconfig.test.json b/packages/modules/imodel-browser/tsconfig.test.json new file mode 100644 index 00000000..5627b96b --- /dev/null +++ b/packages/modules/imodel-browser/tsconfig.test.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "module": "CommonJS", + "moduleResolution": "Node10", + "types": ["jest", "node"], + "rootDir": "./src", + "outDir": "./esm" + }, + "include": ["./src/**/*.ts*"] +} From 07449485705b9ca765dbedfa081b4e78bbe5d61b Mon Sep 17 00:00:00 2001 From: Alex Dunae Date: Tue, 16 Jun 2026 07:16:08 -0700 Subject: [PATCH 4/4] Simplify --- .../mui/components/baseCard/BaseCard.test.tsx | 10 -- .../__snapshots__/BaseCard.test.tsx.snap | 100 +----------------- .../src/tests/mocks/fileMock.ts | 2 +- 3 files changed, 5 insertions(+), 107 deletions(-) diff --git a/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx index f82f1b04..7312b413 100644 --- a/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx @@ -95,14 +95,4 @@ describe("BaseCard", () => { }); expect(container.firstChild).toMatchSnapshot(); }); - - it("renders in loading state", () => { - const { container } = renderBaseCard({ loading: true }); - expect(container.firstChild).toMatchSnapshot(); - }); - - it("renders in disabled state", () => { - const { container } = renderBaseCard({ disabled: true }); - expect(container.firstChild).toMatchSnapshot(); - }); }); diff --git a/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap b/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap index b3c82af5..d5edf984 100644 --- a/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap @@ -1,97 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BaseCard renders in disabled state 1`] = ` -
-
-
- -
-
-

- Test Card -

-

-

-
-
-
-
-`; - -exports[`BaseCard renders in loading state 1`] = ` -
-
-
- -
-
-
-

- -

- -

-

-
-
- -

- -

-
-
-`; - exports[`BaseCard renders with all the props 1`] = `
@@ -207,7 +115,7 @@ exports[`BaseCard renders with all the props 1`] = ` class="🥝Icon" > @@ -263,7 +171,7 @@ exports[`BaseCard renders with all the props 1`] = ` data-_sk-size="large" >
@@ -310,7 +218,7 @@ exports[`BaseCard renders with all the props 1`] = ` class="🥝Icon" > diff --git a/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts b/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts index 64565b3c..3af7c7f5 100644 --- a/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts +++ b/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts @@ -3,4 +3,4 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ /** Mock file for static asset imports (images, SVGs, fonts, etc.) */ -export default "mock-file-stub"; +export default "mock-static-asset-path";