Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix action RTL issue #610

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

pmahdicheraghi
Copy link

@pmahdicheraghi pmahdicheraghi commented Sep 5, 2024

Description of Changes:

This pull request updates the layout styling for MaterialDesignContent to enhance flexibility, improve action alignment, and address an RTL layout issue. These updates introduce more dynamic styling that better adapts to various container sizes and alignments.

Key Changes:

  • Removed:

    • marginLeft: 'auto'
    • paddingLeft: '16px'
    • marginRight: '-8px'
  • Added:

    • flexGrow: 1 to allow the action container to dynamically occupy available space within the flexbox layout.
    • justifyContent: 'end' to ensure consistent alignment of actions to the right, particularly improving support for RTL layouts.
    • marginInlineEnd: '-8px' to maintain consistent spacing and visual alignment.

Why This Change Is Necessary:

The previous fixed margin and padding values made the layout less flexible and difficult to adapt to different screen sizes, content lengths, and layout directions (LTR vs. RTL). These changes introduce a more responsive design by leveraging flexGrow and justifyContent, which allows the action container to adjust naturally within its parent element.

There was no way to achieve this level of flexibility or address RTL alignment issues with the previous hardcoded values. This PR resolves these limitations, ensuring the component works consistently across different layouts, languages, and screen sizes.

@pmahdicheraghi
Copy link
Author

Feature Request: Customizable Action Container in MaterialDesignContent

As part of this PR, I’d like to propose making the action container (classes.action) more customizable. Currently, key layout properties like flexGrow, justifyContent, and margin are hardcoded in the action class, which provides a solid default but limits flexibility for specific design needs.

Suggested Enhancement:

Consider exposing the action container's styling through props or theme overrides, allowing developers to adjust properties like:

  • flexGrow
  • justifyContent
  • padding and margin

Why This Is Important:

This change would allow developers to extend the flexibility of MaterialDesignContent to meet custom design requirements without modifying the core component. For example:

  • Projects might require different alignment strategies or spacing for actions in different contexts (e.g., more compact layouts, alternate button arrangements).
  • Allowing custom overrides via props or theme customization will make this component more adaptable for various use cases while maintaining the default behavior for most users.

This enhancement would empower developers to customize the action container's layout, making it a more versatile and user-friendly component.

Using `justifyContent: 'end'` will work in both RTL and LTR directions
Copy link

@symplTech symplTech left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That solve the issue, please accept this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants