[change] Text is position relative by default

Match default Text rendering in React Native.

Fix #2498

packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js

@@ -9,6 +9,7 @@ import AppRegistry from '..';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import StyleSheet from '../../StyleSheet';
+import Text from '../../Text';
 import View from '../../View';
 
 const NoopComponent = () => React.createElement('div');
@@ -44,13 +45,20 @@ describe('AppRegistry', () => {
  html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
  input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
  [stylesheet-group=\\"1\\"]{}
+ .css-text-13q1o4w{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+ .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
  .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
  [stylesheet-group=\\"2\\"]{}
+ .r-display-krxsd3{display:-webkit-box;}
  .r-display-xoduu5{display:inline-flex;}
  .r-flex-13awgt0{flex:1;}
+ .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
  [stylesheet-group=\\"3\\"]{}
+ .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
  .r-bottom-1p0dtai{bottom:0px;}
+ .r-cursor-1loqt21{cursor:pointer;}
  .r-left-1d2f490{left:0px;}
+ .r-maxWidth-dnmrzs{max-width:100%;}
  .r-pointerEvents-105ug2t{pointer-events:auto!important;}
  .r-pointerEvents-12vffkv>*{pointer-events:auto;}
  .r-pointerEvents-12vffkv{pointer-events:none!important;}
@@ -59,7 +67,12 @@ describe('AppRegistry', () => {
  .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
  .r-position-u8s1d{position:absolute;}
  .r-right-zchlnj{right:0px;}
- .r-top-ipm5af{top:0px;}</style>"
+ .r-textOverflow-1udbk01{text-overflow:ellipsis;}
+ .r-top-ipm5af{top:0px;}
+ .r-userSelect-1xnzce8{-moz-user-select:text;-webkit-user-select:text;user-select:text;}
+ .r-userSelect-lrvibr{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
+ .r-whiteSpace-3s2u2q{white-space:nowrap;}
+ .r-wordWrap-1iln25a{word-wrap:normal;}</style>"
  `);
  });
 
@@ -78,7 +91,8 @@ describe('AppRegistry', () => {
  };
 
  // First render "RootComponent"
- const RootComponent = () => React.createElement(View);
+ const RootComponent = () =>
+ React.createElement(View, React.createElement(Text));
  AppRegistry.registerComponent('App', () => RootComponent);
  const first = getApplicationStyles('App');
  expect(first).toMatchInlineSnapshot(`
@@ -88,13 +102,20 @@ describe('AppRegistry', () => {
  html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
  input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
  [stylesheet-group=\\"1\\"]{}
+ .css-text-13q1o4w{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+ .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
  .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
  [stylesheet-group=\\"2\\"]{}
+ .r-display-krxsd3{display:-webkit-box;}
  .r-display-xoduu5{display:inline-flex;}
  .r-flex-13awgt0{flex:1;}
+ .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
  [stylesheet-group=\\"3\\"]{}
+ .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
  .r-bottom-1p0dtai{bottom:0px;}
+ .r-cursor-1loqt21{cursor:pointer;}
  .r-left-1d2f490{left:0px;}
+ .r-maxWidth-dnmrzs{max-width:100%;}
  .r-pointerEvents-105ug2t{pointer-events:auto!important;}
  .r-pointerEvents-12vffkv>*{pointer-events:auto;}
  .r-pointerEvents-12vffkv{pointer-events:none!important;}
@@ -103,7 +124,12 @@ describe('AppRegistry', () => {
  .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
  .r-position-u8s1d{position:absolute;}
  .r-right-zchlnj{right:0px;}
- .r-top-ipm5af{top:0px;}"
+ .r-textOverflow-1udbk01{text-overflow:ellipsis;}
+ .r-top-ipm5af{top:0px;}
+ .r-userSelect-1xnzce8{-moz-user-select:text;-webkit-user-select:text;user-select:text;}
+ .r-userSelect-lrvibr{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
+ .r-whiteSpace-3s2u2q{white-space:nowrap;}
+ .r-wordWrap-1iln25a{word-wrap:normal;}"
  `);
 
  // Second render "AlternativeComponent"
@@ -124,15 +150,22 @@ describe('AppRegistry', () => {
  html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
  input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
  [stylesheet-group=\\"1\\"]{}
+ .css-text-13q1o4w{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
+ .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
  .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
  [stylesheet-group=\\"2\\"]{}
  .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
+ .r-display-krxsd3{display:-webkit-box;}
  .r-display-xoduu5{display:inline-flex;}
  .r-flex-13awgt0{flex:1;}
+ .r-overflow-1udh08x{overflow-x:hidden;overflow-y:hidden;}
  [stylesheet-group=\\"3\\"]{}
+ .r-WebkitBoxOrient-8akbws{-webkit-box-orient:vertical;}
  .r-backgroundColor-aot4c7{background-color:rgba(128,0,128,1.00);}
  .r-bottom-1p0dtai{bottom:0px;}
+ .r-cursor-1loqt21{cursor:pointer;}
  .r-left-1d2f490{left:0px;}
+ .r-maxWidth-dnmrzs{max-width:100%;}
  .r-pointerEvents-105ug2t{pointer-events:auto!important;}
  .r-pointerEvents-12vffkv>*{pointer-events:auto;}
  .r-pointerEvents-12vffkv{pointer-events:none!important;}
@@ -141,7 +174,12 @@ describe('AppRegistry', () => {
  .r-pointerEvents-ah5dr5{pointer-events:auto!important;}
  .r-position-u8s1d{position:absolute;}
  .r-right-zchlnj{right:0px;}
- .r-top-ipm5af{top:0px;}"
+ .r-textOverflow-1udbk01{text-overflow:ellipsis;}
+ .r-top-ipm5af{top:0px;}
+ .r-userSelect-1xnzce8{-moz-user-select:text;-webkit-user-select:text;user-select:text;}
+ .r-userSelect-lrvibr{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
+ .r-whiteSpace-3s2u2q{white-space:nowrap;}
+ .r-wordWrap-1iln25a{word-wrap:normal;}"
  `);
 
  // Third render "RootComponent" again

packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`components/Text default 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text nested 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 >
  <span
- class="css-textHasAncestor-1qaijid"
+ class="css-textHasAncestor-1jxf684"
  data-testid="child"
  />
 </div>
@@ -22,44 +22,44 @@ exports[`components/Text nested 1`] = `
 exports[`components/Text prop "aria-label" value is set 1`] = `
 <div
  aria-label="accessibility label"
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "aria-labelledby" value is set 1`] = `
 <div
  aria-labelledby="123"
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "aria-live" value is set 1`] = `
 <div
  aria-live="polite"
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "dir" value is "ltr" 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="ltr"
 />
 `;
 
 exports[`components/Text prop "dir" value is "rtl" 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="rtl"
 />
 `;
 
 exports[`components/Text prop "href" href with accessibilityRole 1`] = `
 <a
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  href="https://example.com"
  role="presentation"
@@ -68,30 +68,30 @@ exports[`components/Text prop "href" href with accessibilityRole 1`] = `
 
 exports[`components/Text prop "href" value is set 1`] = `
 <a
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  href="https://example.com"
 />
 `;
 
 exports[`components/Text prop "hrefAttrs" null values are excluded 1`] = `
 <a
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  href="https://example.com"
 />
 `;
 
 exports[`components/Text prop "hrefAttrs" requires "href" 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
 <a
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  href="https://example.com"
  target="_blank"
@@ -100,7 +100,7 @@ exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
 
 exports[`components/Text prop "hrefAttrs" value is set 1`] = `
 <a
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  download="filename.jpg"
  href="https://example.com"
@@ -111,68 +111,68 @@ exports[`components/Text prop "hrefAttrs" value is set 1`] = `
 
 exports[`components/Text prop "lang" ar 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="rtl"
  lang="ar"
 />
 `;
 
 exports[`components/Text prop "lang" fr 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="ltr"
  lang="fr"
 />
 `;
 
 exports[`components/Text prop "lang" undefined 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "lang" with dir 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="ltr"
  lang="ar"
 />
 `;
 
 exports[`components/Text prop "nativeID" value is set 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  id="nativeID"
 />
 `;
 
 exports[`components/Text prop "numberOfLines" value is set 1`] = `
 <div
- class="css-text-1rynq56 r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
+ class="css-text-13q1o4w r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "numberOfLines" value is set to one 1`] = `
 <div
- class="css-text-1rynq56 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
+ class="css-text-13q1o4w r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "role" value alters HTML element 1`] = `
 <article
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  role="article"
 />
 `;
 
 exports[`components/Text prop "role" value is "button" 1`] = `
 <button
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  role="button"
  type="button"
@@ -181,37 +181,37 @@ exports[`components/Text prop "role" value is "button" 1`] = `
 
 exports[`components/Text prop "role" value is set 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  role="presentation"
 />
 `;
 
 exports[`components/Text prop "selectable" value of false 1`] = `
 <div
- class="css-text-1rynq56 r-userSelect-lrvibr"
+ class="css-text-13q1o4w r-userSelect-lrvibr"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "selectable" value of true 1`] = `
 <div
- class="css-text-1rynq56 r-userSelect-1xnzce8"
+ class="css-text-13q1o4w r-userSelect-1xnzce8"
  dir="auto"
 />
 `;
 
 exports[`components/Text prop "style" value is set 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  dir="auto"
  style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 />
 `;
 
 exports[`components/Text prop "testID" value is set 1`] = `
 <div
- class="css-text-1rynq56"
+ class="css-text-13q1o4w"
  data-testid="123"
  dir="auto"
 />

packages/react-native-web/src/exports/Text/index.js

@@ -192,6 +192,7 @@ const textStyle = {
  listStyle: 'none',
  margin: 0,
  padding: 0,
+ position: 'relative',
  textAlign: 'inherit',
  textDecoration: 'none',
  whiteSpace: 'pre-wrap',