fix: balance wrapped text where appropriate in connection flow

package-lock.json

@@ -13,6 +13,7 @@
         "@microbit/microbit-universal-hex": "0.2.2",
         "arraybuffer-loader": "^1.0.6",
         "autoprefixer": "^9.0.1",
+        "balance-text": "3.3.1",
         "base64-loader": "1.0.0",
         "bowser": "1.9.4",
         "cat-blocks": "npm:scratch-blocks@0.1.0-prerelease.20220318143026",
@@ -9069,6 +9070,11 @@
         "babylon": "bin/babylon.js"
       }
     },
+    "node_modules/balance-text": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/balance-text/-/balance-text-3.3.1.tgz",
+      "integrity": "sha512-tpnHvo1w0rJ5rbu+jZKf7NLKKg6XZ6eAwREP/9jEDJ+ZTBi6jQFqn/UGARL3/oqD8SgQbyTwBXBjhKDdTgoPRw=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -38227,6 +38233,11 @@
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
       "dev": true
     },
+    "balance-text": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/balance-text/-/balance-text-3.3.1.tgz",
+      "integrity": "sha512-tpnHvo1w0rJ5rbu+jZKf7NLKKg6XZ6eAwREP/9jEDJ+ZTBi6jQFqn/UGARL3/oqD8SgQbyTwBXBjhKDdTgoPRw=="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "@microbit/microbit-universal-hex": "0.2.2",
     "arraybuffer-loader": "^1.0.6",
     "autoprefixer": "^9.0.1",
+    "balance-text": "3.3.1",
     "base64-loader": "1.0.0",
     "bowser": "1.9.4",
     "cat-blocks": "npm:scratch-blocks@0.1.0-prerelease.20220318143026",

src/components/connection-modal/auto-scanning-step.jsx

@@ -4,6 +4,7 @@ import React from 'react';
 import keyMirror from 'keymirror';
 import classNames from 'classnames';
 
+import BalancedFormattedMessage from '../../containers/balanced-formatted-message.jsx';
 import Box from '../box/box.jsx';
 import Dots from './dots.jsx';
 
@@ -93,7 +94,7 @@ const AutoScanningStep = props => {
             </Box>
             {showUpdate && (
                 <Box className={classNames(styles.bottomAreaItem, styles.instructions)}>
-                    <FormattedMessage
+                    <BalancedFormattedMessage
                         defaultMessage="If you don't see your device, you may need to update it to work with Scratch."
                         description="Prompt for updating a peripheral device"
                         id="gui.connection.auto-scanning.updatePeripheralPrompt"

src/components/connection-modal/scanning-step.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
+import BalancedFormattedMessage from '../../containers/balanced-formatted-message.jsx';
 import Box from '../box/box.jsx';
 import PeripheralTile from './peripheral-tile.jsx';
 import Dots from './dots.jsx';
@@ -76,7 +77,7 @@ const ScanningStep = props => {
                     // Show this message if we're done scanning AND we can update
                     // Note that it's possible the list includes devices but does not include the desired device,
                     // so don't limit this message to the (props.peripheralList.length === 0) case
-                    <FormattedMessage
+                    <BalancedFormattedMessage
                         defaultMessage="If you don't see your device, you may need to update it to work with Scratch."
                         description="Prompt for updating a peripheral device"
                         id="gui.connection.scanning.updatePeripheralPrompt"

src/components/connection-modal/update-peripheral-step.jsx

@@ -6,13 +6,15 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import keyMirror from 'keymirror';
 
+import BalancedFormattedMessage from '../../containers/balanced-formatted-message.jsx';
 import Box from '../box/box.jsx';
+import ProgressRingComponent from '../progress-ring/progress-ring.jsx';
+
 import backIcon from './icons/back.svg';
 import sendUpdateIcon from './icons/send-update.svg';
 import sendUpdateGlyph from './icons/send-update-white.svg';
 
 import styles from './connection-modal.css';
-import ProgressRingComponent from '../progress-ring/progress-ring.jsx';
 
 /** @enum{string} UPDATE_ACTIVITY */
 const UPDATE_ACTIVITY = keyMirror({
@@ -141,8 +143,8 @@ class UpdatePeripheralStep extends React.Component {
             />);
         } else if (this.state.err.message === 'No valid interfaces found.') {
             // this is a special case where the micro:bit's communication firmware is too old to support WebUSB
-            resultsContent = (<FormattedMessage
-                defaultMessage="Please visit {microBitFirmwareLink} to update your micro:bit firmware."
+            resultsContent = (<BalancedFormattedMessage
+                defaultMessage="Please visit this link to update your micro:bit firmware: {microBitFirmwareLink}"
                 description="Message to indicate that the special micro:bit interface firmware needs to be updated"
                 id="gui.connection.updatePeripheral.updateMicroBitFirmware"
                 values={{
@@ -190,8 +192,8 @@ class UpdatePeripheralStep extends React.Component {
                 {showResults && this.renderResults()}
                 <Box className={styles.bottomArea}>
                     {!showResults &&
-                        <FormattedMessage
-                            className={styles.bottomAreaItem}
+                        <BalancedFormattedMessage
+                            classname={styles.bottomAreaItem}
                             defaultMessage={'Do not leave or reload Scratch or disconnect your {extensionName} ' +
                                 'until the update is complete.'}
                             description="Notice to not disrupt the peripheral update process"

src/containers/balanced-formatted-message.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+import BalancedText from './balanced-text.jsx';
+
+const BalancedFormattedMessage = props => {
+    const {className, resize, style, ...otherProps} = props;
+    const balancedTextProps = {className, resize, style};
+    return (<FormattedMessage {...otherProps}>
+        {(...children) => <BalancedText {...balancedTextProps}>{children}</BalancedText>}
+    </FormattedMessage>);
+};
+
+BalancedFormattedMessage.propTypes = {
+    ...FormattedMessage.propTypes,
+    resize: PropTypes.bool
+};
+
+export default BalancedFormattedMessage;

src/containers/balanced-text.jsx

@@ -0,0 +1,97 @@
+/*
+ * Attempts to balance the length of each line of wrapped text.
+ * If the text does not wrap, this component will have no effect.
+ * See https://developer.chrome.com/blog/css-text-wrap-balance/
+ * Patterned after `react-balance-text` with adjustments to support our method of styling.
+ * We may want to replace this with react-wrap-balancer once we use React >= 16.8
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import balanceText from 'balance-text';
+import bindAll from 'lodash.bindall';
+
+class BalancedText extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'balanceText',
+            'handleResize'
+        ]);
+        this.state = {
+            forceHide: true
+        };
+    }
+
+    componentDidMount () {
+        self.addEventListener('resize', this.handleResize);
+        this.stopHiding();
+    }
+
+    componentDidUpdate () {
+        this.balanceText();
+    }
+
+    componentWillUnmount () {
+        self.removeEventListener('resize', this.handleResize);
+    }
+
+    handleResize () {
+        if (this.props.resize) {
+            this.balanceText();
+        }
+    }
+
+    balanceText () {
+        const {container} = this;
+        if (container) {
+            balanceText(container, {});
+        }
+    }
+
+    stopHiding () {
+        this.setState({forceHide: false});
+        setTimeout(() => this.balanceText(), 0);
+    }
+
+    render () {
+        let {
+            children,
+            resize, // eslint-disable-line no-unused-vars
+            style,
+            ...otherProps
+        } = this.props;
+
+        if (this.state.forceHide) {
+            style = Object.assign({}, style, {visibility: 'hidden'});
+        }
+
+        return (
+            <div
+                {...otherProps}
+                style={style}
+            >
+                <span
+                    ref={container => {
+                        this.container = container;
+                    }}
+                >
+                    {children}
+                </span>
+            </div>
+        );
+    }
+}
+
+BalancedText.propTypes = {
+    children: PropTypes.node,
+    resize: PropTypes.bool,
+    style: PropTypes.object // eslint-disable-line react/forbid-prop-types
+};
+
+BalancedText.defaultProps = {
+    resize: true
+};
+
+export default BalancedText;