feat(tag): web component parity #18774
Conversation
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #18774 +/- ##
=======================================
Coverage 84.85% 84.85%
=======================================
Files 396 396
Lines 14491 14491
Branches 4743 4775 +32
=======================================
Hits 12297 12297
Misses 2045 2045
Partials 149 149 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Hey Anna, looks great!
I think we just need to take a look at these things:
For all new components: When I change controls > disable > true, the components are not being disabled. They do not behave like in React, meaning they don’t appear grayed out, and the mouse pointer doesn’t indicate that they are "blocked."
Selectable: By default, React has a tag already selected (all black). Maybe including this behavior in the Web Component would be nice.
heloiselui
added
status: one more review 👀
and removed
status: ready for review 👀
labels
Co-authored-by: Heloise Lui <[email protected]>
Co-authored-by: Heloise Lui <[email protected]>
Co-authored-by: Heloise Lui <[email protected]>
| --cds-layout-size-height-md: 1.5rem; | ||
| --cds-layout-size-height-lg: 2rem; |
There was a problem hiding this comment.
| --cds-layout-size-height-md: 1.5rem; | |
| --cds-layout-size-height-lg: 2rem; | |
| --cds-layout-size-height-md: $spacing-06; | |
| --cds-layout-size-height-lg: $spacing-07; |
There was a problem hiding this comment.
Actually looks like I have to give it a hardcoded value here as the token doesn't get complied it looks like
There was a problem hiding this comment.
What about interpolating it? Like #{$spacing-06}.
Co-authored-by: kennylam <[email protected]>
|
|
||
| // border: 1px solid $border-disabled; | ||
| // background-color: $layer; | ||
| // color: $text-disabled; | ||
|
|
||
| inline-size: rem(60px); | ||
| // &:hover { | ||
| // background-color: $layer; | ||
| // cursor: not-allowed; | ||
| // } |
Closes #18653
This updates the
cds-tagcomponent with the latest features from React.New components include:
cds-tag-skeletoncds-dismissible-tagcds-selectable-tagcds-operational-tagNOTE: The tag component incorporates the
definition-tooltipthat's used when the tag content results in an ellipsis. However sincedefinition-tooltipdoesn't exist in Web Components yet, I'm going to create a ticket to add thedefinition-tooltipto the tag component once completed.Changelog
New
cds-tag-skeletoncds-dismissible-tagcds-selectable-tagcds-operational-tagChanged
tooltipevent methods to accommodate for tag functionality where the tooltip content doesn't appear outside of keyboard interactionsTesting / Reviewing
Review with the
tagstories on Storybook and compare with React version