asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(dashboard): support RTL in dashboard (#11252)

Browse Source 
* fix: add direction attribute to components and adjust styles for RTL support

* fix(data-grid): comment it out

* Added useDocumentDirection hook

* refactor: Integrate useDocumentDirection hook

* refactor: Standardize direction prop usage across components

* resolve

* fix: resolve build errors

* fix : remove unused useDocument

* Apply RTL styles for some components

* Create smooth-gorillas-hide.md

* refactor: update some styles for RTL support

---------

Co-authored-by: William Bouchard <46496014+willbouch@users.noreply.github.com>
This commit is contained in:
Ayman Mustafa
2025-09-23 16:11:30 +01:00
committed by GitHub
parent a501364b2d
commit a75cf7fb36
70 changed files with 407 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/admin/dashboard/src/components/table/data-table/data-table-order-by/data-table-order-by.tsx
View File

@@ -4,6 +4,8 @@ import { useState } from "react"
import { useTranslation } from "react-i18next"
import { useSearchParams } from "react-router-dom"
import { useDocumentDirection } from "../../../../hooks/use-document-direction"
export type DataTableOrderByKey<TData> = {
key: keyof TData
label: string
@@ -54,6 +56,7 @@ export const DataTableOrderBy = <TData,>({
}>(initState(searchParams, prefix))
const param = prefix ? `${prefix}_order` : "order"
const { t } = useTranslation()
const direction = useDocumentDirection()
const handleDirChange = (dir: string) => {
setState((prev) => ({
@@ -97,7 +100,7 @@ export const DataTableOrderBy = <TData,>({
}
return (
<DropdownMenu>
<DropdownMenu dir={direction}>
<DropdownMenu.Trigger asChild>
<IconButton size="small">
<DescendingSorting />

6
packages/admin/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
View File

@@ -262,7 +262,7 @@ export const DataTableRoot = <TData,>({
<Table.Cell
key={cell.id}
className={clx({
"!pl-0 !pr-0": shouldRenderAsLink,
"!ps-0 !pe-0": shouldRenderAsLink,
"bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
isStickyCell,
"bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
@@ -288,9 +288,9 @@ export const DataTableRoot = <TData,>({
>
<div
className={clx(
"flex size-full items-center pr-6",
"flex size-full items-center pe-6",
{
"pl-6": isTabableLink && !hasLeftOffset,
"ps-6": isTabableLink && !hasLeftOffset,
}
)}
>