Update select component width #960
Conversation
|
it's missing the updated readme and changelog. on that, i'm on the fence whether this is a breaking change or not |
|
Cool, I will do the changelog at the last minute if approved for minimal merge conflicts :) Will discuss in channel about breaking change of not |
|
@dashouse can you please update the PR summary to explain what problem you're solving? |
|
@NickColley Hopefully this covers it... |
|
@dashouse the READMEs need regenerating to add the new example, which is why the tests are failing. Can you please run |
|
I think if we're in any doubt, given we're going to be doing a major release next anyway, we should record this as a breaking change. |
dashouse
force-pushed
the
update-select-component-width
branch
from
23ce3f8
to
3b47774
Compare
CHANGELOG.md
Outdated
| @@ -72,8 +72,20 @@ | |||
|
|
|||
| ([PR #969](https://github.com/alphagov/govuk-frontend/pull/969)) | |||
|
|
|||
| - Remove the width declaration from the `<select>` component | |||
|
|
|||
| The `<select>` component’s width will now be defined by it’s content. This addresses some accessibility issues with the select being 100% wide by default. If you want to style your select to be 100% wide we have added a new override class to allow this. | |||
There was a problem hiding this comment.
Non-blocking it would be good to explicitly reference the new class that can be used, not the end of the world though.
dashouse
force-pushed
the
update-select-component-width
branch
from
a5d90df
to
46c7c2f
Compare
dashouse
force-pushed
the
update-select-component-width
branch
from
46c7c2f
to
8e4cbf8
Compare
|
Updated changelog and merged, thanks |
One of the changes the new Frontend version introduces[1] is the lack of the full size select boxes by default. In order to keep up with the design as much as possible, we're adding the extra class to force these expand as they use to. [1]: alphagov/govuk-frontend#960
One of the changes the new Frontend version introduces[1] is the lack of the full size select boxes by default. In order to keep up with the design as much as possible, we're adding the extra class to force these expand as they use to. [1]: alphagov/govuk-frontend#960
This PR:
Creates a
govuk-!-width-fulloverride (previously we only had width to reduce the size of 100% elementsRemoves the
width: 100%declaration on the select so they are the size of the content by defaultWhy
The styling of the
<select>component (dependant on browser) is very similar to a text input. The arrows on the right hand side indicate the behaviour of this component, however because we made it 100% wide by default, a select with a small amount of content, when zoomed in is not obvious.Edit: This was found in an external audit
For example:
This change reverts to the default
<select>behaviour, being sized by it's content so the icon appears closer to the content.If a user would like to resize their select, for example they are sizing it based on being 100% wide within a container this can be done with the override class