-
Notifications
You must be signed in to change notification settings - Fork 357
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug - Badge no longer has spacing between chip text in chip #9483
Comments
This is caused because this react repo didnt add wrappers for content and actions for chips. should there be an issue to add them like here: patternfly/patternfly#5360 ? |
Yes I believe that is how we will solve this issue 👍🏻 |
Actually I now see thats its been done already, but the html examples is: <span class="pf-v5-c-chip__content">
<span class="pf-v5-c-chip__text" id="chip_three">Chip</span>
<span class="pf-v5-c-badge pf-m-read">00</span>
</span> while the the react one is: <span class="pf-v5-c-chip__content">
<span class="pf-v5-c-chip__text" id="pf-random-id-250">
Chip
<span class="pf-v5-c-badge pf-m-read">7</span>
</span>
</span> Should patternfly core add css to add spacing also between chip-text element, or somehow divide chips children between text children and react element children? |
I believe the badge should be a sibling of the chip_text |
What would be the best way to achieve that? as now pf-react has all children under chip-text <span ref={this.span} className={css(styles.chipText)} id={id}>
{children}
</span> |
Hmm... looking at the core markup, it looks like it presumes the react I'm not a huge fan of just applying a left margin to any badge in the chip since we don't always know where a chip would be used, though it would probably solve this issue well since we had that margin in v4. I would prefer we either support the badge in the chip via a prop like the button, and/or open it up to the user to manage the spacing since they may add it before or after the text, and put other stuff alongside it, too. In this case, a regular whitespace char works well enough as an interim fix. |
@MariaAga please see the core issue here |
@tlabaj Thanks for the answers! I have some pto so I cant do it this week |
Badges within chips should have spacing between it and the text.
Currently:
Content element > text element > badge element
Should be:
Content element > text element + badge element
Will address
RedHatInsights/frontend-components#1801
The text was updated successfully, but these errors were encountered: