-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
feat(search): "medium-sized" search input height #4237
feat(search): "medium-sized" search input height #4237
Conversation
Deploy preview for the-carbon-components ready! Built with commit 18bc529 https://deploy-preview-4237--the-carbon-components.netlify.com |
Deploy preview for carbon-elements ready! Built with commit 18bc529 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for jumping in @AlexanderLyon! Some comments:
- Can you make the suffix
lg
because we used havelg
whose size was40px
? (Side note: The default (48px
) variant is calledxl
) - Can you make sure
Close16
is used?
Deploy preview for carbon-components-react ready! Built with commit 18bc529 https://deploy-preview-4237--carbon-components-react.netlify.com |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good in Vanilla, we do need to have the close icon popup if you start typing in the field, currently it is not showing. You can reference the xlg and sm versions.
For react I don't see a way to change the search to the lg version. I see the search is xlg by default and there is a knob option for small, but there should also be a knob option for lg.
@laurenmrice I think this is a vanilla only contribution |
Oh okay thanks Josefina! @AlexanderLyon Do you feel comfortable making this in React as well? I just noticed the file wasn't updated for React, if not that is okay and I can open a separate issue for someone to tackle. |
@laurenmrice I can definitely give it a shot later today! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the contribution! It's looking really good. Just a few comments:
- Looks like the clear search button is there, but the svg blends in with the background, so we just need to update the svg color.
- Like @asudoh said, let's update the suffix to be
lg
and the scss selector to be.#{$prefix}--search--lg
. Sorry for the confusion. I know the design specs say medium but this would technically be ourlg
version since our normal search bar isxl
. I think it's ok if the label says "Medium search" (search.config.js
: line 32)
@laurenmrice @AlexanderLyon actually, just realized it looks like Akira has a draft pr in progress for react changes that relies on this fix #4238 So I think you can just fix the style changes we asked for and it should be good to go. We'll make sure your PR gets merged in before Akira's since his PR relies on this. 👍 |
@jnm2377 sounds good, I should have this ready to go by tomorrow 👍 |
…arbon-design-system#4229) * chore(Toolbar/ToobarSearch): add component name to deprecation warning * docs(Toolbar): add deprecation decorator to Toolbar story * docs(Toolbar): un-add deprecation decorator
01bbb1d
to
e32a17d
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍 - Thanks @AlexanderLyon for the updates!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! thanks! 🎉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good 🎉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! 🎉
Closes #3457
Adds a "medium" size for search input with a height of
40px
, as well as updated documentation.Changelog
Changed
_search.scss
search.config.js
search/README.md