Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: homepage code example RTL layout #14044

Merged
merged 5 commits into from
Oct 23, 2024
Merged

Fix: homepage code example RTL layout #14044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33e965d
fix: expand chevron for rtl-responsive accordion
wackerow Oct 3, 2024
6c8c263
fix: force mobile code accordion to ltr dir
wackerow Oct 3, 2024
ffb2dfb
fix: desktop code example rtl layout
wackerow Oct 3, 2024
2115a00
fix: move dir[ltr] to desktop skeleton
wackerow Oct 3, 2024
c6b7c03
Merge branch 'dev' into rtl-patches
wackerow Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/CodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
<Button
variant="outline"
onClick={() => onCopy(codeSnippet)}
className="absolute end-4 top-20"
className="absolute right-4 top-20" // Force right, code always LTR
>
{hasCopied ? (
<>
Expand Down
9 changes: 7 additions & 2 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,7 +500,10 @@ const HomePage = ({
</p>
</div>
</AccordionTrigger>
<AccordionContent className="relative border-t">
<AccordionContent
className="relative border-t"
dir="ltr"
>
<Suspense fallback={<SkeletonLines noOfLines={16} />}>
<div className="-m-2 max-h-[50vh] overflow-auto">
<Codeblock
Expand Down Expand Up @@ -532,7 +535,9 @@ const HomePage = ({
setIsOpen={setModalOpen}
title={codeExamples[activeCode].title}
>
<Suspense fallback={<SkeletonLines noOfLines={16} />}>
<Suspense
fallback={<SkeletonLines noOfLines={16} dir="ltr" />}
>
<Codeblock
codeLanguage={codeExamples[activeCode].codeLanguage}
allowCollapse={false}
Expand Down
8 changes: 5 additions & 3 deletions tailwind/ui/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from "react"
import { MdChevronRight } from "react-icons/md"
import * as AccordionPrimitive from "@radix-ui/react-accordion"

import { ChevronNext } from "@/components/Chevron"

import { cn } from "@/lib/utils/cn"

const Accordion = AccordionPrimitive.Root
Expand All @@ -24,14 +25,15 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
"flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]:dir(rtl)>svg]:rotate-90 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",

className
)}
{...props}
>
{children}
{!hideIcon && (
<MdChevronRight className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
<ChevronNext className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
)}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
Expand Down
Loading