Merge pull request #230 from brainstormforce/uat-bugs/focus-ring

SRML-64 - fix: Focus ring offset
brainstormforce · Dec 30, 2024 · 9d8ed58 · 9d8ed58
2 parents 61b18e5 + b067466
commit 9d8ed58
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
@@ -73,7 +73,7 @@ export const CheckboxComponent = (
 	const colorClassNames = {
 		primary: {
 			checkbox:
-				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+				'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-2 focus:ring-focus',
 			icon: 'text-white',
 		},
 	};

diff --git a/src/components/radio-button/styles.ts b/src/components/radio-button/styles.ts
@@ -1,7 +1,7 @@
 export const colorClassNames = {
 	primary: {
 		checkbox:
-			'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-4 focus:ring-focus',
+			'border-border-strong hover:border-border-interactive checked:border-border-interactive bg-white checked:bg-toggle-on checked:hover:bg-toggle-on-hover checked:hover:border-toggle-on-hover focus:ring-2 focus:ring-offset-2 focus:ring-focus',
 		icon: 'text-white',
 	},
 };

diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
@@ -224,7 +224,7 @@ export function SelectButton( {
 					'flex items-center justify-between w-full box-border transition-[outline,background-color,color,box-shadow] duration-200 bg-white',
 					'outline outline-1 outline-field-border border-none cursor-pointer',
 					! isOpen &&
-						'focus:ring-2 focus:ring-offset-4 focus:outline-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:outline-border-strong',
+						'focus:ring-2 focus:ring-offset-2 focus:outline-focus-border focus:ring-focus [&:hover:not(:focus):not(:disabled)]:outline-border-strong',
 					sizeClassNames[ sizeValue as SelectSizes ].selectButton,
 					multiple &&
 						sizeClassNames[ sizeValue as SelectSizes ].multiSelect,

diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
@@ -181,7 +181,7 @@ export const SwitchComponent = (
 
 	const colorClassNames = {
 		primary: {
-			input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-4 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
+			input: 'bg-toggle-off checked:bg-toggle-on focus:ring focus:ring-toggle-on focus:ring-offset-2 border border-solid border-toggle-off-border checked:border-toggle-on-border shadow-toggleContainer focus:outline-none checked:focus:border-toggle-on-border focus:border-toggle-off-border',
 			toggleDial: 'bg-toggle-dial-background shadow-toggleDial',
 		},
 	};