From 12f66ea3184fcbf1bb815355fe39903431ae8903 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 4 Sep 2023 19:59:43 +0300
Subject: [PATCH] [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        |   1 +
 apps/storybook/postcss.config.js   |   8 +++-
 packages/ui/src/Button.stories.tsx |  65 ++++++++++++++++++++++-------
 packages/ui/src/Button.tsx         |   9 ++--
 packages/ui/src/Dialog.tsx         |   5 ++-
 pnpm-lock.yaml                     | Bin 899416 -> 899873 bytes
 6 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 6e1551fd8..bebfde3da 100644
--- a/apps/storybook/package.json
+++ b/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"
 	},
diff --git a/apps/storybook/postcss.config.js b/apps/storybook/postcss.config.js
index 054c147cb..05f123861 100644
--- a/apps/storybook/postcss.config.js
+++ b/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"]
+		},
+	},
 };
diff --git a/packages/ui/src/Button.stories.tsx b/packages/ui/src/Button.stories.tsx
index 5a3229db2..afeb45974 100644
--- a/packages/ui/src/Button.stories.tsx
+++ b/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>
+	);
 };
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 57d29284e..7e34ac0a3 100644
--- a/packages/ui/src/Button.tsx
+++ b/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: ''
diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
index 33ea5fb20..acf9ff3e7 100644
--- a/packages/ui/src/Dialog.tsx
+++ b/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>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f79502f7e052d9354ffb69154d7498e6a2ef8bb6..504496a7dbdec5045689230c0c68363598c8e04e 100644
GIT binary patch
delta 328
zcmccd$!y^_vkh9Tli$RPZZ=~LFp)3FFD^+gF4iq5PAyHz*G<mPElAAE%+J$J&PgmT
zPM!RbTYU0?9NEd61jQ!r5Ruxvz;Xo_P`CQ#G?$mmAY+=NJ=&u^7=f4xh?#+y1&CRJ
zm<@>8ftUk`Ik!i9aEX7H!C_6YgMpsm^g?}Z^AKmR!c0d$zYyPuLT~S?#6S;6zm!P#
zl!C(iprp{U;t2O}57(qBFO!VokTjzZH+`=xqcnfN@RZ`j2uDB92+x45oV0w;Jbi8L
zaC5gjZ||bKsO;$v_p{4SH~7ZJJ^hs-qr~(Nw%nX7aTa>U(=P@xOM|!~({I~wi%+j}
p;1+Ffx90|8p6%`Sy#I`**QPUzPPbXfsxf`SGZw||w~Bb{+yE(Rci#X2

delta 116
zcmZ4Z&Fsb}vkh9TlQr!`HoLQWm~8%Gd58<h<Jo-P<u@~s!QcGIqy3QwBM>tIF*6Xe
z05K~NvjH(X5OV-A=k`Y)Tq576+c|NIw!1rW12NBbcSqiTM$@zF*_@|8DB@MyzP*Gu
G%MAb}94{{b