NTP Omnibar: Adjust focus ring styling and remove it when typing (#1838)

* Remove focus ring when typing

* Fix overflow due to typo

* Adjust focus ring styling to match spec and always hide ring when
suggestions list is open

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js

@@ -15,10 +15,13 @@ import styles from './AiChatForm.module.css';
  * @param {object} props
  * @param {string} props.chat
  * @param {boolean} [props.autoFocus]
+ * @param {(event: FocusEvent) => void} props.onFocus
+ * @param {(event: FocusEvent) => void} props.onBlur
+ * @param {(event: InputEvent) => void} props.onInput
  * @param {(chat: string) => void} props.onChange
  * @param {(params: { chat: string, target: OpenTarget }) => void} props.onSubmit
  */
-export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
+export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange, onSubmit }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
 
@@ -94,6 +97,9 @@ export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
                 aria-label={t('omnibar_aiChatFormPlaceholder')}
                 autoComplete="off"
                 rows={1}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onInput={onInput}
                 onKeyDown={handleKeyDown}
                 onChange={handleChange}
             />

special-pages/pages/new-tab/app/omnibar/components/Container.js

@@ -1,34 +1,47 @@
+import cn from 'classnames';
 import { h } from 'preact';
 import styles from './Container.module.css';
 import { useRef, useLayoutEffect, useState } from 'preact/hooks';
 
 /**
  * @param {object} props
  * @param {boolean} props.overflow
+ * @param {boolean} [props.focusRing]
  * @param {import('preact').ComponentChildren} props.children
  */
-export function Container({ overflow, children }) {
+export function Container({ overflow, focusRing, children }) {
+    const { contentRef, initialHeight, currentHeight } = useContentHeight();
+    return (
+        <div class={styles.outer} style={{ height: overflow && initialHeight ? initialHeight : 'auto' }}>
+            <div
+                class={cn(styles.inner, {
+                    [styles.focusRing]: focusRing === true,
+                    [styles.noFocusRing]: focusRing === false,
+                })}
+                style={{ height: currentHeight ?? 'auto' }}
+            >
+                <div ref={contentRef}>{children}</div>
+            </div>
+        </div>
+    );
+}
+
+function useContentHeight() {
     const contentRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const initialHeight = useRef(/** @type {number|null} */ (null));
-    const [contentHeight, setContentHeight] = useState(/** @type {number|null} */ (null));
+    const [currentHeight, setCurrentHeight] = useState(/** @type {number|null} */ (null));
 
     useLayoutEffect(() => {
         const content = contentRef.current;
         if (!content) return;
 
         initialHeight.current = content.scrollHeight;
-        setContentHeight(content.scrollHeight);
+        setCurrentHeight(content.scrollHeight);
 
-        const resizeObserver = new ResizeObserver(() => setContentHeight(content.scrollHeight));
+        const resizeObserver = new ResizeObserver(() => setCurrentHeight(content.scrollHeight));
         resizeObserver.observe(content);
         return () => resizeObserver.disconnect();
     }, []);
 
-    return (
-        <div class={styles.outer} style={{ height: overflow && initialHeight.current ? initialHeight.current : 'auto' }}>
-            <div class={styles.inner} style={{ height: contentHeight ?? 'auto' }}>
-                <div ref={contentRef}>{children}</div>
-            </div>
-        </div>
-    );
+    return { contentRef, initialHeight: initialHeight.current, currentHeight };
 }

special-pages/pages/new-tab/app/omnibar/components/Container.module.css

@@ -5,7 +5,7 @@
 
 .inner {
     background: var(--ntp-surface-tertiary);
-    border-radius: 11px;
+    border-radius: 12px;
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
     margin: 0 calc(-1 * var(--sp-1));
     overflow: hidden;
@@ -16,15 +16,14 @@
         transition: none;
     }
 
-    &:focus-within {
-        border-radius: 14px;
-        box-shadow: 0 0 0 2px var(--ntp-color-primary), 0 0 0 4px rgba(57, 105, 239, 0.2);
-        margin: 0 calc(-1 * var(--sp-1) - 3px);
-        padding: 0 3px;
+    &:not(:has([role="listbox"])).focusRing,
+    &:not(:has([role="listbox"])):focus-within:not(.noFocusRing) {
+        border-radius: 15px;
+        box-shadow: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-color-primary), 0 0 0 7px rgba(57, 105, 239, 0.2);
     }
 
     &:has([role="listbox"]) {
-        border-radius: 16px;
-        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+        border-radius: 15px;
+        box-shadow: 0 0 0 3px var(--ntp-surface-tertiary), 0px 4px 12px 3px rgba(0, 0, 0, 0.10), 0px 20px 40px 3px rgba(0, 0, 0, 0.08);
     }
 }

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -27,6 +27,7 @@ export function Omnibar({ mode, setMode, enableAi }) {
     const [query, setQuery] = useState(/** @type {String} */ (''));
     const [resetKey, setResetKey] = useState(0);
     const [autoFocus, setAutoFocus] = useState(false);
+    const [focusRing, setFocusRing] = useState(/** @type {boolean|undefined} */ (undefined));
 
     const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
 
@@ -56,14 +57,15 @@ export function Omnibar({ mode, setMode, enableAi }) {
     /** @type {(mode: OmnibarConfig['mode']) => void} */
     const handleChangeMode = (nextMode) => {
         setAutoFocus(true);
+        setFocusRing(undefined);
         setMode(nextMode);
     };
 
     return (
         <div class={styles.root} data-mode={mode}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
             {enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
-            <Container overflow={mode === 'search'}>
+            <Container overflow={mode === 'search'} focusRing={focusRing}>
                 {mode === 'search' ? (
                     <SearchForm
                         key={`search-${resetKey}`}
@@ -78,6 +80,9 @@ export function Omnibar({ mode, setMode, enableAi }) {
                         key={`chat-${resetKey}`}
                         chat={query}
                         autoFocus={autoFocus}
+                        onFocus={() => setFocusRing(true)}
+                        onBlur={() => setFocusRing(false)}
+                        onInput={() => setFocusRing(false)}
                         onChange={setQuery}
                         onSubmit={handleSubmitChat}
                     />