Fix: Edit button greyed out #9240
Conversation
WalkthroughThe changes in this pull request focus on the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Outside diff range and nitpick comments (1)
src/components/Patient/PatientDetailsTab/Demography.tsx (1)
Line range hint
415-424: Consider extracting disabled button styling into a reusable classThe disabled button styling pattern is used in multiple places. Consider extracting it into a reusable class in your CSS/Tailwind configuration for better maintainability.
Example approach:
- className={`flex rounded border border-secondary-400 bg-white px-2 py-1 text-sm font-semibold text-green-800 hover:bg-secondary-200 ${!patientData.is_active ? "bg-secondary-200 text-secondary-500" : ""}`} + className={`edit-button ${!patientData.is_active ? "edit-button--disabled" : ""}`}Then define in your CSS:
.edit-button { @apply flex rounded border border-secondary-400 bg-white px-2 py-1 text-sm font-semibold text-green-800 hover:bg-secondary-200; } .edit-button--disabled { @apply bg-secondary-200 text-secondary-500; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/components/Patient/PatientDetailsTab/Demography.tsx(1 hunks)
🔇 Additional comments (2)
src/components/Patient/PatientDetailsTab/Demography.tsx (2)
415-415: LGTM: Edit button styling properly indicates disabled state
The conditional styling ${!patientData.is_active ? "bg-secondary-200 text-secondary-500" : ""} correctly addresses the issue by:
- Adding a gray background (
bg-secondary-200) and text color (text-secondary-500) when patient is discharged - Maintaining consistency with the design system's color palette
- Providing clear visual feedback about the button's disabled state
Line range hint 1-577: Verified: Consistent disabled state handling across all edit buttons
The implementation of disabled states is consistent across all edit buttons in the component:
- Main "Edit Profile" button (line ~390)
- Section-specific edit buttons (line ~415)
- "Add Insurance Details" button (line ~310)
Each button properly implements:
- Visual styling for disabled state
- Functional disabling via
disabledprop - Permission checks via
withPermissionCheck
…m/AdityaJ2305/care_fe into issue/9239/edit_button_greyed_out
|
This is not the shadcn's button. Shadcn's button is present here: https://github.com/ohcnetwork/care_fe/blob/develop/src/components/ui/button.tsx Anyways, #9245 has fixed it in all places. Hence closing this PR in favour of that. |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Screenshot
Merge Checklist
Summary by CodeRabbit
ButtonV2component for improved styling and functionality.These updates aim to provide clearer feedback and a better user experience when interacting with patient details.