mirror of
https://github.com/langgenius/dify.git
synced 2026-03-30 10:30:16 +08:00
fix: align plugin error badge with card icon
- anchor the error status badge to the plugin card icon wrapper - keep the badge positioned at the icon's bottom-right corner - add a layout regression test for plugin task items
This commit is contained in:
@ -74,6 +74,24 @@ describe('PluginItem', () => {
|
||||
expect(screen.getByTestId('status-icon')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should anchor the status icon to the card icon wrapper', () => {
|
||||
render(
|
||||
<PluginItem
|
||||
plugin={createPlugin()}
|
||||
getIconUrl={mockGetIconUrl}
|
||||
language="en_US"
|
||||
statusIcon={<span data-testid="status-icon" />}
|
||||
statusText="status"
|
||||
/>,
|
||||
)
|
||||
|
||||
const cardIcon = screen.getByTestId('card-icon')
|
||||
const iconWrapper = cardIcon.parentElement
|
||||
|
||||
expect(iconWrapper).toHaveClass('relative', 'self-start')
|
||||
expect(screen.getByTestId('status-icon').parentElement).toHaveClass('absolute', '-bottom-0.5', '-right-0.5')
|
||||
})
|
||||
|
||||
it('should pass icon url to CardIcon', () => {
|
||||
render(
|
||||
<PluginItem
|
||||
|
||||
@ -26,7 +26,7 @@ const PluginItem: FC<PluginItemProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className="group/item flex gap-1 rounded-lg p-2 hover:bg-state-base-hover">
|
||||
<div className="relative shrink-0">
|
||||
<div className="relative shrink-0 self-start">
|
||||
<CardIcon
|
||||
size="small"
|
||||
src={getIconUrl(plugin.icon)}
|
||||
|
||||
Reference in New Issue
Block a user