ModalView quick fix #4978

Br2850 · 2024-10-24T06:56:22Z

What changes are proposed in this pull request?

Increase layout predictiveness of ModalView

How is this patch tested? If it is not, please explain why.

Python Panel locally

Release Notes

Is this a user-facing change that should be mentioned in the release notes?

No. You can skip the rest of this section.
Yes. Give a description of this change to be included in the release
notes for FiftyOne users.

(Details in 1-2 sentences. You can just refer to another PR with a description
if this PR is part of a larger change.)

What areas of FiftyOne does this PR affect?

App: FiftyOne application changes
Build: Build and test infrastructure changes
Core: Core fiftyone Python library changes
Documentation: FiftyOne documentation changes
Other

Summary by CodeRabbit

New Features
- Enhanced modal button behavior with improved default properties and conditional styling.
- Introduced a minimum width for buttons to improve layout consistency.
Improvements
- Updated vertical alignment for modal title text and icon for better visual presentation.
- Refined button enabling logic based on tagging functionality and existing parameters.

coderabbitai · 2024-10-24T06:56:28Z

Walkthrough

The changes in the ModalBase.tsx file focus on updating button properties and improving text alignment within the modal component. The default value for the label property in the modalButtonView has been changed, and the button's padding is now conditionally set. A new minWidth property has been introduced. Enhancements to the Typography component's sx prop have been made for better vertical alignment of the title. Additionally, the logic for enabling or disabling the primary button based on tags has been refined, along with adjustments to the handleSaveTags function.

Changes

File Path	Change Summary
app/packages/components/src/components/ModalBase/ModalBase.tsx	Updated button properties, default label value, conditional padding, added minWidth, enhanced title alignment, refined button disabled logic, and modified handleSaveTags function.

Possibly related PRs

visual tweaks for menu and views in menu #4562: This PR involves visual tweaks for the menu and views, including adding support for padding, which relates to the conditional padding style changes in the ModalBase.tsx.
fix modal navigation bug #4803: This PR addresses a bug related to modal navigation, which is directly relevant to the changes made in the ModalBase.tsx regarding the modal's behavior.
reduce modal action row button size for better fit #4814: This PR modifies the size of buttons in the modal action row, which is related to the changes in button properties and styles in ModalBase.tsx.
increase zIndex of modal sidebar to fix resize bug #4860: This PR increases the z-index of the modal sidebar, which is relevant to the overall modal functionality and behavior discussed in ModalBase.tsx.
fix overlay z-index and overflow for panels #4956: This PR addresses z-index issues for overlays, which could relate to the modal's layout and behavior as described in the changes to ModalBase.tsx.

Suggested labels

app

Suggested reviewers

lanzhenw
imanjra
ritch

🐇 "In the modal where buttons play,
We’ve changed their style in a clever way.
With padding set and titles aligned,
A smoother look you’ll surely find.
Tags now matter, they hold the key,
To enable buttons, as you can see!" 🐇

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 90bd83b and b70dcc2.

📒 Files selected for processing (1)

app/packages/components/src/components/ModalBase/ModalBase.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

app/packages/components/src/components/ModalBase/ModalBase.tsx

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?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 2

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 51d49e8 and 90bd83b.

📒 Files selected for processing (1)

app/packages/components/src/components/ModalBase/ModalBase.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

app/packages/components/src/components/ModalBase/ModalBase.tsx (1)

Pattern **/*.{ts,tsx}: Review the Typescript and React code for conformity with best practices in React, Recoil, Graphql, and Typescript. Highlight any deviations.

🔇 Additional comments (1)

app/packages/components/src/components/ModalBase/ModalBase.tsx (1)

110-111: LGTM! Improved layout flexibility

The addition of configurable padding and minWidth: 0 enhances the button's layout predictability, allowing for better size control.

app/packages/components/src/components/ModalBase/ModalBase.tsx

manivoxel51

🍨

manivoxel51 · 2024-10-24T18:32:15Z

app/packages/components/src/components/ModalBase/ModalBase.tsx

    componentsProps: {
      button: {
        sx: {
          height: props?.height || "100%",
          width: props?.width || "100%",
-          padding: 1,
+          padding: props?.padding || 1,
+          minWidth: 0,


why do you need this?

Yeah, it was a weird edge case. So basically when I try to render ModalView at the top level button, if it is only an Icon then it inherits both the width of normal Button + Icon which was causing a generic Arrow for example to have way too much space & padding

Adding minWidth=0 while also giving flexibility to padding gives the best of both worlds ie., no extra icon padding and can still define additional padding to supplant minWidth on a regular button look

modalView quick fix

90bd83b

Br2850 changed the title ~~[WIP] ModalView quick fix~~ ModalView quick fix Oct 24, 2024

Br2850 requested review from lanzhenw, manivoxel51 and imanjra October 24, 2024 07:04

Br2850 marked this pull request as ready for review October 24, 2024 07:05

coderabbitai bot reviewed Oct 24, 2024

View reviewed changes

app/packages/components/src/components/ModalBase/ModalBase.tsx Show resolved Hide resolved

app/packages/components/src/components/ModalBase/ModalBase.tsx Outdated Show resolved Hide resolved

improvement

b70dcc2

Br2850 requested a review from a team October 24, 2024 10:56

Br2850 self-assigned this Oct 24, 2024

manivoxel51 approved these changes Oct 24, 2024

View reviewed changes

Br2850 merged commit da9a21d into develop Oct 24, 2024
10 of 11 checks passed

Br2850 deleted the fix/modalView branch October 24, 2024 21:45

This was referenced Oct 31, 2024

Merge release/v1.0.2 to develop #5013

Merged

Adds readonly property to PillBadge and Modal button #5032

Merged

design review feedback and backward compatible props for slider #5057

Merged

Merge release/v1.1.0 to develop #5061

Merged

coderabbitai bot mentioned this pull request Nov 8, 2024

allow passing title to ButtonView when disabled #5073

Merged

7 tasks

coderabbitai bot mentioned this pull request Jan 12, 2025

Fix adding new tags in tagging action #5378

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ModalView quick fix #4978

ModalView quick fix #4978

Br2850 commented Oct 24, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2024 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

manivoxel51 left a comment

manivoxel51 Oct 24, 2024

Br2850 Oct 24, 2024

ModalView quick fix #4978

ModalView quick fix #4978

Conversation

Br2850 commented Oct 24, 2024 • edited by coderabbitai bot Loading

What changes are proposed in this pull request?

How is this patch tested? If it is not, please explain why.

Release Notes

Is this a user-facing change that should be mentioned in the release notes?

What areas of FiftyOne does this PR affect?

Summary by CodeRabbit

coderabbitai bot commented Oct 24, 2024 • edited Loading

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

manivoxel51 left a comment

Choose a reason for hiding this comment

manivoxel51 Oct 24, 2024

Choose a reason for hiding this comment

Br2850 Oct 24, 2024

Choose a reason for hiding this comment

Br2850 commented Oct 24, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 24, 2024 •

edited

Loading