search

scottish-government-design-system / design-system

Design System for the Scottish Government and other Scottish public sector bodies
https://designsystem.gov.scot
MIT License
25 stars 11 forks source link

Fix for select error state #8

Closed arminsolecki closed 2 years ago

arminsolecki commented 2 years ago

Select error state causes the border to be cut off. It happens because the border changes from 2px to 4px which leaves 4px gap.

select-error-state

The fix is to increase the min-height of the wrapper by 4px to compensate border change.

jsutcliffe commented 2 years ago

The proposed solution does not fit our 8px grid, and the display of the focused error state does not match the focused error states of other form fields (2px gold focus ring, 4px black border). I have refactored the error state for selects and committed that in commit 033c035.

Note that placing the "ds_input--error" class on the wrapper is deprecated but still supported. The preferred way of showing an error state for a select is to place a class of "ds_select--error" or "ds_input--error" (they're the same but duplicated for convenience) on the select element itself instead.

arminsolecki commented 2 years ago

Thanks for the resolution I have checked the latest version of library and it works fine.