Fix ComboBox focus ring (#365)

* docs: propose updated theming approach

* fix: update combobox to have correct focus outline

Author: serikjensen

src/components/Common/UI/ComboBox/ComboBox.module.scss

@@ -7,25 +7,21 @@
     color: var(--g-typography-text-color);
     width: 100%;
     box-shadow: var(--g-shadow-100);
-
-    > div {
-      position: relative;
-      display: flex;
-      align-items: center;
-      border: var(--g-input-borderWidth) solid var(--g-input-borderColor);
-      border-radius: var(--g-input-radius);
-      background: var(--g-input-background);
-    }
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: var(--g-input-borderWidth) solid var(--g-input-borderColor);
+    border-radius: var(--g-input-radius);
+    background: var(--g-input-background);
 
     &[data-invalid] {
-      > div {
-        border-color: var(--g-colors-error-500);
-      }
+      border-color: var(--g-colors-error-500);
     }
 
     &:focus-within {
       @include formFocusOutline($offset: calc(var(--g-input-borderWidth) * -1));
-      border-radius: var(--g-radius);
+      border-radius: var(--g-input-radius);
+
       &[data-invalid] {
         @include formFocusError($offset: calc(var(--g-input-borderWidth) * -1));
       }

src/components/Common/UI/ComboBox/ComboBox.tsx

@@ -78,15 +78,13 @@ export const ComboBox = ({
         selectedKey={value ? (value as Key) : undefined}
         name={name}
       >
-        <div>
-          <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />
-          <Button>
-            <div aria-hidden="true" className={styles.icons}>
-              {isInvalid && <AlertCircle fontSize={16} />}
-              <CaretDown title={t('icons.selectArrow')} />
-            </div>
-          </Button>
-        </div>
+        <Input ref={inputRef} placeholder={placeholder} onBlur={onBlur} {...props} />
+        <Button>
+          <div aria-hidden="true" className={styles.icons}>
+            {isInvalid && <AlertCircle fontSize={16} />}
+            <CaretDown title={t('icons.selectArrow')} />
+          </div>
+        </Button>
 
         <Popover
           className={classNames(styles.popover, 'react-aria-Popover')}