feat(card): add more control to borderRadius usage, add examples #444

[airikej]

Summary by CodeRabbit

• New Features

  • Card supports corner-specific border-radius controls and a unified borderRadius prop type for finer control.

• Tests

  • Updated tests to cover corner-specific radius behavior and new class expectations.

• Documentation

  • Replaced prior examples with a new BorderRadius story showing full set of corner/side radius variants.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c4c59176-d109-4f3c-8ade-847731e2d170

📥 Commits

Reviewing files that changed from the base of the PR and between 1ce2794 and 00c709a.

📒 Files selected for processing (1)

• src/tedi/components/cards/card/card.module.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• src/tedi/components/cards/card/card.module.scss

---

📝 Walkthrough

Walkthrough

Card border-radius handling was changed from side-based toggles to corner-specific toggles. A new resolveBorderRadius() utility computes per-corner booleans (corner overrides side), CSS mixin/class names were renamed for corner resets, component logic now applies corner classes, and tests/stories were updated to match.

Changes

Cohort / File(s)	Summary
Styles src/tedi/components/cards/card/card.module.scss	Renamed mixin border-radius-reset($sides...) → reset-corner($corner). Modifier classes moved from --no-border-radius-{top,right,bottom,left} to --no-radius-{tl,tr,br,bl} and now reset single corners.
Utility src/tedi/components/cards/card/utility.ts	Added exported types BorderRadius, ResolvedCorners and resolveBorderRadius(config?) which derives per-corner booleans from side and corner flags (corner overrides side).
Component src/tedi/components/cards/card/card.tsx	CardBreakpointProps.borderRadius now uses BorderRadius type. Replaced inline side-based checks with resolveBorderRadius() and apply corner-specific CSS classes (tedi-card--no-radius-tl/tr/br/bl).
Tests src/tedi/components/cards/card/card.spec.tsx	Updated assertions to expect new corner-specific modifier class names and added a test covering corner override precedence.
Stories src/tedi/components/cards/card/card.stories.tsx	Removed BorderColors story; replaced WithoutBorderRadius with a BorderRadius story that hardcodes examples showing default, side-disabled, and corner-disabled variants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 I nudge each corner, gentle and neat,
From sides to tips, I hop on small feet.
resolveBorderRadius hums in a tune,
Corners decide — not sides — by the moon.
A tiny rabbit clap for the new little feat! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(card): add more control to borderRadius usage, add examples #444' accurately reflects the main changes: enhanced borderRadius control and new example stories.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/444-card-individual-borderradius-values-are-not-correct

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.6.0)

src/tedi/components/cards/card/card.module.scss

ConfigurationError: Could not find "stylelint-config-recess-order". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:241:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:208:25)
at async augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:73:20)
at async augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:24)
at async getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:26)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:204:19)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 94.73684% with 1 line in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/tedi/components/cards/card/utility.ts	94.44%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/tedi/components/cards/card/card.module.scss`:
- Around line 22-28: The mixin reset-corner($corner) currently only resets
border-#{$corner}-radius for > .tedi-card__content elements, causing
.tedi-card__header corners to remain rounded when using tedi-card--no-radius-*;
update the selectors inside mixin reset-corner to also target >
.tedi-card__header (both :first-of-type and :last-child variants) so header
blocks receive the same border-#{$corner}-radius: 0 reset as
.tedi-card__content.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 19812bdd-77d6-443e-ad48-086e916b6d60

📥 Commits

Reviewing files that changed from the base of the PR and between 8233427 and 1ce2794.

📒 Files selected for processing (5)

• src/tedi/components/cards/card/card.module.scss
• src/tedi/components/cards/card/card.spec.tsx
• src/tedi/components/cards/card/card.stories.tsx
• src/tedi/components/cards/card/card.tsx
• src/tedi/components/cards/card/utility.ts