Bug Description
Hi,
After recent changes to Select (#13408) and Icon (#13569) components, the ShellBar search field displays two visual issues:
Issue 1: Unwanted bottom border on scope selector
The scope Select component shows an unwanted bottom border gradient that shouldn't appear in the ShellBar context.
Root Cause:
Commit 9fb905f (PR #13408, May 21) added --_ui5_select_bottom_border_gradient to .ui5-select-root for proper Horizon theme compliance. However, SearchField.css doesn't suppress this gradient for its scoped Select.
Issue 2: Search icons render too small
Icons in the search field (clear, filter, search icons) appear smaller than intended.
Root Cause:
Commit 3cbeac5 (PR #13569, May 22) added container query sizing (font-size: min(100cqw, 100cqh)) to .ui5-icon-root for the new fontIcon slot feature. SearchField.css constrains ::part(root) to width: 1rem; height: 1rem (lines 247-248), which causes the container query to render icons at 1rem instead of filling their parent container.
Affected Component
No response
Expected Behaviour
No response
Isolated Example
https://ui5.github.io/webcomponents/nightly/play/#eNqtVm1v2zYQ_iuMPsmBJXUYCgyO3Lc0Awp0XbFkH4ZpH2jxbLGlSE2k7BiB__vuSMmSvTbNhsKGJd7Lc3fPHUk_RFILuE8rV6to8RBpXkO0mArnUWm0A-1QnF8kCWsU329a02mRrI0SLEleFDq_ePvr9d0fH28YOZGAnkxxvVkWEegiQhl98gq4wHeG39y6vQJaXC60cfFCwFpqEDP2gDIhLYVaMG00XKHgQP4e3-vXpi1BJKVRpk24-NRZd2LL8mzAx48rXF6D46yseGvBYVa_3_2c_BQSO2qpflRtJewa07oiYn31KNxJ4aqlgK0sIfGLOZNaOslVYkuuYPlD-mzEc9Jh8FteNwryLKyw_qwnAF9XRuyZzxHRV7z83NPqS1qwLW_jJLG8eXNUXZNmdsUqkJsKy_3x-bPmfgz5hfYkoPsWeYtOPk8s8LasmBQYNbxj-qYBLNY_ky1XHaXElSJZZXZJqdAwkUgGBSihQmho0eY2gL1uGjtnH1sjutLZY0YnEUMU5uCe2Hztwc9CKUMqb0cgeXbu_QRczGQKHJbfA3ms7ojejKInR5gqvCjPhNw-0sJJ-2zZysYxt28oeo3BlW9bW9KSS51-CrGDoZ83mrIwb9mwNx-dk-gwH6AmJ8IgmR4H2eUUpZIC2GVWaFnT1mFFlGYTte0aEvsEcYf-29dnQP4ThFdIVbaDVWlQojGqTdbStBIZsy4Lszcg_iendw7q_-V4S50cPAuNZFgXts1bjufHkv2JJ8-DP0cWCPmeN840RTQPNiSazMxhfmoMfAvsN_i7A0v6iVM_xucOZsN2pv38BNNfuOYbmOzQb3uYlVToUSEV9okV3PGVAveY8V-etnWnSyfxMClb4A48qdQSG3u_cAEgEltL5aAdqA3OTK5ZfDExPDE69sJfAwyUhUeM0iCOJQZnyxeMnmnY9ctlbzcbL58RJMXr54aX1dGTYvTTcJwwjCRM2dU4Smmo9EYBreIimpwOBFFEPszom9KpgwA-I-L3TO1T-4DywcYLRqMwqNha3FbXlVQiHp1DRfR7mAzx6DbNewOuT_rN_p2Iz6-MWdgG520M4pNMhLjZIsp73EugkfKeAn_j4KWsN0BzEwMZzc4Y7ZPyulTgRS1VqDf1J7Hv1XCJvMQ3fCy-an0V_n1MkyMC7Rdb6qltoTZbiEfaiq9OLnFKP9Hh8A8Mf0dS
Steps to Reproduce
Open nightly build - link
Log Output, Stack Trace or Screenshots
Priority
Medium
UI5 Web Components Version
2.23.0-rc.1
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration
Bug Description
Hi,
After recent changes to Select (#13408) and Icon (#13569) components, the ShellBar search field displays two visual issues:
Issue 1: Unwanted bottom border on scope selector
The scope Select component shows an unwanted bottom border gradient that shouldn't appear in the ShellBar context.
Root Cause:
Commit 9fb905f (PR #13408, May 21) added --_ui5_select_bottom_border_gradient to .ui5-select-root for proper Horizon theme compliance. However, SearchField.css doesn't suppress this gradient for its scoped Select.
Issue 2: Search icons render too small
Icons in the search field (clear, filter, search icons) appear smaller than intended.
Root Cause:
Commit 3cbeac5 (PR #13569, May 22) added container query sizing (font-size: min(100cqw, 100cqh)) to .ui5-icon-root for the new fontIcon slot feature. SearchField.css constrains ::part(root) to width: 1rem; height: 1rem (lines 247-248), which causes the container query to render icons at 1rem instead of filling their parent container.
Affected Component
No response
Expected Behaviour
No response
Isolated Example
https://ui5.github.io/webcomponents/nightly/play/#eNqtVm1v2zYQ_iuMPsmBJXUYCgyO3Lc0Awp0XbFkH4ZpH2jxbLGlSE2k7BiB__vuSMmSvTbNhsKGJd7Lc3fPHUk_RFILuE8rV6to8RBpXkO0mArnUWm0A-1QnF8kCWsU329a02mRrI0SLEleFDq_ePvr9d0fH28YOZGAnkxxvVkWEegiQhl98gq4wHeG39y6vQJaXC60cfFCwFpqEDP2gDIhLYVaMG00XKHgQP4e3-vXpi1BJKVRpk24-NRZd2LL8mzAx48rXF6D46yseGvBYVa_3_2c_BQSO2qpflRtJewa07oiYn31KNxJ4aqlgK0sIfGLOZNaOslVYkuuYPlD-mzEc9Jh8FteNwryLKyw_qwnAF9XRuyZzxHRV7z83NPqS1qwLW_jJLG8eXNUXZNmdsUqkJsKy_3x-bPmfgz5hfYkoPsWeYtOPk8s8LasmBQYNbxj-qYBLNY_ky1XHaXElSJZZXZJqdAwkUgGBSihQmho0eY2gL1uGjtnH1sjutLZY0YnEUMU5uCe2Hztwc9CKUMqb0cgeXbu_QRczGQKHJbfA3ms7ojejKInR5gqvCjPhNw-0sJJ-2zZysYxt28oeo3BlW9bW9KSS51-CrGDoZ83mrIwb9mwNx-dk-gwH6AmJ8IgmR4H2eUUpZIC2GVWaFnT1mFFlGYTte0aEvsEcYf-29dnQP4ThFdIVbaDVWlQojGqTdbStBIZsy4Lszcg_iendw7q_-V4S50cPAuNZFgXts1bjufHkv2JJ8-DP0cWCPmeN840RTQPNiSazMxhfmoMfAvsN_i7A0v6iVM_xucOZsN2pv38BNNfuOYbmOzQb3uYlVToUSEV9okV3PGVAveY8V-etnWnSyfxMClb4A48qdQSG3u_cAEgEltL5aAdqA3OTK5ZfDExPDE69sJfAwyUhUeM0iCOJQZnyxeMnmnY9ctlbzcbL58RJMXr54aX1dGTYvTTcJwwjCRM2dU4Smmo9EYBreIimpwOBFFEPszom9KpgwA-I-L3TO1T-4DywcYLRqMwqNha3FbXlVQiHp1DRfR7mAzx6DbNewOuT_rN_p2Iz6-MWdgG520M4pNMhLjZIsp73EugkfKeAn_j4KWsN0BzEwMZzc4Y7ZPyulTgRS1VqDf1J7Hv1XCJvMQ3fCy-an0V_n1MkyMC7Rdb6qltoTZbiEfaiq9OLnFKP9Hh8A8Mf0dS
Steps to Reproduce
Open nightly build - link
Log Output, Stack Trace or Screenshots
Priority
Medium
UI5 Web Components Version
2.23.0-rc.1
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration