Skip to content

feat: Enable static or responsive label on autocomplete#130

Merged
DafyddLlyr merged 3 commits intomainfrom
dp/toggle-responsive-label
Mar 28, 2022
Merged

feat: Enable static or responsive label on autocomplete#130
DafyddLlyr merged 3 commits intomainfrom
dp/toggle-responsive-label

Conversation

@DafyddLlyr
Copy link
Copy Markdown
Contributor

Realised during Friday's show and tell that the label font size is 19px on PlanX when it should be 18px!

By default, the govuk-label class takes into account the following breakpoints - https://github.com/alphagov/govuk-frontend/blob/v4.0.0/src/govuk/settings/_media-queries.scss#L10-L14

This means it's not quite as simple as overwriting the font-size and setting a default, as this would have the side effect of breaking the responsiveness if anybody else wanted to use the component.

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 28, 2022

Deploy Preview for oslmap ready!

Name Link
🔨 Latest commit 181b3ce
🔍 Latest deploy log https://app.netlify.com/sites/oslmap/deploys/6241d6318216b7000868fa67
😎 Deploy Preview https://deploy-preview-130--oslmap.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@DafyddLlyr DafyddLlyr requested a review from a team March 28, 2022 09:56
Copy link
Copy Markdown
Member

@jessicamcinchak jessicamcinchak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good eye, good solution for our use case! thanks for this!

Comment thread src/components/address-autocomplete/index.ts Outdated
href="https://cdn.jsdelivr.net/npm/accessible-autocomplete@2.0.4/dist/accessible-autocomplete.min.css"
/>
<label class="govuk-label" htmlFor=${this.id}>${this.label}</label>
<label class=${this.getLabelClasses()} htmlFor=${this.id}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure to rebase to not accidently overwrite with htmlFor again 🙂

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very good point...!

@DafyddLlyr DafyddLlyr merged commit 86842ac into main Mar 28, 2022
@DafyddLlyr DafyddLlyr deleted the dp/toggle-responsive-label branch March 28, 2022 15:40
This was referenced Mar 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants