feat: image card clean#700
Merged
nastyastavitskaya merged 11 commits intotest/untitledui-ant-pocfrom Dec 17, 2025
Merged
Conversation
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
|
| import { BorderRadiusSm, ColorBgBase, PaddingSm, PaddingXs } from 'src/styles/style' | ||
| import { Flex, Typography } from 'antd' | ||
|
|
||
| const ColorBeetroot = '#A8203E' |
Collaborator
There was a problem hiding this comment.
it should be colorPrimary, or #C20075
| import { Spin } from 'src/components/feedback/Spin/Spin' | ||
| import { CheckOutlined } from '@ant-design/icons' | ||
| import { BorderRadiusSm, ColorBgBase, PaddingSm, PaddingXs } from 'src/styles/style' | ||
| import { Flex, Typography } from 'antd' |
Collaborator
There was a problem hiding this comment.
import from src/components, not from antd
Comment on lines
+88
to
+107
| <div | ||
| style={{ | ||
| position: 'absolute', | ||
| top: PaddingSm, | ||
| left: PaddingSm, | ||
| padding: 2, | ||
| borderRadius: BorderRadiusSm, | ||
| backgroundColor: ColorBeetroot, | ||
| }}> | ||
| <div | ||
| style={{ | ||
| width: 12, | ||
| height: 12, | ||
| padding: 2, | ||
| borderRadius: BorderRadiusSm, | ||
| backgroundColor: ColorBeetroot, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| }}> |
Collaborator
There was a problem hiding this comment.
pretty sure that can be just one div (or Flex) but ok for poc
AustinFash
force-pushed
the
feat/image-card-clean
branch
from
8aa27b7 to
d5b6e19
Compare
- Update color from #A8203E to #C20075 (colorPrimary) - Import Flex and Typography from src/components instead of antd - Apply consistent color to description text 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Keep Primary (basic example) - Keep ControlledSelection (interactive single card) - Keep MultipleCards (multi-select grid) - Remove redundant stories: Selected, WithTag, Loading, SelectedWithTag, WithTitle, WithTitleAndDescription 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix clickable area to only image/card (not title/description) - Add padding between image and title using Flex gap - Increase description font size from 10px to 11px - Add dot badge to tag (6px circle to the left of text) - Fix ESLint error: add return type to toggleSelection function 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add pointerEvents: 'none' to title/description Flex to disable clicks - Constrain title/description width to match card size - Add flexShrink: 0 to clickable card div - Add width: 'fit-content' to outer Flex container 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove onClick from outer div - Add absolute positioned clickable overlay with inset: 0 covering card - Set overlay zIndex to 1 - Set loading/checkmark/tag zIndex to 2 (above overlay) - Constrain clickable area to exactly the card dimensions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
nastyastavitskaya
merged commit 2591e5d
into
test/untitledui-ant-poc
8 of 9 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new
ImageCardcomponent to the Aquarium design system. The ImageCard is a selectable card component that displays an image with optional metadata and interactive states.Features
selectedprop andonChangecallback for parent state managementComponent API