chore: fix form widgets bugs #38492
chore: fix form widgets bugs #38492
Conversation
WalkthroughThis pull request introduces comprehensive changes across multiple components in the design system and widget implementations. The primary focus is on standardizing text property handling, refactoring input and calendar components, and updating CSS styles. Key modifications include renaming Changes
Sequence DiagramsequenceDiagram
participant User
participant Calendar
participant MonthDropdown
participant YearDropdown
User->>Calendar: Interact with Calendar
Calendar->>MonthDropdown: Request Month Selection
MonthDropdown-->>Calendar: Update Focused Month
Calendar->>YearDropdown: Request Year Selection
YearDropdown-->>Calendar: Update Focused Year
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
the
skip-changelog
|
/ci-test-limit-count run_count=1 update_snapshot=true specs_to_run=cypress/e2e/Regression/ClientSide/Anvil/Widgets/* |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12628013372. |
jsartisan
force-pushed
the
chore/fix-disabled-state
branch
from
46ea6b4 to
3d09e46
Compare
|
/ci-test-limit-count run_count=1 update_snapshot=true specs_to_run=cypress/e2e/Regression/ClientSide/Anvil/Widgets/* |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12629385966. |
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/12630265788. |
|
Deploy-Preview-URL: https://ce-38492.dp.appsmith.com |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.tsx (1)
18-18: Context naming.
Consider renamingstateto something that conveys its role within the Calendar context, such ascalendarState, for improved clarity.app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx (2)
7-22: Year generation approach.
Generating a 41-year range centered on the current year is straightforward and valid. In some cases, you might consider exposing this range as a prop for greater flexibility.
31-46: Appropriate use of Select & ListBoxItem.
UsingselectedKey={20}as the default selects the current year index in your array. Consider adding a comment explaining that index 20 representsfocusedDateif you find teammates are confused about this logic.app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx (1)
9-34: Filtering out invalid months.
Skipping months outsideminValueormaxValueis a good approach. If many months are out of range, you may want to display a message or a disabled option instead, but that’s a design choice.app/client/packages/design-system/widgets/src/components/Calendar/src/styles.module.css (1)
72-76: Effective grid layout.
Using a two-column grid with a gap is a straightforward and responsive design for managing two dropdowns. Consider adding responsive breakpoints if you anticipate narrow screens.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/src/styles.module.css(1 hunks)app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx(3 hunks)app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css(5 hunks)app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx(3 hunks)app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSBaseInputWidget/widget/index.tsx(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/widget/index.tsx(8 hunks)app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/config/autocompleteConfig.ts(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/config/settersConfig.ts(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/widget/helper.ts(2 hunks)app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/widget/index.tsx(4 hunks)app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/autocompleteConfig.ts(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/widget/helpers.ts(1 hunks)app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/widget/index.tsx(7 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/packages/design-system/widgets/src/components/Input/src/styles.module.css
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: chromatic-deployment
- GitHub Check: chromatic-deployment
- GitHub Check: storybook-tests
🔇 Additional comments (54)
app/client/packages/design-system/widgets/src/components/Select/src/SelectTrigger.tsx (2)
5-5: Looks good!Importing
ButtonandSelectValuefromreact-aria-componentsis an elegant approach and aligns with modern UI patterns. No issues found.
Line range hint
22-45: Check accessibility impact of replacingGroupwithdiv.Although replacing
Groupwith a plaindivis structurally simple, ensure that theButtonretains all the necessary ARIA attributes. You might consider adding relevantroleoraria-*attributes on the container to preserve any previously provided accessibility benefits fromGroup.🧰 Tools
🪛 Biome (1.9.4)
[error] 25-25: Avoid redundant
BooleancallIt is not necessary to use
Booleancall when a value will already be coerced to a boolean.
Unsafe fix: Remove redundantBooleancall(lint/complexity/noExtraBooleanCast)
app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx (1)
48-48: Consider verifying cross-browser and layout impact for"pre-wrap"use.
This change preserves whitespace and line breaks. It may also result in unexpected large expansions.✅ Verification successful
white-space: pre-wrapusage is safe and well-tested
The Text component has comprehensive test coverage including visual regression tests, and the style can be overridden if needed.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check all occurrences of "whiteSpace: pre-wrap" and ensure no conflicts with other styling. rg -A 3 $'whiteSpace: "pre-wrap"'Length of output: 409
Script:
#!/bin/bash # Check for Text component tests and stories fd "Text" --type f --exec rg -l "Text" {} \; # Look for component usage rg -A 2 "import.*Text.*from.*design-system"Length of output: 8052
app/client/packages/design-system/widgets/src/components/Input/src/Input.tsx (2)
6-6: Import usage confirmed.The import from "react-aria-components" seems properly declared, making the
HeadlessInputavailable for use.
Line range hint
52-77: Consider accessibility implications when replacing theGroupcomponent with a regular<div>.The
Groupcomponent fromreact-aria-componentsmay provide built-in accessibility attributes or roles. Replacing it with a plain<div>could remove some of these benefits. If maintaining or improving accessibility is a priority, double-check that any needed ARIA roles, labels, or attributes are still in place or otherwise replicated.app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/config/settersConfig.ts (1)
22-22: Looks good!
Renaming the accessor to"text"matches the naming convention used elsewhere. No issues found.app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/config/autocompleteConfig.ts (1)
7-14: Nice rename and addition!
The introduction oftextandrawTextis consistent with the rest of the codebase. Documentation is clear.app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/config/autocompleteConfig.ts (1)
7-14: Renaming totextand refining docs
The updated property name and doc forrawTextare aligned with the currency input's purpose. Great work.app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/config/autocompleteConfig.ts (1)
7-7: Consistent renaming and documentation
SwitchingparsedTexttotextpreserves clarity. No concerns here.app/client/src/modules/ui-builder/ui/wds/WDSBaseInputWidget/widget/index.tsx (1)
59-59: Renamed property aligns with standard usage.
Good move changingparsedTexttotext.app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/widget/helper.ts (6)
73-73: Introducing text property is consistent.
ReplacingparsedTextwithtextmatches the overall rename.
76-76: Required field check looks correct.
Ensures a non-emptytextwhenisRequired.
84-84: Appropriate use of text length limit.
Makes sense to validatemaxCharsagainsttext.
100-100: Retaining existing logic while renaming.
Correctly referencestextin the numeric check.
102-102: Conditional check for minimum value is valid.
Usestextfor value comparison.
109-109: Conditional check for maximum value is valid.
Keeps the numeric constraint logic intact withtext.app/client/src/modules/ui-builder/ui/wds/WDSInputWidget/widget/index.tsx (7)
65-65: Meta property rename is consistent.
Ensures the meta property returnstext.
72-72: Default property mapping refined.
Updatingtextto map fromdefaultTextpreserves behavior.
160-160: Comparing rawText and text is straightforward.
Helps maintain data consistency between them.
163-163: Push update to text after parse is correct.
Retains existing logic for numeric or string values.
170-170: Properly updating text on inputType change.
Maintains accurate state for typed inputs.
193-193: Capturing text on user input.
Pushes updatedtextto meta, effectively syncing.
214-214: Reset logic preserves correct property usage.
Fully resets bothrawTextandtext.app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/widget/index.tsx (11)
120-120: Consistently sets text in meta properties.
Aligns with the general rename totext.
129-129: Default property mapping for text is consistent.
Keeps phone widget behavior uniform.
163-163: Formatting and updating text.
ConvertsrawTextto display-ready phone number.
179-179: Ensures text re-formats on formatting toggle.
Correctly updates meta property.
184-185: Synchronizing defaultText with phone field.
RefreshesrawTextand applies formatting totext.
187-187: Retains consistent parsing logic.
Moves phone composition into the widget’s text property.
194-194: Completes text assignment after re-parsing.
Maintains an updated phone number.
215-215: Regenerates text on ISD code updates.
Properly refreshes phone format with new dial code.
223-223: Conditional logic for user-typed input.
Only formats if the user is actually entering characters.
233-233: OnTextChanged triggers remain functional.
Dynamically updates the phone input meta property.
301-301: Uses text for displayed phone number.
Gracefully leveragesthis.props.textinstead ofparsedText.app/client/src/modules/ui-builder/ui/wds/WDSCurrencyInputWidget/widget/index.tsx (11)
133-133: Consistent renaming totext.
This meta property aligns well with the broader rename fromparsedText.
142-142: Correct update to default text property.
The default property name change fromparsedTexttotextmaintains clarity.
156-158: Appropriate check fortextinstead ofparsedText.
This ensures the widget references the updated property consistently.
195-195: ReplacingparsedTextwithtextinonValueChange.
Keeps consistency in how we handle the input value.
217-217: Deformatting uses the correct property.
Switching toconst text = this.props.textis correct and consistent.
223-223: Updatingtextwith the deformatted value.
Retains consistent usage of thetextproperty.
232-235: Conditional format application remains intact.
Usingthis.props.texthere matches the rename and ensures formatting logic flows correctly.
238-238: Ensuringtextreflects the formatted value.
This final assignment totextis logically consistent.
252-252: Graceful fallback tothis.props.texton errors.
Preserves user input when formatting or parsing fails.
297-297:isTextFormattedreferencingtext.
Approach is straightforward and aligns with the rename.
301-311: Consistent text parsing and formatting.
Renaming tothis.props.textensures uniform usage across the code.app/client/src/modules/ui-builder/ui/wds/WDSPhoneInputWidget/widget/helpers.ts (1)
8-8: Correct reference toprops.text.
Updates the validation function to rely on the new property name consistently.app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.tsx (2)
1-11: Imports look consistent and readable.
No issues found with these import statements; they neatly organize dependencies and align with React best practices.
21-24: Good use of dropdown composition.
Switching from a heading text display to a pair of Month/Year dropdowns is an elegant way to handle date selection. The usage of a dedicated container (styles.monthYearDropdown) further improves clarity.app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx (2)
1-6: Imports and initial setup.
All necessary libraries and types are imported cleanly. This is a good structure for a new component.
24-29: Change handler clarity.
TheonChangefunction properly converts the key to a numeric index and sets the focused date accordingly. The flow is clear and easy to follow.app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx (3)
1-8: Setup for month selection.
Imports appear consistent, and the usage of CSS modules keeps styling maintainable.
35-39: onChange logic.
Straightforward and aligns well with the handling inCalendarYearDropdown.
41-57: Use of defaultSelectedKey.
Selecting the current month by default is intuitive, increasing usability. The code is clear and easy to maintain.app/client/packages/design-system/widgets/src/components/Datepicker/src/Datepicker.tsx (1)
105-105: FieldError placement.
Placing the error message below the popover improves visibility. Be sure to confirm that the popover doesn’t obscure the error in edge cases.
|
/ci-test-limit-count run_count=1 update_snapshot=true |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12646630591. |
|
/ci-test-limit-count run_count=1 update_snapshot=true |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12647076044. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx (1)
25-30: Consider memoizing the title value for performance.The accessibility improvement with title attribute is good. However, toString() is called on every render.
+ const titleText = React.useMemo( + () => children?.toString(), + [children] + ); <Text fontWeight={600} lineClamp={1} size="caption" - title={children?.toString()} + title={titleText} >
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts(1 hunks)app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts(1 hunks)app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts(1 hunks)app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts(1 hunks)app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: chromatic-deployment
- GitHub Check: storybook-tests
- GitHub Check: chromatic-deployment
🔇 Additional comments (4)
app/client/packages/design-system/widgets/src/components/FieldLabel/src/FieldLabel.tsx (1)
25-30: Good addition of text truncation with tooltip!The combination of lineClamp with title attribute improves accessibility for truncated text.
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts (1)
8-8: Verify if issue #36419 is resolved before enabling testsThe test suite has been enabled but the TODO comment still references an unresolved issue. This might lead to unstable tests if the underlying issue persists.
✅ Verification successful
Tests can be safely enabled as issue #36419 is resolved
The referenced issue about snapshot testing infrastructure has been closed, confirming that the environment is now ready for snapshot tests.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if the referenced issue is closed gh issue view 36419 --json state,title,urlLength of output: 217
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts (1)
8-8: Same concern as AnvilInputWidgetSnapshot_spec.tsapp/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts (1)
8-8: Same concern as AnvilInputWidgetSnapshot_spec.ts
| cy.get("input[required]").first().type("123"); | ||
| cy.get("input[required]").first().clear(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve selector specificity and accessibility
Two concerns with the current implementation:
- Using
input[required]instead ofinput[aria-required=true]might affect accessibility - Using
.first()without specific identification could make tests fragile
Consider this improvement:
- cy.get("input[required]").first().type("123");
- cy.get("input[required]").first().clear();
+ cy.get("[data-testid='required-input']").type("123");
+ cy.get("[data-testid='required-input']").clear();Also, ensure the input has both required and aria-required="true" attributes for better accessibility.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| cy.get("input[required]").first().type("123"); | |
| cy.get("input[required]").first().clear(); | |
| cy.get("[data-testid='required-input']").type("123"); | |
| cy.get("[data-testid='required-input']").clear(); |
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx
Outdated
Show resolved
Hide resolved
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx
Outdated
Show resolved
Hide resolved
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
app/client/packages/design-system/widgets/src/components/Calendar/utils/calendar.ts (1)
4-25: Extract YEAR_RANGE as a named constantMove the magic number to a named constant at the module level for better maintainability.
+const YEAR_RANGE = 20; + export function useYearOptions(state: CalendarState) { const formatter = useDateFormatter({ year: "numeric", timeZone: state.timeZone, }); const years: { value: CalendarState["focusedDate"]; formatted: string }[] = []; - const YEAR_RANGE = 20;app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx (1)
26-30: Add aria-label to ListBoxItem for better accessibilityInclude descriptive aria-labels for screen readers.
{years.map((year, i) => ( <ListBoxItem id={i} key={i} + aria-label={`Year ${year.formatted}`} textValue={year.formatted} > {year.formatted} </ListBoxItem> ))}
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts(1 hunks)app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarYearDropdown.tsx(1 hunks)app/client/packages/design-system/widgets/src/components/Calendar/utils/calendar.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts
- app/client/cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts
⏰ Context from checks skipped due to timeout of 90000ms (9)
- GitHub Check: perform-test / rts-build / build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
- GitHub Check: chromatic-deployment
- GitHub Check: chromatic-deployment
- GitHub Check: storybook-tests
🔇 Additional comments (2)
app/client/packages/design-system/widgets/src/components/Calendar/utils/calendar.ts (1)
27-52: LGTM! Well-structured month validation logicThe implementation correctly handles min/max date constraints and month formatting.
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarMonthDropdown.tsx (1)
10-40: LGTM! Well-implemented month dropdownThe component demonstrates good practices with proper typing, accessibility attributes, and state management.
| aria-label="Year" | ||
| onSelectionChange={onChange} | ||
| placeholder="Select Year" | ||
| selectedKey={20} |
There was a problem hiding this comment.
Replace hardcoded selectedKey with dynamic value
The selectedKey should be calculated based on the current year's position in the years array.
- selectedKey={20}
+ selectedKey={years.findIndex(
+ (year) => year.value.compare(state.focusedDate) === 0
+ )}Committable suggestion skipped: line range outside the PR's diff.
github-actions
bot
added
Anvil Pod
/ok-to-test tags="@tag.Anvil"
Fixes #38200
Fixes #38201
Fixes #38409
Fixes #38410
Summary by CodeRabbit
Based on the comprehensive summary, here are the updated release notes:
New Features
Bug Fixes
Documentation
Chores
Style
These release notes capture the key changes across the design system and widget components, focusing on user-facing improvements and internal refinements.
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12650457693
Commit: c41781c
Cypress dashboard.
Tags:
@tag.AnvilSpec:
Tue, 07 Jan 2025 11:41:09 UTC