Skip to content

Commit

Permalink
[fix] Text inheritance of textAlign
Browse files Browse the repository at this point in the history 
Set textAlign on the default Text element. Prevents inheritance of
textAlign set on a parent View.

Fix #2498
  • Loading branch information
@necolas
necolas committed Mar 20, 2023
1 parent 29fcd9a commit 47671ca
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 31 deletions.
6 changes: 3 additions & 3 deletions packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ 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-text-146c3p1{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:start;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\\"]{}
Expand Down Expand Up @@ -102,7 +102,7 @@ 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-text-146c3p1{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:start;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\\"]{}
Expand Down Expand Up @@ -150,7 +150,7 @@ 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-text-146c3p1{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:start;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\\"]{}
Expand Down
54 changes: 27 additions & 27 deletions packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@

exports[`components/Text default 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text nested 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
>
<span
Expand All @@ -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-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text prop "aria-labelledby" value is set 1`] = `
<div
aria-labelledby="123"
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text prop "aria-live" value is set 1`] = `
<div
aria-live="polite"
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text prop "dir" value is "ltr" 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="ltr"
/>
`;

exports[`components/Text prop "dir" value is "rtl" 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="rtl"
/>
`;

exports[`components/Text prop "href" href with accessibilityRole 1`] = `
<a
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
href="https://example.com"
role="presentation"
Expand All @@ -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-13q1o4w"
class="css-text-146c3p1"
dir="auto"
href="https://example.com"
/>
`;

exports[`components/Text prop "hrefAttrs" null values are excluded 1`] = `
<a
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
href="https://example.com"
/>
`;

exports[`components/Text prop "hrefAttrs" requires "href" 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text prop "hrefAttrs" target variant is set 1`] = `
<a
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
href="https://example.com"
target="_blank"
Expand All @@ -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-13q1o4w"
class="css-text-146c3p1"
dir="auto"
download="filename.jpg"
href="https://example.com"
Expand All @@ -111,68 +111,68 @@ exports[`components/Text prop "hrefAttrs" value is set 1`] = `

exports[`components/Text prop "lang" ar 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="rtl"
lang="ar"
/>
`;

exports[`components/Text prop "lang" fr 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="ltr"
lang="fr"
/>
`;

exports[`components/Text prop "lang" undefined 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
/>
`;

exports[`components/Text prop "lang" with dir 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="ltr"
lang="ar"
/>
`;

exports[`components/Text prop "nativeID" value is set 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
id="nativeID"
/>
`;

exports[`components/Text prop "numberOfLines" value is set 1`] = `
<div
class="css-text-13q1o4w r-WebkitBoxOrient-8akbws r-display-krxsd3 r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01"
class="css-text-146c3p1 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-13q1o4w r-maxWidth-dnmrzs r-overflow-1udh08x r-textOverflow-1udbk01 r-whiteSpace-3s2u2q r-wordWrap-1iln25a"
class="css-text-146c3p1 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-13q1o4w"
class="css-text-146c3p1"
dir="auto"
role="article"
/>
`;

exports[`components/Text prop "role" value is "button" 1`] = `
<button
class="css-text-13q1o4w"
class="css-text-146c3p1"
dir="auto"
role="button"
type="button"
Expand All @@ -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-13q1o4w"
class="css-text-146c3p1"
dir="auto"
role="presentation"
/>
`;

exports[`components/Text prop "selectable" value of false 1`] = `
<div
class="css-text-13q1o4w r-userSelect-lrvibr"
class="css-text-146c3p1 r-userSelect-lrvibr"
dir="auto"
/>
`;

exports[`components/Text prop "selectable" value of true 1`] = `
<div
class="css-text-13q1o4w r-userSelect-1xnzce8"
class="css-text-146c3p1 r-userSelect-1xnzce8"
dir="auto"
/>
`;

exports[`components/Text prop "style" value is set 1`] = `
<div
class="css-text-13q1o4w"
class="css-text-146c3p1"
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-13q1o4w"
class="css-text-146c3p1"
data-testid="123"
dir="auto"
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-web/src/exports/Text/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const textStyle = {
margin: 0,
padding: 0,
position: 'relative',
textAlign: 'inherit',
textAlign: 'start',
textDecoration: 'none',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word'
Expand All @@ -205,6 +205,7 @@ const styles = StyleSheet.create({
...textStyle,
color: 'inherit',
font: 'inherit',
textAlign: 'inherit',
whiteSpace: 'inherit'
},
textOneLine: {
Expand Down

0 comments on commit 47671ca

Please sign in to comment.