[WEB-4144] Tweak unavailable product styling on ProductTile #627
Conversation
WalkthroughThis pull request involves a minor version update to the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/core/ProductTile/ProductLabel.tsx (2)
32-38: Consider using CSS variables for dynamic values.The inline styles for font size and padding could be moved to CSS variables for better maintainability and consistency.
- style={{ - fontSize: dynamicFontSize * 0.6, - padding: `${dynamicFontSize * 0.25}px ${dynamicFontSize * 0.5}px`, - }} + style={{ + '--dynamic-font-size': `${dynamicFontSize}px`, + }} + className="[font-size:calc(var(--dynamic-font-size)*0.6)] [padding:calc(var(--dynamic-font-size)*0.25)_calc(var(--dynamic-font-size)*0.5)]"
62-73: Consider using an enum or constant for selected states.The explicit checks for
selected === true,selected === false, andselected === undefinedcould be simplified using an enum or constant to make the code more maintainable.+const SelectedState = { + SELECTED: true, + UNSELECTED: false, + STATIC: undefined, +} as const; { - "text-neutral-000 dark:text-neutral-1300": - selected === true && !unavailable, + "text-neutral-000 dark:text-neutral-1300": + selected === SelectedState.SELECTED && !unavailable, }, { - "text-neutral-1000 dark:text-neutral-300": - selected === false && !unavailable, + "text-neutral-1000 dark:text-neutral-300": + selected === SelectedState.UNSELECTED && !unavailable, }, { - "text-neutral-1300 dark:text-neutral-000": - selected === undefined && !unavailable, + "text-neutral-1300 dark:text-neutral-000": + selected === SelectedState.STATIC && !unavailable, },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
package.json(1 hunks)src/core/ProductTile/ProductLabel.tsx(2 hunks)src/core/ProductTile/ProductTile.stories.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🔇 Additional comments (4)
src/core/ProductTile/ProductLabel.tsx (2)
26-27: LGTM! Good refactoring.Extracting the font size calculation into a reusable variable improves code readability and maintainability.
45-50: LGTM! Clear conditional styling.The conditional class names for selected state are well-structured and easy to understand.
src/core/ProductTile/ProductTile.stories.tsx (2)
33-37: LGTM! Clear documentation update.The updated description clearly explains the requirement for controlling the
selectedprop.
39-54: LGTM! Good addition of static tiles story.The new story effectively demonstrates the default styling when
selectedis not controlled. The description is clear and helpful.
ProductTiles for unavailable products, i.e. LiveObjects.selectedpropSummary by CodeRabbit
Package Version
Product Tile Improvements
Documentation