Merge pull request #2879 from chrisgarrity/issue/2658-lang-select

Update language selection menu

src/components/language-selector/language-selector.css

@@ -5,19 +5,27 @@
     height:  1.5rem;
 }
 
-.disabled {
-    opacity: .5;
+/* Position the language select over the language icon, and make it transparent */
+.language-select {
+    position: absolute;
+    width: $language-selector-width;
+    height: $menu-bar-height;
+    opacity: 0;
+    user-select: none;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: .875rem;
 }
 
-.language-select {
-    margin: .5rem;
-    height: 1.85rem;
-    border: 1px solid $motion-primary;
-    user-select: none;
-    outline: none;
-    background: rgba(255, 255, 255, 0.5);
-    color: $motion-tertiary;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+[dir="ltr"] .language-select {
+    right: 0;
+}
+
+[dir="rtl"] .language-select {
+    left: 0;
+}
+
+.language-select option {
+    opacity: 1;
 }
 
 .language-select:focus {

src/components/language-selector/language-selector.jsx

@@ -1,58 +1,38 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Box from '../box/box.jsx';
 import locales from 'scratch-l10n';
 import styles from './language-selector.css';
 
 // supported languages to exclude from the menu, but allow as a URL option
 const ignore = ['he'];
 
-class LanguageSelector extends React.Component {
-    render () {
-        const {
-            componentRef,
-            currentLocale,
-            onChange,
-            ...componentProps
-        } = this.props;
-        return (
-            <Box
-                {...componentProps}
-            >
-                <div
-                    className={styles.group}
-                    ref={componentRef}
-                >
-                    <select
-                        className={styles.languageSelect}
-                        value={currentLocale}
-                        onChange={onChange}
+const LanguageSelector = ({currentLocale, label, onChange}) => (
+    <select
+        aria-label={label}
+        className={styles.languageSelect}
+        value={currentLocale}
+        onChange={onChange}
+    >
+        {
+            Object.keys(locales)
+                .filter(l => !ignore.includes(l))
+                .map(locale => (
+                    <option
+                        key={locale}
+                        value={locale}
                     >
-                        {
-                            Object.keys(locales)
-                                .filter(l => !ignore.includes(l))
-                                .map(locale => (
-                                    <option
-                                        key={locale}
-                                        value={locale}
-                                    >
-                                        {locales[locale].name}
-                                    </option>
-                                ))
-                        }
-                    </select>
-                </div>
-            </Box>
-        );
-    }
-}
+                        {locales[locale].name}
+                    </option>
+                ))
+        }
+    </select>
+);
 
 LanguageSelector.propTypes = {
-    componentRef: PropTypes.func,
     currentLocale: PropTypes.string,
-    onChange: PropTypes.func,
-    open: PropTypes.bool
+    label: PropTypes.string,
+    onChange: PropTypes.func
 };
 
 export default LanguageSelector;

src/components/menu-bar/menu-bar.css

@@ -48,8 +48,13 @@
     height:  1.5rem;
 }
 
+.language-caret {
+    margin-bottom: .625rem;
+}
+
 .language-menu {
     display: inline-flex;
+    width: $language-selector-width;
 }
 
 .menu {

src/components/menu-bar/menu-bar.jsx

@@ -165,39 +165,19 @@ class MenuBar extends React.Component {
                             />
                         </div>
                         <div
-                            className={classNames(styles.menuBarItem, styles.hoverable, {
-                                [styles.active]: this.props.languageMenuOpen
-                            })}
-                            onMouseUp={this.handleLanguageMouseUp}
+                            className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
                         >
-                            {/* @TODO: remove coming soon tooltip wrapper  https://github.com/LLK/scratch-gui/issues/2664  */}
-                            <MenuBarItemTooltip
-                                enable
-                                id="menubar-selector"
-                                place="right"
-                            >
-                                <div
-                                    aria-label={this.props.intl.formatMessage(ariaMessages.language)}
-                                    className={classNames(styles.languageMenu)}
-                                >
-                                    <img
-                                        className={styles.languageIcon}
-                                        src={languageIcon}
-                                    />
-                                    <img
-                                        className={styles.dropdownCaret}
-                                        src={dropdownCaret}
-                                    />
-                                </div>
-                                <MenuBarMenu
-                                    open={this.props.languageMenuOpen}
-                                    place={this.props.isRtl ? 'left' : 'right'}
-                                    onRequestClose={this.props.onRequestCloseLanguage}
-                                >
-                                    <LanguageSelector />
-                                </MenuBarMenu>
-
-                            </MenuBarItemTooltip>
+                            <div>
+                                <img
+                                    className={styles.languageIcon}
+                                    src={languageIcon}
+                                />
+                                <img
+                                    className={styles.languageCaret}
+                                    src={dropdownCaret}
+                                />
+                            </div>
+                            <LanguageSelector label={this.props.intl.formatMessage(ariaMessages.language)} />
                         </div>
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, {

src/css/units.css

@@ -6,6 +6,7 @@ $space: 0.5rem;
 $sprites-per-row: 5;
 
 $menu-bar-height: 3rem;
+$language-selector-width: 3rem;
 $sprite-info-height: 6rem;
 $stage-menu-height: 2.75rem;
 

test/integration/localization.test.js

@@ -26,7 +26,6 @@ describe('Localization', () => {
         await loadUri(uri);
         await clickXpath('//button[@title="Try It"]');
         await clickXpath('//*[@aria-label="language selector"]');
-        await clickText('English');
         await clickText('Deutsch');
         await new Promise(resolve => setTimeout(resolve, 1000)); // wait for blocks refresh