chore: prepare docs for Docusaurus v3 upgrade - 3rd iteration#3843
Merged
elicwhite merged 6 commits intofacebook:mainfrom Sep 3, 2023
Merged
chore: prepare docs for Docusaurus v3 upgrade - 3rd iteration#3843elicwhite merged 6 commits intofacebook:mainfrom
elicwhite merged 6 commits intofacebook:mainfrom
Conversation
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
slorber
commented
Sep 2, 2023
Contributor
Author
slorber
left a comment
There was a problem hiding this comment.
After #3830 merged, I noticed a few other little issues worth fixing.
I commended all the 7 changes in ./docs, so you can just check my comments for the review, and ignore the rest (same changes, but to versioned docs)
Ready to review @Simek @TheSavior
Comment on lines
-135
to
+137
| | Type | | ||
| | ------ | | ||
| | \$Enum | | ||
| | Type | | ||
| | ----- | | ||
| | $Enum | |
Contributor
Author
There was a problem hiding this comment.
\$ escaping is not necessary here. The \ char appears in production for no reason IMHO.
Note: this page seems to use Flow types and should probably be migrated to TypeScript. I only focused on removing the useless \ which afaik is not relevant to Flow.
Comment on lines
+189
to
+205
| ```mdx-code-block | ||
| export function ColorDefaults() { | ||
| return ( | ||
| <> | ||
| <ins style={{ background: "#2196F3" }} className="color-box" />{" "}<code>'#2196F3'</code> | ||
| {" "}<div className="label android">Android</div> | ||
| <hr /> | ||
| <ins style={{ background: "#007AFF" }} className="color-box" />{" "}<code>'#007AFF'</code> | ||
| {" "}<div className="label ios">iOS</div> | ||
| </> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| | Type | Default | | ||
| | --------------- | ---------------- | | ||
| | [color](colors) | <ColorDefaults/> | |
Contributor
Author
There was a problem hiding this comment.
The value inside the table is quite complex and would be better migrated to a standalone React component to make it easier to maintain.
Also in MDX v1 interleaving JSX/MD is not super robust and currently one of the 2 colors was not wrapped properly in an inline code block. This change will fix it by only using JSX (using <code> instead of backticks).
I'm using mdx-code-block (Docusaurus feature) to avoid Prettier reformatting the indentation of the React component. A better solution would be to use the .mdx extension (now recommended, it's better for MDX external tooling support)
Comment on lines
-79
to
+223
| - <ins style={{background: '#f0f8ff'}} className="color-box" /> aliceblue (`#f0f8ff`) | ||
| - <ins style={{background: '#faebd7'}} className="color-box" /> antiquewhite (`#faebd7`) | ||
| - <ins style={{background: '#00ffff'}} className="color-box" /> aqua (`#00ffff`) | ||
| - <ins style={{background: '#7fffd4'}} className="color-box" /> aquamarine (`#7fffd4`) | ||
| - <ins style={{background: '#f0ffff'}} className="color-box" /> azure (`#f0ffff`) | ||
| - <ins style={{background: '#f5f5dc'}} className="color-box" /> beige (`#f5f5dc`) | ||
| - <ins style={{background: '#ffe4c4'}} className="color-box" /> bisque (`#ffe4c4`) | ||
| - <ins style={{background: '#000000'}} className="color-box" /> black (`#000000`) | ||
| - <ins style={{background: '#ffebcd'}} className="color-box" /> blanchedalmond (`#ffebcd`) | ||
| - <ins style={{background: '#0000ff'}} className="color-box" /> blue (`#0000ff`) | ||
| - <ins style={{background: '#8a2be2'}} className="color-box" /> blueviolet (`#8a2be2`) | ||
| - <ins style={{background: '#a52a2a'}} className="color-box" /> brown (`#a52a2a`) | ||
| - <ins style={{background: '#deb887'}} className="color-box" /> burlywood (`#deb887`) | ||
| - <ins style={{background: '#5f9ea0'}} className="color-box" /> cadetblue (`#5f9ea0`) | ||
| - <ins style={{background: '#7fff00'}} className="color-box" /> chartreuse (`#7fff00`) | ||
| - <ins style={{background: '#d2691e'}} className="color-box" /> chocolate (`#d2691e`) | ||
| - <ins style={{background: '#ff7f50'}} className="color-box" /> coral (`#ff7f50`) | ||
| - <ins style={{background: '#6495ed'}} className="color-box" /> cornflowerblue (`#6495ed`) | ||
| - <ins style={{background: '#fff8dc'}} className="color-box" /> cornsilk (`#fff8dc`) | ||
| - <ins style={{background: '#dc143c'}} className="color-box" /> crimson (`#dc143c`) | ||
| - <ins style={{background: '#00ffff'}} className="color-box" /> cyan (`#00ffff`) | ||
| - <ins style={{background: '#00008b'}} className="color-box" /> darkblue (`#00008b`) | ||
| - <ins style={{background: '#008b8b'}} className="color-box" /> darkcyan (`#008b8b`) | ||
| - <ins style={{background: '#b8860b'}} className="color-box" /> darkgoldenrod (`#b8860b`) | ||
| - <ins style={{background: '#a9a9a9'}} className="color-box" /> darkgray (`#a9a9a9`) | ||
| - <ins style={{background: '#006400'}} className="color-box" /> darkgreen (`#006400`) | ||
| - <ins style={{background: '#a9a9a9'}} className="color-box" /> darkgrey (`#a9a9a9`) | ||
| - <ins style={{background: '#bdb76b'}} className="color-box" /> darkkhaki (`#bdb76b`) | ||
| - <ins style={{background: '#8b008b'}} className="color-box" /> darkmagenta (`#8b008b`) | ||
| - <ins style={{background: '#556b2f'}} className="color-box" /> darkolivegreen (`#556b2f`) | ||
| - <ins style={{background: '#ff8c00'}} className="color-box" /> darkorange (`#ff8c00`) | ||
| - <ins style={{background: '#9932cc'}} className="color-box" /> darkorchid (`#9932cc`) | ||
| - <ins style={{background: '#8b0000'}} className="color-box" /> darkred (`#8b0000`) | ||
| - <ins style={{background: '#e9967a'}} className="color-box" /> darksalmon (`#e9967a`) | ||
| - <ins style={{background: '#8fbc8f'}} className="color-box" /> darkseagreen (`#8fbc8f`) | ||
| - <ins style={{background: '#483d8b'}} className="color-box" /> darkslateblue (`#483d8b`) | ||
| - <ins style={{background: '#2f4f4f'}} className="color-box" /> darkslategrey (`#2f4f4f`) | ||
| - <ins style={{background: '#00ced1'}} className="color-box" /> darkturquoise (`#00ced1`) | ||
| - <ins style={{background: '#9400d3'}} className="color-box" /> darkviolet (`#9400d3`) | ||
| - <ins style={{background: '#ff1493'}} className="color-box" /> deeppink (`#ff1493`) | ||
| - <ins style={{background: '#00bfff'}} className="color-box" /> deepskyblue (`#00bfff`) | ||
| - <ins style={{background: '#696969'}} className="color-box" /> dimgray (`#696969`) | ||
| - <ins style={{background: '#696969'}} className="color-box" /> dimgrey (`#696969`) | ||
| - <ins style={{background: '#1e90ff'}} className="color-box" /> dodgerblue (`#1e90ff`) | ||
| - <ins style={{background: '#b22222'}} className="color-box" /> firebrick (`#b22222`) | ||
| - <ins style={{background: '#fffaf0'}} className="color-box" /> floralwhite (`#fffaf0`) | ||
| - <ins style={{background: '#228b22'}} className="color-box" /> forestgreen (`#228b22`) | ||
| - <ins style={{background: '#ff00ff'}} className="color-box" /> fuchsia (`#ff00ff`) | ||
| - <ins style={{background: '#dcdcdc'}} className="color-box" /> gainsboro (`#dcdcdc`) | ||
| - <ins style={{background: '#f8f8ff'}} className="color-box" /> ghostwhite (`#f8f8ff`) | ||
| - <ins style={{background: '#ffd700'}} className="color-box" /> gold (`#ffd700`) | ||
| - <ins style={{background: '#daa520'}} className="color-box" /> goldenrod (`#daa520`) | ||
| - <ins style={{background: '#808080'}} className="color-box" /> gray (`#808080`) | ||
| - <ins style={{background: '#008000'}} className="color-box" /> green (`#008000`) | ||
| - <ins style={{background: '#adff2f'}} className="color-box" /> greenyellow (`#adff2f`) | ||
| - <ins style={{background: '#808080'}} className="color-box" /> grey (`#808080`) | ||
| - <ins style={{background: '#f0fff0'}} className="color-box" /> honeydew (`#f0fff0`) | ||
| - <ins style={{background: '#ff69b4'}} className="color-box" /> hotpink (`#ff69b4`) | ||
| - <ins style={{background: '#cd5c5c'}} className="color-box" /> indianred (`#cd5c5c`) | ||
| - <ins style={{background: '#4b0082'}} className="color-box" /> indigo (`#4b0082`) | ||
| - <ins style={{background: '#fffff0'}} className="color-box" /> ivory (`#fffff0`) | ||
| - <ins style={{background: '#f0e68c'}} className="color-box" /> khaki (`#f0e68c`) | ||
| - <ins style={{background: '#e6e6fa'}} className="color-box" /> lavender (`#e6e6fa`) | ||
| - <ins style={{background: '#fff0f5'}} className="color-box" /> lavenderblush (`#fff0f5`) | ||
| - <ins style={{background: '#7cfc00'}} className="color-box" /> lawngreen (`#7cfc00`) | ||
| - <ins style={{background: '#fffacd'}} className="color-box" /> lemonchiffon (`#fffacd`) | ||
| - <ins style={{background: '#add8e6'}} className="color-box" /> lightblue (`#add8e6`) | ||
| - <ins style={{background: '#f08080'}} className="color-box" /> lightcoral (`#f08080`) | ||
| - <ins style={{background: '#e0ffff'}} className="color-box" /> lightcyan (`#e0ffff`) | ||
| - <ins style={{background: '#fafad2'}} className="color-box" /> lightgoldenrodyellow (`#fafad2`) | ||
| - <ins style={{background: '#d3d3d3'}} className="color-box" /> lightgray (`#d3d3d3`) | ||
| - <ins style={{background: '#90ee90'}} className="color-box" /> lightgreen (`#90ee90`) | ||
| - <ins style={{background: '#d3d3d3'}} className="color-box" /> lightgrey (`#d3d3d3`) | ||
| - <ins style={{background: '#ffb6c1'}} className="color-box" /> lightpink (`#ffb6c1`) | ||
| - <ins style={{background: '#ffa07a'}} className="color-box" /> lightsalmon (`#ffa07a`) | ||
| - <ins style={{background: '#20b2aa'}} className="color-box" /> lightseagreen (`#20b2aa`) | ||
| - <ins style={{background: '#87cefa'}} className="color-box" /> lightskyblue (`#87cefa`) | ||
| - <ins style={{background: '#778899'}} className="color-box" /> lightslategrey (`#778899`) | ||
| - <ins style={{background: '#b0c4de'}} className="color-box" /> lightsteelblue (`#b0c4de`) | ||
| - <ins style={{background: '#ffffe0'}} className="color-box" /> lightyellow (`#ffffe0`) | ||
| - <ins style={{background: '#00ff00'}} className="color-box" /> lime (`#00ff00`) | ||
| - <ins style={{background: '#32cd32'}} className="color-box" /> limegreen (`#32cd32`) | ||
| - <ins style={{background: '#faf0e6'}} className="color-box" /> linen (`#faf0e6`) | ||
| - <ins style={{background: '#ff00ff'}} className="color-box" /> magenta (`#ff00ff`) | ||
| - <ins style={{background: '#800000'}} className="color-box" /> maroon (`#800000`) | ||
| - <ins style={{background: '#66cdaa'}} className="color-box" /> mediumaquamarine (`#66cdaa`) | ||
| - <ins style={{background: '#0000cd'}} className="color-box" /> mediumblue (`#0000cd`) | ||
| - <ins style={{background: '#ba55d3'}} className="color-box" /> mediumorchid (`#ba55d3`) | ||
| - <ins style={{background: '#9370db'}} className="color-box" /> mediumpurple (`#9370db`) | ||
| - <ins style={{background: '#3cb371'}} className="color-box" /> mediumseagreen (`#3cb371`) | ||
| - <ins style={{background: '#7b68ee'}} className="color-box" /> mediumslateblue (`#7b68ee`) | ||
| - <ins style={{background: '#00fa9a'}} className="color-box" /> mediumspringgreen (`#00fa9a`) | ||
| - <ins style={{background: '#48d1cc'}} className="color-box" /> mediumturquoise (`#48d1cc`) | ||
| - <ins style={{background: '#c71585'}} className="color-box" /> mediumvioletred (`#c71585`) | ||
| - <ins style={{background: '#191970'}} className="color-box" /> midnightblue (`#191970`) | ||
| - <ins style={{background: '#f5fffa'}} className="color-box" /> mintcream (`#f5fffa`) | ||
| - <ins style={{background: '#ffe4e1'}} className="color-box" /> mistyrose (`#ffe4e1`) | ||
| - <ins style={{background: '#ffe4b5'}} className="color-box" /> moccasin (`#ffe4b5`) | ||
| - <ins style={{background: '#ffdead'}} className="color-box" /> navajowhite (`#ffdead`) | ||
| - <ins style={{background: '#000080'}} className="color-box" /> navy (`#000080`) | ||
| - <ins style={{background: '#fdf5e6'}} className="color-box" /> oldlace (`#fdf5e6`) | ||
| - <ins style={{background: '#808000'}} className="color-box" /> olive (`#808000`) | ||
| - <ins style={{background: '#6b8e23'}} className="color-box" /> olivedrab (`#6b8e23`) | ||
| - <ins style={{background: '#ffa500'}} className="color-box" /> orange (`#ffa500`) | ||
| - <ins style={{background: '#ff4500'}} className="color-box" /> orangered (`#ff4500`) | ||
| - <ins style={{background: '#da70d6'}} className="color-box" /> orchid (`#da70d6`) | ||
| - <ins style={{background: '#eee8aa'}} className="color-box" /> palegoldenrod (`#eee8aa`) | ||
| - <ins style={{background: '#98fb98'}} className="color-box" /> palegreen (`#98fb98`) | ||
| - <ins style={{background: '#afeeee'}} className="color-box" /> paleturquoise (`#afeeee`) | ||
| - <ins style={{background: '#db7093'}} className="color-box" /> palevioletred (`#db7093`) | ||
| - <ins style={{background: '#ffefd5'}} className="color-box" /> papayawhip (`#ffefd5`) | ||
| - <ins style={{background: '#ffdab9'}} className="color-box" /> peachpuff (`#ffdab9`) | ||
| - <ins style={{background: '#cd853f'}} className="color-box" /> peru (`#cd853f`) | ||
| - <ins style={{background: '#ffc0cb'}} className="color-box" /> pink (`#ffc0cb`) | ||
| - <ins style={{background: '#dda0dd'}} className="color-box" /> plum (`#dda0dd`) | ||
| - <ins style={{background: '#b0e0e6'}} className="color-box" /> powderblue (`#b0e0e6`) | ||
| - <ins style={{background: '#800080'}} className="color-box" /> purple (`#800080`) | ||
| - <ins style={{background: '#663399'}} className="color-box" /> rebeccapurple (`#663399`) | ||
| - <ins style={{background: '#ff0000'}} className="color-box" /> red (`#ff0000`) | ||
| - <ins style={{background: '#bc8f8f'}} className="color-box" /> rosybrown (`#bc8f8f`) | ||
| - <ins style={{background: '#4169e1'}} className="color-box" /> royalblue (`#4169e1`) | ||
| - <ins style={{background: '#8b4513'}} className="color-box" /> saddlebrown (`#8b4513`) | ||
| - <ins style={{background: '#fa8072'}} className="color-box" /> salmon (`#fa8072`) | ||
| - <ins style={{background: '#f4a460'}} className="color-box" /> sandybrown (`#f4a460`) | ||
| - <ins style={{background: '#2e8b57'}} className="color-box" /> seagreen (`#2e8b57`) | ||
| - <ins style={{background: '#fff5ee'}} className="color-box" /> seashell (`#fff5ee`) | ||
| - <ins style={{background: '#a0522d'}} className="color-box" /> sienna (`#a0522d`) | ||
| - <ins style={{background: '#c0c0c0'}} className="color-box" /> silver (`#c0c0c0`) | ||
| - <ins style={{background: '#87ceeb'}} className="color-box" /> skyblue (`#87ceeb`) | ||
| - <ins style={{background: '#6a5acd'}} className="color-box" /> slateblue (`#6a5acd`) | ||
| - <ins style={{background: '#708090'}} className="color-box" /> slategray (`#708090`) | ||
| - <ins style={{background: '#fffafa'}} className="color-box" /> snow (`#fffafa`) | ||
| - <ins style={{background: '#00ff7f'}} className="color-box" /> springgreen (`#00ff7f`) | ||
| - <ins style={{background: '#4682b4'}} className="color-box" /> steelblue (`#4682b4`) | ||
| - <ins style={{background: '#d2b48c'}} className="color-box" /> tan (`#d2b48c`) | ||
| - <ins style={{background: '#008080'}} className="color-box" /> teal (`#008080`) | ||
| - <ins style={{background: '#d8bfd8'}} className="color-box" /> thistle (`#d8bfd8`) | ||
| - <ins style={{background: '#ff6347'}} className="color-box" /> tomato (`#ff6347`) | ||
| - <ins style={{background: '#40e0d0'}} className="color-box" /> turquoise (`#40e0d0`) | ||
| - <ins style={{background: '#ee82ee'}} className="color-box" /> violet (`#ee82ee`) | ||
| - <ins style={{background: '#f5deb3'}} className="color-box" /> wheat (`#f5deb3`) | ||
| - <ins style={{background: '#ffffff'}} className="color-box" /> white (`#ffffff`) | ||
| - <ins style={{background: '#f5f5f5'}} className="color-box" /> whitesmoke (`#f5f5f5`) | ||
| - <ins style={{background: '#ffff00'}} className="color-box" /> yellow (`#ffff00`) | ||
| - <ins style={{background: '#9acd32'}} className="color-box" /> yellowgreen (`#9acd32`) | ||
| - <ins style={{background: '#f0f8ff'}} className="color-box" /> aliceblue (<code>#f0f8ff</code>) | ||
| - <ins style={{background: '#faebd7'}} className="color-box" /> antiquewhite (<code>#faebd7</code>) | ||
| - <ins style={{background: '#00ffff'}} className="color-box" /> aqua (<code>#00ffff</code>) | ||
| - <ins style={{background: '#7fffd4'}} className="color-box" /> aquamarine (<code>#7fffd4</code>) | ||
| - <ins style={{background: '#f0ffff'}} className="color-box" /> azure (<code>#f0ffff</code>) | ||
| - <ins style={{background: '#f5f5dc'}} className="color-box" /> beige (<code>#f5f5dc</code>) | ||
| - <ins style={{background: '#ffe4c4'}} className="color-box" /> bisque (<code>#ffe4c4</code>) | ||
| - <ins style={{background: '#000000'}} className="color-box" /> black (<code>#000000</code>) | ||
| - <ins style={{background: '#ffebcd'}} className="color-box" /> blanchedalmond (<code>#ffebcd</code>) | ||
| - <ins style={{background: '#0000ff'}} className="color-box" /> blue (<code>#0000ff</code>) | ||
| - <ins style={{background: '#8a2be2'}} className="color-box" /> blueviolet (<code>#8a2be2</code>) | ||
| - <ins style={{background: '#a52a2a'}} className="color-box" /> brown (<code>#a52a2a</code>) | ||
| - <ins style={{background: '#deb887'}} className="color-box" /> burlywood (<code>#deb887</code>) | ||
| - <ins style={{background: '#5f9ea0'}} className="color-box" /> cadetblue (<code>#5f9ea0</code>) | ||
| - <ins style={{background: '#7fff00'}} className="color-box" /> chartreuse (<code>#7fff00</code>) | ||
| - <ins style={{background: '#d2691e'}} className="color-box" /> chocolate (<code>#d2691e</code>) | ||
| - <ins style={{background: '#ff7f50'}} className="color-box" /> coral (<code>#ff7f50</code>) | ||
| - <ins style={{background: '#6495ed'}} className="color-box" /> cornflowerblue (<code>#6495ed</code>) | ||
| - <ins style={{background: '#fff8dc'}} className="color-box" /> cornsilk (<code>#fff8dc</code>) | ||
| - <ins style={{background: '#dc143c'}} className="color-box" /> crimson (<code>#dc143c</code>) | ||
| - <ins style={{background: '#00ffff'}} className="color-box" /> cyan (<code>#00ffff</code>) | ||
| - <ins style={{background: '#00008b'}} className="color-box" /> darkblue (<code>#00008b</code>) | ||
| - <ins style={{background: '#008b8b'}} className="color-box" /> darkcyan (<code>#008b8b</code>) | ||
| - <ins style={{background: '#b8860b'}} className="color-box" /> darkgoldenrod (<code>#b8860b</code>) | ||
| - <ins style={{background: '#a9a9a9'}} className="color-box" /> darkgray (<code>#a9a9a9</code>) | ||
| - <ins style={{background: '#006400'}} className="color-box" /> darkgreen (<code>#006400</code>) | ||
| - <ins style={{background: '#a9a9a9'}} className="color-box" /> darkgrey (<code>#a9a9a9</code>) | ||
| - <ins style={{background: '#bdb76b'}} className="color-box" /> darkkhaki (<code>#bdb76b</code>) | ||
| - <ins style={{background: '#8b008b'}} className="color-box" /> darkmagenta (<code>#8b008b</code>) | ||
| - <ins style={{background: '#556b2f'}} className="color-box" /> darkolivegreen (<code>#556b2f</code>) | ||
| - <ins style={{background: '#ff8c00'}} className="color-box" /> darkorange (<code>#ff8c00</code>) | ||
| - <ins style={{background: '#9932cc'}} className="color-box" /> darkorchid (<code>#9932cc</code>) | ||
| - <ins style={{background: '#8b0000'}} className="color-box" /> darkred (<code>#8b0000</code>) | ||
| - <ins style={{background: '#e9967a'}} className="color-box" /> darksalmon (<code>#e9967a</code>) | ||
| - <ins style={{background: '#8fbc8f'}} className="color-box" /> darkseagreen (<code>#8fbc8f</code>) | ||
| - <ins style={{background: '#483d8b'}} className="color-box" /> darkslateblue (<code>#483d8b</code>) | ||
| - <ins style={{background: '#2f4f4f'}} className="color-box" /> darkslategrey (<code>#2f4f4f</code>) | ||
| - <ins style={{background: '#00ced1'}} className="color-box" /> darkturquoise (<code>#00ced1</code>) | ||
| - <ins style={{background: '#9400d3'}} className="color-box" /> darkviolet (<code>#9400d3</code>) | ||
| - <ins style={{background: '#ff1493'}} className="color-box" /> deeppink (<code>#ff1493</code>) | ||
| - <ins style={{background: '#00bfff'}} className="color-box" /> deepskyblue (<code>#00bfff</code>) | ||
| - <ins style={{background: '#696969'}} className="color-box" /> dimgray (<code>#696969</code>) | ||
| - <ins style={{background: '#696969'}} className="color-box" /> dimgrey (<code>#696969</code>) | ||
| - <ins style={{background: '#1e90ff'}} className="color-box" /> dodgerblue (<code>#1e90ff</code>) | ||
| - <ins style={{background: '#b22222'}} className="color-box" /> firebrick (<code>#b22222</code>) | ||
| - <ins style={{background: '#fffaf0'}} className="color-box" /> floralwhite (<code>#fffaf0</code>) | ||
| - <ins style={{background: '#228b22'}} className="color-box" /> forestgreen (<code>#228b22</code>) | ||
| - <ins style={{background: '#ff00ff'}} className="color-box" /> fuchsia (<code>#ff00ff</code>) | ||
| - <ins style={{background: '#dcdcdc'}} className="color-box" /> gainsboro (<code>#dcdcdc</code>) | ||
| - <ins style={{background: '#f8f8ff'}} className="color-box" /> ghostwhite (<code>#f8f8ff</code>) | ||
| - <ins style={{background: '#ffd700'}} className="color-box" /> gold (<code>#ffd700</code>) | ||
| - <ins style={{background: '#daa520'}} className="color-box" /> goldenrod (<code>#daa520</code>) | ||
| - <ins style={{background: '#808080'}} className="color-box" /> gray (<code>#808080</code>) | ||
| - <ins style={{background: '#008000'}} className="color-box" /> green (<code>#008000</code>) | ||
| - <ins style={{background: '#adff2f'}} className="color-box" /> greenyellow (<code>#adff2f</code>) | ||
| - <ins style={{background: '#808080'}} className="color-box" /> grey (<code>#808080</code>) | ||
| - <ins style={{background: '#f0fff0'}} className="color-box" /> honeydew (<code>#f0fff0</code>) | ||
| - <ins style={{background: '#ff69b4'}} className="color-box" /> hotpink (<code>#ff69b4</code>) | ||
| - <ins style={{background: '#cd5c5c'}} className="color-box" /> indianred (<code>#cd5c5c</code>) | ||
| - <ins style={{background: '#4b0082'}} className="color-box" /> indigo (<code>#4b0082</code>) | ||
| - <ins style={{background: '#fffff0'}} className="color-box" /> ivory (<code>#fffff0</code>) | ||
| - <ins style={{background: '#f0e68c'}} className="color-box" /> khaki (<code>#f0e68c</code>) | ||
| - <ins style={{background: '#e6e6fa'}} className="color-box" /> lavender (<code>#e6e6fa</code>) | ||
| - <ins style={{background: '#fff0f5'}} className="color-box" /> lavenderblush (<code>#fff0f5</code>) | ||
| - <ins style={{background: '#7cfc00'}} className="color-box" /> lawngreen (<code>#7cfc00</code>) | ||
| - <ins style={{background: '#fffacd'}} className="color-box" /> lemonchiffon (<code>#fffacd</code>) | ||
| - <ins style={{background: '#add8e6'}} className="color-box" /> lightblue (<code>#add8e6</code>) | ||
| - <ins style={{background: '#f08080'}} className="color-box" /> lightcoral (<code>#f08080</code>) | ||
| - <ins style={{background: '#e0ffff'}} className="color-box" /> lightcyan (<code>#e0ffff</code>) | ||
| - <ins style={{background: '#fafad2'}} className="color-box" /> lightgoldenrodyellow (<code>#fafad2</code>) | ||
| - <ins style={{background: '#d3d3d3'}} className="color-box" /> lightgray (<code>#d3d3d3</code>) | ||
| - <ins style={{background: '#90ee90'}} className="color-box" /> lightgreen (<code>#90ee90</code>) | ||
| - <ins style={{background: '#d3d3d3'}} className="color-box" /> lightgrey (<code>#d3d3d3</code>) | ||
| - <ins style={{background: '#ffb6c1'}} className="color-box" /> lightpink (<code>#ffb6c1</code>) | ||
| - <ins style={{background: '#ffa07a'}} className="color-box" /> lightsalmon (<code>#ffa07a</code>) | ||
| - <ins style={{background: '#20b2aa'}} className="color-box" /> lightseagreen (<code>#20b2aa</code>) | ||
| - <ins style={{background: '#87cefa'}} className="color-box" /> lightskyblue (<code>#87cefa</code>) | ||
| - <ins style={{background: '#778899'}} className="color-box" /> lightslategrey (<code>#778899</code>) | ||
| - <ins style={{background: '#b0c4de'}} className="color-box" /> lightsteelblue (<code>#b0c4de</code>) | ||
| - <ins style={{background: '#ffffe0'}} className="color-box" /> lightyellow (<code>#ffffe0</code>) | ||
| - <ins style={{background: '#00ff00'}} className="color-box" /> lime (<code>#00ff00</code>) | ||
| - <ins style={{background: '#32cd32'}} className="color-box" /> limegreen (<code>#32cd32</code>) | ||
| - <ins style={{background: '#faf0e6'}} className="color-box" /> linen (<code>#faf0e6</code>) | ||
| - <ins style={{background: '#ff00ff'}} className="color-box" /> magenta (<code>#ff00ff</code>) | ||
| - <ins style={{background: '#800000'}} className="color-box" /> maroon (<code>#800000</code>) | ||
| - <ins style={{background: '#66cdaa'}} className="color-box" /> mediumaquamarine (<code>#66cdaa</code>) | ||
| - <ins style={{background: '#0000cd'}} className="color-box" /> mediumblue (<code>#0000cd</code>) | ||
| - <ins style={{background: '#ba55d3'}} className="color-box" /> mediumorchid (<code>#ba55d3</code>) | ||
| - <ins style={{background: '#9370db'}} className="color-box" /> mediumpurple (<code>#9370db</code>) | ||
| - <ins style={{background: '#3cb371'}} className="color-box" /> mediumseagreen (<code>#3cb371</code>) | ||
| - <ins style={{background: '#7b68ee'}} className="color-box" /> mediumslateblue (<code>#7b68ee</code>) | ||
| - <ins style={{background: '#00fa9a'}} className="color-box" /> mediumspringgreen (<code>#00fa9a</code>) | ||
| - <ins style={{background: '#48d1cc'}} className="color-box" /> mediumturquoise (<code>#48d1cc</code>) | ||
| - <ins style={{background: '#c71585'}} className="color-box" /> mediumvioletred (<code>#c71585</code>) | ||
| - <ins style={{background: '#191970'}} className="color-box" /> midnightblue (<code>#191970</code>) | ||
| - <ins style={{background: '#f5fffa'}} className="color-box" /> mintcream (<code>#f5fffa</code>) | ||
| - <ins style={{background: '#ffe4e1'}} className="color-box" /> mistyrose (<code>#ffe4e1</code>) | ||
| - <ins style={{background: '#ffe4b5'}} className="color-box" /> moccasin (<code>#ffe4b5</code>) | ||
| - <ins style={{background: '#ffdead'}} className="color-box" /> navajowhite (<code>#ffdead</code>) | ||
| - <ins style={{background: '#000080'}} className="color-box" /> navy (<code>#000080</code>) | ||
| - <ins style={{background: '#fdf5e6'}} className="color-box" /> oldlace (<code>#fdf5e6</code>) | ||
| - <ins style={{background: '#808000'}} className="color-box" /> olive (<code>#808000</code>) | ||
| - <ins style={{background: '#6b8e23'}} className="color-box" /> olivedrab (<code>#6b8e23</code>) | ||
| - <ins style={{background: '#ffa500'}} className="color-box" /> orange (<code>#ffa500</code>) | ||
| - <ins style={{background: '#ff4500'}} className="color-box" /> orangered (<code>#ff4500</code>) | ||
| - <ins style={{background: '#da70d6'}} className="color-box" /> orchid (<code>#da70d6</code>) | ||
| - <ins style={{background: '#eee8aa'}} className="color-box" /> palegoldenrod (<code>#eee8aa</code>) | ||
| - <ins style={{background: '#98fb98'}} className="color-box" /> palegreen (<code>#98fb98</code>) | ||
| - <ins style={{background: '#afeeee'}} className="color-box" /> paleturquoise (<code>#afeeee</code>) | ||
| - <ins style={{background: '#db7093'}} className="color-box" /> palevioletred (<code>#db7093</code>) | ||
| - <ins style={{background: '#ffefd5'}} className="color-box" /> papayawhip (<code>#ffefd5</code>) | ||
| - <ins style={{background: '#ffdab9'}} className="color-box" /> peachpuff (<code>#ffdab9</code>) | ||
| - <ins style={{background: '#cd853f'}} className="color-box" /> peru (<code>#cd853f</code>) | ||
| - <ins style={{background: '#ffc0cb'}} className="color-box" /> pink (<code>#ffc0cb</code>) | ||
| - <ins style={{background: '#dda0dd'}} className="color-box" /> plum (<code>#dda0dd</code>) | ||
| - <ins style={{background: '#b0e0e6'}} className="color-box" /> powderblue (<code>#b0e0e6</code>) | ||
| - <ins style={{background: '#800080'}} className="color-box" /> purple (<code>#800080</code>) | ||
| - <ins style={{background: '#663399'}} className="color-box" /> rebeccapurple (<code>#663399</code>) | ||
| - <ins style={{background: '#ff0000'}} className="color-box" /> red (<code>#ff0000</code>) | ||
| - <ins style={{background: '#bc8f8f'}} className="color-box" /> rosybrown (<code>#bc8f8f</code>) | ||
| - <ins style={{background: '#4169e1'}} className="color-box" /> royalblue (<code>#4169e1</code>) | ||
| - <ins style={{background: '#8b4513'}} className="color-box" /> saddlebrown (<code>#8b4513</code>) | ||
| - <ins style={{background: '#fa8072'}} className="color-box" /> salmon (<code>#fa8072</code>) | ||
| - <ins style={{background: '#f4a460'}} className="color-box" /> sandybrown (<code>#f4a460</code>) | ||
| - <ins style={{background: '#2e8b57'}} className="color-box" /> seagreen (<code>#2e8b57</code>) | ||
| - <ins style={{background: '#fff5ee'}} className="color-box" /> seashell (<code>#fff5ee</code>) | ||
| - <ins style={{background: '#a0522d'}} className="color-box" /> sienna (<code>#a0522d</code>) | ||
| - <ins style={{background: '#c0c0c0'}} className="color-box" /> silver (<code>#c0c0c0</code>) | ||
| - <ins style={{background: '#87ceeb'}} className="color-box" /> skyblue (<code>#87ceeb</code>) | ||
| - <ins style={{background: '#6a5acd'}} className="color-box" /> slateblue (<code>#6a5acd</code>) | ||
| - <ins style={{background: '#708090'}} className="color-box" /> slategray (<code>#708090</code>) | ||
| - <ins style={{background: '#fffafa'}} className="color-box" /> snow (<code>#fffafa</code>) | ||
| - <ins style={{background: '#00ff7f'}} className="color-box" /> springgreen (<code>#00ff7f</code>) | ||
| - <ins style={{background: '#4682b4'}} className="color-box" /> steelblue (<code>#4682b4</code>) | ||
| - <ins style={{background: '#d2b48c'}} className="color-box" /> tan (<code>#d2b48c</code>) | ||
| - <ins style={{background: '#008080'}} className="color-box" /> teal (<code>#008080</code>) | ||
| - <ins style={{background: '#d8bfd8'}} className="color-box" /> thistle (<code>#d8bfd8</code>) | ||
| - <ins style={{background: '#ff6347'}} className="color-box" /> tomato (<code>#ff6347</code>) | ||
| - <ins style={{background: '#40e0d0'}} className="color-box" /> turquoise (<code>#40e0d0</code>) | ||
| - <ins style={{background: '#ee82ee'}} className="color-box" /> violet (<code>#ee82ee</code>) | ||
| - <ins style={{background: '#f5deb3'}} className="color-box" /> wheat (<code>#f5deb3</code>) | ||
| - <ins style={{background: '#ffffff'}} className="color-box" /> white (<code>#ffffff</code>) | ||
| - <ins style={{background: '#f5f5f5'}} className="color-box" /> whitesmoke (<code>#f5f5f5</code>) | ||
| - <ins style={{background: '#ffff00'}} className="color-box" /> yellow (<code>#ffff00</code>) | ||
| - <ins style={{background: '#9acd32'}} className="color-box" /> yellowgreen (<code>#9acd32</code>) |
Contributor
Author
There was a problem hiding this comment.
Same: interleaving JSX/md in MDX v1 is not super robust and lead to inline code being block ignored.
Using only JSX fixes it.
| Remember to re-install the dependencies after upgrading (run `npm install` or `yarn`). | ||
|
|
||
| :::important | ||
| :::info |
Contributor
Author
There was a problem hiding this comment.
:::important is a deprecated/legacy Docusaurus admonition alias.
The blue admonition is :::note, cf documentation: https://docusaurus.io/docs/markdown-features/admonitions
This change shouldn't have any visual impact but is just some useful cleanup, because we are likely to remove the :::important alias in the future.
- before: https://reactnative.dev/docs/new-architecture-app-intro#update-to-the-latest-react-native-version
- after: https://deploy-preview-3843--react-native.netlify.app/docs/new-architecture-app-intro#update-to-the-latest-react-native-version
| ## Configure the Fabric Native Component Dependencies | ||
|
|
||
| ### <a name="dependencies-ios" />iOS | ||
| ### iOS {#dependencies-ios} |
Contributor
Author
There was a problem hiding this comment.
Production bug
It seems the intent of this <a name="dependencies-ios"> tag is to create a custom anchor that you can link to from somewhere else in the page.
Considering the page contains 2 iOS headings, there's some kind of anchor conflict here and the need to distinguish them.
Unfortunately this leads to a weird behavior in Docusaurus v2, currently being visible in production: the iOS TOC item disappears mysteriously after React hydration:
https://reactnative.dev/docs/the-new-architecture/backward-compatibility-fabric-components
CleanShot.2023-09-02.at.16.52.04.mp4
Also when you don't reload the page but navigate, the iOS TOC items remains visible, but is blue for unexpected reasons:
This bug is in production, but will be automatically fixed by the Docusaurus v3 upgrade due to how differently it processes headings and generates the TOC.
cf Docusaurus v3 preview: https://deploy-preview-3780--react-native.netlify.app/docs/the-new-architecture/backward-compatibility-fabric-components)
A better way
But, the thing is: if you want to specific a custom anchor name like #dependencies-ios, you don't need to use such trick because Docusaurus provides this feature out of the box, just add {#dependencies-ios} at the end of the heading.
https://docusaurus.io/docs/markdown-features/toc#heading-ids
| ## Configure the Turbo Native Module Dependencies | ||
|
|
||
| ### <a name="dependencies-ios" />iOS | ||
| ### iOS {#dependencies-ios} |
| ``` | ||
|
|
||
| Creates an object that represent android theme's default background for borderless selectable elements (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect. | ||
| Creates an object that represent android theme's default background for borderless selectable elements (`?android:attr/selectableItemBackgroundBorderless`). Available on android API level 21+. `rippleRadius` parameter controls the radius of the ripple effect. |
Contributor
Author
There was a problem hiding this comment.
This is a follow-up of a change already reviewed/accepted/merged in this other PR: #3830 (comment)
I simply missed the fact that the doc had 2 cases to fix, and only fixed one of them (which is 12 lines above).
Before: https://reactnative.dev/docs/touchablenativefeedback#methods
After: https://deploy-preview-3843--react-native.netlify.app/docs/touchablenativefeedback#methods
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This is preparatory docs content refactor, in preparation for the Docusaurus v3 upgrade (#3780)
My visual regression tests catched a few extra issues currently visible in production.
Docusaurus v3 will organically fix some of those issues, but until the main v3 is merged, it's still worth fixing some of those isues immediately in production. I made sure that the content changes here will work fine for both Docusaurus v2 (current) and v3 (PR: #3780)
Preview: https://deploy-preview-3843--react-native.netlify.app/