scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update design for select component and remove placeholders

Browse Source
This commit is contained in:
Christel Westerberg
2024-12-11 15:02:47 +01:00
parent 241e354fc5
commit ed3879f6d2
10 changed files with 97 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/TempDesignSystem/Select/index.tsx
View File

@@ -32,7 +32,7 @@ export default function Select({
label,
name,
onSelect,
placeholder,
disabled,
required = false,
tabIndex,
value,
@@ -54,45 +54,46 @@ export default function Select({
onSelect(key)
}
let chevronProps = {}
if (discreet) {
chevronProps = { color: "baseButtonTextOnFillNormal" }
} else if (disabled) {
chevronProps = { color: "disabled" }
}
return (
<div className={`${styles.container} ${className}`} ref={setRef}>
<ReactAriaSelect
aria-label={ariaLabel}
className={`${styles.select} ${discreet && styles.discreet}`}
className={`${styles.select} ${discreet ? styles.discreet : ""} select-container`}
defaultSelectedKey={defaultSelectedKey}
name={name}
onSelectionChange={handleOnSelect}
placeholder={placeholder}
selectedKey={value as Key}
onOpenChange={setOverflowVisible}
isDisabled={disabled}
>
<Body asChild fontOnly>
<Button className={styles.input} data-testid={name}>
<span className={styles.inputContentWrapper} tabIndex={tabIndex}>
<SelectValue>
{({ isPlaceholder, selectedText }) => (
<>
<Label
required={required}
size={discreet ? "discreet" : "small"}
>
{label}
{discreet && `:`}
</Label>
{isPlaceholder ? (
placeholder ? (
<Body color="uiTextPlaceholder"> {placeholder}</Body>
) : null
) : (
selectedText
)}
</>
)}
</SelectValue>
</span>
<SelectChevron
{...(discreet ? { color: "baseButtonTextOnFillNormal" } : {})}
/>
<Button
className={`${styles.input} select-button`}
data-testid={name}
>
<SelectValue tabIndex={tabIndex}>
{({ selectedText }) => (
<>
<Label
required={required}
size={discreet ? "discreet" : "regular"}
>
{label}
{discreet && `:`}
</Label>
{selectedText && <Body>{selectedText}</Body>}
</>
)}
</SelectValue>
<SelectChevron {...chevronProps} />
</Button>
</Body>
<Body asChild fontOnly>