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 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/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..7312b413 --- /dev/null +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx @@ -0,0 +1,98 @@ +/*--------------------------------------------------------------------------------------------- + * 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(); + }); +}); 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/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..d5edf984 --- /dev/null +++ b/packages/modules/imodel-browser/src/mui/components/baseCard/__snapshots__/BaseCard.test.tsx.snap @@ -0,0 +1,305 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +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/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": { diff --git a/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts b/packages/modules/imodel-browser/src/tests/mocks/fileMock.ts index 65e156fb..3af7c7f5 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-static-asset-path"; 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*"] +}