search

coopdigital / coop-frontend

Co-op CSS Foundations and design system mono-repo
MIT License
0 stars 0 forks source link

Feat select dropdown icon #482

Closed matt-tyas closed 2 years ago

matt-tyas commented 2 years ago

This ticket attempts to address the basic styling of a select drop down making it more consistent.

My main concern is how I've included the chevron as a background image on the select element itself. Probably not best practice, but the only way i could do it without adding a wrapping div. I didn't want to introduce new mark-up so the basic select can be used by only updating CSS.

matt-tyas commented 2 years ago

Screenshot 2022-02-24 at 15 45 01 Screenshot 2022-02-24 at 15 45 12

mchadwickweb commented 2 years ago

I think an inline SVG here would be more performant. However, we're not setup for consumers of the forms to easily pick this change up to the markup. So I think for now this CSS change will work well.

philwolstenholme commented 2 years ago

FYI @matt-tyas this approach (an inlined SVG background-image) is how Bootstrap do their custom select arrows, so I think it's fine, and like you and Michael have said already, definitely the easiest approach for consumers to adopt and the frontend to support 👍

https://github.com/twbs/bootstrap/blob/8cdb6c40bdf55229459f479111e6a44d49052cf1/scss/forms/_form-select.scss#L16-L20

https://github.com/twbs/bootstrap/blob/4ee1465acfd14ab633364b5581d1e9213d946686/scss/_variables.scss#L933-L934