[ENG-1044] Focus buttons styling + storybook (#1295)

* focus buttons styling improved + storybook

* Update Button.stories.tsx

---------

Co-authored-by: jake <77554505+brxken128@users.noreply.github.com>

apps/storybook/package.json

@@ -14,6 +14,7 @@
 		"@storybook/react": "^7.0.5",
 		"@storybook/react-vite": "^7.0.5",
 		"@storybook/testing-library": "^0.1.0",
+		"postcss-pseudo-companion-classes": "^0.1.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

apps/storybook/postcss.config.js

@@ -1,6 +1,10 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-		autoprefixer: {}
-	}
+		autoprefixer: {},
+		"postcss-pseudo-companion-classes": {
+			prefix: "sb-pseudo--",
+			restrictTo: [":hover", ":focus"]
+		},
+	},
 };

packages/ui/src/Button.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
@@ -17,20 +17,55 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 
-const Template: StoryFn<typeof Button> = (args) => <Button {...args} />;
+type ButtonVariant = 'accent' | 'default' | 'colored' | 'dotted' | 'gray' | 'outline' | 'subtle';
 
-export const Default: StoryFn<typeof Button> = Template.bind({});
-Default.args = {
-	variant: 'default'
-};
+export const AllVariants = () => {
+	const buttonVariants: ButtonVariant[] = [
+		'accent',
+		'default',
+		'colored',
+		'dotted',
+		'gray',
+		'outline',
+		'subtle'
+	];
+	return (
+		<div className="w-full h-screen p-10 bg-app">
+			<h1 className="text-[20px] font-bold text-white">Buttons</h1>
+			<div className="mb-6 ml-[90px] mt-5 flex flex-col gap-8 text-sm">
+				<div className="ml-[100px] grid w-full max-w-[850px] grid-cols-9 items-center gap-6">
+					{buttonVariants.map((variant) => (
+						<p key={variant} className="text-white/80">
+							{variant}
+						</p>
+					))}
+				</div>
+				<div className="grid w-full max-w-[850px] grid-cols-9 items-center gap-6">
+					<h1 className="text-[14px] font-bold text-white">Regular</h1>
+					{buttonVariants.map((variant) => (
+						<Button key={variant} variant={variant}>
+							Button
+						</Button>
+					))}
+				</div>
+				<div className="grid w-full max-w-[850px] grid-cols-9 items-center gap-6">
+					<h1 className="text-[14px] font-bold text-white">Hovered</h1>
+					{buttonVariants.map((variant) => (
+						<Button key={variant} className="sb-pseudo--hover" variant={variant}>
+							Button
+						</Button>
+					))}
+				</div>
 
-export const Primary: StoryFn<typeof Button> = Template.bind({});
-Primary.args = {
-	variant: 'accent'
-};
-
-export const PrimarySmall: StoryFn<typeof Button> = Template.bind({});
-PrimarySmall.args = {
-	variant: 'accent',
-	size: 'sm'
+				<div className="grid w-full max-w-[850px] grid-cols-9 items-center gap-6">
+					<h1 className="text-[14px] font-bold text-white">Focused</h1>
+					{buttonVariants.map((variant) => (
+						<Button key={variant} className="sb-pseudo--focus" variant={variant}>
+							Button
+						</Button>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 };

packages/ui/src/Button.tsx

@@ -22,7 +22,7 @@ type Button = {
 
 const hasHref = (props: ButtonProps | LinkButtonProps): props is LinkButtonProps => 'href' in props;
 
-const styles = cva(
+export const styles = cva(
 	[
 		'cursor-default items-center rounded-md border outline-none transition-colors duration-100',
 		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70',
@@ -51,11 +51,12 @@ const styles = cva(
 					`rounded border border-dashed border-sidebar-line/70 text-center text-xs font-medium text-ink-faint transition hover:border-sidebar-line hover:bg-sidebar-selected/5`
 				],
 				gray: [
-					'bg-app-button hover:bg-app-hover active:bg-app-selected',
-					'border-app-line hover:border-app-line active:border-app-active'
+					'bg-app-button hover:bg-app-hover focus:bg-app-selected',
+					'border-app-line hover:border-app-line focus:ring-1 focus:ring-accent'
 				],
 				accent: [
-					'border-accent-deep bg-accent text-white shadow-md shadow-app-shade/10 hover:border-accent hover:bg-accent-faint focus:outline-none focus:ring focus:ring-accent active:border-accent-deep active:bg-accent'
+					'bg-accent border-accent border text-white shadow-md shadow-app-shade/10 hover:bg-accent-faint focus:outline-none',
+					'focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
 				],
 				colored: ['text-white shadow-sm hover:bg-opacity-90 active:bg-opacity-100'],
 				bare: ''

packages/ui/src/Dialog.tsx

@@ -183,7 +183,10 @@ export function Dialog<S extends FieldValues>({
 				form.formState.isSubmitting || props.submitDisabled || !form.formState.isValid
 			}
 			variant={props.ctaDanger ? 'colored' : 'accent'}
-			className={clsx(props.ctaDanger && 'border-red-500 bg-red-500')}
+			className={clsx(
+				props.ctaDanger &&
+					'border-red-500 bg-red-500 focus:ring-1 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-app-selected'
+			)}
 		>
 			{props.ctaLabel}
 		</Button>