fix: alwaysLTR when endIcon is present

sikka-software · Aug 31, 2024 · a26bfd9 · a26bfd9
1 parent e1db31d
commit a26bfd9
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 11 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.128
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.49.11
+
 ## 0.0.127
 
 ### Patch Changes

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.49.11
+
+### Patch Changes
+
+- Fix `alwaysLTR` while `endIcon` is present in `Input` component
+
 ## 0.49.10
 
 ### Patch Changes

diff --git a/packages/components/elements/input/Input.tsx b/packages/components/elements/input/Input.tsx
@@ -211,13 +211,20 @@ export const Input = forwardRef<HTMLInputElement, InputFieldProps>(
                     className={cn(
                       defaultInputStyle,
                       "focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-0 dark:hawa-text-white",
-                      {
-                        "hawa-pe-9": props.endIcon,
-                        "hawa-ps-9": props.startIcon,
-                        "hawa-pe-[60px]": countPosition === "center",
-                      },
+
+                      props.alwaysLTR
+                        ? {
+                            "hawa-ps-9": props.endIcon,
+                            "hawa-pe-9": props.startIcon,
+                            "hawa-ps-[60px]": countPosition === "center",
+                          }
+                        : {
+                            "hawa-pe-9": props.endIcon,
+                            "hawa-ps-9": props.startIcon,
+                            "hawa-pe-[60px]": countPosition === "center",
+                          },
                       preview && "hawa-border-transparent hawa-bg-transparent hawa-px-0",
-                      props.alwaysLTR && "hawa-text-end",
+                      props.alwaysLTR && props.dir === "rtl" && "hawa-text-end",
                       inputProps?.className,
                     )}
                   />

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.49.10",
+  "version": "0.49.11",
   "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.150
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.49.11
+
 ## 0.26.149
 
 ### Patch Changes

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

diff --git a/packages/storybook/stories/ElementsStories/Input.stories.tsx b/packages/storybook/stories/ElementsStories/Input.stories.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import { Story } from "@storybook/blocks";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Lock, Search } from "lucide-react";
+import { EyeOffIcon, Lock, Search } from "lucide-react";
 
 import { SA, USA } from "@sikka/alam";
 import { Label, Skeleton } from "@sikka/hawa/elements";
@@ -49,7 +49,39 @@ export const Default: Story = {
           </div>
         </div>
         <div className="hawa-flex hawa-flex-row hawa-gap-4">
-          <Input label="Always LTR" placeholder={"Bismillah"} alwaysLTR />
+          <Input
+            label="Always LTR"
+            placeholder={"Bismillah"}
+            alwaysLTR
+            dir={locale === "ar" ? "rtl" : "ltr"}
+          />
+          <Input
+            label="Always LTR + End Icon"
+            placeholder={"Bismillah"}
+            alwaysLTR
+            dir={locale === "ar" ? "rtl" : "ltr"}
+            endIcon={<EyeOffIcon className="hawa-icon" />}
+          />
+          <Input
+            label="Always LTR + Start Icon"
+            placeholder={"Bismillah"}
+            alwaysLTR
+            dir={locale === "ar" ? "rtl" : "ltr"}
+            startIcon={<EyeOffIcon className="hawa-icon" />}
+          />
+          <Input
+            label="End Icon"
+            placeholder={"Bismillah"}
+            dir={locale === "ar" ? "rtl" : "ltr"}
+            endIcon={<EyeOffIcon className="hawa-icon" />}
+          />
+          <Input
+            label="Start Icon"
+            placeholder={"Bismillah"}
+            dir={locale === "ar" ? "rtl" : "ltr"}
+            startIcon={<EyeOffIcon className="hawa-icon" />}
+          />
+          {/* <Input label="Default" placeholder={"Bismillah"} /> */}
         </div>
       </div>
     );