Skip to content

Conversation

@paul-balchin-ibm
Copy link
Contributor

@paul-balchin-ibm paul-balchin-ibm commented Oct 24, 2025

Closes #

Fixes a previous build(deps) update #8347 that broke spacing between tags in tagsets.

NOTE: There were inconsistencies in spacing between tags in previous builds, both horizontally and vertically. Although 4px margins were applied correctly, they are not 100% compatible with flexbox. Because of this sometimes the margins did not overlap properly and resulted in 8px of space. Everything in this PR has been normalized to 4px.

What did you change?

Products, React:

  • Components/TagSet, packages/ibm-products-styles/src/components/TagSet/_tag-set.scss
  • Components/PageHeader, no changes (inherited from TagSet)
  • Deprecated/Datagrid/Filtering/Panel/Filter panel with initial filters, packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss
  • Utilities/TagOverflow, packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss
  • Utilities/useOverflowItems, no changes (inherited from TagSet)
  • Preview/PageHeader, packages/ibm-products-styles/src/components/PageHeader/_page-header.scss

Products, Web Components

  • Patterns/PageHeader/ Tab bar with tabs and tags, packages/ibm-products-web-components/src/components/page-header/_story-assets/set-of-tags/set-of-tags.scss
  • Patterns/Item overflow/Set of tags, packages/ibm-products-web-components/examples/set-of-tags/src/set-of-tags.scss
  • Patterns/Item overflow/Set of users, packages/ibm-products-web-components/examples/set-of-users/src/set-of-users.scss
  • Utilities/overHandler/With tags, packages/ibm-products-web-components/src/utilities/overflow-handler/story-styles.scss

How did you test and verify your work?

  • Storybook

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request section of
our contributing docs.

Screenshots

Previous builds on the left, latest changes on the right.

image image image image

@paul-balchin-ibm paul-balchin-ibm requested a review from a team as a code owner October 24, 2025 18:32
@paul-balchin-ibm paul-balchin-ibm requested review from matthewgallo and szinta and removed request for a team October 24, 2025 18:32
@netlify
Copy link

netlify bot commented Oct 24, 2025

Deploy Preview for carbon-for-ibm-products ready!

Name Link
🔨 Latest commit 4f9c7e0
🔍 Latest deploy log https://app.netlify.com/projects/carbon-for-ibm-products/deploys/68ff5e1ab90f8000081a009d
😎 Deploy Preview https://deploy-preview-8547--carbon-for-ibm-products.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@paul-balchin-ibm paul-balchin-ibm marked this pull request as draft October 24, 2025 18:34
@netlify
Copy link

netlify bot commented Oct 24, 2025

Deploy Preview for ibm-products-web-components ready!

Name Link
🔨 Latest commit 4f9c7e0
🔍 Latest deploy log https://app.netlify.com/projects/ibm-products-web-components/deploys/68ff5e1aa0d0a40008d2a40a
😎 Deploy Preview https://deploy-preview-8547--ibm-products-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

// The block part of our conventional BEM class names (blockClass__E--M).
$block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
$block-class-overflow: #{$block-class}-popover;
$block-class: #{$pkg-prefix}--tag-overflow;
Copy link
Contributor Author

@paul-balchin-ibm paul-balchin-ibm Oct 24, 2025

Choose a reason for hiding this comment

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

Replaced c4p-settings.$pkg-prefix with $pkg-prefix to be more inline with other files.

$block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
$block-class-overflow: #{$block-class}-popover;
$block-class: #{$pkg-prefix}--tag-overflow;
$block-class-popover: #{$block-class}-popover;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Matched popover with popover.

@paul-balchin-ibm paul-balchin-ibm removed the request for review from szinta October 24, 2025 19:42
@paul-balchin-ibm paul-balchin-ibm marked this pull request as ready for review October 24, 2025 19:43
};
const defaultPet = {
patientId: crypto.randomUUID(),
patientId: Math.floor(Math.random() * 100000000000),

Check failure

Code scanning / CodeQL

Insecure randomness High

This uses a cryptographically insecure random number generated at
Math.random()
in a security context.
@codecov
Copy link

codecov bot commented Oct 27, 2025

Codecov Report

❌ Patch coverage is 77.77778% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.49%. Comparing base (1c4fa62) to head (4f9c7e0).
⚠️ Report is 228 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8547      +/-   ##
==========================================
+ Coverage   79.38%   85.49%   +6.11%     
==========================================
  Files         474      364     -110     
  Lines       20340    17294    -3046     
  Branches     5006     4061     -945     
==========================================
- Hits        16146    14785    -1361     
+ Misses       4194     2509    -1685     
Components Coverage Δ
ibm-products 83.56% <73.95%> (+2.98%) ⬆️
ibm-products-web-components 88.30% <82.22%> (+11.58%) ⬆️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@paul-balchin-ibm paul-balchin-ibm marked this pull request as draft October 27, 2025 12:07
@matthewgallo matthewgallo changed the base branch from main to release/v2.78.0 October 27, 2025 13:20
@matthewgallo matthewgallo changed the base branch from release/v2.78.0 to main October 27, 2025 13:20
@paul-balchin-ibm
Copy link
Contributor Author

Horrendous merge conflict. Closing and recreating PR.

@paul-balchin-ibm paul-balchin-ibm deleted the 8401_fix-tagset-tag-spacing branch October 27, 2025 13:54
@paul-balchin-ibm paul-balchin-ibm restored the 8401_fix-tagset-tag-spacing branch October 27, 2025 13:54
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.

2 participants