mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
76257f164b
## What kind of change does this PR introduce? Bug fix stacked on #48478. ## What is the current behavior? Storage Explorer renders the custom closed-folder icon at `1.5` but leaves the Lucide open-folder icon at its default `2`. The duplicated file-picker implementation also uses a different set of stroke-width overrides. ## What is the new behavior? A shared `StorageRowIcon` renders loading, open and closed folder, image, audio, video and generic file icons at `1.5` across Storage Explorer, row editing and the bucket file picker. Test by comparing open and closed folders and file-type rows in Storage Explorer and the bucket file picker. | Before | After | | --- | --- | | <img width="524" height="336" alt="CleanShot 2026-08-03 at 18 38 06@2x" src="https://github.com/user-attachments/assets/15eb8b9f-69fc-4eee-8428-d7ec26dce8dc" /> | <img width="522" height="328" alt="CleanShot 2026-08-03 at 18 39 20@2x" src="https://github.com/user-attachments/assets/17b7dddd-8d36-421c-8356-c9c1bd7456e8" /> | | _Thicker image and file icon compared to folder icon_ | _Every icon has the same stroke thickness_ | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized file, folder, media, and loading icons across storage views. * Improved visual consistency with unified icon sizing, styling, and stroke width. * **Tests** * Added coverage for loading, folder, media, and generic file icon states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import { describe, expect, test } from 'vitest'
|
|
|
|
import { STORAGE_ROW_STATUS, STORAGE_ROW_TYPES, STORAGE_VIEWS } from './Storage.constants'
|
|
import { StorageRowIcon } from './StorageRowIcon'
|
|
import { customRender } from '@/tests/lib/custom-render'
|
|
|
|
const CASES: {
|
|
name: string
|
|
view?: STORAGE_VIEWS
|
|
status?: STORAGE_ROW_STATUS
|
|
fileType?: STORAGE_ROW_TYPES
|
|
isOpened?: boolean
|
|
mimeType?: string
|
|
expectedIcon: string
|
|
}[] = [
|
|
{
|
|
name: 'loading list row',
|
|
view: STORAGE_VIEWS.LIST,
|
|
status: STORAGE_ROW_STATUS.LOADING,
|
|
expectedIcon: 'lucide-loader-circle',
|
|
},
|
|
{
|
|
name: 'loading column row',
|
|
view: STORAGE_VIEWS.COLUMNS,
|
|
status: STORAGE_ROW_STATUS.LOADING,
|
|
expectedIcon: 'lucide-file',
|
|
},
|
|
{
|
|
name: 'ready list row',
|
|
view: STORAGE_VIEWS.LIST,
|
|
status: STORAGE_ROW_STATUS.READY,
|
|
expectedIcon: 'lucide-file',
|
|
},
|
|
{
|
|
name: 'closed folder',
|
|
fileType: STORAGE_ROW_TYPES.FOLDER,
|
|
expectedIcon: 'lucide-files-bucket',
|
|
},
|
|
{
|
|
name: 'open folder',
|
|
fileType: STORAGE_ROW_TYPES.FOLDER,
|
|
isOpened: true,
|
|
expectedIcon: 'lucide-folder-open',
|
|
},
|
|
{ name: 'image', mimeType: 'image/png', expectedIcon: 'lucide-image' },
|
|
{ name: 'audio', mimeType: 'audio/mpeg', expectedIcon: 'lucide-music' },
|
|
{ name: 'video', mimeType: 'video/mp4', expectedIcon: 'lucide-film' },
|
|
{ name: 'generic file', expectedIcon: 'lucide-file' },
|
|
]
|
|
|
|
describe('StorageRowIcon', () => {
|
|
test.each(CASES)('renders $name at the canonical stroke width', (props) => {
|
|
const { container } = customRender(
|
|
<StorageRowIcon
|
|
view={props.view ?? STORAGE_VIEWS.COLUMNS}
|
|
status={props.status ?? STORAGE_ROW_STATUS.READY}
|
|
fileType={props.fileType ?? STORAGE_ROW_TYPES.FILE}
|
|
isOpened={props.isOpened}
|
|
mimeType={props.mimeType}
|
|
/>
|
|
)
|
|
|
|
const icon = container.querySelector('svg')
|
|
|
|
expect(icon).toHaveClass(props.expectedIcon)
|
|
expect(icon).toHaveAttribute('stroke-width', '1.5')
|
|
})
|
|
})
|