Skip to content

feat(components): update CardFeature button size and variant#4609

Merged
thomasguillot merged 4 commits intotrunkfrom
update/card-feature-and-variables
Apr 15, 2026
Merged

feat(components): update CardFeature button size and variant#4609
thomasguillot merged 4 commits intotrunkfrom
update/card-feature-and-variables

Conversation

@thomasguillot
Copy link
Copy Markdown
Contributor

@thomasguillot thomasguillot commented Mar 30, 2026 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

Updates button sizing to use the medium (compact) size across integration cards and related screens.

  • CardFeature: primary button uses size="compact" (32px height); variant is conditionally tertiary when enabled (Configure state) or secondary when not yet enabled or requirements are unmet (Enable state). The "More" dropdown toggle is also sized to match (32×32px).
  • ContentGateSettings: two layout-customization buttons updated to size="compact" for consistency.
  • Renames the @wordpress/base-styles/variables SCSS alias from wp to wp-vars across affected files for clarity.

Note: CardFeature is part of the shared npm-packages contract. This is a visual-only change — no API or props changes — so consumers require no code updates, but will see the updated button appearance.

Closes DSGNEWS-141.

How to test the changes in this Pull Request:

  1. Navigate to the Integrations screen (Newspack > Integrations).
  2. Find a feature card in its default (not enabled) state. Verify the primary button reads "Enable", uses the secondary variant, and is compact (32px height).
  3. Enable a feature. Verify the primary button reads "Configure", uses the tertiary variant (less prominent), and remains compact.
  4. Find a feature card with unmet requirements (error badge). Verify the button is disabled, uses the secondary variant, and is compact.
  5. On a card with the "More" dropdown visible (enabled, no requirements), verify the dropdown toggle button is visually the same height as the primary button.
  6. Navigate to Audience > Access Control, open a content gate's settings. Verify the "Customize registered access layout" and "Customize paid access layout" buttons are also compact.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully ran tests with your changes locally?

@thomasguillot thomasguillot requested a review from Copilot March 30, 2026 15:47
Copilot AI reviewed Mar 30, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the CardFeature component styling for the Integrations screen design spec by adjusting button sizing/variants and aligning SCSS variable import naming.

Changes:

  • Switch CardFeature primary action to size=\"compact\" and conditionally use tertiary (enabled) vs secondary (not enabled / unmet requirements).
  • Style the “More” dropdown toggle to match the compact button dimensions.
  • Rename SCSS @wordpress/base-styles/variables alias from wp to wp-vars in updated stylesheets.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
src/wizards/audience/views/content-gates/style.scss Renames WP base-styles variables alias to wp-vars and updates references.
packages/components/src/section-header/style.scss Renames WP base-styles variables alias to wp-vars and updates references.
packages/components/src/card-feature/style.scss Renames alias to wp-vars and sizes the dropdown toggle to match compact buttons.
packages/components/src/card-feature/index.tsx Updates primary button size/variant logic and adjusts MoreControl.icon typing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/components/src/card-feature/index.tsx Outdated
@thomasguillot
Copy link
Copy Markdown
Contributor Author

thomasguillot commented Mar 30, 2026

Reverted MoreControl.icon to React.ReactNode in c60f86d to preserve backward compatibility.

@thomasguillot thomasguillot marked this pull request as ready for review March 30, 2026 15:57
@thomasguillot thomasguillot requested a review from a team as a code owner March 30, 2026 15:57
@thomasguillot thomasguillot added the [Status] Needs Review The issue or pull request needs to be reviewed label Mar 30, 2026
adekbadek
adekbadek reviewed Apr 14, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@adekbadek adekbadek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the code and tested locally. Visually verified all CardFeature states on the Components Demo page: Enable button uses is-secondary is-compact (32px), Configure uses is-compact is-tertiary (32px), and the "More" dropdown toggle matches at 32×32. The Content Gate Customize buttons are a straightforward size="compact" addition and behave equivalently.

Two optional nits inline. Nothing blocking. 👍

Comment thread packages/components/src/card-feature/style.scss Outdated
Comment thread packages/components/src/card-feature/index.tsx Outdated
@thomasguillot thomasguillot force-pushed the update/card-feature-and-variables branch from e3586c0 to f69a7a7 Compare April 15, 2026 07:31
@thomasguillot thomasguillot requested a review from adekbadek April 15, 2026 07:32
@github-actions github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Apr 15, 2026
@thomasguillot thomasguillot merged commit 1d03d4c into trunk Apr 15, 2026
9 checks passed
@thomasguillot thomasguillot deleted the update/card-feature-and-variables branch April 15, 2026 09:41
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 15, 2026

Hey @thomasguillot, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

matticbot pushed a commit that referenced this pull request Apr 16, 2026
@semantic-release-bot
chore(release): 6.38.0-alpha.1 [skip ci]
4fddb37 
# [6.38.0-alpha.1](v6.37.0...v6.38.0-alpha.1) (2026-04-16)

### Bug Fixes

* `is_donor` read-only only on WooCommerce-backed donations ([1dde930](1dde930))
* **access-control:** fix incorrect class name ([#4638](#4638)) ([a7a7908](a7a7908))
* **access-control:** hide My Account group features if Memberships is still active ([#4650](#4650)) ([214fa0d](214fa0d))
* add object-level authorization to corrections REST endpoint ([#4643](#4643)) ([a39a62d](a39a62d))
* address false positives in subscription status alerts on My Account ([f7d6bb8](f7d6bb8))
* address false positives in subscription status alerts on My Account ([31c8313](31c8313))
* clear stored referrer data where referrer is none or local ([c7ef6f3](c7ef6f3))
* count `pending-cancel` by testing against our canonical constant ([2a1f85b](2a1f85b))
* count `pending-cancel` by testing against our canonical constant ([8906b64](8906b64))
* include products without children when reviewing active subscriptions ([d714f3c](d714f3c))
* include products without children when reviewing active subscriptions ([aae3da2](aae3da2))
* limit success and notice snackbar treatments to My Account page ([3b40bec](3b40bec))
* **my-account:** limit notice/success snackbar overrides to My Account ([49517c1](49517c1))
* normalize referrer data when comparing ([d377afb](d377afb))
* **reader-activation:** clear referrer data when none provided ([696012b](696012b))
* **reader-data:** make is_donor read-only only when platform has server-side tracking ([92b0d34](92b0d34))
* update docblock to reflect simple product support ([ea1f03e](ea1f03e))
* update docblock to reflect simple product support ([ba14f85](ba14f85))
* **woocommerce:** image handling in paginated block ([#4149](#4149)) ([1c91f6c](1c91f6c))

### Features

* **access-control:** advanced settings for RSS content restriction ([#4613](#4613)) ([85aa560](85aa560))
* **access-control:** update default patterns ([#4569](#4569)) ([7f9a6c9](7f9a6c9))
* add filter for future integrations to self-declare server-side (secure?) donor tracking ([76e40fc](76e40fc))
* add README.md for the Overlay Block ([#4651](#4651)) ([6d7de6e](6d7de6e))
* **advertising:** replace placements UI with inline expandable cards ([#4625](#4625)) ([e5de003](e5de003))
* **block-theme:** add overlay block for the block theme ([#4578](#4578)) ([af1e4b9](af1e4b9))
* **components:** update CardFeature button size and variant ([#4609](#4609)) ([1d03d4c](1d03d4c))
* **content-gate:** add per-block access control for Group, Stack, and Row blocks ([#4646](#4646)) ([5bdf458](5bdf458))
* **content-gate:** add POST method for external IP access checks ([#4598](#4598)) ([36bfeea](36bfeea))
* **google-site-kit:** enable custom GA frontend params by default ([#4664](#4664)) ([19830ce](19830ce))
* **handoff:** add URL-based handoff with customizable banner text ([#4603](#4603)) ([be59c68](be59c68))
* **integrations:** add My Account menu hook to integration abstraction ([#4640](#4640)) ([4ef2c91](4ef2c91))
* **integrations:** add subscription and donation metadata ([#4597](#4597)) ([ca928f8](ca928f8))
* **integrations:** implement profile metadata ([#4624](#4624)) ([b1daf85](b1daf85))
* make it easier to do "Block until consent given" setups in Complianz and improve blocking ([#4549](#4549)) ([44dda72](44dda72))
* reader activation segments ([#4604](#4604)) ([3821fed](3821fed))
* **reader-data:** add engagement fields ([#4594](#4594)) ([1cba4ef](1cba4ef))
* **reader-data:** store sync reconciliation ([#4633](#4633)) ([69bdda4](69bdda4))
* require reader to set name when commenting ([#4647](#4647)) ([db5ad73](db5ad73))
* session hydration ([#4618](#4618)) ([665b152](665b152))

### Reverts

* address false positives in subscription status alerts on My Account ([9d203b0](9d203b0))
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 16, 2026

🎉 This PR is included in version 6.38.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@adekbadek adekbadek adekbadek approved these changes

Assignees

No one assigned

Labels

[Status] Approved The pull request has been reviewed and is ready to merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@thomasguillot @adekbadek