FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(PF Checkbox): Add 3rd state to checkbox controlled by consumer by karelhala · Pull Request #2252 · patternfly/patternfly-react · GitHub

/ patternfly-react Public

feat(PF Checkbox): Add 3rd state to checkbox controlled by consumer - #2252

Merged
dlabaj merged 2 commits into
patternfly:masterfrom
karelhala:tri-state-checkbox
Jun 27, 2019
ConversationCommits (2)ChecksFiles changed
Merged

feat(PF Checkbox): Add 3rd state to checkbox controlled by consumer#2252
dlabaj merged 2 commits into
patternfly:masterfrom
karelhala:tri-state-checkbox

Conversation

karelhala commented Jun 13, 2019

Copy link
Copy Markdown
Contributor

What:
When using checkbox as hierarchical checkbox (parent checkbox with child checkboxes) and user selects only some of child checkboxes parent one should go to 3rd state to indicate user that only some checkboxes were selected.

Additional issues:

patternfly-build commented Jun 13, 2019

Copy link
Copy Markdown
Collaborator

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

codecov-io commented Jun 13, 2019 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

Merging #2252 into master will decrease coverage by 0.01%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master    #2252      +/-   ##
==========================================
- Coverage   79.89%   79.87%   -0.02%     
==========================================
  Files         669      669              
  Lines        8529     8531       +2     
  Branches      734      735       +1     
==========================================
  Hits         6814     6814              
- Misses       1362     1363       +1     
- Partials      353      354       +1
Flag Coverage Δ
#patternfly3 85.23% <ø> (ø) ⬆️
#patternfly4 74.88% <0%> (-0.04%) ⬇️
#patternflymisc 95.79% <ø> (ø) ⬆️
Impacted Files Coverage Δ
...-4/react-core/src/components/Checkbox/Checkbox.tsx 85.29% <0%> (-5.34%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 91382a1...7c6438a. Read the comment docs.

karelhala force-pushed the tri-state-checkbox branch from beda171 to 14b36aa Compare June 13, 2019 11:09

rachael-phillips commented Jun 13, 2019

Copy link
Copy Markdown
Contributor

@mcarrano @tlabaj have we introduced this in Core? If this is a need we should also get ahead of this in Core.

karelhala commented Jun 13, 2019

Copy link
Copy Markdown
Contributor Author

@rachael-philips this is just a JS update no need to change or anything in core it uses indeterminate API od checkbox [1].

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

rachael-phillips commented Jun 13, 2019

Copy link
Copy Markdown
Contributor

Thanks for the explanation @karelhala !

karelhala mentioned this pull request Jun 13, 2019
Closed

mcarrano commented Jun 13, 2019

Copy link
Copy Markdown
Member

I am fine to introduce this directly into React. We may decide to revisit this later based on the discussion here: patternfly/patternfly#1411

jschuler reviewed Jun 13, 2019
View reviewed changes
Comment thread packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.md
id="check-2"
name="check2"
/>
<Checkbox

jschuler Jun 13, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

would be good to wrap 2 checkboxes inside the checkbox and show the indeterminate state live. And can also get rid of several other duplicate examples

karelhala Jun 13, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

Yeah! That's a good point. I like it!

karelhala force-pushed the tri-state-checkbox branch from 5a43de8 to 7c6438a Compare June 14, 2019 10:49
rachael-phillips added this to the Bluebird milestone Jun 14, 2019
redallen reviewed Jun 14, 2019
View reviewed changes
Comment thread packages/patternfly-4/react-core/src/components/Checkbox/Checkbox.tsx
aria-invalid={!isValid}
aria-label={ariaLabel}
disabled={isDisabled}
ref={elem => elem && (elem.indeterminate = isChecked === null)}

redallen Jun 14, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

What's this ref needed for?

karelhala Jun 14, 2019

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality

This prop is can't be set trough react prop for some reason [1]. However plain js api allows to set it trough element, so this ref is to access checkox element. It's probably because indeterminate is a flag and not real prop though.

[1] react/react#1798

dlabaj merged commit cf06254 into patternfly:master Jun 27, 2019
rachael-phillips modified the milestones: Bluebird, Albatross Jul 1, 2019
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

dlabaj dlabaj approved these changes
tlabaj Awaiting requested review from tlabaj
+2 more reviewers
redallen redallen left review comments
jschuler jschuler approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

dlabaj

Labels

None yet

Projects

None yet

Milestone

Albatross

Development

Successfully merging this pull request may close these issues.

8 participants

Back | FazBrowse Home | New Git URL