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

fix(Dropdown split button): Add 3rd state to split button #2842

Merged
merged 2 commits into from Sep 23, 2019

Conversation

@karelhala
Copy link
Contributor

karelhala commented Sep 5, 2019

Fixes: #2841

What:
In order to allow 3rd state in checkbox of split button we have to use Checkbox component.

Additional issues:

type="checkbox"
onChange={this.handleChange}
{...(this.calculateChecked() !== undefined) && { onChange: this.handleChange }}
ref={ref as any}

This comment has been minimized.

Copy link
@karelhala

karelhala Sep 5, 2019

Author Contributor

Anybody knows something better to use here?

This comment has been minimized.

Copy link
@redallen

redallen Sep 5, 2019

Contributor

Why do you have to pass the ref here? It will be passed automatically with {...props} with the correct type.

This comment has been minimized.

Copy link
@karelhala

karelhala Sep 6, 2019

Author Contributor

It's because TS does not recognized the ref correctly in here. I tried casting it to expected and it failed. This was the only solution that didn't thre any error.

@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Sep 5, 2019

PatternFly-React preview: https://patternfly-react-pr-2842.surge.sh

@karelhala karelhala force-pushed the karelhala:3rd-state-split branch 3 times, most recently from ae9c588 to a6e29b8 Sep 5, 2019
@@ -35,13 +40,3 @@ test('passing HTML attribute', () => {
);
expect(view).toMatchSnapshot();
});

test('checkbox passes value and event to onChange handler', () => {

This comment has been minimized.

Copy link
@karelhala

karelhala Sep 5, 2019

Author Contributor

I had to remove this test because jest is not playing nicely with mount and currentTarget airbnb/enzyme#218.

I had to use mount because checkbox is now in Checkbox component.

This comment has been minimized.

Copy link
@redallen

redallen Sep 5, 2019

Contributor

I've run into this same issue (I think also with Checkbox). My solution was to change handleChange in Checkbox.tsx from:

private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
  this.props.onChange(event.currentTarget.checked, event);
}

to:

private handleChange = (event: React.FormEvent<HTMLInputElement>): void => {
  this.props.onChange(event.target.checked, event);
}

If Checkbox doesn't break, feel free to try that.

This comment has been minimized.

Copy link
@redallen

redallen Sep 5, 2019

Contributor

I think we should open a high-priority issue to add this test back if we aren't willing to address it in the scope of this PR.

This comment has been minimized.

Copy link
@karelhala

karelhala Sep 6, 2019

Author Contributor

Yeah, that came up in head as well, I didn't wanted to change the original Checkbox though because it's not part of this PR. But I'll probably change it to use target instead of currentTarget.

I could also change handleChange of this component to use target instead of currentTarget which is probably a bit safer.

@tlabaj tlabaj added the css review label Sep 17, 2019
@tlabaj tlabaj requested a review from mcoker Sep 17, 2019
@tlabaj tlabaj added the ux review label Sep 17, 2019
@tlabaj tlabaj requested a review from mcarrano Sep 17, 2019
Copy link
Member

mcarrano left a comment

Looks good @karelhala

@mcarrano mcarrano added ux approved and removed ux review labels Sep 17, 2019
Copy link
Contributor

mcoker left a comment

lgtm! 🏆

Copy link
Contributor

tlabaj left a comment

Can you please resolve merge conflicts so we can get his one in. Thanks!

@karelhala karelhala dismissed stale reviews from tlabaj, kmcfaul, mcoker, and mcarrano via 14111cc Sep 23, 2019
@karelhala karelhala force-pushed the karelhala:3rd-state-split branch from f7a34a4 to 14111cc Sep 23, 2019
@tlabaj
tlabaj approved these changes Sep 23, 2019
Copy link
Contributor

tlabaj left a comment

LGTM

@tlabaj tlabaj merged commit 6cb6424 into patternfly:master Sep 23, 2019
8 checks passed
8 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: build_integration Your tests passed on CircleCI!
Details
ci/circleci: build_pf3_docs Your tests passed on CircleCI!
Details
ci/circleci: build_pf4_docs Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_jest_other Your tests passed on CircleCI!
Details
ci/circleci: test_jest_pf4 Your tests passed on CircleCI!
Details
ci/circleci: upload_docs Your tests passed on CircleCI!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.