Skip to content

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

Merged
merged 4 commits into from
Mar 30, 2018
Merged

Allow initial value for uncontrolled components #1306

merged 4 commits into from
Mar 30, 2018

Conversation

3den
Copy link
Contributor

@3den 3den commented Mar 22, 2018

Fixes #1305

Additional description

  • Accepts defaultValue on <Input> and <Textarea>.
  • Accepts defaultChecked on <Radio> and <Checkbox>.

Pull Request Review checklist (do not remove)

  • Review the appropriate Storybook stories. Open http://localhost:9001/.
  • Review tests are passing in the browser. Open http://localhost:8001/.
  • Review markup conforms to SLDS by looking at snapshot strings.
  • Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
  • Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
  • Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
  • While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

@@ -204,7 +210,8 @@ exports[`Radio Button Group Disabled DOM Snapshot 1`] = `
>
<input
aria-describedby={undefined}
checked={false}
checked={true}
Copy link
Contributor

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.

Copy link
Contributor Author

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

Copy link
Contributor

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

@interactivellama
Copy link
Contributor

The visual snapshots have been removed in this PR see inital-blank-story-placeholder-1-snap.png file in pull request. Please fix.

@3den
Copy link
Contributor Author

3den commented Mar 26, 2018

@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}
Copy link
Contributor Author

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.

@3den
Copy link
Contributor Author

3den commented Mar 28, 2018

@interactivellama the png snapshots are back, i think this pr is ready for your final review.

Copy link
Contributor

@interactivellama interactivellama left a 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.

@@ -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.
Copy link
Contributor

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,
/**
Copy link
Contributor

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.
	 */

Copy link
Contributor Author

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,
/**
Copy link
Contributor

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.
	 */

Copy link
Contributor Author

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,
/**
Copy link
Contributor

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.
	 */

Copy link
Contributor Author

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.
*/
Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

@interactivellama interactivellama merged commit cd1f07f into salesforce:master Mar 30, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants