updated panels,popup styles #72
Conversation
WalkthroughThe updates span various CSS and JavaScript files, primarily focusing on enhancing the styling and functionality of Panel and Popup components. Key changes include adding new classes, adjusting styles, refactoring logic for footer handling, and updating version numbers. These modifications aim to improve the visual presentation and responsiveness of the components across different devices. Changes
Sequence Diagram(s) (Beta)Silently ignored as the changes are too varied for a single sequence diagram. Poem
Warning Review ran into problemsProblems (1)
Tip Early Access Features
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 Configration 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: 2
Outside diff range and nitpick comments (1)
react/ui-components/src/atoms/PopUp.js (1)
Line range hint
188-192: Add keyboard accessibility for close button.+ onKeyUp={(event) => { if (event.key === "Enter") props?.onClose(); }}Adding a
onKeyUpevent handler to the close button improves accessibility by allowing keyboard users to trigger the close action.
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 (11)
- react/css/README.md (1 hunks)
- react/css/src/digitv2/components/panelcard.scss (4 hunks)
- react/css/src/digitv2/components/panels.scss (2 hunks)
- react/css/src/digitv2/components/popUpV2.scss (4 hunks)
- react/example/public/index.html (1 hunks)
- react/ui-components/README.md (1 hunks)
- react/ui-components/src/atoms/Panels.js (5 hunks)
- react/ui-components/src/atoms/PopUp.js (5 hunks)
- react/ui-components/src/hoc/stories/PopUp.stories.js (7 hunks)
- react/ui-components/src/molecules/PanelCard.js (3 hunks)
- react/ui-components/src/molecules/stories/PanelCard.stories.js (4 hunks)
Additional Context Used
LanguageTool (3)
react/css/README.md (2)
Near line 20: Possible missing comma found.
Context: ...it UI's ``` ## Usage After adding the dependency make sure you have this dependency in ...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA
Near line 92: This phrase is duplicated. You should probably use “DIGIT Core” only once.
Context: ...ishnakole-wtt-egov] ## Published from DIGIT Core Digit Core Repo (https://github.com/egovernments/D...
Rule ID: PHRASE_REPETITIONreact/ui-components/README.md (1)
Near line 18: Possible missing comma found.
Context: ...ssion's ``` ## Usage After adding the dependency make sure you have this dependency in ...
Rule ID: AI_HYDRA_LEO_MISSING_COMMA
Markdownlint (23)
react/css/README.md (9)
90: Expected: 0 or 2; Actual: 1
Trailing spaces
92: Expected: 0 or 2; Actual: 1
Trailing spaces
42: Expected: 1; Actual: 0; Above
Headings should be surrounded by blank lines
88: Expected: 1; Actual: 0; Above
Headings should be surrounded by blank lines
92: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines
41: null
Fenced code blocks should be surrounded by blank lines
87: null
Fenced code blocks should be surrounded by blank lines
93: null
Bare URL used
97: null
Files should end with a single newline characterreact/ui-components/README.md (14)
43: Expected: 0 or 2; Actual: 1
Trailing spaces
96: Expected: 0 or 2; Actual: 1
Trailing spaces
57: Expected: 1; Actual: 2
Multiple consecutive blank lines
105: Expected: 1; Actual: 2
Multiple consecutive blank lines
106: Expected: 1; Actual: 3
Multiple consecutive blank lines
126: Expected: 1; Actual: 2
Multiple consecutive blank lines
145: Expected: 1; Actual: 2
Multiple consecutive blank lines
42: Expected: 1; Actual: 0; Below
Headings should be surrounded by blank lines
99: null
Fenced code blocks should be surrounded by blank lines
113: null
Fenced code blocks should be surrounded by blank lines
117: null
Fenced code blocks should be surrounded by blank lines
119: null
Fenced code blocks should be surrounded by blank lines
129: null
Bare URL used
137: null
Bare URL used
Biome (53)
react/ui-components/src/atoms/Panels.js (11)
47-50: This else clause can be omitted because previous branches break early.
73-73: Useless case clause.
94-98: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
100-106: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
104-104: Unnecessary use of boolean literals in conditional expression.
105-105: Unnecessary use of boolean literals in conditional expression.
111-115: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
117-123: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
121-121: Unnecessary use of boolean literals in conditional expression.
122-122: Unnecessary use of boolean literals in conditional expression.
133-133: Missing key property for this element in iterable.
react/ui-components/src/atoms/PopUp.js (6)
76-79: This else clause can be omitted because previous branches break early.
188-192: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
34-34: This hook does not specify all of its dependencies: checkOverflow
34-34: This hook specifies more dependencies than necessary: props.children
50-50: This hook does not specify all of its dependencies: checkOverflow
50-50: This hook does not specify all of its dependencies: onResize
react/ui-components/src/hoc/stories/PopUp.stories.js (20)
110-116: Missing key property for this element in iterable.
117-123: Missing key property for this element in iterable.
127-133: Missing key property for this element in iterable.
137-143: Missing key property for this element in iterable.
144-150: Missing key property for this element in iterable.
151-157: Missing key property for this element in iterable.
158-164: Missing key property for this element in iterable.
165-171: Missing key property for this element in iterable.
172-178: Missing key property for this element in iterable.
182-182: Missing key property for this element in iterable.
183-187: Missing key property for this element in iterable.
191-191: Missing key property for this element in iterable.
192-196: Missing key property for this element in iterable.
197-201: Missing key property for this element in iterable.
202-206: Missing key property for this element in iterable.
207-211: Missing key property for this element in iterable.
212-216: Missing key property for this element in iterable.
217-221: Missing key property for this element in iterable.
222-226: Missing key property for this element in iterable.
227-231: Missing key property for this element in iterable.
react/ui-components/src/molecules/PanelCard.js (5)
91-91: JSX elements without children should be marked as self-closing. In JSX, it is valid for any element to be self-closing.
33-33: This hook does not specify all of its dependencies: checkOverflow
33-33: This hook specifies more dependencies than necessary: props.children
49-49: This hook does not specify all of its dependencies: checkOverflow
49-49: This hook does not specify all of its dependencies: onResize
react/ui-components/src/molecules/stories/PanelCard.stories.js (11)
99-105: Missing key property for this element in iterable.
106-112: Missing key property for this element in iterable.
116-122: Missing key property for this element in iterable.
126-132: Missing key property for this element in iterable.
133-139: Missing key property for this element in iterable.
140-146: Missing key property for this element in iterable.
147-153: Missing key property for this element in iterable.
154-160: Missing key property for this element in iterable.
161-167: Missing key property for this element in iterable.
171-175: Missing key property for this element in iterable.
179-183: Missing key property for this element in iterable.
Additional comments not posted (15)
react/example/public/index.html (1)
12-12: Update to CSS version1.8.2-coreui.21is noted.Ensure that this version is compatible with all other dependencies and does not introduce any breaking changes.
react/css/src/digitv2/components/panels.scss (2)
44-44: Added text centering and normal line-height for better text alignment and readability.
70-70: Normalizing line-height for.digit-panel-responseenhances consistency in text presentation.react/css/README.md (1)
45-45: Changelog updated to reflect the latest version changes.react/ui-components/src/molecules/PanelCard.js (1)
Line range hint
59-117: Refactoring to handlefooterChildrenmore efficiently by checking their presence before slicing and sorting.Ensure that the sorting function correctly prioritizes button types as intended.
react/ui-components/README.md (1)
61-61: Updated changelog to reflect new styles for panel animations.react/ui-components/src/atoms/Panels.js (1)
Line range hint
1-120: Introduction ofuseDeviceTypehook to dynamically adjust UI components based on device size, and updates to animation dimensions based on device type.Verify that the
useDeviceTypehook behaves as expected across all target devices.react/css/src/digitv2/components/panelcard.scss (2)
57-58: Consistent padding adjustments for.with-shadowand.without-footer.The changes ensure that the padding remains consistent across different screen sizes for the
.with-shadowand.without-footerclasses. This is a good practice for maintaining a uniform appearance in responsive designs.Also applies to: 68-69, 79-80
120-120: Use of@applydirective enhances CSS maintainability.The use of the
@applydirective formax-w-fullandflex-wrapin.digit-panelcard-footer-buttonsis a good practice as it makes the CSS more maintainable and readable by grouping common properties.react/css/src/digitv2/components/popUpV2.scss (2)
143-144: Consistent padding adjustments for.with-shadowand.without-footer.Similar to the
panelcard.scss, these changes ensure consistent padding across different screen sizes for the.with-shadowand.without-footerclasses in the popup component, maintaining a uniform appearance.Also applies to: 154-155, 165-166
200-200: Use of@applydirective enhances CSS maintainability.Applying
max-w-fullandflex-wrapto.digit-popup-footer-buttonsusing the@applydirective is beneficial for maintainability and readability, similar to the changes inpanelcard.scss.react/ui-components/src/molecules/stories/PanelCard.stories.js (2)
65-67: AddedfooterStylesprop to control customization.The addition of the
footerStylesprop in the story configuration allows for better customization of the footer styles inPanelCardcomponents, enhancing flexibility for developers.
239-250: Ensure consistency in story configurations.The new stories
SuccessPanelCardWithFooterStylesandErrorPanelCardWithFooterStylesdemonstrate the usage of thefooterStylesprop effectively, providing examples of how to customize footer styles.Also applies to: 314-325
react/ui-components/src/hoc/stories/PopUp.stories.js (2)
75-77: AddedfooterStylesprop to control customization.The addition of the
footerStylesprop in the story configuration forPopUpcomponents is a good practice, allowing for enhanced customization and flexibility in styling.
321-335: Demonstration of footer style customization in stories.The stories
DefaultWithFooterStylesandAlertWithFooterStyleseffectively demonstrate the customization capabilities provided by thefooterStylesprop, showcasing practical examples of its usage.Also applies to: 408-420
There was a problem hiding this comment.
Actionable comments posted: 0
Review Details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- react/ui-components/src/atoms/Panels.js (5 hunks)
- react/ui-components/src/hoc/stories/Panels.stories.js (3 hunks)
- react/ui-components/src/molecules/stories/PanelCard.stories.js (4 hunks)
Files skipped from review due to trivial changes (1)
- react/ui-components/src/hoc/stories/Panels.stories.js
Files skipped from review as they are similar to previous changes (2)
- react/ui-components/src/atoms/Panels.js
- react/ui-components/src/molecules/stories/PanelCard.stories.js
No description provided.