updated tooltip #109
updated tooltip #109
Conversation
WalkthroughThis update brings significant enhancements to the Tooltip component in a React application, focusing on improved functionality and styling. Key changes include the introduction of a new customizable Tooltip component, an updated TooltipWrapper for seamless integration, and comprehensive Storybook documentation for better visualization and testing. Additionally, the CSS has been refined to enhance the tooltips' appearance and responsiveness. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Tooltip
participant TooltipWrapper
User->>TooltipWrapper: Interacts with target element
TooltipWrapper->>Tooltip: Render Tooltip with props
Tooltip-->>User: Display Tooltip with customized position
User->>TooltipWrapper: Moves cursor (if followCursor enabled)
TooltipWrapper->>Tooltip: Update position based on cursor
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (7)
react/css/package.jsonis excluded by!**/*.jsonreact/example/package.jsonis excluded by!**/*.jsonreact/modules/Project/package.jsonis excluded by!**/*.jsonreact/modules/core/package.jsonis excluded by!**/*.jsonreact/modules/sample/package.jsonis excluded by!**/*.jsonreact/package.jsonis excluded by!**/*.jsonreact/ui-components/package.jsonis excluded by!**/*.json
Files selected for processing (12)
- react/css/CHANGELOG.md (1 hunks)
- react/css/src/digitv2/components/tooltipwrapperV2.scss (2 hunks)
- react/example/public/index.html (1 hunks)
- react/ui-components/CHANGELOG.md (1 hunks)
- react/ui-components/src/atoms/SelectionCard.js (1 hunks)
- react/ui-components/src/atoms/Tooltip.js (1 hunks)
- react/ui-components/src/atoms/index.js (2 hunks)
- react/ui-components/src/atoms/stories/Tooltip.stories.js (1 hunks)
- react/ui-components/src/index.js (4 hunks)
- react/ui-components/src/molecules/TooltipWrapper.js (5 hunks)
- react/ui-components/src/molecules/index.js (2 hunks)
- react/ui-components/src/molecules/stories/TooltipWrapper.stories.js (1 hunks)
Files skipped from review due to trivial changes (3)
- react/css/CHANGELOG.md
- react/example/public/index.html
- react/ui-components/CHANGELOG.md
Additional comments not posted (28)
react/ui-components/src/atoms/Tooltip.js (1)
18-42: Prop types and default props verification.The prop types and default props are correctly defined. However, ensure that the
placementprop includes all possible values and the default value aligns with the usage.react/ui-components/src/molecules/index.js (1)
19-19: New export for TooltipWrapper.The new export for TooltipWrapper is correctly added and does not affect existing functionality.
Also applies to: 39-40
react/ui-components/src/atoms/SelectionCard.js (1)
81-81: Robust handling ofoptionsarray.The use of optional chaining to handle the
optionsarray ensures robustness and prevents runtime errors.react/ui-components/src/atoms/stories/Tooltip.stories.js (5)
1-3: LGTM!The imports and default export for Storybook configuration are correct.
Also applies to: 5-31
33-44: LGTM!The commonStyles and Color constants are well-defined and follow best practices.
46-50: LGTM!The Template component is well-defined and follows best practices.
52-100: LGTM!The story definitions for Basic, MaxLabel, WithArrow, MaxLabelWithArrow, and CustomStyles are well-defined and follow best practices.
102-129: LGTM!The story definitions for HtmlTooltip and HtmlTooltipWithArrow are well-defined and follow best practices.
react/ui-components/src/molecules/TooltipWrapper.js (5)
1-3: LGTM!The imports and component definition for TooltipWrapper are correct and follow best practices.
Also applies to: 5-23
Line range hint
24-31:
LGTM!The state and refs for managing tooltip visibility and style are well-defined and follow best practices.
Line range hint
32-87:
LGTM!The event handlers for managing tooltip visibility are well-defined and follow best practices.
88-102: LGTM!The useEffect hooks for managing mouse movement event and open state are well-defined and follow best practices.
Line range hint
103-170:
LGTM!The return statement for rendering the TooltipWrapper component and propTypes for validating props are well-defined and follow best practices.
react/ui-components/src/molecules/stories/TooltipWrapper.stories.js (5)
1-4: LGTM!The imports and default export for Storybook configuration are correct and follow best practices.
Also applies to: 6-41
43-55: LGTM!The commonStyles and Color constants are well-defined and follow best practices.
56-60: LGTM!The Template component is well-defined and follows best practices.
62-192: LGTM!The story definitions for Basic, MaxLabel, Positioned, BasicWithArrow, MaxLabelWithArrow, PositionedWithArrow, and WithCustomStyles are well-defined and follow best practices.
194-235: LGTM!The story definitions for HtmlTooltip and HtmlTooltipWithArrow are well-defined and follow best practices.
react/ui-components/src/index.js (2)
9-9: Import statement forTooltipadded.The import statement for
Tooltiphas been correctly added.
263-263: Export statement forTooltipadded.The export statement for
Tooltiphas been correctly added.react/css/src/digitv2/components/tooltipwrapperV2.scss (6)
16-18: Flex properties added to.tooltip-content.The display property has been updated to
flex, withjustify-contentset tocenterandflex-directiontocolumn. These changes improve the alignment and layout of the tooltip content.
41-49: Class.tooltip-content.tooltip-bottom-startadded.The class has been added with properties for positioning the tooltip at the bottom start. These changes enhance the positioning capabilities of the tooltip.
51-54: Class.tooltip-content.tooltip-bottomadded.The class has been added with properties for positioning the tooltip at the bottom. These changes enhance the positioning capabilities of the tooltip.
57-63: Class.tooltip-content.tooltip-bottom-endadded.The class has been added with properties for positioning the tooltip at the bottom end. These changes enhance the positioning capabilities of the tooltip.
66-72: Class.tooltip-content.tooltip-top-startadded.The class has been added with properties for positioning the tooltip at the top start. These changes enhance the positioning capabilities of the tooltip.
75-79: Class.tooltip-content.tooltip-topadded.The class has been added with properties for positioning the tooltip at the top. These changes enhance the positioning capabilities of the tooltip.
react/ui-components/src/atoms/index.js (2)
88-88: Import statement forTooltipadded.The import statement for
Tooltiphas been correctly added.
237-237: Export statement forTooltipadded.The export statement for
Tooltiphas been correctly added.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- react/ui-components/src/atoms/Tooltip.js (1 hunks)
- react/ui-components/src/molecules/TooltipWrapper.js (5 hunks)
Files skipped from review as they are similar to previous changes (1)
- react/ui-components/src/atoms/Tooltip.js
Additional comments not posted (6)
react/ui-components/src/molecules/TooltipWrapper.js (6)
1-3: LGTM! Import statement is correct.The import statement for the
Tooltipcomponent from theatomsdirectory is correct and necessary for the new functionality.
Line range hint
8-23:
LGTM! Enhanced customization and consistency.The new props
style,wrapperClassName, andClassNameenhance customization. The change from single to double quotes forplacementensures consistency.
88-101: LGTM! Correct use of useEffect hook for followCursor.The
useEffecthook correctly adds and removes the event listener for mouse movement, ensuring the tooltip follows the cursor.
109-127: LGTM! Proper application of class names and props.The class names and props are correctly applied to the wrapper div and the
Tooltipcomponent.
Line range hint
138-160:
LGTM! Enhanced flexibility and customization with propTypes.The expanded
placementoptions and the addition of thestyleprop enhance flexibility and customization.
164-166: LGTM! Sensible default props.The default prop for
arrowensures that tooltips will display with arrows unless specified otherwise.
* added selectioncard css change (#107) * Dpg 2443 [0.0.2-beta.20] - 2024-08-02 ### Added - Added css for Tag Component (#108) * added tag component * updated versions * updated with review changes * added iconRender logic * updated tooltip (#109) * updated tooltip * review changes * updated the user type fetch logic * updated versions * resolved version issue * resolved version issue * added flex parameter to the value pair list * Dpg 2312 (#110) * added switch and bottomsheet components * updated versions * added review changes * added flex parameter to the value pair list * added flex parameter to the value pair list * added a max line for toast and added focus node for textfield also * added accordian switch and bottom sheet * added accordian switch and bottom sheet * added color property to override suffix icon color * adding code view plugin to storybook * added code preview for these component in story * fixed some css color related issues of old components * Svg accordion sidebar updates (#111) * added accordion * updated sidebar * updated svgs * updated versions * fixed css issue * updated switch and bottom sheet * updated tab component * added switch theme * fixing toast issue and typography issue * fixed mobilesidebar issue * updated sidebar and added accordion wrapper * updated mobilesidebar css * updated sidebar and added accordion wrapper (#115) * updated sidebar and added accordion wrapper * updated mobilesidebar css * fixed sidebar issue * updated mobilesidebar * updated sidebar and hambuger * added dark theme * added localization * updated tooltip with header and description * updating localization * updating localization * added bottomsheet with its draggable functionality * Added Accordion Animation * added landingpagecard and wrapper components * added menucard and its wrapper components * sidebar-changes * updated versions * updated stories * topbar height update * Selection card update (#124) * updated selectioncard * updated versions * css issue fix-updated css version for components (#125) * updated dependencies of ui component library * updated versions * build * rename same animation name (#127) * rename same animation name * version update --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com> * React component changes (#126) * added tab component * added search functionality for multiselectdropdown * updated landingpagecard * added hover state for menucard * updated stepper * updated preselected label color for radio btns * added stories for color and spacers * updated sidebar * enhancements * uodated versions * review changes * added long text stories * default value for allowMultipleOpen * updated versions * updated tab styles * updated animation name * added review changes * updated version * updated git comments * updated table component * updated matrix card * updated menu card * updated override file * Component enhancements react (#129) * added configuration to remove close icon in chip * added chipsKey as configuration for dropdown chips * fixes * updated versions * updated override file * updated landing page card and selection card story * updated landing page card and selection card story * fixed table issues * fixed table issues * updated util function * updated selection card and landing page card * added otpinput and css changes for landingpagecard (#130) * updated selection card and landing page card * updated selection card and landing page card * resolved code-rabbit comments * updated tooltip component * fixed file upload issue * adding form card component * added filter card component * updated table and filter card component * updated slider component * adding localisation for info * Table molecule (#131) * added table molecule * updated versions * review changes * updated typography * added review changes * updated breadcrumb * updated otpinput * updated accordion * added intermediate state for checkbox * updated icon css in hamburger * added metric card component * updated table molecule props * added accessor for headerData * updated formcard * added review changes * ui components version update * updated table component * updated table component * updated table component * updated slider, form card and divider component * updated slider, form card and divider component * New react components (#133) * added nestedTable, filtercard and formcards * updated versions * updated stories (#134) * updated flutter version * added foundation library to storybook * added iframe widget * Added MaterialUI Icons,Updated Colors and Spacers Stories (#135) * Added MaterialUI Icons,Updated Colors and Spacers Stories * removed material icons dependency * added shpicon in customsvgs (#136) * added shpicon in customsvgs * removed shpicon * updated pr comments * modified iframe widget * updated radio story * updated current branch with develop * updated button, alert card and back button stories * updated code rabbit comments * updated style prop and added chip shadow (#138) * updated lable value field story, selection card story and switch story * updated lable value field story, selection card story and switch story * added manual pagination (#140) * added manual pagination * added mdmsv2 handling in Customdrodpown * updated timeline molecule and atom, added one more state as failure * updated timeline molecule and language page card story * storybook audit fixes for typography,hamburger and sidebar (#142) * storybook audit fixes for typography,hamburger and sidebar * updated breadcrumb * updated breadcrumb story * updated isLast function * fixed build issue * fixed timeline step not showing issue * Build component issue check(#145) * storybook fixes (#146) * storybook fixes * Update react/ui-components/src/atoms/stories/Accordion.stories.js Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * build issue fix (#147) * build issue fix * updated components version * updated paste and backspace logic for OTP Input (#148) * added support for external link navigation (#149) * added support for external link navigation * Fixed Navigation redirection for landing page card if it is an external url. * added privacy component * added initial visible elements as a prop in timeline (#150) * added the changes of the id for every field * revert back the librraies version * Update package.json * Updated privacy policy component * Updated Package version to 0.0.2-dev.2 * reverting to original libraries version (#154) * Updated loader component * updated dependency versions * updated dependency versions * updated dependency versions * updated dependency versions * updated lottie versions * removed required from back button label * changed custom popup return type from bool to dynamic * updated label max char condition * updated stories, added docs story for all components, added loader co… (#156) * updated stories, added docs story for all components, added loader component * updated title * added Iframe component * updated label and menu card * published a new version * fixed year and month calculation from date * fixed year and month calculation from date * fixed year and month calculation from date and published new version * fixed matric card * Storybook updates * Storybook updates * Storybook updates on audit points * added classname and totalCount props in Table * storybook audit fixes-1 (#163) * fixed totalCount issue * updated pop up stories * Switch component checked issue fix (#165) * HCMPRE-1766: fixes Switch component checked issue * version update --------- Co-authored-by: NabeelAyubee <nayubi7@gmail.com> * updated toast offset default * updated dropdown on default value * fixed sync dialog util function * updated label for sync dialog * fixed powered by image * fixed powered by image * updated theme and added footer * fixed sync dialog * updated toast * published a new version with the changes required for main app integration * reverted override to github * version updates * updated css * updated css and inboxserachcomposer * fixed table not taking all width issue * updated error message in privacy component * fixed powered by digit logo loading issue * updated version of digit component * updates * updated versions and other fixes * removed libraries modules. Updated local running flow * Create .gitignore * updates * updated gitignore files * updated component version * updated checkbox component - removed customlabelmarkup (#187) * Checkbox update (#189) * updated checkbox component - removed customlabelmarkup * updated to label tag * updated label for to be dynamic based on the id * Updated id for text dropdwon --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com> * Fixed Storybook audit points (#191) * fixed language selection card alignment issue * fixed utils dialog alignment issue * fixed language card padding * publish a new version with issues fixes * added property to disabled sentence case in dropdown * added property to disabled sentence case in dropdown * fixed table null exception issue * fixed app integration issue * fixed stepper length issue * fixed sidebar not trigger rebuild on change language * fixed sidebar not trigger rebuild on change language * published a new version * added content padding for pop up card * fixed dropdown text not getting clear after rerender * Added id for checkbox input (#218) * fixed stepper alignment issue * Updated table, summary card and published new version * Update digit_table.dart * updated Readme file * updated doc link in stories * updated images * Updating the version and added documentation link (#223) * Updating the version and added documentation link * Updated the readme and changelog content * updated the version script --------- Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com> * Updated readme file * Update introduction_story.dart * Update README.md * Updated documentation link (#225) Co-authored-by: rachana-egov <rachana.singh@egovernment.org> * Updated pub file * resolved build config conflicts * resolved conflicts * updating the scripts * Updated the branch details --------- Co-authored-by: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com> Co-authored-by: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com> Co-authored-by: rachana-egov <rachana.singh@egovernment.org> Co-authored-by: Swathi-eGov <swathi.chatrathi@egovernments.org> Co-authored-by: nabeelmd-eGov <nabeel.md@egovernments.org> Co-authored-by: NabeelAyubee <nayubi7@gmail.com> Co-authored-by: Naveen J <83631045+naveen-egov@users.noreply.github.com> Co-authored-by: Nipun Arora <aroranipun1@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
No description provided.