[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>

pnpm-lock.yaml

@@ -49,7 +49,7 @@ importers:
         version: 5.0.4
       vite:
         specifier: ^4.3.9
-        version: 4.3.9(less@4.2.0)
+        version: 4.3.9(@types/node@18.15.1)
 
   apps/desktop:
     dependencies:
@@ -463,6 +463,9 @@ importers:
       '@storybook/testing-library':
         specifier: ^0.1.0
         version: 0.1.0
+      postcss-pseudo-companion-classes:
+        specifier: ^0.1.1
+        version: 0.1.1(postcss@8.4.23)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -566,7 +569,7 @@ importers:
         version: 5.0.4
       vite:
         specifier: ^4.0.4
-        version: 4.3.9(less@4.2.0)
+        version: 4.3.9(@types/node@18.15.1)
       vite-plugin-html:
         specifier: ^3.2.0
         version: 3.2.0(vite@4.3.9)
@@ -606,7 +609,7 @@ importers:
         version: 4.8.2
       vite:
         specifier: ^4.0.4
-        version: 4.3.9(less@4.2.0)
+        version: 4.3.9(@types/node@18.15.1)
 
   interface:
     dependencies:
@@ -19521,6 +19524,15 @@ packages:
       postcss: 8.4.28
       postcss-selector-parser: 6.0.13
 
+  /postcss-pseudo-companion-classes@0.1.1(postcss@8.4.23):
+    resolution: {integrity: sha512-CJqiANNTMXqKKzaQHANdYGdpqoRbUvsXGWHEbzJ4hsTf2TF/Jj2fONWdsaXANIXIPjlfoIn/++W7FnKKrnZkNg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      postcss: ^8.3.0
+    dependencies:
+      postcss: 8.4.23
+    dev: false
+
   /postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
@@ -23545,7 +23557,7 @@ packages:
       globrex: 0.1.2
       recrawl-sync: 2.2.3
       tsconfig-paths: 4.2.0
-      vite: 4.3.9(less@4.2.0)
+      vite: 4.3.9(@types/node@18.15.1)
     transitivePeerDependencies:
       - supports-color
     dev: true