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.

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

TD - 3284 Nowrap Typography truncted tooltip #1032

Closed

Conversation

ShushN
Copy link
Contributor

@ShushN ShushN commented Jan 29, 2025

Closes/Contributes TD-3284

Changes

A brief description of what this pull request solves / introduces.

  • Added React.forwardRef to TruncatedTooltip component to allow ref passing.

Maybe a short description of what is not included and will come in future work where appropriate.

Dependencies

NA

UI/UX

NA

Testing notes

NA

Author checklist

Before I request a review:

  • I have reviewed my own code-diff.
  • I have tested the changes in Docker / a deploy-preview.
  • I have assigned the PR to myself or an appropriate delegate.
  • I have added the relevant labels to the PR.
  • I have included appropriate tests.
  • I have checked that the Lint and Test workflows pass on Github.
  • I have populated the deploy-preview with relevant test data.
  • I have tagged a UI/UX designer for review if this PR includes UI/UX changes.

@ShushN ShushN added the bug Something isn't working label Jan 29, 2025
@ShushN ShushN self-assigned this Jan 29, 2025
Copy link

github-actions bot commented Jan 29, 2025

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 70.51% (🎯 66%) 10549 / 14959
🟢 Statements 70.51% (🎯 66%) 10549 / 14959
🟢 Functions 71.09% (🎯 70%) 423 / 595
🟢 Branches 86.11% (🎯 80%) 1042 / 1210
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/TextField/TextField.tsx 88.13% 100% 50% 88.13% 8-15
src/TruncatedTooltip/TruncatedTooltip.tsx 92.04% 64.7% 75% 92.04% 65-66, 68-69, 87-88, 90
Unchanged Files
src/ActionDialog/ActionDialog.tsx 98.33% 50% 100% 98.33% 63
src/AlignHorizontal/AlignHorizontal.tsx 100% 100% 100% 100%
src/AlignVertical/AlignVertical.tsx 100% 100% 100% 100%
src/AppHeader/AppHeader.tsx 100% 83.33% 100% 100%
src/AppLauncher/AppLauncher.tsx 98.84% 90.9% 83.33% 98.84% 79-80
src/AppLayout/AppLayout.tsx 100% 66.66% 87.5% 100%
src/Autocomplete/Autocomplete.tsx 94.9% 81.08% 100% 94.9% 75-77, 79, 123, 180-185
src/Breadcrumbs/Breadcrumbs.tsx 98% 66.66% 100% 98% 31
src/BulletGauge/BulletGauge.tsx 0% 0% 0% 0% 1-84
src/BulletGauge/BulletGaugeClientOnly.tsx 0% 0% 0% 0% 1-19
src/Canvas/Canvas.jsx 93% 33.33% 0% 93% 49-51, 59-62
src/Canvas/Grid.jsx 100% 100% 100% 100%
src/Canvas/ResizeHandle.jsx 100% 100% 100% 100%
src/Canvas/SelectionRectangle.jsx 31.03% 100% 0% 31.03% 10-30
src/Canvas/useResize.jsx 37.14% 100% 25% 37.14% 18-26, 30-33, 37-45
src/Canvas/useSelectionRectangle.jsx 30.15% 50% 25% 30.15% 36-103
src/CanvasItem/CanvasItem.jsx 44.11% 100% 25% 44.11% 35-58, 71-104, 112-120
src/CanvasItem/Rect.jsx 38.12% 25% 40% 38.12% 37-102, 112-176, 184-232, 260-269
src/CanvasItem/ResizeHandle.jsx 10.97% 100% 0% 10.97% 10-89
src/CanvasItem/RotateHandle.jsx 12.76% 100% 0% 12.76% 9-51
src/CanvasItem/utils.jsx 21.03% 100% 9.09% 21.03% 16-20, 48-59, 69-80, 94-269, 318-322, 330-341
src/Card/DetailCard/DetailCard.tsx 0% 0% 0% 0% 1-182
src/Card/SummaryCard/SummaryCard.tsx 0% 0% 0% 0% 1-168
src/Card/TableCard/TableCard.tsx 0% 0% 0% 0% 1-75
src/CardContent/FileDetails/FileDetails.tsx 98.27% 100% 80% 98.27% 43-45
src/CardContent/Infographic/Infographic.tsx 0% 0% 0% 0% 1-125
src/Checkbox/Checkbox.jsx 100% 100% 50% 100%
src/ClientOnly/ClientOnly.tsx 0% 0% 0% 0% 1-17
src/Color/Color.jsx 97.75% 96.87% 90.9% 97.75% 68-69, 82-84
src/ConditionalDialog/ConditionalDialog.tsx 0% 0% 0% 0% 1-29
src/ConfirmProvider/ConfirmContext.tsx 100% 100% 100% 100%
src/ConfirmProvider/ConfirmProvider.tsx 97.05% 100% 100% 97.05% 88, 107-108
src/ConfirmProvider/ConfirmationDialog.tsx 100% 77.77% 100% 100%
src/ConfirmProvider/useConfirm.tsx 100% 100% 100% 100%
src/Copyright/Copyright.jsx 100% 100% 100% 100%
src/DateLabel/DateLabel.tsx 100% 100% 100% 100%
src/DeletableList/DeletableList.tsx 100% 100% 66.66% 100%
src/DialogTitle/DialogTitle.tsx 100% 100% 100% 100%
src/EditLabelDialog/EditLabelDialog.jsx 92% 100% 41.66% 92% 40-46, 125-136
src/FeedbackForm/FeedbackForm.jsx 98.72% 100% 73.33% 98.72% 67-71
src/Figure/Figure.tsx 0% 0% 0% 0% 1-46
src/Figure/FigureClientOnly.tsx 0% 0% 0% 0% 1-16
src/FileLabel/FileLabel.tsx 100% 100% 100% 100%
src/FileUploader/FileUploader.tsx 99.38% 92.3% 50% 99.38% 98
src/FileUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
src/Filter/sortFilterOptions.ts 82.75% 76.92% 100% 82.75% 13-14, 24-25, 45
src/Filter/sortLabelOptions.ts 82.75% 76.92% 100% 82.75% 15-16, 26-27, 47
src/Filter/CheckboxFilter/CheckboxFilter.tsx 95.89% 83.33% 100% 95.89% 75-77
src/Filter/ClearFilterButton/ClearFilterButton.tsx 100% 100% 100% 100%
src/Filter/LabelFilter/LabelFilter.tsx 94.44% 90% 80% 94.44% 85-90
src/Filter/RangeFilter/RangeFilter.jsx 100% 83.33% 100% 100%
src/Filter/SetFilterButton/SetFilterButton.tsx 100% 100% 100% 100%
src/Filter/SidebarFilter/SidebarFilter.tsx 100% 100% 75% 100%
src/FontPicker/FontPicker.jsx 92.34% 62.5% 66.66% 92.34% 160-166, 174, 209-217
src/FontStyle/FontStyle.jsx 100% 100% 50% 100%
src/FormatLabel/FormatLabel.tsx 100% 100% 100% 100%
src/FormatVersionLabel/FormatVersionLabel.tsx 100% 100% 100% 100%
src/IconWithLabel/IconWithLabel.tsx 100% 100% 100% 100%
src/ImageUploader/ImageUploader.tsx 99.24% 95.45% 100% 99.24% 85
src/ImageUploader/__data__/uploaderTestFiles.ts 100% 100% 100% 100%
src/LabelSelector/LabelSelector.jsx 98.19% 96.15% 77.77% 98.19% 141-145, 266-267
src/LabelSelector/DeleteLabelDialog/DeleteLabelDialog.jsx 89.36% 100% 40% 89.36% 23-29
src/LabelSelector/LabelChip/LabelChip.tsx 100% 100% 100% 100%
src/LabelSelector/LabelChipGroup/LabelChipGroup.tsx 30.46% 83.33% 20% 30.46% 52-79, 94-104, 121-175, 189-231
src/LabelSelector/LabelChipGroup/sortLabelChips.ts 100% 100% 100% 100%
src/LazyLoadImage/LazyLoadImage.tsx 0% 0% 0% 0% 1-97
src/LinePlot/LinePlot.tsx 0% 0% 0% 0% 1-190
src/LinePlot/LinePlotClientOnly.tsx 0% 0% 0% 0% 1-19
src/LinkWithPreview/LinkWithPreview.tsx 78.86% 90.9% 37.5% 78.86% 37-38, 43-46, 75-87, 91-102
src/LoadErrorMessage/LoadErrorMessage.tsx 0% 0% 0% 0% 1-182
src/Loading/Loading.jsx 96.77% 50% 100% 96.77% 31
src/LoginForm/LoginForm.jsx 100% 66.66% 50% 100%
src/ModelButton/ModelButton.tsx 97.7% 89.13% 75% 97.7% 163, 165-166, 216-217, 219-220
src/ModelButtonImage/ModelButtonImage.tsx 100% 100% 100% 100%
src/ModelButtonImage/color2filter.ts 95.6% 100% 95.83% 95.6% 60-71
src/MultiColor/MultiColor.jsx 62.91% 80% 25% 62.91% 40, 52-59, 84-87, 91-92, 96-100, 104-108, 112-115, 148-181
src/MultiLabelPopover/MultiLabelPopover.jsx 97.61% 100% 66.66% 97.61% 22-23
src/MultiText/MultiText.jsx 95.5% 100% 71.42% 95.5% 73-76
src/NumberField/NumberField.tsx 96.52% 87.87% 100% 96.52% 99-102
src/PartSelector/PartSelector.tsx 0% 0% 0% 0% 1-111
src/PasswordChangeDialog/PasswordChangeDialog.jsx 95.32% 71.42% 100% 95.32% 102, 142-144, 147-149, 247
src/PasswordChangeForm/PasswordChangeForm.jsx 100% 84.61% 100% 100%
src/PasswordResetForm/PasswordResetForm.jsx 100% 66.66% 100% 100%
src/PrototypePreview/PrototypePreview.tsx 99.54% 76.47% 100% 99.54% 191
src/RadioButtons/RadioButtons.jsx 100% 100% 50% 100%
src/RegistrationForm/RegistrationForm.jsx 100% 76.47% 100% 100%
src/RoadLabel/RoadLabel.tsx 100% 100% 100% 100%
src/RoadMarking/RoadMarking.tsx 0% 0% 0% 0% 1-50
src/RoadMarking/RoadMarkingClientOnly.tsx 0% 0% 0% 0% 1-16
src/RoadPreview/RoadPreview.tsx 100% 84.61% 100% 100%
src/RoadSurface/RoadSurface.tsx 0% 0% 0% 0% 1-20
src/RoadSurface/RoadSurfaceClientOnly.tsx 0% 0% 0% 0% 1-16
src/ScenarioPreview/ScenarioPreview.tsx 96.6% 71.42% 100% 96.6% 33-36, 226-228
src/SearchBar/SearchBar.tsx 100% 100% 100% 100%
src/Select/Select.jsx 100% 100% 50% 100%
src/SelectorButton/SelectorButton.tsx 100% 100% 100% 100%
src/Sidebar/Sidebar.tsx 100% 85.71% 100% 100%
src/Sidebar/SidebarDivider/SidebarDivider.tsx 100% 100% 100% 100%
src/Sidebar/SidebarItem/SidebarItem.tsx 67.39% 80.95% 66.66% 67.39% 63, 101-144, 162-165
src/Slider/Slider.jsx 92.8% 36.84% 60% 92.8% 56-57, 66-70, 102, 106
src/Snackbar/Snackbar.tsx 100% 91.66% 66.66% 100%
src/SnackbarProvider/SnackbarContext.tsx 100% 100% 100% 100%
src/SnackbarProvider/SnackbarProvider.tsx 60.46% 100% 50% 60.46% 32-35, 42-55
src/SnackbarProvider/useSnackbar.ts 22.22% 100% 0% 22.22% 7-13
src/Status/statuses.ts 100% 100% 100% 100%
src/Status/StatusCard/StatusCard.tsx 100% 100% 100% 100%
src/Status/StatusCountBar/StatusCountBar.tsx 94.11% 80% 66.66% 94.11% 63-65
src/Status/StatusCountTable/StatusCountTable.tsx 100% 100% 100% 100%
src/Status/StatusIcon/StatusIcon.tsx 100% 100% 100% 100%
src/Status/StatusLabel/StatusLabel.tsx 100% 100% 100% 100%
src/SurfacePlot/SurfacePlot.tsx 0% 0% 0% 0% 1-149
src/SurfacePlot/SurfacePlotClientOnly.tsx 0% 0% 0% 0% 1-19
src/SvgIcons/AsamLogo/AsamLogo.tsx 100% 100% 100% 100%
src/SvgIcons/CarMakerLogo/CarMakerLogo.tsx 100% 100% 100% 100%
src/SvgIcons/IpgLogo/IpgLogo.tsx 100% 100% 100% 100%
src/SvgIcons/RoadOutlined/RoadOutlined.tsx 100% 100% 100% 100%
src/SvgIcons/TruckMakerLogo/TruckMakerLogo.tsx 100% 100% 100% 100%
src/SvgIcons/VirtoBuild/VirtoBuild.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoData/VirtoData.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoFleet/VirtoFleet.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoID/VirtoID.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoLogo/VirtoLogo.tsx 100% 100% 100% 100%
src/SvgIcons/VirtoMascots/VirtoHeadScratching/VirtoHeadScratching.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoShrugging/VirtoShrugging.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoThinking/VirtoThinking.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoMascots/VirtoThumbsUpLeft/VirtoThumbsUpLeft.tsx 11.11% 100% 0% 11.11% 6-32
src/SvgIcons/VirtoModel/VirtoModel.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoResult/VirtoResult.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoScene/VirtoScene.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoTest/VirtoTest.jsx 100% 100% 100% 100%
src/SvgIcons/VirtoVehicle/VirtoVehicle.jsx 100% 100% 100% 100%
src/SwitchField/SwitchField.jsx 94.44% 90.9% 100% 94.44% 121-124
src/TabPanel/TabPanel.tsx 0% 0% 0% 0% 1-127
src/ThemeProvider/ThemeProvider.tsx 88.15% 100% 20% 88.15% 99-100, 102-103, 105-113, 119-120, 157-158, 169-170, 194-195, 201-204
src/ToggleColorMode/ToggleColorMode.jsx 100% 100% 100% 100%
src/TrafficLight/TrafficLight.tsx 0% 0% 0% 0% 1-107
src/TrafficLight/TrafficLightClientOnly.tsx 0% 0% 0% 0% 1-16
src/TrafficLight/TrafficLightSelector.tsx 0% 0% 0% 0% 1-780
src/TrafficLight/trafficLightUtils.ts 0% 100% 100% 0% 2-40
src/TrafficSign/TrafficSign.tsx 0% 0% 0% 0% 1-33
src/TrafficSign/TrafficSignClientOnly.tsx 0% 0% 0% 0% 1-16
src/TrafficSign/TrafficSignHelper.ts 0% 0% 0% 0% 1-333
src/TransferList/TransferList.tsx 100% 100% 100% 100%
src/TreeViewList/TreeViewList.tsx 0% 0% 0% 0% 1-513
src/Uploader/UploaderHeader.tsx 88.05% 83.33% 100% 88.05% 30-33, 35-38
src/Uploader/useUploader.ts 89.74% 79.16% 100% 89.74% 39-41, 58, 63-67, 103, 181-182
src/UserAvatar/UserAvatar.tsx 100% 90.9% 100% 100%
src/UserAvatar/colorMap.tsx 100% 100% 100% 100%
src/UserLabel/UserLabel.tsx 100% 100% 100% 100%
src/UserMenu/UserMenu.tsx 100% 100% 100% 100%
src/VehiclePath/Marker.tsx 0% 0% 0% 0% 1-15
src/VehiclePath/Vehicle.tsx 0% 0% 0% 0% 1-59
src/VehiclePath/VehiclePath.tsx 0% 0% 0% 0% 1-55
src/VehiclePath/VehiclePathClientOnly.tsx 0% 0% 0% 0% 1-16
src/VehicleSelect/VehicleSelect.tsx 55.5% 88.46% 28.57% 55.5% 90-100, 116-126, 143-187, 204-234
src/VehicleSelectDialog/VehicleSelectDialog.tsx 87.37% 66.66% 25% 87.37% 40-47, 51-54, 92
src/VehicleSelector/VehicleSelector.tsx 57.76% 93.33% 50% 57.76% 99-109, 134-144, 172-228, 260-304
src/VersionChip/VersionChip.tsx 88.7% 70% 100% 88.7% 12, 46, 50, 77-80
src/VersionLabel/VersionLabel.tsx 100% 100% 100% 100%
src/ViewToggleButton/ViewToggleButton.jsx 100% 100% 66.66% 100%
src/VirtoAppHeader/VirtoAppHeader.tsx 100% 100% 71.42% 100%
src/VirtoAppLayout/VirtoAppLayout.tsx 100% 72.72% 70% 100%
src/Wizard/Wizard.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/WizardActions.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/BackButton/BackButton.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/CancelButton/CancelButton.tsx 100% 100% 100% 100%
src/Wizard/WizardActions/NextButton/NextButton.tsx 100% 100% 100% 100%
src/Wizard/WizardContent/WizardContent.tsx 100% 100% 100% 100%
src/Wizard/WizardSteps/WizardSteps.tsx 100% 75% 100% 100%
src/Wizard/WizardSteps/WizardStep/WizardStep.tsx 92.15% 71.42% 100% 92.15% 49-52
src/hover/useDelayedHover.ts 60% 100% 100% 60% 26-40, 50-54
src/utils/common.ts 100% 83.33% 100% 100%
src/utils/form.jsx 100% 100% 100% 100%
src/utils/plotlyConfig.ts 0% 100% 100% 0% 2-34
src/utils/readAsDataURL.ts 80% 100% 66.66% 80% 20-22
Generated in workflow #3302 for commit 62c7b02 by the Vitest Coverage Report Action

Copy link
Contributor

Choose a reason for hiding this comment

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

Why the changes here? Typescript should already be able to infer the theme type?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

In this case we were getting an explicit TypeScript error about theme having an implicit 'any' type. So I added it to resolve the TypeScript error we were seeing. Let me know if you'd prefer a different approach to handle this.

Copy link
Contributor

Choose a reason for hiding this comment

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

So if the types are broken, I suggest that we investigate why the types might be broken rather than trying to override the types in the places that they show that they are broken.

I've done some digging and I think the issue relates to that discussed in this blog where we are trying to use forwardRef with a generic component.

I've gone ahead and tried to fix this for you. I suggest that you test this in VIRTO.

@ShushN ShushN requested a review from Kaustubh9031 January 29, 2025 09:56
@mattcorner
Copy link
Contributor

I'm confused why this branch no targets RUI v11 and has that code merged in. I was expecting this to go in a v10.4.1 release.

lukemojo added a commit that referenced this pull request Jan 30, 2025
@lukemojo lukemojo mentioned this pull request Jan 30, 2025
8 tasks
@lukemojo lukemojo closed this Jan 30, 2025
ShushN pushed a commit that referenced this pull request Jan 31, 2025
* Manually bring in all changes from #1032

* 10.4.1-1

* 10.4.1-2
lukemojo added a commit that referenced this pull request Jan 31, 2025
* bug/TD-3284 nowrap typography truncation ellipsis color issue

* updated request changes by approaching computed style

* Upadted TruncatedTooltip.tsx

* Updated changes requested

* updated comment line for adjacent code

* Update stories to show how to correctly use Link with this component

* Undo change of sx order

* Deleted NoWrapTypography

* Replaced NoWrapTypography with TruncatedTooltip

* Update LabeSelector.jsx

* Replace NoWrapTypography with TruncatedTooltip

* updated changes requested

* Updated changes requested

* Restore NoWrapTypography

* Undo change to grid import

* TD-3355 - Fixes Clear button on Variant select when deselecting (#1033)

* Fixes Clear button on Variant select when deselecting

* Add test to test clear button

* Bumped the test coverage for this file up slightly

* TD-3284 Truncated Tooltip (#1034)

* Manually bring in all changes from #1032

* 10.4.1-1

* 10.4.1-2

---------

Co-authored-by: ShushN <sushmitha.a@ipg-automotive.com>
Co-authored-by: Matthew Corner <matt.corner@ipg-automotive.com>
Co-authored-by: stevenmcsorleyipg <steven.mcsorley@ipg-automotive.uk>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants