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

Make previous and next buttons look like links #831

Merged
merged 6 commits into from
Feb 27, 2019

Conversation

IreneStr
Copy link
Contributor

@IreneStr IreneStr commented Feb 26, 2019

Summary

This PR can be summarized in the following changelog entry:

  • Makes the previous and next buttons in the onboarding wizard look like links.

Relevant technical choices:

  • As discussed with @luckickken and @afercia (see comment on issue), I've used buttons and styled them as links.
  • The space between the underlining and the links is not 100% consistent with the design. This discrepancy has already been approved by @luckickken.
  • I've added **/coverage/** to .eslintignore to make sure that files in this folder are ignored when running grunt eslint.
  • After discussing with @moorscode, I've added $palette_blue_link to _colors.scss. If I would have used an existing blue color for the navigation buttons, there would be situations where there would be two slightly different blues (for navigation buttons and text links) within one config wizard step, which would be ugly.

Test instructions

This PR can be tested by following these steps:

  • On trunk: go to Yoast SEO > General and open the configuration wizard. See a pink and white next and previous button on the right-hand side.
  • Link this branch to trunk of wordpress-seo (in yoast-components: yarn link, in wordpress-seo:yarn link yoast-components).
  • Build everything (in yoast-components: yarn install && grunt build, in wordpress-seo:composer install && yarn install && grunt build && yarn start)
  • Go to Yoast SEO > General and open the configuration wizard. See blue next and previous buttons (styled as links) aligned to the left and right. Compare what you see to the design in the issue (but see Relevant technical choices above).
  • Click through all steps to make sure all buttons have been changed.
  • If you have multiple browsers, test in all of them.
  • Run yarn start in yoast-components and go to localhost:3333 in your browser. Click the Wizard button, and see the changed navigation there as well.
  • I'll ask @dariaknl to test in Edge and IE11.

UI changes

  • This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Fixes Yoast/wordpress-seo/issues/12276

@IreneStr IreneStr added the UI change PRs that result in a change in the UI label Feb 26, 2019
@andizer
Copy link
Contributor

andizer commented Feb 26, 2019

CR done

@abotteram
Copy link
Contributor

Acceptance 👍

@abotteram abotteram merged commit b7f30fb into develop Feb 27, 2019
@abotteram abotteram deleted the 12276-change-previous-next-buttons branch February 27, 2019 09:21
@afercia
Copy link
Contributor

afercia commented Feb 27, 2019

Noticed in Firefox these buttons-links have no focus style. They rely on the browsers native outline, and in Firefox the outline doesn't work when unsetting the borders. Will create a separate issue.

@dariaknl
Copy link

Tested "Previous" and "Next" buttons in Conf Wizard in IE11 and Edge - looks good 👍!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
UI change PRs that result in a change in the UI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants