Skip to content

Multi-directional layout #4739

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

Open
yousefelgoharyx wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Multi-directional layout #4739

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
492d658
add loading indicator to sidebar links
yousefelgoharyx May 26, 2022
52a7997
Merge branch 'main' of https://github.com/reactjs/reactjs.org
yousefelgoharyx Jun 5, 2022
253e493
Merge branch 'main' of https://github.com/reactjs/reactjs.org into rt…
yousefelgoharyx Jun 8, 2022
18c6e89
Merge branch 'main' of https://github.com/reactjs/reactjs.org into rt…
yousefelgoharyx Jun 11, 2022
1400a3d
multi-directional layout
yousefelgoharyx Jun 12, 2022
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
13 changes: 2 additions & 11 deletions beta/src/components/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import * as React from 'react';
import {useRouteMeta} from 'components/Layout/useRouteMeta';
import Link from 'next/link';
import {IconChevron} from './Icon/IconChevron';

function Breadcrumbs() {
const {breadcrumbs} = useRouteMeta();
Expand All @@ -22,17 +23,7 @@ function Breadcrumbs() {
</a>
</Link>
<span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M6.86612 13.6161C6.37796 14.1043 6.37796 14.8957 6.86612 15.3839C7.35427 15.872 8.14572 15.872 8.63388 15.3839L13.1339 10.8839C13.622 10.3957 13.622 9.60428 13.1339 9.11612L8.63388 4.61612C8.14572 4.12797 7.35427 4.12797 6.86612 4.61612C6.37796 5.10428 6.37796 5.89573 6.86612 6.38388L10.4822 10L6.86612 13.6161Z"
fill="currentColor"
/>
</svg>
<IconChevron displayDirection="right" />
</span>
</React.Fragment>
</div>
Expand Down
7 changes: 6 additions & 1 deletion beta/src/components/Layout/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,12 @@ export default function Nav() {
</a>
</NextLink>
<div className="lg:w-full leading-loose hidden sm:flex flex-initial items-center h-auto pr-5 lg:pr-5 pt-0.5">
<div className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-xs whitespace-nowrap">
<div
onClick={() => {
if (document.dir === 'rtl') document.dir = 'ltr';
else document.dir = 'rtl';
}}
className="px-1 mb-px bg-highlight dark:bg-highlight-dark rounded text-link dark:text-link-dark uppercase font-bold tracking-wide text-xs whitespace-nowrap">
Beta
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion beta/src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {Html, Head, Main, NextScript} from 'next/document';
const MyDocument = () => {
// @todo specify language in HTML?
return (
<Html lang="en">
<Html lang="ar" dir="rtl">
<Head />
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
<script
Expand Down
10 changes: 10 additions & 0 deletions beta/src/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,10 @@ html.dark .code-step * {
/* Space for the anchor */
padding-right: 1em;
}
[dir='rtl'] .mdx-heading {
padding-left: 1em;
padding-right: 0;
}
.mdx-heading:before {
height: 6rem;
margin-top: -6rem;
Expand Down Expand Up @@ -265,6 +269,7 @@ html.dark .code-step * {
align-items: stretch;
gap: 42px;
}

ol.mdx-illustration-block {
gap: 60px;
}
Expand Down Expand Up @@ -297,6 +302,11 @@ ol.mdx-illustration-block {
height: 49px;
background: center / contain no-repeat url('/images/g_arrow.png');
}
[dir='rtl'] .mdx-illustration-block li:after {
transform: rotate(180deg);
right: auto;
left: 100%;
}
.mdx-illustration-block li:first-child:after {
content: ' ';
display: none;
Expand Down
258 changes: 257 additions & 1 deletion beta/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,271 @@
* Copyright (c) Facebook, Inc. and its affiliates.
*/

const plugin = require('tailwindcss/plugin');

const RTLUtils = {
'[dir="rtl"] .text-left': {
'text-align': 'right',
},
'[dir="ltr"] .text-left': {
'text-align': 'left',
},

'[dir="rtl"] .text-right': {
'text-align': 'left',
},
'[dir="ltr"] .text-right': {
'text-align': 'right',
},

'[dir="rtl"] .-rotate-90': {
'--tw-rotate': '90deg',
},
'[dir="ltr"] .-rotate-90': {
'--tw-rotate': '-90deg',
},
'[dir="rtl"] .rotate-90': {
'--tw-rotate': '-90deg',
},
'[dir="ltr"] .rotate-90': {
'--tw-rotate': '90deg',
},
};

const generatePaddingUtils = (spacing) => {
const spacingUtils = [{}, {}, {}, {}, {}];
for (const psize in spacing) {
let size = psize;
if (size.includes('.')) size = psize.replace('.', `\\.`);

if (size.toString() !== 'px') {
spacingUtils[0][`[dir='rtl'] .pr-${size}`] = {
'padding-left': spacing[psize],
};
spacingUtils[0][`[dir='rtl'] .-pr-${size}`] = {
'padding-left': '-' + spacing[psize],
};

spacingUtils[0][`[dir='rtl'] .pl-${size}`] = {
'padding-right': spacing[psize],
};
spacingUtils[0][`[dir='rtl'] .-pl-${size}`] = {
'padding-right': '-' + spacing[psize],
};

spacingUtils[0][`[dir='ltr'] .pr-${size}`] = {
'padding-right': spacing[psize],
};
spacingUtils[0][`[dir='ltr'] .-pr-${size}`] = {
'padding-right': '-' + spacing[psize],
};

spacingUtils[0][`[dir='ltr'] .pl-${size}`] = {
'padding-left': spacing[psize],
};
spacingUtils[0][`[dir='ltr'] .-pl-${size}`] = {
'padding-left': '-' + spacing[psize],
};

spacingUtils[1][`.p-${size}`] = {padding: spacing[psize]};
spacingUtils[1][`.-p-${size}`] = {padding: '-' + spacing[psize]};

spacingUtils[2][`.py-${size}`] = {
'padding-top': spacing[psize],
'padding-bottom': spacing[psize],
};
spacingUtils[2][`.-py-${size}`] = {
'padding-top': '-' + spacing[psize],
'padding-bottom': '-' + spacing[psize],
};
spacingUtils[2][`.px-${size}`] = {
'padding-right': spacing[psize],
'padding-left': spacing[psize],
};
spacingUtils[2][`.-px-${size}`] = {
'padding-right': '-' + spacing[psize],
'padding-left': '-' + spacing[psize],
};

spacingUtils[3][`.pt-${size}`] = {'padding-top': spacing[psize]};
spacingUtils[3][`.-pt-${size}`] = {'padding-top': '-' + spacing[psize]};
spacingUtils[3][`.pb-${size}`] = {'padding-bottom': spacing[psize]};
spacingUtils[3][`.-pb-${size}`] = {
'padding-bottom': '-' + spacing[psize],
};

spacingUtils[4][`.p-auto`] = {padding: 'auto'};
spacingUtils[4][`[dir="rtl"] .pr-auto`] = {'padding-left': 'auto'};
spacingUtils[4][`[dir="ltr"] .pr-auto`] = {'padding-right': 'auto'};
spacingUtils[4][`[dir="rtl"] .pl-auto`] = {'padding-right': 'auto'};
spacingUtils[4][`[dir="ltr"] .pl-auto`] = {'padding-left': 'auto'};
spacingUtils[4][`.pt-auto`] = {'padding-top': 'auto'};
spacingUtils[4][`.pb-auto`] = {'padding-bottom': 'auto'};
}
}
return spacingUtils;
};
const generateMarginUtils = (spacing) => {
const spacingUtils = [{}, {}, {}, {}, {}];
for (const psize in spacing) {
let size = psize;
if (size.includes('.')) size = psize.replace('.', `\\.`);

if (size.toString() !== 'px') {
spacingUtils[0][`[dir='rtl'] .mr-${size}`] = {
'margin-left': spacing[psize],
};
spacingUtils[0][`[dir='rtl'] .-mr-${size}`] = {
'margin-left': '-' + spacing[psize],
};

spacingUtils[0][`[dir='rtl'] .ml-${size}`] = {
'margin-right': spacing[psize],
};
spacingUtils[0][`[dir='rtl'] .-ml-${size}`] = {
'margin-right': '-' + spacing[psize],
};

spacingUtils[0][`[dir='ltr'] .mr-${size}`] = {
'margin-right': spacing[psize],
};
spacingUtils[0][`[dir='ltr'] .-mr-${size}`] = {
'margin-right': '-' + spacing[psize],
};

spacingUtils[0][`[dir='ltr'] .ml-${size}`] = {
'margin-left': spacing[psize],
};
spacingUtils[0][`[dir='ltr'] .-ml-${size}`] = {
'margin-left': '-' + spacing[psize],
};

spacingUtils[1][`.m-${size}`] = {margin: spacing[psize]};
spacingUtils[1][`.-m-${size}`] = {margin: '-' + spacing[psize]};

spacingUtils[2][`.my-${size}`] = {
'margin-top': spacing[psize],
'margin-bottom': spacing[psize],
};
spacingUtils[2][`.-my-${size}`] = {
'margin-top': '-' + spacing[psize],
'margin-bottom': '-' + spacing[psize],
};
spacingUtils[2][`.mx-${size}`] = {
'margin-right': spacing[psize],
'margin-left': spacing[psize],
};
spacingUtils[2][`.-mx-${size}`] = {
'margin-right': '-' + spacing[psize],
'margin-left': '-' + spacing[psize],
};

spacingUtils[3][`.mt-${size}`] = {'margin-top': spacing[psize]};
spacingUtils[3][`.-mt-${size}`] = {'margin-top': '-' + spacing[psize]};
spacingUtils[3][`.mb-${size}`] = {'margin-bottom': spacing[psize]};
spacingUtils[3][`.-mb-${size}`] = {'margin-bottom': '-' + spacing[psize]};

spacingUtils[4][`.m-auto`] = {margin: 'auto'};
spacingUtils[4][`[dir="rtl"] .mr-auto`] = {'margin-left': 'auto'};
spacingUtils[4][`[dir="ltr"] .mr-auto`] = {'margin-right': 'auto'};
spacingUtils[4][`[dir="rtl"] .ml-auto`] = {'margin-right': 'auto'};
spacingUtils[4][`[dir="ltr"] .ml-auto`] = {'margin-left': 'auto'};
spacingUtils[4][`.mt-auto`] = {'margin-top': 'auto'};
spacingUtils[4][`.mb-auto`] = {'margin-bottom': 'auto'};
}
}
return spacingUtils;
};

const generateRadiusUtils = (radius) => {
const utils = {};
Object.keys(radius).forEach((size) => {
let sizeSuffix = `-${size}`;
if (size === 'DEFAULT') sizeSuffix = '';
utils[`.rounded${sizeSuffix}`] = {
'border-radius': radius[size],
};
utils[`.rounded-t${sizeSuffix}`] = {
'border-top-left-radius': radius[size],
'border-top-right-radius': radius[size],
};
utils[`.rounded-b${sizeSuffix}`] = {
'border-bottom-right-radius': radius[size],
'border-bottom-left-radius': radius[size],
};
utils[`[dir="rtl"] .rounded-r${sizeSuffix}`] = {
'border-top-left-radius': radius[size],
'border-bottom-left-radius': radius[size],
};
utils[`[dir="ltr"] .rounded-r${sizeSuffix}`] = {
'border-top-right-radius': radius[size],
'border-bottom-right-radius': radius[size],
};

utils[`[dir="rtl"] .rounded-l${sizeSuffix}`] = {
'border-top-right-radius': radius[size],
'border-bottom-right-radius': radius[size],
};
utils[`[dir="ltr"] .rounded-l${sizeSuffix}`] = {
'border-top-left-radius': radius[size],
'border-bottom-left-radius': radius[size],
};

utils[`[dir="rtl"] .rounded-tl${sizeSuffix}`] = {
'border-top-right-radius': radius[size],
};
utils[`[dir="rtl"] .rounded-tr${sizeSuffix}`] = {
'border-top-left-radius': radius[size],
};

utils[`[dir="ltr"] .rounded-tl${sizeSuffix}`] = {
'border-top-left-radius': radius[size],
};
utils[`[dir="ltr"] .rounded-tr${sizeSuffix}`] = {
'border-top-right-radius': radius[size],
};

utils[`[dir="rtl"] .rounded-bl${sizeSuffix}`] = {
'border-bottom-right-radius': radius[size],
};
utils[`[dir="rtl"] .rounded-br${sizeSuffix}`] = {
'border-bottom-left-radius': radius[size],
};

utils[`[dir="ltr"] .rounded-bl${sizeSuffix}`] = {
'border-bottom-left-radius': radius[size],
};
utils[`[dir="ltr"] .rounded-br${sizeSuffix}`] = {
'border-bottom-right-radius': radius[size],
};
});
return utils;
};
const pluginFn = ({matchUtilities, addUtilities, theme, variants, e}) => {
const spacingValues = theme('spacing');
addUtilities(RTLUtils);
addUtilities(generateRadiusUtils(theme('borderRadius')));
addUtilities(generatePaddingUtils(spacingValues));
addUtilities(generateMarginUtils(spacingValues));
};

const autoRTL = plugin(pluginFn);

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('./colors');

module.exports = {
corePlugins: {
margin: false,
padding: false,
borderRadius: false,
},
content: [
'./src/components/**/*.{js,ts,jsx,tsx}',
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/styles/**/*.{js,ts,jsx,tsx}',
],

darkMode: 'class',
theme: {
// Override base screen sizes
Expand Down Expand Up @@ -70,5 +326,5 @@ module.exports = {
colors,
},
},
plugins: [],
plugins: [autoRTL],
};
Loading