richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PackageDetail: keep "Compare" label in both states, move tick to right

Browse Source 
Label stays "Compare" regardless of inCart. Only change between
default and added: a trailing check icon (endIcon) appears when the
package is in the basket. aria-pressed + aria-label still carry the
state for screen readers.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-23 11:05:15 +10:00
parent 7ecf309459
commit 01751f5886
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/organisms/PackageDetail/PackageDetail.tsx
View File

@@ -220,22 +220,22 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
{arrangeLabel}
</Button>
{onCompare && (
// Same soft/secondary chrome in both states; when the package
// is in the basket a leading check icon appears and the label
// changes to "Added". Click is a toggle — caller decides to
// add or remove based on the `inCart` it's passing in.
// Same soft/secondary chrome + "Compare" label in both states;
// when the package is in the basket a trailing check icon
// appears. Click is a toggle — caller decides to add or remove
// based on the `inCart` it's passing in.
<Button
variant="soft"
color="secondary"
size="large"
loading={compareLoading}
startIcon={inCart ? <CheckRoundedIcon /> : undefined}
endIcon={inCart ? <CheckRoundedIcon /> : undefined}
onClick={onCompare}
aria-pressed={inCart}
aria-label={inCart ? 'Remove from comparison' : 'Add to comparison'}
sx={{ flexShrink: 0 }}
>
{inCart ? 'Added' : 'Compare'}
Compare
</Button>
)}
</Box>