shipReview: Windows NextSteps feedback (part 2) (#1334)

* chore: Add new expansion option margin setup to Favorites (copied from NextSteps)

* chore: Add box-shadow to showHideButton

* dark mode

* fix: ShowHide button bg

* chore: Update showhide btn docs, cleanup

* fix: backdrop filter on round btn

* fix: backdrop filter again.

* chore: Rename classname for clarity

---------

Co-authored-by: Shane Osbourne <[email protected]>

Author: vkraucunas

special-pages/pages/new-tab/app/components/ShowHide.module.css

@@ -18,20 +18,28 @@
         width: 2rem;
         border-radius: 50%;
         padding-inline: 0;
+        background-color: transparent;
+        color: var(--ntp-text-muted);
 
-        svg rect {
-            fill-opacity: 0;
+
+        .iconBlock {
+            backdrop-filter: unset;
+            background-color: transparent;
+            box-shadow: none;
+            transition: all 0.3s ease-in;
+
+            [data-theme=dark] & {
+                box-shadow: none;
+                background-color: transparent;
+            }
         }
 
         &:hover {
-            transition: all 0.3s ease-in;
-            svg rect {
-                fill: black;
-                fill-opacity: 0.06;
+            .iconBlock {
+                background-color: var(--color-black-at-6);
 
                 [data-theme=dark] & {
-                    fill: white;
-                    fill-opacity: 0.12;
+                    background-color: var(--color-white-at-12);
                 }
             }
         }
@@ -43,6 +51,7 @@
 
     &.withText {
         border: 1px solid var(--color-black-at-9);
+
         svg {
             margin-right: var(--sp-2);
         }
@@ -56,14 +65,32 @@
         }
     }
 
-    > * {
+    >* {
         pointer-events: none;
     }
 
     svg {
         transition: transform .3s;
     }
 
+    .iconBlock {
+        backdrop-filter: blur(48px);
+        background-color: var(--ntp-surface-background-color);
+        border-radius: 50%;
+        height: 1.5rem;
+        width: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0px 2px 4px 0px var(--color-black-at-12), 0px 0px 3px 0px var(--color-black-at-18);
+        color: var(--ntp-text-muted);
+
+
+        [data-theme="dark"] & {
+            box-shadow: 0px 2px 4px 0px var(--color-white-at-6), 0px 0px 3px 0px var(--color-white-at-9);
+        }
+    }
+
     &[aria-pressed=true] svg {
         transform: rotate(-180deg);
     }
@@ -86,4 +113,4 @@
             }
         }
     }
-}
+}

special-pages/pages/new-tab/app/components/ShowHideButton.jsx

@@ -1,16 +1,16 @@
 import styles from './ShowHide.module.css';
 import cn from 'classnames';
-import { ChevronButton, Chevron } from './Icons.js';
+import { Chevron } from './Icons.js';
 import { Fragment, h } from 'preact';
 
 /**
  * Function to handle showing or hiding content based on certain conditions.
  *
  * @param {Object} props - Input parameters for controlling the behavior of the ShowHide functionality.
  * @param {string} props.text
- * @param {boolean} [props.showText]
  * @param {() => void} props.onClick
- * @param {'none'|'round'} [props.shape]
+ * @param {'none'|'round'} [props.shape] - when "none", is a full width btn w/ icon inside (used for below Favorites and NextSteps), Round is the PrivacyStats heading button
+ * @param {boolean} [props.showText] - btn w/ icon and text (used to expand PrivacyStats list), should be used with shape="none"
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
 export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none', showText = false }) {
@@ -27,7 +27,9 @@ export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none'
                     {text}
                 </Fragment>
             ) : (
-                <ChevronButton />
+                <div class={styles.iconBlock}>
+                    <Chevron />
+                </div>
             )}
         </button>
     );

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -48,7 +48,7 @@ export function Favorites({ gridRef, favorites, expansion, toggle, openContextMe
     const canToggleExpansion = favorites.length >= ROW_CAPACITY;
 
     return (
-        <div class={cn(styles.root, !canToggleExpansion && styles.bottomSpace)} data-testid="FavoritesConfigured">
+        <div class={cn(styles.root, !canToggleExpansion && styles.noExpansionBtn)} data-testid="FavoritesConfigured">
             <VirtualizedGridRows
                 WIDGET_ID={WIDGET_ID}
                 favorites={favorites}

special-pages/pages/new-tab/app/favorites/components/Favorites.module.css

@@ -1,14 +1,13 @@
 .root {
     width: 100%;
-    /* 1px bottom margin for focus box-shadow */
-    margin: 0 auto 1px;
+    margin: 0 auto var(--sp-4);
     display: grid;
     grid-template-rows: auto auto;
     grid-template-areas:
         'grid'
         'showhide';
 
-    &.bottomSpace {
+    &.noExpansionBtn {
         margin-bottom: var(--ntp-gap);
     }
 

special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css

@@ -145,7 +145,7 @@
         }
     }
 
-    &.bottomSpace {
+    &.noExpansionBtn {
         margin-bottom: var(--ntp-gap);
     }
 }

special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js

@@ -31,7 +31,7 @@ export function NextStepsCardGroup({ types, expansion, toggle, action, dismiss }
     const alwaysShown = types.length > 2 ? types.slice(0, 2) : types;
 
     return (
-        <div class={cn(styles.cardGroup, types.length <= 2 && styles.bottomSpace)} id={WIDGET_ID}>
+        <div class={cn(styles.cardGroup, types.length <= 2 && styles.noExpansionBtn)} id={WIDGET_ID}>
             <NextStepsBubbleHeader />
             <div class={styles.cardGrid}>
                 {alwaysShown.map((type) => (