RTL issues

[CripyIce]

What package has an issue?

@mantine/core

Describe the bug

• Icons and text have no space between them - https://mantine.dev/core/segmented-control/#react-node-as-label
  

• No space between text and divider - https://mantine.dev/core/autocomplete/#group-options
  

• Text is too close to the edge - https://mantine.dev/core/pill/
  

• Text stays on the left (also in nested) - https://mantine.dev/core/nav-link/

• No padding for the content - https://mantine.dev/core/tabs/#vertical-tabs-placement
  

• Extra padding on the right - https://mantine.dev/core/drawer/
  

• Extra padding on the right and too close to the edge on the left - https://mantine.dev/core/modal/#fullscreen
  
  

• Positions start/end are not truly working - https://mantine.dev/core/indicator/
  

• Order is incorrect (should be command->shift->m rather then command->m->shift) - https://mantine.dev/core/kbd/

• “Show more” stays in the left - https://mantine.dev/core/spoiler/
  

• Icons and text are too close - https://mantine.dev/others/spotlight/
  

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.2.2

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

None

Do you want to send a pull request with a fix?

None

Possible fix

No response

[abdullahahmeda]

Also for <NavLink />, label has text-align: left (But it should be text-align: right)

[aalirezamoradii]

Also for AppShellNavbar when app shell layout is alt

[abdullahahmeda]

Another issue with <Switch /> is that the direction of the circle inside the switch (it is called the "label" in docs) is not reversed for RTL. The circle should be besides the text if the Switch is active.

This is how it looks in English:

[mmounirf]

@CripyIce

• For the segmented control component, react node as a label demo has ml={10} you can simply change it in your use case.
• For Tabs with vertical placement, the padding comes from pl="sm", you can change the padding on Tabs.Panel component to your desired direction
• For Modal/Drawer it's mentioned in the docs a fix for offset caused by third-party library react-remove-scroll-bar however I couldn't put that in use with RTL, but I was able to fix it by explicitly setting zero right for components' inner element. Here's a demo for Modal and Drawer

For other issues, I'm currently looking into them and hopefully contribute with a PR

[rtivital]

• SegmentedControl demo: Icons and text have no space between them
• Autocomplete: No space between text and divider
• Pill: Text is too close to the edge
• NavLink: Text stays on the left (also in nested)
• Tabs demo: No padding for the content
• Drawer: Extra padding on the right – must be resolved on user side with react-remove-scroll
• Indicator: Positions start/end are not truly working – works as intended
• Kbd: Order is incorrect (should be command->shift->m rather then command->m->shift)
• Spoiler: “Show more” stays in the left
• Spotlight: Icons and text are too close

The fixes will be available with next patch.

[CripyIce]

@rtivital Thanks for fixing those issues!
But regarding Indicator, shouldn't start (for example) work as left in LTR and right in RTL, because right now start is left in both directions.

[rtivital]

Fixed in 7.3.1