- fixed label, hint and error spacing on selectors

WestpacGEL · Feb 12, 2024 · fb7dfaf · fb7dfaf
1 parent ab56bf8
commit fb7dfaf
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/.../components/selector/components/selector-button-group/selector-button-group.component.tsx b/.../components/selector/components/selector-button-group/selector-button-group.component.tsx
@@ -5,7 +5,6 @@ import { useField } from 'react-aria';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorButtonGroupOption } from './components/index.js';
 import { styles } from './selector-button-group.styles.js';
 import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
 
@@ -52,11 +51,13 @@ export function SelectorButtonGroup({
   });
 
   return (
-    <div className={styles({ className, orientation })} {...fieldProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
-      <SelectorButtonContext.Provider value={state}>{children}</SelectorButtonContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...fieldProps}>
+        <SelectorButtonContext.Provider value={state}>{children}</SelectorButtonContext.Provider>
+      </div>
+    </>
   );
 }
diff --git a/...ponents/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx b/...ponents/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx
@@ -6,7 +6,6 @@ import { useCheckboxGroupState } from 'react-stately';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorCheckboxGroupOption } from './components/index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 import {
   type SelectorCheckboxGroupContextState,
@@ -31,13 +30,15 @@ export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
 
   return (
-    <div {...groupProps} className={styles({ className: groupProps.className })}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
-    </div>
+      <div {...groupProps} className={styles({ className: groupProps.className })}>
+        <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
+      </div>
+    </>
   );
 }
diff --git a/.../src/components/selector/components/selector-link-group/selector-link-group.component.tsx b/.../src/components/selector/components/selector-link-group/selector-link-group.component.tsx
@@ -5,7 +5,6 @@ import { useField } from 'react-aria';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorLinkGroupOption } from './components/index.js';
 import { styles } from './selector-link-group.styles.js';
 import { SelectorLinkGroupProps } from './selector-link-group.types.js';
 
@@ -35,11 +34,13 @@ export function SelectorLinkGroup({
   const state: { isDisabled?: boolean } = { isDisabled };
 
   return (
-    <div className={styles({ className, orientation })} {...fieldProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
-      <SelectorLinkContext.Provider value={state}>{children}</SelectorLinkContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...fieldProps}>
+        <SelectorLinkContext.Provider value={state}>{children}</SelectorLinkContext.Provider>
+      </div>
+    </>
   );
 }
diff --git a/...rc/components/selector/components/selector-radio-group/selector-radio-group.component.tsx b/...rc/components/selector/components/selector-radio-group/selector-radio-group.component.tsx
@@ -6,7 +6,6 @@ import { useRadioGroupState } from 'react-stately';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
-import { SelectorRadioGroupOption } from './components/index.js';
 import { styles } from './selector-radio-group.styles.js';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
 
@@ -40,15 +39,17 @@ export function SelectorRadioGroup({
   );
 
   return (
-    <div className={styles({ className, orientation })} {...radioGroupProps}>
+    <>
       {label && <Label {...labelProps}>{label}</Label>}
       {description && <Hint {...descriptionProps}>{description}</Hint>}
       {errorMessage && state.validationState === 'invalid' && (
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
-      <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
-        {children}
-      </SelectorRadioGroupContext.Provider>
-    </div>
+      <div className={styles({ className, orientation })} {...radioGroupProps}>
+        <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
+          {children}
+        </SelectorRadioGroupContext.Provider>
+      </div>
+    </>
   );
 }