search

trendmicro-frontend / tonic-ui

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.
https://trendmicro-frontend.github.io/tonic-ui
MIT License
125 stars 28 forks source link

Align the search icon within the search bar #873

Closed UMNIYAH closed 2 months ago

UMNIYAH commented 2 months ago

After migrating from v1 to v2, the search icon within the search bar is not centred vertically, which affects the visual balance and may impact user experience.

Proposed Label: 🐛 bug

v1 vs. v2 Screenshot 2024-06-12 at 9 39 09 AM Screenshot 2024-06-12 at 9 38 46 AM

cheton commented 2 months ago

I noticed that the key difference is the missing vertical-align: middle style property on the svg element. I will add it back to the SVGIcon component in the @tonic-ui/react-icons package.

UMNIYAH commented 2 months ago

I noticed that the key difference is the missing vertical-align: middle style property on the svg element. I will add it back to the SVGIcon component in the @tonic-ui/react-icons package.

Thank you (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

cheton commented 2 months ago

This issue was resolved in @tonic-ui/react@2.0.2. You can update both packages to 2.0.2.

"@tonic-ui/react": "^2.0.2",
"@tonic-ui/react-icons": "^2.0.2",
UMNIYAH commented 2 months ago

This issue was resolved in @tonic-ui/react@2.0.2. You can update both packages to 2.0.2.

Thanks a bunch for the quick reply!