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>

38
components/TempDesignSystem/Select/select.module.css
View File

@@ -33,11 +33,11 @@
gap: var(--Spacing-x1);
}
.select.discreet .inputContentWrapper {
align-items: center;
justify-content: flex-end;
flex-direction: row;
font-weight: 500;
.select[data-disabled],
.select[data-disabled] .input {
background-color: var(--UI-Input-Controls-Surface-Disabled);
border: none;
pointer-events: none;
}
.input {
@@ -54,14 +54,21 @@
text-align: left;
}
.inputContentWrapper {
.input :global(.react-aria-SelectValue) {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
flex: 1 0 0;
}
.select.discreet :global(.react-aria-SelectValue) {
align-items: center;
justify-content: flex-end;
flex-direction: row;
font-weight: 500;
gap: var(--Spacing-x-half);
}
.popover {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
@@ -110,3 +117,20 @@
.listBoxItem[data-selected="true"].showRadioButton:before {
box-shadow: inset 0 0 0 8px var(--UI-Input-Controls-Fill-Selected);
}
/* Use global react aria classnames here since setting a css modules classname overrides
the class set by react aria.We use that class to style the child label component. */
.select:not(.discreet) :global(.react-aria-SelectValue) {
display: grid;
transition: height 200ms ease;
}
.input :global(.react-aria-SelectValue) {
height: 18px;
overflow: hidden;
}
.input :global(.react-aria-SelectValue):has(:nth-child(2)) {
height: 38px;
overflow: visible;
}

1
components/TempDesignSystem/Select/select.ts
View File

@@ -7,7 +7,6 @@ export interface SelectProps
label: string
name: string
onSelect: (key: Key) => void
placeholder?: string
value?: string | number
maxHeight?: number
showRadioButton?: boolean