diff --git a/src/mantine-core/src/components/ActionIcon/ActionIcon.module.css b/src/mantine-core/src/components/ActionIcon/ActionIcon.module.css index c6a4d13fb0e..941bb3579d4 100644 --- a/src/mantine-core/src/components/ActionIcon/ActionIcon.module.css +++ b/src/mantine-core/src/components/ActionIcon/ActionIcon.module.css @@ -103,6 +103,24 @@ border-right-width: calc(var(--ai-border-width) / 2); border-left-width: calc(var(--ai-border-width) / 2); } + + @mixin rtl { + &:not(:only-child):first-child { + border: var(--ai-bd, rem(1px) solid transparent); + border-radius: var(--ai-radius, var(--mantine-radius-default)); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-left-width: calc(var(--ai-border-width) / 2); + } + + &:not(:only-child):last-child { + border: var(--ai-bd, rem(1px) solid transparent); + border-radius: var(--ai-radius, var(--mantine-radius-default)); + border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-right-width: calc(var(--ai-border-width) / 2); + } + } } } diff --git a/src/mantine-core/src/components/Button/Button.module.css b/src/mantine-core/src/components/Button/Button.module.css index 840443577ad..18d5a175e68 100644 --- a/src/mantine-core/src/components/Button/Button.module.css +++ b/src/mantine-core/src/components/Button/Button.module.css @@ -187,6 +187,26 @@ border-right-width: calc(var(--button-border-width) / 2); border-left-width: calc(var(--button-border-width) / 2); } + + @mixin rtl { + &:not(:only-child):first-child { + border: var(--_button-bd, var(--button-bd, rem(1px) solid transparent)); + border-radius: var(--button-radius, var(--mantine-radius-default)); + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-left-width: calc(var(--button-border-width) / 2); + + } + + &:not(:only-child):last-child { + border: var(--_button-bd, var(--button-bd, rem(1px) solid transparent)); + border-radius: var(--button-radius, var(--mantine-radius-default)); + border-bottom-right-radius: 0; + border-top-right-radius: 0; + border-right-width: calc(var(--button-border-width) / 2); + + } + } } } diff --git a/src/mantine-core/src/components/Rating/RatingItem/RatingItem.tsx b/src/mantine-core/src/components/Rating/RatingItem/RatingItem.tsx index 859975953aa..496b0f06c32 100644 --- a/src/mantine-core/src/components/Rating/RatingItem/RatingItem.tsx +++ b/src/mantine-core/src/components/Rating/RatingItem/RatingItem.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MantineSize, BoxProps, ElementProps, Box } from '../../../core'; +import { MantineSize, BoxProps, ElementProps, Box, useDirection } from '../../../core'; import { StarSymbol } from '../StarSymbol/StarSymbol'; import { useRatingContext } from '../Rating.context'; @@ -35,6 +35,7 @@ export function RatingItem({ const ctx = useRatingContext(); const _fullIcon = typeof fullIcon === 'function' ? fullIcon(value) : fullIcon; const _emptyIcon = typeof emptyIcon === 'function' ? emptyIcon(value) : emptyIcon; + const { dir } = useDirection(); return ( <> @@ -68,7 +69,9 @@ export function RatingItem({ '--rating-symbol-clip-path': fractionValue === 1 ? undefined - : `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)`, + : dir === 'ltr' + ? `inset(0 ${active ? 100 - fractionValue * 100 : 100}% 0 0)` + : `inset(0 0 0 ${active ? 100 - fractionValue * 100 : 100}% )`, }} > {full