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>
  );