Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated * to itwinui 3 #141

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

updated * to itwinui 3 #141

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
73d8f25
updated to itwinui 3 and upgraded tiles from legacy props
nimam-bentley Jan 16, 2025
4036a55
changelog
nimam-bentley Jan 16, 2025
563f7fd
update rest of modules to itwin-ui 3.x, and get all tests passing
nimam-bentley Jan 20, 2025
f4b53dc
exhaustive dep warning
nimam-bentley Jan 20, 2025
a40ceab
changelogs
nimam-bentley Jan 20, 2025
db5e7a7
wrap userevents in act
nimam-bentley Jan 20, 2025
64a4b1c
wrap userevents in act
nimam-bentley Jan 20, 2025
3202c29
cleanup
nimam-bentley Jan 24, 2025
0b228ca
cleanup
nimam-bentley Jan 24, 2025
2046e4b
cleanup
nimam-bentley Jan 24, 2025
dade065
mismatch resolve
nimam-bentley Jan 24, 2025
c72c000
fix
nimam-bentley Jan 24, 2025
283a12f
hopefully fix ci timeout
nimam-bentley Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions ...ges/@itwin/imodel-browser-react/nm-update-imodelbrowser-to-itwinui3_2025-01-16-17-25.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@itwin/imodel-browser-react",
"comment": "updade to 3.x",
"type": "patch"
}
],
"packageName": "@itwin/imodel-browser-react"
}
598 changes: 142 additions & 456 deletions common/config/rush/pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions packages/modules/imodel-browser/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@
"esm/**/*"
],
"dependencies": {
"@itwin/itwinui-icons-react": "^2.2.0",
"@itwin/itwinui-react": "^2.12.18",
"@itwin/itwinui-icons-react": "^2.9.0",
"@itwin/itwinui-react": "^3.16.5",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think itiwnui would need to become a peer dep

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated all packages in monorepo

"classnames": "^2.2.6",
"react-intersection-observer": "^8.31.1"
},
Expand Down Expand Up @@ -64,7 +64,6 @@
"jest": "^27.5.1",
"jest-fetch-mock": "^3.0.3",
"msw": "^0.27.1",
"sass": "^1.69.5",
"postcss": "8.4.31",
"prettier": "^2.0.5",
"react": "^18.3.1",
Expand All @@ -75,6 +74,7 @@
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-typescript2": "^0.36.0",
"sass": "^1.69.5",
"stylelint": "^13.6.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-sass-guidelines": "^7.0.0",
Expand Down
74 changes: 74 additions & 0 deletions packages/modules/imodel-browser/pnpm-lock.yaml
View file
Open in desktop
aruniverse marked this conversation as resolved.
Show resolved Hide resolved

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 40 additions & 36 deletions packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,40 +85,45 @@ export const ITwinTile = ({
);
return (
<ThemeProvider theme="inherit">
<Tile
key={iTwin?.id}
name={<span title={iTwin?.displayName}>{iTwin?.displayName}</span>}
description={<span title={iTwin?.number}>{iTwin?.number ?? ""}</span>}
badge={
iTwin?.status &&
iTwin.status.toLocaleLowerCase() !== "active" && (
<Badge
backgroundColor={
iTwin.status.toLocaleLowerCase() === "inactive"
? "#A47854" /** $iui-color-background-oak */
: "#4585A5" /** $iui-color-background-steelblue */
}
<Tile.Wrapper key={iTwin?.id} {...(tileProps ?? {})}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change will cause issue with anyone using the property overrides, as they used to be able to modifiy all the props through useIndidividualState, which infrastructure cloud use, and now we completely loose this ability, it is no longer possible to override anything in the tile, for example, if you want to add information to the bottom of the tile, or change the image to add a saved view drop down, that is no longer possible. I dont think this is a viable solution for this particular package.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, if we really need thos, we need to take into account the tile props and redistribute them within this Tile.Wrapper elements as https://github.com/iTwin/iTwinUI/blob/5e310430f93094ff6aaa2bf1255d8a54cf5a103c/packages/itwinui-react/src/core/Tile/Tile.tsx#L544 is already doing.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, if we really need thos, we need to take into account the tile props and redistribute them within this Tile.Wrapper elements as iTwin/iTwinUI@5e31043/packages/itwinui-react/src/core/Tile/Tile.tsx#L544 is already doing.

I believe I did it in the same way, the remaining props are tileProps which are spread in the Tile.Wrapper component

<Tile.Action
onClick={() => onThumbnailClick?.(iTwin)}
aria-label={
onThumbnailClick ? `${strings.navigateToITwin} ${iTwin?.id}` : ""
}
>
<Tile.ThumbnailArea>
<Tile.BadgeContainer>
{iTwin?.status &&
iTwin.status.toLocaleLowerCase() !== "active" && (
<Badge
backgroundColor={
iTwin.status.toLocaleLowerCase() === "inactive"
? "oak"
: "steelblue"
}
>
{iTwin.status.toLocaleLowerCase() === "inactive"
? strings.inactiveBadge
: strings.trialBadge}
</Badge>
)}
</Tile.BadgeContainer>
<Tile.ThumbnailPicture
style={{ cursor: onThumbnailClick ? "pointer" : "auto" }}
>
{iTwin.status.toLocaleLowerCase() === "inactive"
? strings.inactiveBadge
: strings.trialBadge}
</Badge>
)
}
moreOptions={moreOptions}
thumbnail={
<div
role="button"
aria-label={
onThumbnailClick ? `${strings.navigateToITwin} ${iTwin?.id}` : ""
}
onClick={() => onThumbnailClick?.(iTwin)}
style={{ cursor: onThumbnailClick ? "pointer" : "auto" }}
>
<ITwinIcon />
</div>
}
rightIcon={
<ITwinIcon />
</Tile.ThumbnailPicture>
</Tile.ThumbnailArea>
</Tile.Action>
<Tile.Name>
<Tile.NameLabel>{iTwin?.displayName}</Tile.NameLabel>
</Tile.Name>
<Tile.ContentArea>
<Tile.Description>{iTwin?.number ?? ""}</Tile.Description>
</Tile.ContentArea>
<Tile.MoreOptions>{moreOptions}</Tile.MoreOptions>
<Tile.Buttons>
<IconButton
aria-label={
isFavorite ? strings.removeFromFavorites : strings.addToFavorites
Expand All @@ -132,9 +137,8 @@ export const ITwinTile = ({
>
{isFavorite ? <SvgStar /> : <SvgStarHollow />}
</IconButton>
}
{...(tileProps ?? {})}
/>
</Tile.Buttons>
</Tile.Wrapper>
</ThemeProvider>
);
};
45 changes: 18 additions & 27 deletions packages/modules/imodel-browser/src/containers/iModelThumbnail/IModelThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export interface IModelThumbnailProps {
/** Clickable iModel thumbnail, fetched from the servers */
export const IModelThumbnail = ({
iModelId,
onClick,
accessToken,
apiOverrides,
className,
Expand All @@ -44,31 +43,23 @@ export const IModelThumbnail = ({
inView ? accessToken : undefined,
apiOverrides
);
return (
<div
role="button"
aria-label={`Select iModel ${iModelId}`}
onClick={() => onClick?.(iModelId)}
>
{thumbnail ? (
<img
className={classNames("iac-thumbnail", className)}
style={{
width: "100%",
}}
id="base64image"
src={thumbnail ?? ""}
alt=""
/>
) : (
<Text
as="p"
variant="body"
ref={ref}
isSkeleton={true}
style={{ height: "100%", width: "100%", margin: 0 }}
></Text>
)}
</div>
return thumbnail ? (
<img
className={classNames("iac-thumbnail", className)}
style={{
width: "100%",
}}
id="base64image"
src={thumbnail ?? ""}
alt=""
/>
) : (
<Text
as="p"
variant="body"
ref={ref}
isSkeleton={true}
style={{ height: "100%", width: "100%", margin: 0 }}
></Text>
);
};
36 changes: 16 additions & 20 deletions packages/modules/imodel-browser/src/containers/iModelTiles/IModelGhostTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,24 @@ import React, { forwardRef } from "react";
export const IModelGhostTile = forwardRef<HTMLDivElement>((props, ref) => {
return (
<ThemeProvider ref={ref} theme="inherit" {...props}>
<Tile
name={
<span
className={"iui-skeleton"}
style={{ width: "180px", margin: 0 }}
>
<br />
</span>
}
description={
<span className={"iui-skeleton"} style={{ width: "100%" }}>
<br />
<br />
</span>
}
thumbnail={
<span
<Tile.Wrapper>
<Tile.Name
className={"iui-skeleton"}
style={{ width: "180px", margin: 0 }}
>
<br />
</Tile.Name>
<Tile.Description className={"iui-skeleton"} style={{ width: "100%" }}>
<br />
<br />
</Tile.Description>
<Tile.ThumbnailArea>
<Tile.ThumbnailPicture
className={"iui-skeleton"}
style={{ height: "100%", width: "100%", margin: 0 }}
></span>
}
/>
/>
</Tile.ThumbnailArea>
</Tile.Wrapper>
</ThemeProvider>
);
});
40 changes: 20 additions & 20 deletions packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,26 +62,26 @@ export const IModelTile = ({
: undefined;
return (
<ThemeProvider theme="inherit">
<Tile
key={iModel?.id}
name={<span title={iModel?.displayName}>{iModel?.displayName}</span>}
description={
<span title={iModel?.description ?? ""}>
{iModel?.description ?? ""}
</span>
}
moreOptions={moreOptions}
thumbnail={
<IModelThumbnail
iModelId={iModel?.id}
accessToken={accessToken}
onClick={() => onThumbnailClick?.(iModel)}
apiOverrides={thumbnailApiOverride}
/>
}
className="iac-tile"
{...(tileProps ?? {})}
/>
<Tile.Wrapper key={iModel?.id} {...(tileProps ?? {})}>
<Tile.Action
onClick={() => onThumbnailClick?.(iModel)}
aria-label={`Select iModel ${iModel.id}`}
>
<Tile.ThumbnailArea>
<Tile.ThumbnailPicture>
<IModelThumbnail
iModelId={iModel?.id}
accessToken={accessToken}
apiOverrides={thumbnailApiOverride}
/>
</Tile.ThumbnailPicture>
</Tile.ThumbnailArea>
</Tile.Action>
<Tile.Name>
<Tile.NameLabel>{iModel?.displayName}</Tile.NameLabel>
</Tile.Name>
<Tile.MoreOptions>{moreOptions}</Tile.MoreOptions>
</Tile.Wrapper>
</ThemeProvider>
);
};
Loading