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

Jump to bottom

Add rtl support to components #79

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add rtl support to components #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions packages/kit-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
"svelte-preprocess": "^4.10.7",
"svelte2tsx": "^0.5.20",
"tailwindcss": "^3.1.8",
"tailwindcss-rtl": "^0.9.0",
"toml": "^3.0.0",
"tslib": "^2.4.0",
"typescript": "^4.8.4",
Expand Down
6 changes: 3 additions & 3 deletions packages/kit-docs/src/lib/components/base/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
);

$: contentClass = clsx(
'inline-block transform transition-transform duration-100 group-hover:translate-x-0',
arrow === 'left' && '-translate-x-3 ',
arrow === 'right' && 'translate-x-2',
'inline-block transform transition-transform duration-100 rtl:group-hover:-translate-x-0 ltr:group-hover:translate-x-0',
arrow === 'left' && 'rtl:translate-x-2 ltr:-translate-x-2 ',
arrow === 'right' && 'rtl:-translate-x-2 ltr:translate-x-2',
);

$: arrowClass = clsx(
Expand Down
4 changes: 2 additions & 2 deletions packages/kit-docs/src/lib/components/base/Menu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}
</script>

<div class="not-prose relative inline-block text-left">
<div class="not-prose relative inline-block text-start">
<button
id={menuButtonId}
type="button"
Expand Down Expand Up @@ -54,7 +54,7 @@
>
<ul
id={menuId}
class="bg-elevate border-border absolute right-0 z-50 mt-2 w-40 origin-top-right rounded-md border-[1.5px]"
class="bg-elevate border-border absolute end-0 z-50 mt-2 w-40 origin-top-end rounded-md border-[1.5px]"
role="menu"
aria-orientation="vertical"
aria-labelledby={menuButtonId}
Expand Down
2 changes: 1 addition & 1 deletion packages/kit-docs/src/lib/components/base/MenuItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
on:pointerup={() => dispatch('select')}
>
{#if $$slots.icon}
<div class="mr-3 h-5 w-5">
<div class="me-3 h-5 w-5">
<slot name="icon" />
</div>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion packages/kit-docs/src/lib/components/base/Overlay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<div
class={clsx(
'pointer-events-auto fixed top-0 left-0 z-40 backdrop-blur-sm backdrop-filter transition-opacity duration-75',
'pointer-events-auto fixed top-0 start-0 z-40 backdrop-blur-sm backdrop-filter transition-opacity duration-75',
'bg-body/20 dark:bg-body/60',
'h-screen w-screen',
open ? 'visible opacity-100' : 'invisible opacity-0',
Expand Down
6 changes: 3 additions & 3 deletions packages/kit-docs/src/lib/components/base/Popover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}
</script>

<div class="not-prose relative inline-block text-left">
<div class="not-prose relative inline-block text-start">
<button
id={popoverButtonId}
type="button"
Expand Down Expand Up @@ -82,7 +82,7 @@
<div
id={popoverId}
class={clsx(
'absolute -top-4 -right-0 z-50 min-w-[340px] origin-top-right p-5 pt-4',
'absolute -top-4 -end-0 z-50 min-w-[340px] origin-top-end p-5 pt-4',
!open && 'invisible',
)}
tabindex="-1"
Expand All @@ -95,7 +95,7 @@
<div class="flex-1" />
<button
class={clsx(
'text-soft hover:text-inverse mt-[0.125rem] mr-[0.125rem] p-4',
'text-soft hover:text-inverse mt-[0.125rem] me-[0.125rem] p-4',
!open && 'pointer-events-none',
)}
on:pointerup={() => closeDialog()}
Expand Down
4 changes: 2 additions & 2 deletions packages/kit-docs/src/lib/components/base/Select.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="inline-block">
<label
class={clsx(
'relative flex min-w-[85px] items-center border-[1.5px] pl-2.5 pr-1',
'relative flex min-w-[85px] items-center border-[1.5px] ps-2.5 pe-1',
'bg-elevate transform-gpu transition-transform hover:scale-[1.025]',
rounded && 'rounded-md',
raised ? 'py-1' : 'py-0.5',
Expand All @@ -41,7 +41,7 @@
<ArrowDropDownIcon
width={arrowWidth}
height={arrowHeight}
class="ml-[var(--kd-arrow-margin-left,0.1rem)]"
class="me-[var(--kd-arrow-margin-left,0.1rem)]"
/>
</div>

Expand Down
20 changes: 10 additions & 10 deletions packages/kit-docs/src/lib/components/layout/KitDocsLayout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@
<button
id="main-sidebar-button"
type="button"
class="text-soft hover:text-inverse inline-flex justify-center rounded-md p-2 text-sm font-medium"
class="rtl:scale-x-[-1] text-soft hover:text-inverse inline-flex justify-center rounded-md p-2 text-sm font-medium"
aria-controls="main-sidebar"
aria-expanded={ariaBool(isSidebarOpen)}
aria-haspopup="true"
Expand Down Expand Up @@ -147,7 +147,7 @@
<ol
class={clsx(
'text-md text-soft flex items-center whitespace-nowrap leading-6',
showSidebar ? 'mt-px ml-2.5' : 'mt-2',
showSidebar ? 'mt-px ms-2.5' : 'mt-2',
)}
>
{#if $activeCategory && $activeCategory !== '.'}
Expand Down Expand Up @@ -194,11 +194,11 @@
{search}
class={({ open }) =>
clsx(
'self-start fixed top-0 left-0 transform bg-body z-50 border-border border-r scrollbar',
'-translate-x-full transform transition-transform duration-200 ease-out will-change-transform',
'self-start fixed top-0 start-0 transform bg-body z-50 border-border border-e scrollbar',
'rtl:translate-x-full ltr:-translate-x-full transform transition-transform duration-200 ease-out will-change-transform',
'max-h-screen min-h-screen min-w-[var(--kd-sidebar-min-width)] max-w-[var(--kd-sidebar-max-width)]',
'992:translate-x-0 922:block 992:sticky 992:z-0 overflow-y-auto p-[var(--kd-sidebar-padding)]',
open && 'translate-x-0',
'rtl:992:-translate-x-0 ltr:992:translate-x-0 922:block 992:sticky 992:z-0 overflow-y-auto p-[var(--kd-sidebar-padding)]',
open && 'rtl:-translate-x-0 ltr:translate-x-0',
navbar
? '992:top-[var(--kd--navbar-height)] 992:min-h-[calc(100vh-var(--kd--navbar-height))] 992:max-h-[calc(100vh-var(--kd--navbar-height))]'
: '992:top-0 min-h-screen max-h-screen',
Expand Down Expand Up @@ -256,7 +256,7 @@
<div class="992:text-xl flex items-center pt-12 pb-20 text-lg font-semibold text-gray-300">
{#if $previousLink}
<div class="mb-4 flex flex-col items-start">
<span class="text-inverse ml-3 mb-4 inline-block">{$i18nContext.nav.previous}</span>
<span class="text-inverse ms-3 mb-4 inline-block">{$i18nContext.nav.previous}</span>
<Button
arrow="left"
href={$previousLink.slug}
Expand All @@ -269,8 +269,8 @@
{/if}

{#if $nextLink}
<div class="ml-auto mb-4 flex flex-col items-end">
<span class="text-inverse mr-3 mb-4 inline-block">{$i18nContext.nav.next}</span>
<div class="ms-auto mb-4 flex flex-col items-end">
<span class="text-inverse me-3 mb-4 inline-block">{$i18nContext.nav.next}</span>
<Button
arrow="right"
href={$nextLink.slug}
Expand All @@ -291,7 +291,7 @@

<OnThisPage
class={clsx(
'pt-8 pb-8 hidden overflow-auto min-w-[160px] sticky right-4 pr-4 1440:right-6 1440:pr-2 1280:block pl-0.5',
'pt-8 pb-8 hidden overflow-auto min-w-[160px] sticky end-4 pe-4 1440:end-6 1440:pe-2 1280:block ps-0.5',
navbar
? 'top-[var(--kd--navbar-height)] max-h-[calc(100vh-var(--kd--navbar-height))]'
: 'top-0 max-h-screen',
Expand Down
12 changes: 6 additions & 6 deletions packages/kit-docs/src/lib/components/layout/Navbar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

<div class="flex-1" />

<div class="992:hidden -mr-2 flex items-center">
<div class="992:hidden -me-2 flex items-center">
{#if search}
<slot name="search" />
{/if}
Expand Down Expand Up @@ -72,15 +72,15 @@
<div class="flex flex-col space-y-6">
<slot name="popover-options" />
<div class="flex items-center">
Theme
{$i18n.colorScheme.theme}

<label
class="relative ml-4 flex items-center border border-border px-4 py-1 rounded-md focus-within:ring-2"
class="relative ms-4 flex items-center border border-border px-4 py-1 rounded-md focus-within:ring-2"
style="--tw-ring-color: var(--kd-color-focus);"
>
<span class="sr-only">{$i18n.colorScheme.theme}</span>
{uppercaseFirstLetter($colorScheme)}
<ArrowDropDownIcon width="20" height="20" class="ml-1" />
<span>{$i18n.colorScheme[$colorScheme]}</span>
<ArrowDropDownIcon viewBox="0 0 24 20" width="20" height="20" class="ms-1" />
<select
class="absolute inset-0 appearance-none opacity-0"
bind:value={$colorScheme}
Expand Down Expand Up @@ -109,7 +109,7 @@

<slot name="right" />

<div class="hidden 992:flex items-center ml-6">
<div class="hidden 992:flex items-center ms-6">
<slot name="right-alt" />
<ColorSchemeToggle />
</div>
Expand Down
9 changes: 5 additions & 4 deletions packages/kit-docs/src/lib/components/layout/OnThisPage.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@

<div class={clsx('on-this-page scrollbar', __class)} {style}>
{#if headings.length > 1 || headings[0]?.children.length}
<h5 class="text-inverse w-full text-left text-lg font-semibold">{$i18n.toc.title}</h5>
<h5 class="text-inverse w-full text-start text-lg font-semibold">{$i18n.toc.title}</h5>
<ul class="mt-4 space-y-4 px-2">
{#each headings as heading (heading)}
{@const i = calcIndex(heading)}
Expand All @@ -60,16 +60,17 @@
{#each heading.children as childHeader, j (childHeader)}
<li
class={clsx(
'group group flex',
'group group flex items-center',
i + j + 1 === $index ? 'text-brand' : 'text-soft hover:text-inverse',
)}
>
<RightArrowIcon
viewBox="0 0 24 20"
width="20"
height="20"
class="group-hover:text-inverse mt-px mr-px text-soft"
class="group-hover:text-inverse inline-block mt-px me-px text-soft rtl:scale-x-[-1]"
/>
<a href={`#${childHeader.slug}`}>{childHeader.title}</a>
<a class="inline-block" href={`#${childHeader.slug}`}>{childHeader.title}</a>
</li>
{/each}
</ul>
Expand Down
12 changes: 6 additions & 6 deletions packages/kit-docs/src/lib/components/layout/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
bind:this={sidebar}
{style}
>
<div class="992:hidden sticky top-0 left-0 flex items-center">
<div class="992:hidden sticky top-0 start-0 flex items-center">
<div class="flex-1" />
<button
class={clsx('text-soft hover:text-inverse p-4 -mx-6', !open && 'pointer-events-none')}
Expand All @@ -64,7 +64,7 @@

<nav class="992:px-1 scrollbar">
{#if search}
<div class="pointer-events-none sticky top-0 z-0 -ml-0.5 min-h-[80px]">
<div class="pointer-events-none sticky top-0 z-0 -ms-0.5 min-h-[80px]">
<div class="992:h-6 bg-body" />
<div class="bg-body pointer-events-auto relative">
<div class="992:block hidden">
Expand All @@ -88,12 +88,12 @@
{:else}
<div class="mt-10" />
{/if}
<ul class="border-border space-y-3 border-l">
<ul class="border-border space-y-3 border-s">
{#each links as link (link.title + link.slug)}
<li class="first:mt-6">
<a
class={clsx(
'992:py-1 -ml-px flex items-center border-l py-2 pl-4',
'992:py-1 -ms-px flex items-center border-s py-2 ps-4',
isActiveSidebarLink(link, $page.url.pathname)
? 'text-brand font-semibold'
: 'hover:border-inverse focus-visible:border-inverse text-soft hover:text-inverse focus-visible:text-inverse border-transparent font-normal',
Expand All @@ -105,11 +105,11 @@
: ''}
>
{#if link.icon?.before}
<svelte:component this={link.icon.before} class="mr-1" width="24" height="24" />
<svelte:component this={link.icon.before} class="me-1" width="24" height="24" />
{/if}
{link.title}
{#if link.icon?.after}
<svelte:component this={link.icon.after} class="ml-1" width="24" height="24" />
<svelte:component this={link.icon.after} class="ms-1" width="24" height="24" />
{/if}
</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion packages/kit-docs/src/lib/components/social/SocialLink.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
>
<svelte:component
this={icons[type]}
class={clsx($$slots.default && 'mr-2.5')}
class={clsx($$slots.default && 'me-2.5')}
width={iconWidth}
height={iconHeight}
/>
Expand Down
9 changes: 8 additions & 1 deletion packages/kit-docs/src/lib/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,14 +157,21 @@ body {
}

.kit-docs .header-anchor {
margin-left: -1.25em;
padding: 0 0.23em;
font-size: 0.9em;
opacity: 0;
border: 0;
background-color: none;
}

[dir=ltr] .kit-docs .header-anchor {
margin-left: -1.25em;
}

[dir=rtl] .kit-docs .header-anchor {
margin-right: -1.25em;
}

.kit-docs h1:focus,
.kit-docs h2:focus,
.kit-docs h3:focus,
Expand Down
3 changes: 2 additions & 1 deletion packages/kit-docs/tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ module.exports = {
typography: kitDocsTypography,
},
},
plugins: [require('@tailwindcss/typography'), kitDocsVariants],
plugins: [require('@tailwindcss/typography'), kitDocsVariants, require('tailwindcss-rtl'),
],
};

function kitDocsVariants({ addVariant }) {
Expand Down
16 changes: 12 additions & 4 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.