Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle switch error messages #1760

Merged
merged 14 commits into from
Jan 18, 2023
Merged

Conversation

camertron
Copy link
Contributor

Description

@neall and I have been pairing on getting error messages to display properly when a toggle switch request fails. This is the result.

image

Integration

Does this change require any updates to code in production?

No

Merge checklist

  • Added/updated tests
    - [ ] Added/updated documentation
  • Added/updated previews

neall and others added 5 commits January 13, 2023 14:56
Render a validation element and fill it in or hide it depending on the
response from the server.
This looks a lot nicer when there is also a caption and/or validation
message after the label.
This will occupy the same amount of space regardless of if we are
showing one of the status octicons (loading or error) to prevent
excessive layout jumping on the page.

Also adds a gap style to the flexbox container to keep a little
distance from the label/caption/validation message.
@changeset-bot
Copy link

changeset-bot bot commented Jan 13, 2023

🦋 Changeset detected

Latest commit: 4c1d06a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added css Pull requests that update CSS code javascript Pull requests that update Javascript code ruby Pull requests that update Ruby code labels Jan 13, 2023
@github-actions
Copy link
Contributor

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

@camertron camertron temporarily deployed to review-pr-1760 January 13, 2023 22:34 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages January 13, 2023 22:38 — with GitHub Actions Inactive
@camertron camertron marked this pull request as ready for review January 13, 2023 22:46
@camertron camertron requested a review from a team as a code owner January 13, 2023 22:46
@camertron camertron requested review from a team, tobiasahlin and jonrohan January 13, 2023 22:46
@camertron
Copy link
Contributor Author

Visual differences are expected.

@camertron camertron changed the title Neall/toggle switch error messages Toggle switch error messages Jan 13, 2023
Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

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

Just one css request

app/components/primer/alpha/toggle_switch.pcss Outdated Show resolved Hide resolved
@tobiasahlin
Copy link

Should the octagon be nudged 1-2 pixels upwards, perhaps? 1px up:
test

@camertron camertron temporarily deployed to review-pr-1760 January 17, 2023 19:03 — with GitHub Actions Inactive
@camertron camertron temporarily deployed to github-pages January 17, 2023 19:08 — with GitHub Actions Inactive
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
@camertron camertron merged commit fdd7bc1 into main Jan 18, 2023
@camertron camertron deleted the neall/toggle-switch-error-messages branch January 18, 2023 06:31
@primer-css primer-css mentioned this pull request Jan 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css Pull requests that update CSS code javascript Pull requests that update Javascript code ruby Pull requests that update Ruby code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants