fix(search): add styles for custom search buttons

[jendowns]

Closes #2042

Adds some styles for custom Search buttons. Please let me know what you think 🤔 I just went with the look of the close button + what we have in our storybook, so I'm happy to adjust. 👍

The buttons basically look like this:

Changelog

New

• add styles for .bx--search-button

Changed

• ended up rearranging .bx--search-close styles a little so it could share styles for .bx--search-button

Removed

• extra/repeated focus style rule for .bx--search-close

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit a662e59

https://deploy-preview-3247--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit a662e59

https://deploy-preview-3247--carbon-components-react.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit beeafed

https://deploy-preview-3247--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit a662e59

https://deploy-preview-3247--carbon-elements.netlify.com

[emyarod]

looks good to me!

[shixiedesign]

Hi Jen, style looks good! But just wondering if adding buttons is something we can achieve with Toolbar component? https://the-carbon-components.netlify.com/?nav=toolbar

[jendowns]

Thanks @shixiedesign! I'm not familiar with that component 🤔 Looks like it is styled a little strangely when I interact with it?

I was looking at this particular React variation of the Search here: http://react.carbondesignsystem.com/?path=/story/search--custom-buttons

Perhaps the styling could be consolidated but it seems like the Toolbar needs a little work first? 🤔 What do you think?

[shixiedesign]

Ouch yes I'm doing another QA pass on the components so thanks for pointing that out about the tool. Will need to fix that. Thanks for the Search variant fix! I think we can merge since this is an update to existing component and think about consolidation / guidance later.

[jendowns]

Thanks @shixiedesign! Just FYI I think the react version of the Tooltip has some interesting things going on as well -- for example it has a different (older styled?) close button when you enter text in the search field:

See: http://react.carbondesignsystem.com/?path=/story/toolbar--default

[shixiedesign]

Thanks @jendowns , I'm double checking with other designers and will make an issue for this component once I'm sure! Looks like it's lumped into data table at the moment so I'm not exactly sure where the styling went coz data table (last I checked) looked okay...