fix/issue 414/button link height mismatch

[Sqrcz]

Summary by CodeRabbit

• Documentation

  • Removed an example demonstrating button with link functionality.

• Style

  • Updated button component styling to ensure consistent inline display behavior.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for sensational-seahorse-8635f8 ready!

Name	Link
🔨 Latest commit	18c8f01
🔍 Latest deploy log	https://app.netlify.com/projects/sensational-seahorse-8635f8/deploys/6931955b2c0c2600081b73fd
😎 Deploy Preview	https://deploy-preview-416--sensational-seahorse-8635f8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

These changes remove an outdated button example component, reorder CSS classes in another example for consistency, and expand the button composable's public interface by introducing a new inline-block display constant and exposing color, gradient, and shadow properties to UseButtonClassesProps.

Changes

Cohort / File(s)	Summary
Example components docs/components/button/examples/ButtonLinkExample.vue	Deleted outdated example file containing template with FwbButton instances demonstrating external href and router-link usage.
Example CSS adjustments docs/components/button/examples/FwbButtonExampleLink.vue	Reordered class attribute on root div from "vp-raw flex flex-wrap gap-2" to "flex flex-wrap gap-2 vp-raw".
Button composable interface src/components/FwbButton/composables/useButtonClasses.ts	Added buttonDefaultClasses = 'inline-block' constant to wrapperClasses output. Expanded UseButtonClassesProps interface to include color: Ref<ButtonVariant>, `gradient: Ref<ButtonGradient

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• src/components/FwbButton/composables/useButtonClasses.ts: Verify new properties in UseButtonClassesProps align with component logic and that the buttonDefaultClasses constant is applied correctly in all code paths.

Possibly related PRs

• Feature/custom dropdown classes #339: Modifies the same useButtonClasses.ts file and adjusts UseButtonClassesProps interface and class-related logic.

Suggested labels

🪲 bug, 🔧 enhancement

Poem

🐰 A button grows so sleek and neat,
With inline-block to make it sweet,
Old examples fade away,
Colors, gradients now stay,
Reordered classes, oh what a feat!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: fixing a button link height mismatch issue by introducing buttonDefaultClasses, reordering class attributes, and updating the public API of useButtonClasses composable.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ffd9410 and 18c8f01.

📒 Files selected for processing (3)

• docs/components/button/examples/ButtonLinkExample.vue (0 hunks)
• docs/components/button/examples/FwbButtonExampleLink.vue (1 hunks)
• src/components/FwbButton/composables/useButtonClasses.ts (3 hunks)

💤 Files with no reviewable changes (1)

• docs/components/button/examples/ButtonLinkExample.vue

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-07-18T12:11:01.047Z

Learnt from: Sqrcz
Repo: themesberg/flowbite-vue PR: 389
File: src/components/FwbToggle/FwbToggle.vue:0-0
Timestamp: 2025-07-18T12:11:01.047Z
Learning: In the FwbToggle component, the `toggleBallClasses` variable name is misleading - it doesn't style the actual toggle ball/thumb, but rather the label text container. The visual toggle ball is rendered through other means (likely CSS on the toggle track or pseudo-elements).

Applied to files:

• src/components/FwbButton/composables/useButtonClasses.ts

🔇 Additional comments (4)

docs/components/button/examples/FwbButtonExampleLink.vue (1)

2-2: LGTM! Class order improved.

Moving vp-raw to the end follows the convention of placing utility classes before framework-specific or scoped classes.

src/components/FwbButton/composables/useButtonClasses.ts (3)

7-8: Good fix for button height alignment!

Adding inline-block as the default display mode resolves height mismatch issues between button and link variants. This ensures consistent vertical alignment and spacing behavior.

---

224-224: LGTM! Correct integration of default classes.

The buttonDefaultClasses constant is properly integrated at the beginning of the class array, ensuring inline-block is applied to all button variants.

---

144-155: Verify all callers provide the newly required props.

The interface now explicitly requires color, gradient, and shadow properties. Ensure all call sites of useButtonClasses provide these props to avoid runtime errors. Without access to the codebase, the actual impact cannot be verified—these props may remain optional with defaults, in which case this is a non-breaking interface formalization rather than a breaking change.

---

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.}