Skip to content

Commit

Permalink
[@mantine/core] Fix incorrect ActionIcon.Group, Button.Group and Rati…
Browse files Browse the repository at this point in the history
…ng components RTL styles (#4907)

* [@mantine/core] ActionIcon.Group: Fix border style for RTL

* [@mantine/core] Button.Group: Fix border style for RTL

* [@mantine/core] Rating: Fix clip-path for rating when using fractions on RTL

* [@mantine/core] Rating: Fix code style for RatingItem
m074554n authored Oct 1, 2023
1 parent b03659a commit 4bffeff
Showing 3 changed files with 43 additions and 2 deletions.
18 changes: 18 additions & 0 deletions src/mantine-core/src/components/ActionIcon/ActionIcon.module.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
}

20 changes: 20 additions & 0 deletions src/mantine-core/src/components/Button/Button.module.css
Original file line number Diff line number Diff line change
@@ -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);

}
}
}
}

Original file line number Diff line number Diff line change
@@ -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

0 comments on commit 4bffeff

Please sign in to comment.