tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): minor issues with tabs and publish buttons when in RTL (#11282)

Browse Source 
Fixes https://github.com/payloadcms/payload/issues/11162

Our tabs had wrong spacing in RTL.

The publish button with its dropdown had its borders and border radiuses
on the wrong side for RTL and fixed a minor issue in website template
around RTL margins.

Now publish button looks as expected in RTL:

![image](https://github.com/user-attachments/assets/023d27c9-dc14-4aa1-a5e7-b48f498921fd)
This commit is contained in:
Paul
2025-02-19 17:18:01 +00:00
committed by GitHub
parent 009e9085fc
commit e83318b156
4 changed files with 25 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/ui/src/elements/Button/index.scss
View File

@@ -68,11 +68,20 @@
background-color: var(--bg-color);
box-shadow: var(--box-shadow);
border-radius: $style-radius-m;
border-left: 1px solid var(--theme-bg);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
align-items: center;
html:not([dir='RTL']) & {
border-left: 1px solid var(--theme-bg);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
html[dir='RTL'] & {
border-right: 1px solid var(--theme-bg);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:hover,
&:focus-visible,
&:focus,
@@ -236,8 +245,15 @@
}
&--withPopup .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
html:not([dir='RTL']) & {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
html[dir='RTL'] & {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&--style-icon-label,

3
packages/ui/src/fields/Tabs/Tab/index.scss
View File

@@ -6,7 +6,8 @@
@extend %h4;
display: flex;
padding-bottom: base(1);
margin: 0 $baseline 0 0;
margin: 0;
margin-inline-end: $baseline;
cursor: pointer;
opacity: 0.5;
position: relative;

2
templates/website/src/blocks/ArchiveBlock/Component.tsx
View File

@@ -56,7 +56,7 @@ export const ArchiveBlock: React.FC<
<div className="my-16" id={`block-${id}`}>
{introContent && (
<div className="container mb-16">
<RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
<RichText className="ms-0 max-w-[48rem]" data={introContent} enableGutter={false} />
</div>
)}
<CollectionArchive posts={posts} />

2
templates/with-vercel-website/src/blocks/ArchiveBlock/Component.tsx
View File

@@ -56,7 +56,7 @@ export const ArchiveBlock: React.FC<
<div className="my-16" id={`block-${id}`}>
{introContent && (
<div className="container mb-16">
<RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
<RichText className="ms-0 max-w-[48rem]" data={introContent} enableGutter={false} />
</div>
)}
<CollectionArchive posts={posts} />