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 = {
args: {
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}>
<ListBox className={styles.listBox}>
{items.map((item, idx) => (
<Typography variant="Body/Paragraph/mdRegular" key={idx}>
{typeof item === 'object' ? (
<SelectItem
icon={item.icon || itemIcon}
isDisabled={item.isDisabled}
>
{item.label}
</SelectItem>
) : (
<SelectItem icon={itemIcon} isDisabled={isDisabled}>
{item.toString()}
</SelectItem>
)}
</Typography>
))}
{items.map((item) =>
typeof item === 'object' ? (
<SelectItem
key={item.label}
id={item.label}
icon={item.icon || itemIcon}
isDisabled={item.isDisabled}
>
{item.label}
</SelectItem>
) : (
<SelectItem
key={item}
id={item}
icon={itemIcon}
isDisabled={isDisabled}
>
{item.toString()}
</SelectItem>
)
)}
</ListBox>
</Popover>
</AriaSelect>

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

@@ -81,22 +81,27 @@ export function SelectFilter({
offset={22}
>
<ListBox className={styles.listBox}>
{items.map((item, idx) => (
<Typography variant="Body/Paragraph/mdRegular" key={idx}>
{typeof item === 'object' ? (
<SelectItem
icon={item.icon || itemIcon}
isDisabled={item.isDisabled}
>
{item.label}
</SelectItem>
) : (
<SelectItem icon={itemIcon} isDisabled={isDisabled}>
{item.toString()}
</SelectItem>
)}
</Typography>
))}
{items.map((item) =>
typeof item === 'object' ? (
<SelectItem
key={item.label}
id={item.label}
icon={item.icon || itemIcon}
isDisabled={item.isDisabled}
>
{item.label}
</SelectItem>
) : (
<SelectItem
key={item}
id={item}
icon={itemIcon}
isDisabled={isDisabled}
>
{item.toString()}
</SelectItem>
)
)}
</ListBox>
</Popover>
</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 { 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 (
<ListBoxItem
className={styles.listBoxItem}
textValue={children}
isDisabled={isDisabled}
{...props}
>
{({ isSelected }) => (
<>
@@ -17,7 +25,7 @@ export function SelectItem({ children, icon, isDisabled }: SelectItemProps) {
<MaterialIcon
icon={icon}
size={24}
color={isDisabled ? 'Icon/Interactive/Disabled' : 'Icon/Default'}
color={iconColor}
aria-hidden="true"
/>
) : null}