diff --git a/packages/syntax-core/src/RichSelect/RichSelectList.tsx b/packages/syntax-core/src/RichSelect/RichSelectList.tsx index 83fb6c32..5e263abe 100644 --- a/packages/syntax-core/src/RichSelect/RichSelectList.tsx +++ b/packages/syntax-core/src/RichSelect/RichSelectList.tsx @@ -33,6 +33,7 @@ import RichSelectSection from "./RichSelectSection"; import RichSelectChip from "./RichSelectChip"; import RichSelectRadioButton from "./RichSelectRadioButton"; import { useField } from "react-aria"; +import { useTheme } from "../ThemeProvider/ThemeProvider"; const NOOP = () => undefined; @@ -61,7 +62,7 @@ export type RichSelectListProps = RichSelectBoxProps & { */ id?: string; /** Text shown above select box */ - label?: string; + label: string; /** * Text showing in select box if no option has been chosen. * There should always have a placeholder unless there is a default option selected @@ -124,6 +125,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { const inputId = id ?? reactId; const isHydrated = useIsHydrated(); const disabled = !isHydrated || disabledProp; + const { themeName } = useTheme(); // passed to popover, which attached open/close methods const overlayHandlerRef = useRef({}); @@ -176,31 +178,31 @@ function RichSelectList(props: RichSelectListProps): ReactElement {
- { - if (disabled) return; - fieldRef.current?.focus(); - setInteractionModality("keyboard"); // Show the focus ring so the user knows where focus went - }} - > - {label && ( - - )} - + + + )}
{selectedTextValue}
@@ -264,7 +278,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { {(helperText || errorText) && ( -
+ {errorText ? errorText : helperText} -
+ )}
diff --git a/packages/syntax-core/src/SelectList/SelectList.module.css b/packages/syntax-core/src/SelectList/SelectList.module.css index 33388582..cecc6aa7 100644 --- a/packages/syntax-core/src/SelectList/SelectList.module.css +++ b/packages/syntax-core/src/SelectList/SelectList.module.css @@ -52,6 +52,7 @@ .selectBoxCambio { border: 1px solid var(--color-cambio-gray-370); border-radius: 8px; + box-sizing: border-box; font-size: 14px; height: 48px; padding: 12px 36px 0 12px;