ZulipText [nfc]: Offer inherit{FontSize,Color} props

This is a new approach to dealing with ZulipText's
aggressiveDefaultStyles. Like the current one, it has benefits and
tradeoffs.

Here's an example of an upside: in RealmInputScreen, we can now
group three ZulipText(Intl)s together under one ZulipText that
provides `styles.suggestionText` through inheritance, without having
to repeat the very specific `fontSize: 12` in some form across all
three of them. We do have to pass a new prop, inheritFontSize, but
that actually feels appropriate here: those three text components
are overriding a global default, after all, and now they all have
breadcrumbs leading back to the one element that sets the overriding
value.

Oh, and another nice thing: WebLink's implementation is much less
finicky now! I'm not aware of any bugs it has caused, but it feels
easier to understand, and more resilient to upgrading React across
breaking changes.

A downside is that WebLink's children now have to know that
WebLink's set of provided styles includes a `color` and do a little
incantation (`inheritColor`) to let that work. It seems natural for
WebLink's callers to be aware of that, but the incantation could get
tiresome if WebLink (or some analogous component) wanted to apply a
bunch of other attributes, like a text underline, etc.

Author: chrisbobbe

src/common/WebLink.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 
 import ZulipText from './ZulipText';
-import ZulipTextIntl from './ZulipTextIntl';
 import { openLinkWithUserPreference } from '../utils/openLink';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
 import { useGlobalSelector } from '../react-redux';
@@ -25,16 +24,8 @@ const componentStyles = createStyleSheet({
  *
  * Accepts strings as children or a `text` prop, just like ZulipText.
  *
- * Also accepts `ZulipText`s and `ZulipTextIntl`s as children.
- *
- * Note: This sort of messes in those non-string children's business by
- *   unsetting some of their default style attributes. It does this so that
- *   its own special formatting can be passed down through the limited style
- *   inheritance that RN supports:
- *     https://reactnative.dev/docs/text#limited-style-inheritance
- *   See `aggressiveDefaultStyle` in ZulipText.
- *
- * TODO: Possibly there's a better way handle this.
+ * Also accepts `ZulipText`s and `ZulipTextIntl`s as children. To keep the
+ * special formatting, you have to pass `inheritColor` to those.
  */
 export default function WebLink(props: Props): React.Node {
   const { children } = props;
@@ -48,30 +39,7 @@ export default function WebLink(props: Props): React.Node {
         openLinkWithUserPreference(props.url.toString(), globalSettings);
       }}
     >
-      {React.Children.map(children, child => {
-        if (!React.isValidElement(child)) {
-          // Some React node that isn't a React element (a `React.Element`);
-          // e.g., a plain string. The enclosing ZulipText will apply its
-          // styles directly.
-          return child;
-        }
-        // `child` should be a React.Element at this point. Docs are very
-        // vague, but this sounds like it should be true, and it seems true
-        // empirically. Would at least be good to have better type checking.
-
-        if (child.type !== ZulipText && child.type !== ZulipTextIntl) {
-          return child;
-        }
-        // These element types will have a style prop that we want to add to.
-
-        return React.cloneElement(child, {
-          style: {
-            // Defeat ZulipText's aggressiveDefaultStyle.color so that our
-            // color gets applied.
-            color: undefined,
-          },
-        });
-      })}
+      {children}
     </ZulipText>
   );
 }

src/common/ZulipText.js

@@ -3,12 +3,16 @@ import invariant from 'invariant';
 import React, { useContext } from 'react';
 import type { Node } from 'react';
 import { Text } from 'react-native';
+import type { ____TextStyle_Internal } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'; // eslint-disable-line id-match
 
 import { ThemeContext } from '../styles';
 
 type Props = $ReadOnly<{|
   ...$Exact<React$ElementConfig<typeof Text>>,
   text?: string,
+
+  inheritFontSize?: boolean,
+  inheritColor?: boolean,
 |}>;
 
 /**
@@ -20,11 +24,21 @@ type Props = $ReadOnly<{|
  *
  * @prop text - Contents for Text.
  * @prop [style] - Can override our default style for this component.
+ * @prop inheritFontSize, etc. - Use instead of `styles.fontSize`, etc., to
+ *   inherit value from an ancestor Text in the layout:
+ *   https://reactnative.dev/docs/0.67/text#limited-style-inheritance
  * @prop ...all other Text props - Passed through verbatim to Text.
  *   See upstream: https://reactnative.dev/docs/text
  */
 export default function ZulipText(props: Props): Node {
-  const { text, children, style, ...restProps } = props;
+  const {
+    text,
+    children,
+    style,
+    inheritFontSize = false,
+    inheritColor = false,
+    ...restProps
+  } = props;
   const themeData = useContext(ThemeContext);
 
   invariant(
@@ -33,14 +47,22 @@ export default function ZulipText(props: Props): Node {
   );
   invariant(text == null || children == null, 'ZulipText: `text` or `children` should be nullish');
 
-  // These attributes will be applied unless specifically overridden
-  // with the `style` prop -- even if this `<ZulipText />` is nested
-  // and would otherwise inherit the attributes from its ancestors.
-  const aggressiveDefaultStyle = {
+  // These attributes will be applied unless specifically overridden with
+  // the `style` or `inherit*` props -- even if this `<ZulipText />` is
+  // nested and would otherwise inherit the attributes from its ancestors.
+  const aggressiveDefaultStyle: $Rest<____TextStyle_Internal, { ... }> = {
     fontSize: 15,
     color: themeData.color,
+    // If adding an attribute `foo`, give callers a prop `inheritFoo`.
   };
 
+  if (inheritFontSize) {
+    delete aggressiveDefaultStyle.fontSize;
+  }
+  if (inheritColor) {
+    delete aggressiveDefaultStyle.color;
+  }
+
   return (
     <Text style={[aggressiveDefaultStyle, style]} {...restProps}>
       {text}

src/start/PasswordAuthScreen.js

@@ -144,7 +144,7 @@ class PasswordAuthScreenInner extends PureComponent<Props, State> {
         <View style={styles.linksTouchable}>
           <ZulipText style={styles.forgotPasswordText}>
             <WebLink url={new URL('/accounts/password/reset/', realm)}>
-              <ZulipTextIntl text="Forgot password?" />
+              <ZulipTextIntl inheritColor text="Forgot password?" />
             </WebLink>
           </ZulipText>
         </View>

src/start/RealmInputScreen.js

@@ -221,7 +221,7 @@ export default function RealmInputScreen(props: Props): Node {
     [themeContext],
   );
 
-  const renderedSuggestion = React.useMemo(() => {
+  const suggestionContent = React.useMemo(() => {
     if (suggestion === null) {
       // Vertical spacer so the layout doesn't jump when a suggestion
       // appears or disappears. (The empty string might be neater, but it
@@ -230,13 +230,11 @@ export default function RealmInputScreen(props: Props): Node {
       // and React or RN gave in to that. I've tried the obvious ways to use
       // RN's PixelRatio.getFontScale() and never got the right height
       // either; dunno why.)
-      return (
-        <ZulipText style={styles.suggestionText} text={'\u200b'} /* U+200B ZERO WIDTH SPACE */ />
-      );
+      return '\u200b'; // U+200B ZERO WIDTH SPACE
     } else if (typeof suggestion === 'string') {
       return (
         <ZulipTextIntl
-          style={styles.suggestionText}
+          inheritFontSize
           text={{
             text: 'Suggestion: <z-link>{suggestedServerUrl}</z-link>',
             values: {
@@ -254,7 +252,7 @@ export default function RealmInputScreen(props: Props): Node {
         />
       );
     } else {
-      return <ZulipTextIntl style={styles.suggestionText} text={validationErrorMsg(suggestion)} />;
+      return <ZulipTextIntl inheritFontSize text={validationErrorMsg(suggestion)} />;
     }
   }, [suggestion, handlePressSuggestion, styles]);
 
@@ -299,7 +297,7 @@ export default function RealmInputScreen(props: Props): Node {
           ref={textInputRef}
         />
       </View>
-      {renderedSuggestion}
+      <ZulipText style={styles.suggestionText}>{suggestionContent}</ZulipText>
       <ZulipButton
         style={styles.button}
         text="Enter"