Center text and icons vertically in the option select component #4256
Conversation
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
09177bf
to
3857241
Compare
matthillco
changed the title
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
3857241
to
bdf6355
Compare
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
bdf6355
to
bebabea
Compare
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
bebabea
to
ab06156
Compare
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
ab06156
to
9defca8
Compare
| @@ -76,11 +76,9 @@ | |||
|
|
|||
| .gem-c-option-select__icon { | |||
There was a problem hiding this comment.
One thing that could happen when switching to use flex for the layout is that the icon will shrink depending on the length of the text, for example:
One possible option to stop the icon from shrinking is to add flex: 0 0 30px. I imagine the same CSS rule would then need to be added to the expander component in finder-frontend.
There was a problem hiding this comment.
Ah good spot, thanks! I've added a flex-shrink: 0 to solve this rather than your suggestion, as it avoids the need to update the number if the size of the icon changes. @MartinJJones
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
9defca8
to
31b6df3
Compare
The font size of this element increased with the typography changes deployed in a recent update to `govuk-frontend`. This means that the up/down icons no longer align vertically. This PR centers the icons with the text for better vertical balance. A new container for the icon and button is also required so that the selected counter element can be styled independently. This also supports the same change made in `finder-frontend` where search filter titles had the same tweak to icon positions. See the PR at alphagov/finder-frontend#3334.
matthillco
force-pushed
the
option-select-title-vertical-center
branch
from
31b6df3
to
c4d5065
Compare
matthillco
changed the title
Thanks @MartinJJones , I've made the fix you suggested, would you be able to take a look and approve? Many thanks. |
What
Vertically centre align the toggle icons with the label in Option Selects. Trello
Why
The font size of this element increased with the typography changes deployed in a recent update to
govuk-frontend. This means that the up/down icons no longer align vertically. This PR vertically centres the icons with the text for better vertical balance. A new container for the icon and button is also required so that the selected counter element can be styled independently.This also supports the same change made in
finder-frontendwhere search filter titles had the same tweak to icon positions. See the PR at alphagov/finder-frontend#3334.Visual Changes