Merge branch 'master' of github.com-rtivital:mantinedev/mantine into 7.3

mantinedev · Dec 2, 2023 · 3efbaa0 · 3efbaa0
2 parents 05ba00a + c671bd5
commit 3efbaa0
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 5 deletions.
diff --git a/docs/src/pages/getting-started.mdx b/docs/src/pages/getting-started.mdx
@@ -215,6 +215,7 @@ that they are up-to-date with the latest Mantine version.
 - [Design files by **Ravn**](https://www.figma.com/community/file/1293978471602433537)
 - [Design files by **In The Zone**](https://www.figma.com/community/file/1067173247578645134)
 - [Design files by **Devias**](https://www.figma.com/community/file/1212329956432440320/Mantine-UI-Design-System---v5.10)
+- [Design files by **AlleyCorp Nord**](https://www.figma.com/community/file/1294398524808646906/mantine-lean-ui-library-alley-corp-nord)
 
 ## License
 

diff --git a/packages/@docs/demos/src/demos/core/NavLink/NavLink.demo.usage.tsx b/packages/@docs/demos/src/demos/core/NavLink/NavLink.demo.usage.tsx
@@ -64,7 +64,9 @@ function Demo() {
       <NavLink
         label="With right section"
         leftSection={<IconGauge size="1rem" stroke={1.5} />}
-        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
+        rightSection={
+          <IconChevronRight size="0.8rem" stroke={1.5} className="mantine-rotate-rtl" />
+        }
       />
       <NavLink label="Disabled" leftSection={<IconCircleOff size="1rem" stroke={1.5} />} disabled />
       <NavLink
@@ -79,20 +81,26 @@ function Demo() {
       <NavLink
         label="Active subtle"
         leftSection={<IconActivity size="1rem" stroke={1.5} />}
-        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
+        rightSection={
+          <IconChevronRight size="0.8rem" stroke={1.5} className="mantine-rotate-rtl" />
+        }
         variant="subtle"
         active
       />
       <NavLink
         label="Active light"
         leftSection={<IconActivity size="1rem" stroke={1.5} />}
-        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
+        rightSection={
+          <IconChevronRight size="0.8rem" stroke={1.5} className="mantine-rotate-rtl" />
+        }
         active
       />
       <NavLink
         label="Active filled"
         leftSection={<IconActivity size="1rem" stroke={1.5} />}
-        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
+        rightSection={
+          <IconChevronRight size="0.8rem" stroke={1.5} className="mantine-rotate-rtl" />
+        }
         variant="filled"
         active
       />

diff --git a/packages/@mantine/core/src/components/Alert/Alert.module.css b/packages/@mantine/core/src/components/Alert/Alert.module.css
@@ -22,6 +22,9 @@
 
 .body {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
 }
 
 .title {
@@ -68,7 +71,6 @@
   overflow: hidden;
   font-size: var(--mantine-font-size-sm);
   color: var(--_message-color, var(--__message-color));
-  margin-top: var(--mantine-spacing-xs);
 
   @mixin light {
     --__message-color: var(--mantine-color-black);

diff --git a/packages/@mantine/core/src/components/Combobox/Combobox.module.css b/packages/@mantine/core/src/components/Combobox/Combobox.module.css
@@ -151,6 +151,11 @@
     @mixin dark {
       --_divider-bg: var(--mantine-color-dark-4);
     }
+
+    @mixin rtl {
+      margin-left: unset;
+      margin-right: var(--mantine-spacing-xs);
+    }
   }
 
   &:only-child {

diff --git a/packages/@mantine/core/src/components/Kbd/Kbd.module.css b/packages/@mantine/core/src/components/Kbd/Kbd.module.css
@@ -23,6 +23,7 @@
   border-bottom-width: rem(3px);
   background-color: var(--_kbd-bg);
   color: var(--_kbd-color);
+  unicode-bidi: embed;
 
   @mixin light {
     --_kbd-border-color: var(--mantine-color-gray-3);

diff --git a/packages/@mantine/core/src/components/Overlay/Overlay.module.css b/packages/@mantine/core/src/components/Overlay/Overlay.module.css
@@ -3,6 +3,7 @@
   position: var(--_overlay-position, absolute);
   background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
   backdrop-filter: var(--overlay-filter);
+  -webkit-backdrop-filter: var(--overlay-filter);
   border-radius: var(--overlay-radius, 0);
   z-index: var(--overlay-z-index);
 

diff --git a/packages/@mantine/core/src/components/Pill/Pill.module.css b/packages/@mantine/core/src/components/Pill/Pill.module.css
@@ -39,6 +39,13 @@
     --_pill-color: var(--mantine-color-black);
   }
 
+
+
+  @mixin rtl {
+    padding-right: 0.8em;
+    padding-left: var(--_pill-padding-right, 0.8em);
+  }
+
   &[data-with-remove] {
     --_pill-padding-right: 0;
   }

diff --git a/packages/@mantine/core/src/components/Switch/Switch.module.css b/packages/@mantine/core/src/components/Switch/Switch.module.css
@@ -129,6 +129,12 @@
   left: var(--_switch-thumb-left, var(--switch-track-label-padding));
   transition: left 150ms ease;
 
+  @mixin rtl {
+    left: unset;
+    transition: right 150ms ease;
+    right: var(--_switch-thumb-left, var(--switch-track-label-padding));
+  }
+
   & > * {
     margin: auto;
   }
@@ -164,7 +170,15 @@
   margin: 0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
   transition: margin 150ms ease;
 
+  @mixin rtl {
+    margin: 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding)) 0 0;
+  }
+
   .input:checked + * > & {
     margin: 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding)) 0 0;
+
+    @mixin rtl {
+      margin: 0 0 0 calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
+    }
   }
 }
diff --git a/packages/@mantine/core/src/components/UnstyledButton/UnstyledButton.module.css b/packages/@mantine/core/src/components/UnstyledButton/UnstyledButton.module.css
@@ -10,4 +10,8 @@
   color: inherit;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
+
+  @mixin rtl {
+    text-align: right;
+  }
 }
diff --git a/packages/@mantine/spotlight/src/Spotlight.module.css b/packages/@mantine/spotlight/src/Spotlight.module.css
@@ -103,6 +103,18 @@
     --_action-section-ml: var(--mantine-spacing-md);
   }
 
+  @mixin rtl {
+    &[data-position='left'] {
+      --_action-section-mr: unset;
+      --_action-section-ml: var(--mantine-spacing-md);
+    }
+
+    &[data-position='right'] {
+      --_action-section-ml: unset;
+      --_action-section-mr: var(--mantine-spacing-md);
+    }
+  }
+
   & > svg {
     display: block;
   }