fix: Improve button style consistency (#243)

* fix: Improve button style consistency

Overloading the in-use `tertiary` button variant styles resulted in
unexpected and inconsistent styles in the UI --- e.g., the "Add site"
dialog. Introducing a new `outlined` variant achieves the original goal
of a new button style that is now used in both the sidebar and AI
assistant code blocks.

* feat: Reduce inline code button size

The default button size is too large and dominating for the context of
inline code within AI assistant responses.

src/components/add-site.tsx

@@ -4,7 +4,6 @@ import { useI18n } from '@wordpress/react-i18n';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 import { useAddSite } from '../hooks/use-add-site';
 import { useIpcListener } from '../hooks/use-ipc-listener';
-import { cx } from '../lib/cx';
 import { generateSiteName } from '../lib/generate-site-name';
 import { getIpcApi } from '../lib/get-ipc-api';
 import Button from './button';
@@ -15,25 +14,6 @@ interface AddSiteProps {
 	className?: string;
 }
 
-/**
- * The arbitrary Tailwind variants below (e.g., `[&.is-secondary]`) are used to
- * achieve the specificity required to override the default button styles
- * without `!important`, which often creates specificity collisions.
- */
-const buttonStyles = `
-add-site
-text-white
-[&.components-button]:hover:text-black
-[&.components-button]:hover:bg-gray-100
-[&.components-button]:active:text-black
-[&.components-button]:active:bg-gray-100
-[&.components-button]:shadow-[inset_0_0_0_1px_white]
-[&.components-button.add-site]:focus:shadow-[inset_0_0_0_1px_white]
-[&.components-button]:focus-visible:outline-none
-[&.components-button.add-site]:focus-visible:shadow-[inset_0_0_0_1px_#3858E9]
-[&.components-button]:focus-visible:shadow-a8c-blueberry
-`.replace( /\n/g, ' ' );
-
 export default function AddSite( { className }: AddSiteProps ) {
 	const { __ } = useI18n();
 	const [ showModal, setShowModal ] = useState( false );
@@ -152,7 +132,7 @@ export default function AddSite( { className }: AddSiteProps ) {
 					</SiteForm>
 				</Modal>
 			) }
-			<Button className={ cx( buttonStyles, className ) } onClick={ openModal }>
+			<Button variant="outlined" className={ className } onClick={ openModal }>
 				{ __( 'Add site' ) }
 			</Button>
 		</>

src/components/button.tsx

@@ -11,10 +11,12 @@ import { cx } from '../lib/cx';
 type MappedOmit< T, K extends PropertyKey > = { [ P in keyof T as Exclude< P, K > ]: T[ P ] };
 
 export type ButtonProps = MappedOmit< ComponentProps< typeof Button >, 'variant' > & {
-	variant?: 'primary' | 'secondary' | 'tertiary' | 'link' | 'icon';
+	variant?: ButtonVariant;
 	truncate?: boolean;
 };
 
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'link' | 'icon';
+
 /**
  * The arbitrary Tailwind variants below (e.g., `[&.is-secondary]`) are used to
  * achieve the specificity required to override the default button styles
@@ -59,17 +61,18 @@ const secondaryStyles = `
 [&.is-secondary:not(:focus)]:aria-disabled:hover:shadow-a8c-gray-5
 `.replace( /\n/g, ' ' );
 
-const tertiaryStyles = `
-[&.is-tertiary]:text-white
-[&.is-tertiary]:bg-gray-700
-[&.is-tertiary]:focus:bg-gray-600
-[&.is-tertiary]:focus:text-white
-[&.is-tertiary:not(.is-destructive,:disabled,[aria-disabled=true])]:hover:bg-gray-600
-[&.is-tertiary:not(.is-destructive,:disabled,[aria-disabled=true])]:hover:text-white
-[&.is-tertiary]:hover:bg-white
-[&.is-tertiary]:hover:text-white
-[&.is-tertiary]:disabled:bg-gray-700
-[&.is-tertiary]:disabled:text-a8c-gray-50
+const outlinedStyles = `
+outlined
+text-white
+[&.components-button]:hover:text-black
+[&.components-button]:hover:bg-gray-100
+[&.components-button]:active:text-black
+[&.components-button]:active:bg-gray-100
+[&.components-button]:shadow-[inset_0_0_0_1px_white]
+[&.components-button.outlined]:focus:shadow-[inset_0_0_0_1px_white]
+[&.components-button]:focus-visible:outline-none
+[&.components-button.outlined]:focus-visible:shadow-[inset_0_0_0_1px_#3858E9]
+[&.components-button]:focus-visible:shadow-a8c-blueberry
 `.replace( /\n/g, ' ' );
 
 const destructiveStyles = `
@@ -95,6 +98,19 @@ hover:bg-white
 hover:bg-opacity-10
 `.replace( /\n/g, ' ' );
 
+/**
+ * Filter out custom values from the `variant` prop to avoid passing invalid
+ * values to the core WordPress components.
+ *
+ * @param variant - The button variant.
+ * @returns The variant value or, if the value is a Studio-specific, `undefined`.
+ */
+function sansCustomValues( variant: ButtonVariant | undefined ) {
+	return !! variant && [ 'outlined', 'icon' ].includes( variant )
+		? undefined
+		: ( variant as Exclude< ButtonVariant, 'outlined' | 'icon' > | undefined );
+}
+
 export default function ButtonComponent( {
 	className,
 	variant,
@@ -115,12 +131,12 @@ export default function ButtonComponent( {
 	return (
 		<Button
 			{ ...props }
-			variant={ variant === 'icon' ? undefined : variant }
+			variant={ sansCustomValues( variant ) }
 			className={ cx(
 				baseStyles,
 				variant === 'primary' && primaryStyles,
 				variant === 'secondary' && secondaryStyles,
-				variant === 'tertiary' && tertiaryStyles,
+				variant === 'outlined' && outlinedStyles,
 				variant === 'link' && linkStyles,
 				variant === 'icon' && iconStyles,
 				props.isDestructive && destructiveStyles,

src/components/content-tab-assistant.tsx

@@ -75,8 +75,8 @@ const ActionButton = ( {
 	return (
 		<Button
 			onClick={ handleClick }
-			variant="tertiary"
-			className="mr-2 font-sans select-none"
+			variant="outlined"
+			className="h-auto mr-2 !px-2.5 py-0.5 font-sans select-none"
 			disabled={ disabled }
 		>
 			{ icon }