fix(Sonner): correct position on mobile when rtl

sikka-software · Jun 17, 2024 · 2b0e393 · 2b0e393
1 parent 51ad64d
commit 2b0e393
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 7 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.90
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.42.4
+
 ## 0.0.89
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.89",
+  "version": "0.0.90",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
@@ -72,7 +72,7 @@
     content: counter(step);
   }
   .neo-brutalism {
-    @apply shadow-color-primary active:shadow-color-primary-active  border-primary rounded border-2 px-4 py-2 font-bold uppercase transition-all active:translate-x-0.5 active:translate-y-0.5 dark:bg-black;
+    @apply shadow-color-primary active:shadow-color-primary-active border-primary rounded border-2 px-4 py-2 font-bold uppercase transition-all active:translate-x-0.5 active:translate-y-0.5 dark:bg-black;
   }
   .clickable-link {
     @apply text-primary/80 hover:text-primary cursor-pointer underline underline-offset-4 transition-all;
@@ -494,3 +494,10 @@
     @apply px-4;
   }
 }
+
+@media (max-width: 600px) {
+  [data-sonner-toaster] {
+    --mobile-offset: 32px !important;
+    right: var(--mobile-offset) !important ;
+  }
+}
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.42.4
+
+### Patch Changes
+
+- Sonner: fix wrong position on mobile when direction is `rtl`
+
 ## 0.42.3
 
 ### Patch Changes

diff --git a/packages/components/elements/sonner/Sonner.tsx b/packages/components/elements/sonner/Sonner.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 
+import { cn } from "@util/index";
 import { Toaster as SonnerToaster, toast } from "sonner";
 
 import { DirectionType } from "@_types/commonTypes";
@@ -16,8 +17,11 @@ const Sonner = ({ ...props }: SonnerProps) => {
       className="toaster group"
       toastOptions={{
         classNames: {
-          toast:
-            "group toast group-[.toaster]:hawa-bg-background group-[.toaster]:hawa-text-foreground group-[.toaster]:hawa-border-border group-[.toaster]:hawa-shadow-lg",
+          toast: cn(
+            "group  toast group-[.toaster]:hawa-bg-background group-[.toaster]:hawa-text-foreground group-[.toaster]:hawa-border-border group-[.toaster]:hawa-shadow-lg",
+            props.direction === "rtl" &&
+              "!hawa-start-[32px] md:!hawa-start-auto", //To fix on mobile
+          ),
           description: "group-[.toast]:hawa-text-muted-foreground",
           actionButton:
             "group-[.toast]:hawa-bg-primary group-[.toast]:hawa-text-primary-foreground",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.42.3",
+  "version": "0.42.4",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.111
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.42.4
+
 ## 0.26.110
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.110",
+  "version": "0.26.111",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/stories/ElementsStories/Sonner.stories.tsx b/packages/storybook/stories/ElementsStories/Sonner.stories.tsx
@@ -35,7 +35,10 @@ export const Default: Story = {
             richColors
           />
           <DropdownMenu
-            trigger={<Button>Add Toaster</Button>}
+            triggerProps={{
+              asChild: true,
+            }}
+            trigger={<Button asChild>Add Toaster</Button>}
             items={[
               {
                 label: "Info",