Skip to content

Fix: Favorite icon shifts on hover in OS+ #187

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

Merged
arome merged 4 commits into from
Nov 6, 2025
Merged

Fix: Favorite icon shifts on hover in OS+ #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e615244
Fix: Change favorite icon display from block to flex on hover for iTw…
arome Nov 5, 2025
0ce06cc
Fix: Address favorite icon shift on hover in iModel browser
arome Nov 5, 2025
948efbd
Add: Allow user to add custom icons for remove from recents menu option
arome Nov 5, 2025
e8dea17
Add: Support custom icon for "Remove from recents" action in IModelGrid
arome Nov 5, 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 common/changes/@itwin/imodel-browser-react/omar-fix-favorite-hover_2025-11-05-20-19.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": "Fix: favorite icon shift on hover",
"type": "patch"
}
],
"packageName": "@itwin/imodel-browser-react"
}
22 changes: 21 additions & 1 deletion packages/apps/storybook/src/imodel-browser/IModelGrid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
IModelGridProps,
IModelTileProps,
} from "@itwin/imodel-browser-react";
import { SvgApple } from "@itwin/itwinui-icons-react";
import { SvgApple, SvgClose, SvgDelete } from "@itwin/itwinui-icons-react";
import {
Button,
Code,
Expand Down Expand Up @@ -349,3 +349,23 @@ DisableAddToRecents.argTypes = {
cellOverrides: { table: { disable: true } },
className: { table: { disable: true } },
};

export const Recents = Template.bind({});
Recents.args = {
apiOverrides: { serverEnvironmentPrefix: "qa" },
requestType: "recents",
};

export const RecentsWithCustomIcon = Template.bind({});
RecentsWithCustomIcon.args = {
apiOverrides: { serverEnvironmentPrefix: "qa" },
requestType: "recents",
removeFromRecentsIcon: <SvgDelete />,
};

export const RecentsWithCloseIcon = Template.bind({});
RecentsWithCloseIcon.args = {
apiOverrides: { serverEnvironmentPrefix: "qa" },
requestType: "recents",
removeFromRecentsIcon: <SvgClose />,
};
2 changes: 1 addition & 1 deletion packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTile.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@

.iTwinTile:hover {
.iTwinTileFavoriteIcon {
display: block;
display: flex;
}
}
7 changes: 6 additions & 1 deletion packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export interface IModelGridProps {
sortOptions?: IModelSortOptions;
/** List of actions to build for each imodel context menu. */
iModelActions?: ContextMenuBuilderItem<IModelFull>[];
/** Custom icon for the "Remove from recents" context menu action. Only applies when requestType is "recents". */
removeFromRecentsIcon?: JSX.Element;
/** Function (can be a react hook) that returns state for an iModel, returned values will be applied as props to the IModelTile, overrides IModelGrid provided values */
useIndividualState?: (
iModel: IModelFull,
Expand Down Expand Up @@ -126,6 +128,7 @@ const ITwinGridInternal = ({
accessToken,
apiOverrides,
iModelActions,
removeFromRecentsIcon,
onThumbnailClick,
iTwinId,
sortOptions = { sortType: "name", descending: false },
Expand Down Expand Up @@ -195,6 +198,7 @@ const ITwinGridInternal = ({
const removeFromRecentsAction: ContextMenuBuilderItem<IModelFull> = {
key: "remove-from-recents",
children: strings.removeFromRecents,
...(removeFromRecentsIcon && { icon: removeFromRecentsIcon }),
onClick: async (iModel, refetchData) => {
if (!iModel || !accessToken) {
return;
Expand All @@ -208,14 +212,15 @@ const ITwinGridInternal = ({
},
};
return iModelActions
? [...iModelActions, removeFromRecentsAction]
? [removeFromRecentsAction, ...iModelActions]
: [removeFromRecentsAction];
}
return iModelActions;
}, [
requestType,
iModelActions,
strings.removeFromRecents,
removeFromRecentsIcon,
accessToken,
apiOverrides?.serverEnvironmentPrefix,
]);
Expand Down
2 changes: 1 addition & 1 deletion packages/modules/imodel-browser/src/containers/iModelTiles/IModelTile.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@

.iModelTile:hover {
.iModelTileFavoriteIcon {
display: block;
display: flex;
}
}