Skip to content

Commit 6fd32d5

Browse files
jhonmikedaochouwanguortatom-shermanphryneas
authored
Merge pull request #710 from reactjs/sync-842c24c9
* Fix homepage title (#5838) * Fix homepage title Fixed homepage title bug, now the homepage will display the title from `content/index.md` instead of the constant `React`. * Update index.md Change title to "React" to keep same * Adds a TypeScript overview page (#6120) * Start of the typescript page * Intro * Intro * Use State * Use Reducer * Start of context * Use Ref * Events * Wrap up 1st draft * Better titles * Apply suggestions from code review Co-authored-by: Tom Sherman <[email protected]> Co-authored-by: Lenz Weber-Tronic <[email protected]> * Note types/react and types/react-dom, and tone down the usecontext null check * Feedback * Given a 2nd run through of the doc * Apply suggestions from code review Co-authored-by: Ricky <[email protected]> * Document where `State` is coming from * Link what inferred types are * Remove "knock-on" We already say "cause" which makes "knock-on" a bit redundant * Move useRef TS usage to useRef reference page dropped useEffect since there's nothing specific about this hook. * Add installation section * Link to framework specific guides * Edits * Edit footer * Rm useRef docs --------- Co-authored-by: Tom Sherman <[email protected]> Co-authored-by: Lenz Weber-Tronic <[email protected]> Co-authored-by: Ricky <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]> * Fix TerminalBlock overflow (#6208) * Fix recipe titles (#6209) * Fix IDs specified in the MDN page URLs (#6176) * Add UI for canary releases (#6173) * [WIP] Add UI for canary releases * yellow * Switch to icon and gray * Wording, alignment, and rm flex * Heading alignment * Update correct link common.md (#6125) * remove Bad grammar in react.dev tictactoe documentation (#6126) * change docs * add docs for create react app * remove * Update src/content/learn/tutorial-tic-tac-toe.md --------- Co-authored-by: Ricky <[email protected]> * Fix IntersectionObserver examples (#6212) * fix(docs): Component reference render parameters (#6098) * removing reference to create-react-app (#6012) * fix: remove Hong Kong from choosing-the-state-structure (#5957) * fix: remove Hong Kong from choosing-the-state-structure closes Improper examples #5955 * change boolean style for rendering * RTL Languages Support (#6138) * Update TailwindCSS & Install rtl-detect 1- Update TailwindCSS to use the logical properities such as `ps-1` instead of `pl-1`. there are logical properities for margin, padding, inset, and text direction. 2- Install `rtl-detect` detect if the language is RTL direction. Note: this might be uninstalled if we use the manual way to specify rtl language. * add `siteConfig.isRTL` * add `dir` attribute to the root element * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * edit some tw classes to utilize logical properties instead of directions properties (e.g. `pr-0` to `pe-0`) * Refactor TW classes: Use logical properties over directional properties. * Revert "Refactor TW classes: Use logical properties over directional properties." This reverts commit df9620d944d9a47c5394b26fe4e3536ba3031333. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Add `start` and `end` directions to the `IconNavArrow` * Add Note about `isRTL` prop * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: Use logical properties over directional properties. * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set dir attr of `CodeBlock` to `ltr` even the page dir is `rtl` * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Add `start` and `end` directions to some icons * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set dir attr of `ConsoleBlock` to `ltr` to overwrite the dir of root element * Refactor TW classes: use logical properties over directional properties * set dir=ltr on inline code blocks to overwrite <html dir="rtl"> in some languages * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * set translate=no, dir=ltr on `TerminalBlock` to overwrite <html dir="rtl"> in rtl languages * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * Refactor TW classes: use logical properties over directional properties * fix some direction styles * fix arrow directions in rtl * remove `rtl-detect` and set `siteConfig.isRTL` manually * fix `Breadcrumbs`'s arrow direction in rtl languages * fix some directions of the search modal for RTL languages * hard setting dir=ltr to Sandpack to overwrite rtl languages dir * Refactor TW classes: use logical properties over directional properties * remove my notes * fix: rerverse space-x-* in rtl * rebase with the main branch * remove unnecessary alt * add `start` & `end` display directions to the Chevron Icon * rebase with the main branch * Annex to #6138 (#6226) * fix: wronge styles when applying RTL it was `top-0 left-0 ...` by wrong I made it `inset-x-0`. * fix wrong styles * fix wrong styles * style canary icon with RTL-friendly styles * chore: utilize mx-* instead of me-* & ms-* * utilize relative styles * chore: use mx-* instead of me-* & ms-* * style canary icon with RTL-frindly styles * Update OpenInTypeScriptPlayground.tsx * Fix broken link for Typescript Discord invite (#6224) --------- Co-authored-by: TimLi <[email protected]> Co-authored-by: Orta Therox <[email protected]> Co-authored-by: Tom Sherman <[email protected]> Co-authored-by: Lenz Weber-Tronic <[email protected]> Co-authored-by: Ricky <[email protected]> Co-authored-by: Sebastian Silbermann <[email protected]> Co-authored-by: Ricky <[email protected]> Co-authored-by: Natsuo Kawai <[email protected]> Co-authored-by: Néstor Guillermo Hernández <[email protected]> Co-authored-by: Diwakar Kashyap <[email protected]> Co-authored-by: Bruno Eduardo de Souza Medeiros <[email protected]> Co-authored-by: Hannanel Gershinsky <[email protected]> Co-authored-by: Umair Raza <[email protected]> Co-authored-by: Ahmed Abdelbaset <[email protected]> Co-authored-by: Thomas Charuel <[email protected]>
2 parents 09d80ac + 136c983 commit 6fd32d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+1215
-497
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"retext": "^7.0.1",
9393
"retext-smartypants": "^4.0.0",
9494
"rss": "^1.2.2",
95-
"tailwindcss": "^3.0.22",
95+
"tailwindcss": "^3.3.2",
9696
"typescript": "^4.0.2",
9797
"unist-util-visit": "^2.0.3",
9898
"webpack-bundle-analyzer": "^4.5.0"

‎src/components/Breadcrumbs.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ function Breadcrumbs({breadcrumbs}: {breadcrumbs: RouteItem[]}) {
1717
<Fragment key={crumb.path}>
1818
<Link
1919
href={crumb.path}
20-
className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase mr-1 hover:underline">
20+
className="text-link dark:text-link-dark text-sm tracking-wide font-bold uppercase me-1 hover:underline">
2121
{crumb.title}
2222
</Link>
23-
<span className="inline-block mr-1 text-link dark:text-link-dark text-lg">
23+
<span className="inline-block me-1 text-link dark:text-link-dark text-lg rtl:rotate-180">
2424
<svg
2525
width="20"
2626
height="20"

‎src/components/DocsFooter.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ function FooterLink({
7171
className={cn(
7272
'flex gap-x-4 md:gap-x-6 items-center w-full md:w-80 px-4 md:px-5 py-6 border-2 border-transparent text-base leading-base text-link dark:text-link-dark rounded-lg group focus:text-link dark:focus:text-link-dark focus:bg-highlight focus:border-link dark:focus:bg-highlight-dark dark:focus:border-link-dark focus:border-opacity-100 focus:border-2 focus:ring-1 focus:ring-offset-4 focus:ring-blue-40 active:ring-0 active:ring-offset-0 hover:bg-gray-5 dark:hover:bg-gray-80',
7373
{
74-
'flex-row-reverse justify-self-end text-right': type === 'Next',
74+
'flex-row-reverse justify-self-end text-end': type === 'Next',
7575
}
7676
)}>
7777
<IconNavArrow
7878
className="text-tertiary dark:text-tertiary-dark inline group-focus:text-link dark:group-focus:text-link-dark"
79-
displayDirection={type === 'Previous' ? 'left' : 'right'}
79+
displayDirection={type === 'Previous' ? 'start' : 'end'}
8080
/>
8181
<span>
8282
<span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">

‎src/components/Icon/IconArrow.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import cn from 'classnames';
77

88
export const IconArrow = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'left' | 'right' | 'up' | 'down';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconArrow({displayDirection, className, ...rest}) {
1318
return (
@@ -20,6 +25,7 @@ export const IconArrow = memo<
2025
{...rest}
2126
className={cn(className, {
2227
'rotate-180': displayDirection === 'right',
28+
'rotate-180 rtl:rotate-0': displayDirection === 'end',
2329
})}>
2430
<path fill="none" d="M0 0h24v24H0z" />
2531
<path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />

‎src/components/Icon/IconArrowSmall.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,17 @@ import cn from 'classnames';
77

88
export const IconArrowSmall = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'left' | 'right' | 'up' | 'down';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconArrowSmall({displayDirection, className, ...rest}) {
1318
const classes = cn(className, {
1419
'rotate-180': displayDirection === 'left',
20+
'rotate-180 rtl:rotate-0': displayDirection === 'start',
1521
'rotate-90': displayDirection === 'down',
1622
});
1723
return (

‎src/components/Icon/IconCanary.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
8+
function IconCanary({className, title}) {
9+
return (
10+
<svg
11+
className={className}
12+
width="20px"
13+
height="20px"
14+
viewBox="0 0 20 20"
15+
version="1.1"
16+
xmlns="http://www.w3.org/2000/svg">
17+
{title && <title>{title}</title>}
18+
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
19+
<g
20+
id="noun-labs-1201738-(2)"
21+
transform="translate(2, 0)"
22+
fill="currentColor"
23+
fillRule="nonzero">
24+
<path
25+
d="M10.2865804,5.55665262 L10.2865804,2.22331605 L10.8591544,2.22331605 C11.0103911,2.22244799 11.1551447,2.16342155 11.2617505,2.05914367 C11.3684534,1.95486857 11.4282767,1.81370176 11.4282767,1.66667106 L11.4282767,0.556642208 C11.4282767,0.40907262 11.3678934,0.26747526 11.2605218,0.16308627 C11.1531503,0.0587028348 11.0074938,0 10.8556998,0 L5.14338868,0 C4.9915947,0 4.84594391,0.0587028348 4.73856664,0.16308627 C4.63119507,0.267469704 4.57081178,0.40907262 4.57081178,0.556642208 L4.57081178,1.66667106 C4.57081178,1.81434899 4.63119507,1.95594912 4.73856664,2.06033811 C4.8459382,2.16472155 4.9915947,2.22331605 5.14338868,2.22331605 L5.71596273,2.22331605 L5.71596273,5.55665262 C5.71596273,8.38665538 2.97295619,9.88999017 0.651686904,15.5566623 C-0.0957823782,17.360053 -2.00560068,20 7.99951567,20 C18.004632,20 16.0948137,17.3600252 15.3507732,15.5566623 C13.0124432,9.88999017 10.2865804,8.38665538 10.2865804,5.55665262 Z M9.89570197,10.709991 C10.0921412,10.709991 10.2805515,10.7858383 10.4193876,10.9209301 C10.5583466,11.0559135 10.6363652,11.2390693 10.6363652,11.4300417 C10.6363652,11.6210141 10.5583466,11.8040698 10.4193876,11.9391533 C10.2805401,12.0741367 10.0921412,12.1499813 9.89570197,12.1499813 C9.6992627,12.1499813 9.51096673,12.074134 9.37201631,11.9391533 C9.23316875,11.8040615 9.15515307,11.6210141 9.15515307,11.4300417 C9.15515307,11.2390693 9.2331716,11.0559024 9.37201631,10.9209301 C9.57264221,10.7258996 9.61239426,10.709991 9.89570197,10.709991 Z M8.98919546,9.04212824 C9.09790709,9.14792278 9.15884755,9.29158681 9.1585213,9.44110085 C9.15829001,9.59073155 9.09678989,9.73407335 8.98763252,9.83954568 C8.87847514,9.945018 8.73069852,10.0039347 8.57678157,10.0033977 C8.42286747,10.0027392 8.27565088,9.94273467 8.16727355,9.83639845 C8.05900765,9.73006224 7.99873866,9.58628988 7.99963013,9.43664806 C8.00052304,9.28788403 8.0620221,9.14542556 8.17051087,9.04048101 C8.27911107,8.93555591 8.42599335,8.87663641 8.57913312,8.87663641 C8.73291864,8.87665585 8.88047525,8.93622535 8.98919546,9.04212824 Z M7.99965585,17.9999981 C4.91377349,17.9999981 3.29882839,17.7332867 2.51364277,17.4999976 C2.37780966,17.4476975 2.26954376,17.3439641 2.21396931,17.2125528 C2.15838628,17.0811499 2.16006066,16.9334692 2.21876871,16.8033858 C2.6144474,15.5921346 3.14916224,14.4280501 3.81316983,13.3333824 C5.980145,9.82337899 8.22941036,13.8867718 10.0980836,13.8867718 C11.9666996,13.8867718 11.4695868,12.1534924 12.1827971,13.3333824 C12.8511505,14.4269112 13.3916656,15.5896902 13.794259,16.8000524 C13.8533022,16.9322137 13.8537479,17.0822749 13.7952635,17.2147751 C13.7368889,17.3472613 13.6248314,17.4504531 13.4856467,17.5000531 C12.6833967,17.7332867 11.0855382,17.9999981 7.99965585,17.9999981 Z"
26+
id="Shape"></path>
27+
</g>
28+
</g>
29+
</svg>
30+
);
31+
}
32+
);

‎src/components/Icon/IconChevron.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ import cn from 'classnames';
77

88
export const IconChevron = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'up' | 'down' | 'left' | 'right';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'up' | 'down';
1116
}
1217
>(function IconChevron({className, displayDirection}) {
1318
const classes = cn(
@@ -16,6 +21,8 @@ export const IconChevron = memo<
1621
'rotate-90': displayDirection === 'left',
1722
'rotate-180': displayDirection === 'up',
1823
'-rotate-90': displayDirection === 'right',
24+
'rotate-90 rtl:-rotate-90': displayDirection === 'start',
25+
'-rotate-90 rtl:rotate-90': displayDirection === 'end',
1926
},
2027
className
2128
);

‎src/components/Icon/IconNavArrow.tsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,22 @@ import cn from 'classnames';
77

88
export const IconNavArrow = memo<
99
JSX.IntrinsicElements['svg'] & {
10-
displayDirection: 'right' | 'down' | 'left';
10+
/**
11+
* The direction the arrow should point.
12+
* `start` and `end` are relative to the current locale.
13+
* for example, in LTR, `start` is left and `end` is right.
14+
*/
15+
displayDirection: 'start' | 'end' | 'right' | 'left' | 'down';
1116
}
12-
>(function IconNavArrow({displayDirection = 'right', className}) {
17+
>(function IconNavArrow({displayDirection = 'start', className}) {
1318
const classes = cn(
1419
'duration-100 ease-in transition',
1520
{
1621
'rotate-0': displayDirection === 'down',
17-
'-rotate-90': displayDirection === 'right',
1822
'rotate-90': displayDirection === 'left',
23+
'-rotate-90': displayDirection === 'right',
24+
'rotate-90 rtl:-rotate-90': displayDirection === 'start',
25+
'-rotate-90 rtl:rotate-90': displayDirection === 'end',
1926
},
2027
className
2128
);

‎src/components/Layout/Feedback.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,13 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
6262
const [isSubmitted, setIsSubmitted] = useState(false);
6363
return (
6464
<div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
65-
<p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
65+
<p className="w-full font-bold text-primary dark:text-primary-dark text-lg me-4">
6666
{isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
6767
</p>
6868
{!isSubmitted && (
6969
<button
7070
aria-label="Yes"
71-
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
71+
className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 me-2"
7272
onClick={() => {
7373
setIsSubmitted(true);
7474
onSubmit();

‎src/components/Layout/Footer.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function Footer() {
1515
return (
1616
<footer className={cn('text-secondary dark:text-secondary-dark')}>
1717
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto">
18-
<div className="col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left">
18+
<div className="col-span-2 md:col-span-1 justify-items-start mt-3.5">
1919
<ExternalLink
2020
href="https://opensource.fb.com/"
2121
aria-label="Meta Open Source">
@@ -280,7 +280,9 @@ export function Footer() {
280280
</div>
281281
</ExternalLink>
282282

283-
<div className="text-xs text-left mt-2 pr-0.5">
283+
<div
284+
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
285+
dir="ltr">
284286
&copy;{new Date().getFullYear()}
285287
</div>
286288
</div>

0 commit comments

Comments
 (0)