Merge pull request #277 from WestpacGEL/269-gel-site-action-bar-4

269 gel site action bar 4
WestpacGEL · Nov 13, 2023 · 8d89559 · 8d89559
2 parents 00720ed + 85fc6a2
commit 8d89559
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx b/apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx
@@ -5,7 +5,7 @@ import { Item, ItemProps, useSelectState } from 'react-stately';
 
 import { GELLogo } from '@/components/logos';
 
-import { styles as sidebarSelectStyles } from './brand-select.styles';
+import { styles as brandSelectStyles } from './brand-select.styles';
 import { type BrandSelectProps } from './brand-select.types';
 import { ListBox } from './components/list-box';
 import { Popover } from './components/popover';
@@ -23,7 +23,7 @@ export function BrandSelect(props: BrandSelectProps) {
   const { buttonProps } = useButton(triggerProps, ref);
 
   const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });
+  const styles = brandSelectStyles({ isFocusVisible, isOpen: state.isOpen });
 
   return (
     <div className={styles.base()}>

diff --git a/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts b/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts
@@ -5,8 +5,7 @@ export const styles = tv(
     slots: {
       base: 'relative flex w-full flex-col',
       label: 'block cursor-default text-left text-sm font-medium text-text',
-      button:
-        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none focus:focus-outline',
+      button: 'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none',
       // TODO: this is a workaround to align, but need to find a better way.
       popover: 'ml-[-0.75rem] w-full',
       // icon: 'text-primary transition-transform',
@@ -16,7 +15,7 @@ export const styles = tv(
     variants: {
       isFocusVisible: {
         true: {
-          base: '',
+          base: 'focus-outline',
         },
         false: {},
       },

diff --git a/...c/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts b/...c/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts
@@ -6,7 +6,7 @@ export const styles = tv(
       base: 'relative flex w-full flex-col',
       label: 'block cursor-default text-left text-sm font-medium text-text',
       button:
-        'relative flex h-11 cursor-pointer flex-row items-stretch overflow-hidden pl-3 pr-4 shadow-sm outline-none focus:focus-outline',
+        'relative flex h-11 cursor-pointer flex-row items-stretch overflow-hidden pl-3 pr-4 shadow-sm outline-none',
       // TODO: this is a workaround to align, but need to find a better way.
       popover: 'ml-[-0.75rem] w-[18.75rem]',
       // icon: 'text-primary transition-transform',
@@ -16,7 +16,7 @@ export const styles = tv(
     variants: {
       isFocusVisible: {
         true: {
-          base: '',
+          button: 'focus-outline',
         },
         false: {},
       },