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

Button "to" prop to use react router #908

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

nick-at-work
Copy link

@nick-at-work nick-at-work commented Oct 18, 2024

When using the Button component, the href prop causes full page loads. We could wrap each Button (~50 of them) with react-router Link components, or since this project already has react-router, we can add the Link here. That's what this PR proposes.

To avoid breaking changes this is done with a new to prop, which also mirrors the react-router Link prop. However, it may be possible to re-use the href if you were bold enough. Pages outside the purview of the router in use would cause full page loads. I think.

Additionally, yarn insisted on updating the lockfile, and I added missing dependencies that I encountered when trying to build locally: @babel/preset-typescript and webpack.

Before:

<Link to="accounts/settings">
  <Button
    iconPrefix="settings"
    aria-label="settings"
    size="sm"
    variant="secondary"
    tone="neutral"
  />
</Link>

After:

<Button
  as='a'
  to="accounts/settings"
  iconPrefix="settings"
  aria-label="settings"
  size="sm"
  variant="secondary"
  tone="neutral"
/>

What type of change is this?

Please delete options that are not relevant.

  • New feature (non-breaking change which adds functionality

Completeness Checklist

  • TESTS: My changes maintain the baseline required test coverage, as specified by code climate analysis.
  • DOCS: All new component work is covered in that component's Overview docs.
  • DOCS: All new component work is covered in a component Playground.
  • DOCS: All new visual changes or options are covered under relevant components' VisualTests.
  • My code has no linting or typescript compile warnings.
  • My work is tied to a Github issue and satisfies the acceptance criteria (if applicable) of the corresponding issue.

Quality Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

UI Checklist

  • I have conducted visual UAT on my changes/features.
  • My solution works well on desktop, tablet, and mobile browsers.

@nick-at-work nick-at-work changed the title Button to prop react router Button "to" prop to use react router Oct 18, 2024
@erichardson30
Copy link

Well...I tried to look at this but The diff you're trying to view is too large. We only load the first 3000 changed files. 😢

@nick-at-work
Copy link
Author

Well...I tried to look at this but The diff you're trying to view is too large. We only load the first 3000 changed files. 😢

Yeah.... I couldn't build locally without the added deps... but I can just reset and apply the code change this is silly for a small PR.

@nick-at-work nick-at-work force-pushed the button-to-prop-react-router branch from 7ac6ccb to 598af96 Compare October 23, 2024 19:45
Copy link

codeclimate bot commented Oct 23, 2024

Code Climate has analyzed commit 598af96 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 75.0% (95% is the threshold).

This pull request will bring the total coverage in the repository to 97.9%.

View more on Code Climate.

@nick-at-work nick-at-work marked this pull request as ready for review October 23, 2024 20:19
Copy link

@erichardson30 erichardson30 left a comment

Choose a reason for hiding this comment

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

#yolo

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