archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(components): improve RTL support for input component (#2038)

Browse Source 
* fix(components): improve RTL support for select component

* fix(theme): revise RTL styles

* chore(changeset): remove input package from changeset

---------

Co-authored-by: amirhhashemi <87268103+amirhhashemi@users.noreply.github>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Amir Hossein Hashemi 2024-09-08 15:54:24 +03:30 committed by GitHub
parent f4d16e1e8f
commit deb15078cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/giant-sheep-attend.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
Improved RTL support for the input component

21
packages/core/theme/src/components/input.ts
View File

@ -52,9 +52,8 @@ const input = tv({
"z-10", "z-10",
"hidden", "hidden",
"absolute", "absolute",
"right-3", "end-3",
"rtl:right-auto", "start-auto",
"rtl:left-3",
"appearance-none", "appearance-none",
"outline-none", "outline-none",
"select-none", "select-none",
@ -174,7 +173,7 @@ const input = tv({
base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start", base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
inputWrapper: "flex-1", inputWrapper: "flex-1",
mainWrapper: "flex flex-col", mainWrapper: "flex flex-col",
label: "relative text-foreground pr-2 rtl:pr-0 rtl:pl-2 pointer-events-auto", label: "relative text-foreground pe-2 ps-2 pointer-events-auto",
}, },
inside: { inside: {
label: "text-tiny cursor-text", label: "text-tiny cursor-text",
@ -607,7 +606,7 @@ const input = tv({
"z-20", "z-20",
"top-1/2", "top-1/2",
"-translate-y-1/2", "-translate-y-1/2",
"group-data-[filled-within=true]:left-0", "group-data-[filled-within=true]:start-0",
], ],
}, },
}, },
@ -757,7 +756,7 @@ const input = tv({
isMultiline: false, isMultiline: false,
class: { class: {
label: [ label: [
"left-2", "start-2",
"text-tiny", "text-tiny",
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]", "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
], ],
@ -770,9 +769,8 @@ const input = tv({
isMultiline: false, isMultiline: false,
class: { class: {
label: [ label: [
"left-3", "start-3",
"rtl:left-auto", "end-auto",
"rtl:right-3",
"text-small", "text-small",
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]", "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
], ],
@ -785,9 +783,8 @@ const input = tv({
isMultiline: false, isMultiline: false,
class: { class: {
label: [ label: [
"left-3", "start-3",
"rtl:left-auto", "end-auto",
"rtl:right-3",
"text-medium", "text-medium",
"group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]", "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
], ],