Skip to content

Add structural variants to Testimonial component#78

Merged
bradpotts merged 1 commit into
mainfrom
feat/testimonial-structural-variants-17528705703208929091
May 16, 2026
Merged

Add structural variants to Testimonial component#78
bradpotts merged 1 commit into
mainfrom
feat/testimonial-structural-variants-17528705703208929091

Conversation

@bradpotts
Copy link
Copy Markdown
Contributor

@bradpotts bradpotts commented May 15, 2026

Added structural variants (elevated, flat, outline, ghost) to the Testimonial component. This brings it in parity with the Card component and provides more flexibility in layout design while maintaining backward compatibility by defaulting to the 'outline' variant.


PR created automatically by Jules for task 17528705703208929091 started by @bradpotts

Summary by CodeRabbit

Release Notes

  • New Features

    • Testimonial component now supports multiple styling variants (elevated, flat, outline, and ghost) with corresponding updated visual theming and styling.
  • Tests

    • Updated test coverage to verify variant styling functionality for testimonials.

Review Change Stack

Adds support for 'elevated', 'flat', 'outline', and 'ghost' variants to
the Testimonial component. The default variant is 'outline' to maintain
backward compatibility.

- Updated 'src/recipes/testimonial.ts' with the new variant option.
- Added corresponding CSS classes and role variables in 'src/styles/components.css'.
- Synchronized 'tests/css-contract.test.ts' and 'tests/arsenal-sync.test.ts'.

Co-authored-by: bradpotts <4887598+bradpotts@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cbb4c065-ca03-4c21-8bce-f2f65faa247e

📥 Commits

Reviewing files that changed from the base of the PR and between 1f9cbd3 and b073334.

📒 Files selected for processing (4)
  • src/recipes/testimonial.ts
  • src/styles/components.css
  • tests/arsenal-sync.test.ts
  • tests/css-contract.test.ts

📝 Walkthrough

Walkthrough

This PR introduces testimonial variant support to the Spectre UI component library. The change adds four variant options (elevated, flat, outline, ghost) via recipe configuration, CSS token definitions, and corresponding styled selectors. All variant combinations are validated through test coverage updates.

Changes

Testimonial Variant Feature

Layer / File(s) Summary
Variant recipe contract and resolution
src/recipes/testimonial.ts
TESTIMONIAL_VARIANTS map and exported TestimonialVariant type are added, TestimonialRecipeOptions.variant is typed, and getTestimonialClasses resolves the variant option via resolveOption, maps it to the corresponding sp-testimonial--* CSS class, and includes the class in the output.
Testimonial CSS tokens and selectors
src/styles/components.css
Component variables layer expanded with testimonial border-base, text, author, quote, shadow, and variant role tokens (elevated/flat/outline/ghost). .sp-testimonial and modifier selectors updated to reference the new tokens, with each variant modifier applying its corresponding shadow and background/border styling.
Variant test coverage
tests/arsenal-sync.test.ts, tests/css-contract.test.ts
getTestimonialClasses() test assertion updated to require the outline modifier class. Testimonial selector matrix expanded with axes.variant dimension to validate all four variant combinations.

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 Four variant friends now dwell,
Elevated, flat, outline, and ghost so well,
CSS tokens map the way,
Tests ensure they work each day,
Testimonials now have more to tell!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description is incomplete. It lacks a linked issue reference, detailed summary of changes, rationale/context, and testing checklist as required by the template. Add complete information following the template: confirm linked issue, provide detailed summary of file changes, explain the rationale, and include testing checklist items.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title 'Add structural variants to Testimonial component' accurately describes the main change of introducing new layout variants (elevated, flat, outline, ghost) to the component.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/testimonial-structural-variants-17528705703208929091

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

@bradpotts bradpotts merged commit 074549b into main May 16, 2026
3 checks passed
@bradpotts bradpotts deleted the feat/testimonial-structural-variants-17528705703208929091 branch May 16, 2026 08:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant