-
Notifications
You must be signed in to change notification settings - Fork 429
Allow initial value for uncontrolled components #1306
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
Conversation
@@ -204,7 +210,8 @@ exports[`Radio Button Group Disabled DOM Snapshot 1`] = ` | |||
> | |||
<input | |||
aria-describedby={undefined} | |||
checked={false} | |||
checked={true} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure why but this changed from false to true.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@interactivellama the checkbox was being forced as controlled component even when checked
was not given
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, it's like removing the !this.props.disabled
caused this, but it seems appropriate to allow disabled options that are selected
The visual snapshots have been removed in this PR see |
@interactivellama how can i update the snapshots? |
@@ -79,7 +83,8 @@ class Radio extends React.Component { | |||
id={this.getId()} | |||
name={this.props.name} | |||
value={this.props.value} | |||
checked={!this.props.disabled && this.props.checked} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@interactivellama if we kept this logic this component would always be controlled no mater what, disabled
should not affect the checked state.
@interactivellama the png snapshots are back, i think this pr is ready for your final review. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I could push to your fork, so I'm requesting changes.
I think this is the last thing. I want to scare folks away from using it--if they have a choice to make a pure React SPA.
components/forms/checkbox/index.jsx
Outdated
@@ -68,6 +68,10 @@ const Checkbox = createReactClass({ | |||
* The Checkbox is a controlled component, and will always be in this state. If checked is not defined, the state of the uncontrolled native `input` component will be used. | |||
*/ | |||
checked: PropTypes.bool, | |||
/** | |||
* This is a uncontrolled component, and this will be the initial checked status. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update comment with:
/**
* This is the initial value of an uncontrolled form element and is present only to provide compatibility with hybrid framework applications that are not entirely React. It should only be used in an application without centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
@@ -246,6 +246,10 @@ const Input = createReactClass({ | |||
* The input is a controlled component, and will always display this value. | |||
*/ | |||
value: PropTypes.string, | |||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update comment with:
/**
* This is the initial value of an uncontrolled form element and is present only to provide compatibility with hybrid framework applications that are not entirely React. It should only be used in an application without centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -170,6 +170,10 @@ const propTypes = { | |||
* The input is a controlled component, and will always display this value. | |||
*/ | |||
value: PropTypes.string, | |||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update comment with:
/**
* This is the initial value of an uncontrolled form element and is present only to provide compatibility with hybrid framework applications that are not entirely React. It should only be used in an application without centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -17,6 +17,10 @@ const propTypes = { | |||
* This is a controlled component. This radio is checked according to this value. | |||
*/ | |||
checked: PropTypes.bool, | |||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please update comment with:
/**
* This is the initial value of an uncontrolled form element and is present only to provide compatibility with hybrid framework applications that are not entirely React. It should only be used in an application without centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
* hybrid framework applications that are not entirely React. It should only be used in an application without | ||
* centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended. | ||
* See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information. | ||
*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
Fixes #1305
Additional description
defaultValue
on<Input>
and<Textarea>
.defaultChecked
on<Radio>
and<Checkbox>
.Pull Request Review checklist (do not remove)
last-slds-markup-review
inpackage.json
and push.last-accessibility-review
, topackage.json
and push.npm run local-update
within locally cloned site repo to confirm the site will function correctly at the next release.