feat(search): contextual layout tokens, xs size#21721
Conversation
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #21721 +/- ##
==========================================
+ Coverage 95.01% 95.02% +0.01%
==========================================
Files 538 539 +1
Lines 44982 45022 +40
Branches 6459 6517 +58
==========================================
+ Hits 42739 42784 +45
+ Misses 2114 2109 -5
Partials 129 129
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
laurenmrice
left a comment
There was a problem hiding this comment.
There are unrelated bugs to this PR which I opened a separate issue for in regards to the disabled state. (#21725)
React
- Looks good to me!
WC
Expandable With Layer and With Layer stories
- When changing the size, not to just
xsbut to any other size, the storybook only visually changes the $background example. If you hit the refresh button, then it changes the other $layer-01 and $layer-02 examples. But I am just wondering if it can change without having to click refresh like React currently does.
This is a bug with the storybook |
|
Hi @maradwan26,
Looks like the goal is to adopt contextual layout tokens into mentioned components? Please feel free to review the scope and determine whether we need to revisit |
There was a problem hiding this comment.
Oh okay great, thanks @maradwan26, looks good visually!
I agree with Nandan above^, we need to figure out if we will be connecting contextual tokens at this time in these PRs, or if we should do them separately.
|
@devadula-nandan @sangeethababu9223 @tay1orjones @laurenmrice @adamalston This PR is ready for review 🚀. Contextual layout tokens have been set up, PR description has been updated as some other changes were made and some fixes have been made to the SearchSkeleton to align it with its design spec I re-requested a visual review mainly for the SearchSkeleton, the normal Search should still look and behave the same as it did when it got approved. |
xs size
9156074
Closes #21685
Closes #20949
Partially addresses #13923
Adds
xssize and its respective styles to the Search component in React and WC as well as connecting to contextual layout tokens. Also adds controls to all stories.Changelog
New
xssize and its respective styles in React and WCdisabledstyles were not properly rendering in Web Componentsdefs.tsfile forcds-searchsincexsis not available intext-input/defs.tscds-table-toolbar-searchfor the close button that match the ones present in React: 1, 2.search--lgfor the appropriate styles to be applied. This PR removes that size selector, so I've moved the styles to the table-toolbar-search itself, like how it's done in ReactChanged
smallprop in React in favour of newsizepropcds--search--xlclass in React since the class does not have any attached stylesRemoved
search--sm) and size related style rules in favour of using contextual layout tokensTesting / Reviewing
xs,sm,md, andlgshould render as expectedsizePR Checklist
As the author of this PR, before marking ready for review, confirm you:
[ ] Wrote passing tests that cover this change[ ] Addressed any impact on accessibility (a11y)More details can be found in the pull request guide