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

fix(SW-1509): add support for default selected key

Browse Source 
fixed padding per list item
This commit is contained in:
Christian Andolf
2025-04-10 13:30:49 +02:00
parent cb344c7bcf
commit 2b6fe17c32
4 changed files with 61 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/design-system/lib/components/Select/Select.stories.tsx
View File

@@ -22,6 +22,15 @@ export const Default: Story = {
}, },
} }
export const DefaultSelected: Story = {
args: {
items: ['Foo', 'Bar', 'Baz'],
label: 'Select an item',
name: 'foo',
defaultSelectedKey: 'Foo',
},
}
export const ObjectItem: Story = { export const ObjectItem: Story = {
args: { args: {
items: [ items: [

37
packages/design-system/lib/components/Select/Select.tsx
View File

@@ -88,22 +88,27 @@ export function Select({
<Popover className={styles.popover} shouldFlip={false}> <Popover className={styles.popover} shouldFlip={false}>
<ListBox className={styles.listBox}> <ListBox className={styles.listBox}>
{items.map((item, idx) => ( {items.map((item) =>
<Typography variant="Body/Paragraph/mdRegular" key={idx}> typeof item === 'object' ? (
{typeof item === 'object' ? ( <SelectItem
<SelectItem key={item.label}
icon={item.icon || itemIcon} id={item.label}
isDisabled={item.isDisabled} icon={item.icon || itemIcon}
> isDisabled={item.isDisabled}
{item.label} >
</SelectItem> {item.label}
) : ( </SelectItem>
<SelectItem icon={itemIcon} isDisabled={isDisabled}> ) : (
{item.toString()} <SelectItem
</SelectItem> key={item}
)} id={item}
</Typography> icon={itemIcon}
))} isDisabled={isDisabled}
>
{item.toString()}
</SelectItem>
)
)}
</ListBox> </ListBox>
</Popover> </Popover>
</AriaSelect> </AriaSelect>

37
packages/design-system/lib/components/Select/SelectFilter.tsx
View File

@@ -81,22 +81,27 @@ export function SelectFilter({
offset={22} offset={22}
> >
<ListBox className={styles.listBox}> <ListBox className={styles.listBox}>
{items.map((item, idx) => ( {items.map((item) =>
<Typography variant="Body/Paragraph/mdRegular" key={idx}> typeof item === 'object' ? (
{typeof item === 'object' ? ( <SelectItem
<SelectItem key={item.label}
icon={item.icon || itemIcon} id={item.label}
isDisabled={item.isDisabled} icon={item.icon || itemIcon}
> isDisabled={item.isDisabled}
{item.label} >
</SelectItem> {item.label}
) : ( </SelectItem>
<SelectItem icon={itemIcon} isDisabled={isDisabled}> ) : (
{item.toString()} <SelectItem
</SelectItem> key={item}
)} id={item}
</Typography> icon={itemIcon}
))} isDisabled={isDisabled}
>
{item.toString()}
</SelectItem>
)
)}
</ListBox> </ListBox>
</Popover> </Popover>
</ComboBox> </ComboBox>

12
packages/design-system/lib/components/Select/SelectItem.tsx
View File

@@ -4,12 +4,20 @@ import styles from './select.module.css'
import { MaterialIcon } from '../Icons/MaterialIcon' import { MaterialIcon } from '../Icons/MaterialIcon'
import { SelectItemProps } from './types' import { SelectItemProps } from './types'
export function SelectItem({ children, icon, isDisabled }: SelectItemProps) { export function SelectItem({
children,
icon,
isDisabled,
...props
}: SelectItemProps) {
const iconColor = isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'
return ( return (
<ListBoxItem <ListBoxItem
className={styles.listBoxItem} className={styles.listBoxItem}
textValue={children} textValue={children}
isDisabled={isDisabled} isDisabled={isDisabled}
{...props}
> >
{({ isSelected }) => ( {({ isSelected }) => (
<> <>
@@ -17,7 +25,7 @@ export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
<MaterialIcon <MaterialIcon
icon={icon} icon={icon}
size={24} size={24}
color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'} color={iconColor}
aria-hidden="true" aria-hidden="true"
/> />
) : null} ) : null}