default the pill to filled, but allow override

Author: shakyShane

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

@@ -89,6 +89,11 @@
     color: var(--ntp-text-muted);
 }
 
+.fill {
+    backdrop-filter: blur(48px);
+    background-color: var(--ntp-surface-background-color);
+}
+
 .hover {
     transition: background-color .2s;
 

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

@@ -27,17 +27,18 @@ export function ShowHideButtonCircle({ label, onClick, buttonAttrs = {} }) {
  * @param {string} props.text
  * @param {string|undefined} props.label
  * @param {() => void} props.onClick
+ * @param {boolean} [props.fill=true]
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
-export function ShowHideButtonPill({ label, onClick, text, buttonAttrs = {} }) {
+export function ShowHideButtonPill({ label, onClick, text, fill = true, buttonAttrs = {} }) {
     // if a different label was given, make the main text aria-hidden=true
     const btnText = label ? <span aria-hidden="true">{text}</span> : text;
 
     return (
         <button
             {...buttonAttrs}
             aria-label={label}
-            class={cn(styles.button, styles.hover, styles.pill)}
+            class={cn(styles.button, styles.hover, styles.pill, fill && styles.fill)}
             data-toggle="true"
             onClick={onClick}
         >

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js

@@ -232,6 +232,7 @@ function PillShowMoreLess({ expansion }) {
             <ShowHideButtonPill
                 onClick={toggleListExpansion}
                 label={undefined}
+                fill={false}
                 text={expansion === 'collapsed' ? t('ntp_show_more') : t('ntp_show_less')}
                 buttonAttrs={{
                     'aria-expanded': expansion === 'expanded',