Fix Select group label alignment (#1107)

Author: mdodgelooker

CHANGELOG.md

@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `FieldSelect`/`FieldSelectMulti` missing `aria-labelledby` attribute on the input
 - Major CSS linting clean-up
 - `CheckboxGroup` & `RadioGroup` options now properly wrap when the exceed the container width
+- `Select` & `SelectMulti` option group label alignment
 
 ### Removed
 

packages/components/src/Form/Inputs/Combobox/ComboboxList.tsx

@@ -240,6 +240,7 @@ const ComboboxUl = styled.ul<ComboboxListProps>`
   list-style-type: none;
   margin: 0;
   max-height: 30rem;
+  outline: none;
   ${layout}
 `
 

packages/components/src/Form/Inputs/Combobox/ComboboxOptionIndicator.tsx

@@ -40,7 +40,8 @@ import {
   OptionContext,
 } from './ComboboxContext'
 
-export type OptionIndicatorProps = ComboboxOptionStatuses & ComboboxOptionObject
+export type OptionIndicatorProps = Partial<ComboboxOptionStatuses> &
+  ComboboxOptionObject
 
 export type ComboboxOptionIndicatorFunction = (
   indicatorProps: OptionIndicatorProps
@@ -53,7 +54,7 @@ function isIndicatorFunction(
 }
 
 export interface ComboboxOptionIndicatorProps
-  extends ComboboxOptionStatuses,
+  extends Partial<ComboboxOptionStatuses>,
     CompatibleHTMLProps<HTMLDivElement> {
   /**
    * Customize the area to the left of the label, which by default

packages/components/src/Form/Inputs/Select/SelectOptions.tsx

@@ -34,6 +34,7 @@ import {
   ComboboxMultiOption,
   ComboboxOption,
   ComboboxOptionIndicatorProps,
+  ComboboxOptionIndicator,
   ComboboxOptionObject,
   ComboboxOptionText,
 } from '../Combobox'
@@ -109,6 +110,7 @@ export function SelectOptionWithDescription({
 }
 
 const SelectOptionGroupTitle = styled(Heading)<{ isMulti?: boolean }>`
+  display: flex;
   padding-top: ${({ theme }) => theme.space.xxsmall};
 `
 
@@ -128,7 +130,7 @@ export const SelectOptionGroup = ({
   <SelectOptionGroupContainer>
     {label && (
       <SelectOptionGroupTitle isMulti={isMulti}>
-        <span />
+        <ComboboxOptionIndicator isMulti={isMulti} />
         {label}
       </SelectOptionGroupTitle>
     )}