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

Use type button by default in Tab component #572

Merged
merged 1 commit into from May 11, 2020
Merged

Use type button by default in Tab component #572

merged 1 commit into from May 11, 2020

Conversation

rubenmoya
Copy link
Contributor

This PR fixes #165, it was first fixed in 5f75dd5 but then broken in a2ab2be.

I've added a couple of tests but I'm not sure if they're what you expect so feedback is welcome!


Thank you for contributing to Reach UI! Please fill in this template before submitting your PR to help us process your request more quickly.

  • Use a meaningful title for the pull request. Include the name of the package modified.
  • Test the change in your own code (Compile and run).
  • Add or edit tests to reflect the change (Run with yarn test).
  • Add or edit Storybook examples to reflect the change (Run with yarn start).
  • Ensure formatting is consistent with the project's Prettier configuration.

This pull request:

  • Creates a new package
  • Fixes a bug in an existing package
  • Adds additional features/functionality to an existing package
  • Updates documentation or example code
  • Other

If creating a new package:

  • Make sure the new package directory contains each of the following, and that their structure/formatting mirrors other related examples in the project:
    • examples directory
    • src directory with an index.tsx entry file
    • At least one example file per feature introduced by the new package
    • Base styles in a style.css file (if needed by the new package)

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 3, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit aa82a1c:

Sandbox Source
dazzling-moon-roe33 Configuration

@@ -455,6 +455,8 @@ export const Tab = forwardRefWithAs<
context: TabsDescendantsContext,
disabled: !!disabled,
});
const htmlType =
Comp === "button" && props.type == null ? "button" : props.type;
Copy link
Member

Choose a reason for hiding this comment

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

The reason this was removed to begin with is because this check isn't reliable. Comp might be a styled component, or a wrapper component of some kind, in which case we'd lose that default setting. Of course if we pass the attribute along to a non-button element then we have invalid HTML. May still be worth it to have either way.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Maybe we could keep the check, since it would cover at least some cases, and add some information in the docs about the edge cases?

@chaance chaance added the Type: Enhancement General improvements or suggestions label May 11, 2020
@chaance chaance merged commit e17d904 into reach:master May 11, 2020
@rubenmoya rubenmoya deleted the fix-button-type branch May 11, 2020 06:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement General improvements or suggestions
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tab buttons need type='button'
2 participants