fix(Form): pass shorthand ids to the label's htmlFor prop #1517

pedrocostadev · 2017-03-27T23:59:37Z

Added new prop id to Form.Input's component and use it also for htmlFor label. Updated the docs example to show results.
This is my first step here so, if you need something more to merge, just tell me please :-)

Resolve #980

codecov-io · 2017-03-28T00:05:47Z

Codecov Report

Merging #1517 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1517   +/-   ##
=======================================
  Coverage   99.74%   99.74%           
=======================================
  Files         141      141           
  Lines        2396     2396           
=======================================
  Hits         2390     2390           
  Misses          6        6

Impacted Files	Coverage Δ
src/collections/Form/FormField.js	`100% <ø> (ø)`	⬆️

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 37ff255...3280764. Read the comment docs.

levithomason

Docs look great, thanks! I've left a couple comments.

levithomason · 2017-03-28T04:55:01Z

docs/app/Examples/collections/Form/Shorthand/FormExampleSubComponentControl.js

-          <Form.Input label='First name' placeholder='First name' />
-          <Form.Input label='Last name' placeholder='Last name' />
+          <Form.Input id='form-input-shorthand-first-name' label='First name' placeholder='First name' />
+          <Form.Input id='form-input-shorthand-last-name' label='Last name' placeholder='Last name' />


I'd like to have two dedicated examples for this in the docs under one heading. One example showing the usage with Form.Field and another showing usage with Form shorthand subcomponents.

First, create two example files in docs/app/Examples/collections/Form/Shorthand, probably:

FormExampleFieldControlId.js showing Form.Field use with the shorthand control prop.

FormExampleSubcomponentId.js showing usage of one or more Form subcomponents, i.e. Form.Input.

Then, add these files to the index.js file in the same directory. You link examples with the ComponentExample component, you'll see several in the index.js file. In order to get two examples to show under one title, only add a title to the first example but descriptions to both:

<ComponentExample title='Accessible lables' description='Adding an id to a shorthand Form.Field adds a matching htmlFor prop to the label.' examplePath='collections/Form/Shorthand/FormExampleFieldControlId' /> <ComponentExample description='Adding an id to a Form subcomponent adds a matching htmlFor prop to the label.' examplePath='collections/Form/Shorthand/FormExampleSubcomponentId' />

levithomason · 2017-03-28T05:03:10Z

src/collections/Form/FormField.js

@@ -93,7 +93,7 @@ function FormField(props) {

  return (
    <ElementType className={classes}>
-      {createHTMLLabel(label)}
+      {createHTMLLabel(label, { htmlFor: controlProps && controlProps.id })}


We'll need a test that asserts the htmlFor prop is added when an id is passed to FormField. You can find tests in test/specs/collections/Form/FormField-test.js.

Let's also add this test to each subcomponent usage (Form.Input, etc). These tests would go in test/specs/collections/Form/Form-test.js.

Because this test will be repeated several times, the test itself should be added only once to commonTests.js. You'll see several examples of how to write a common test there. Just add it to the bottom. You'll see several examples of how to use a common test in the Form tests I've noted above.

levithomason · 2017-03-28T05:03:57Z

I've noticed a couple typos and mixed up references in the Form docs, I'll be pushing those fixes to this branch as well as they are pretty minor.

layershifter · 2017-03-28T05:41:27Z

src/lib/htmlInputPropsUtils.js

@@ -6,7 +6,7 @@ export const htmlInputAttrs = [

  // LIMITED HTML PROPS
  'autoCapitalize', 'autoComplete', 'autoFocus', 'checked', 'form', 'max', 'maxLength', 'min', 'multiple',
-  'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value',
+  'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value', 'id',


Please sort props in alphabetical order.

pedrocostadev · 2017-03-28T09:45:10Z

Ok guys, I will do that.

levithomason · 2017-03-28T22:57:29Z

Given the number of changed lines and the lack of visible characters changed, I'm betting your IDE is changing the line endings of each file edited. Are you on Windows by chance?

pedrocostadev · 2017-03-28T23:02:08Z

Usually in Mac but sometimes in Windows. The commit changed more files that suppose? I check the files when I push and seems all ok.

levithomason · 2017-03-28T23:19:49Z

The files are OK, it is the number of changed lines:

And the nature of the changes. No visible characters have changed, it seems it is likely the line endings:

Could you confirm your config is in alignment with these instructions and run the commands from here: https://help.github.com/articles/dealing-with-line-endings? Let's see if it is indeed the line endings.

pedrocostadev · 2017-03-29T19:34:36Z

It's not the line endings. I checked in the instructions. And now? I need to do something more to the pull request be accepted?

levithomason · 2017-03-31T02:44:00Z

docs/app/Examples/collections/Form/Shorthand/FormExampleSubcomponentControl.js

@@ -16,8 +16,8 @@ class FormExampleSubComponentControl extends Component {
    return (
      <Form>
        <Form.Group widths='equal'>
-          <Form.Input label='First name' placeholder='First name' />
-          <Form.Input label='Last name' placeholder='Last name' />
+          <Form.Input id='form-input-shorthand-first-name' label='First name' placeholder='First name' />


Let's remove these now that we other examples.

levithomason · 2017-03-31T02:44:55Z

docs/app/Examples/collections/Form/Shorthand/FormExampleSubcomponentId.js

+import { Form, Input } from 'semantic-ui-react'
+
+class FormExampleSubcomponentId extends Component {
+  state = {}


This should be a stateless component:

const FormExampleSubcomponentId = () => ( <Form> ... </Form> )

levithomason · 2017-03-31T02:53:00Z

docs/app/Examples/collections/Form/Shorthand/FormExampleFieldControlId.js

+import { Form, Input, TextArea, Button } from 'semantic-ui-react'
+
+class FormExampleFieldControlId extends Component {
+  state = {}


This should be a stateless component:

const FormExampleFieldControlId = () => ( <Form> ... </Form> )

levithomason · 2017-03-31T02:59:20Z

test/specs/commonTests/implementsCommonProps.js

+  const { requiredProps = {} } = options
+  describe(`${propKey} (common)`, () => {
+    assertRequired(Component, 'a `Component`')
+    it(`adds ${requiredProps.control} Id to Label's HtmlFor prop`, () => {


We'll need generalize this test a bit more. It shouldn't know which component it is testing. We should remove the control awareness.

We will then be able to use it in the other Form* component tests:

labelImplementsHtmlForProp(FormFieldButton) // FormFieldButton-test.js labelImplementsHtmlForProp(FormFieldCheckbox) // FormFieldCheckbox-test.js labelImplementsHtmlForProp(FormFieldDropdown) // FormFieldDropdown-test.js labelImplementsHtmlForProp(FormFieldGroup) // FormFieldGroup-test.js labelImplementsHtmlForProp(FormFieldInput) // FormFieldInput-test.js labelImplementsHtmlForProp(FormFieldRadio) // FormFieldRadio-test.js labelImplementsHtmlForProp(FormFieldSelect) // FormFieldSelect-test.js labelImplementsHtmlForProp(FormFieldTextarea) // FormFieldTextarea-test.js

Suggest we don't take any arguments as this test will require the id of the top level component to present no the label subcomponent after it is rendered.

levithomason · 2017-03-31T03:00:50Z

I've rebased this to master and fixed conflicts. I also pushed some line ending fixes, crlf => lf. Not sure what happened there.

I left a few final comments that should wrap this one up!

…s): convert to stateless components

…ntsHtmlForProp test and call each form type on corresponding test file

pedrocostadev · 2017-04-04T18:50:20Z

For "Checkbox", "Radio" and "Group" the "htmlFor" is not added, so they have not this new test. To implement this in this components I think we need to do different from what i do to the others.
Do you think this should be done for this PR?

pedrocostadev · 2017-04-19T13:17:22Z

So, any news about this?

…React into accessibility/label-click-for-input-element # Conflicts: # src/lib/htmlInputPropsUtils.js

levithomason

Changes look great, thanks!

levithomason · 2017-04-19T14:58:34Z

I've resolved conflicts and will merge on pass.

layershifter · 2017-04-19T14:59:41Z

@levithomason I wan't push some changes, please wait 5 minutes

…/github.com/pedrocostadev/Semantic-UI-React into accessibility/label-click-for-input-element

layershifter

Looks awesome, @pedrocostadev thanks for PR
We can merge on pass

layershifter · 2017-04-19T15:12:46Z

src/collections/Form/FormField.js

-      {createHTMLLabel(label, { htmlFor: controlProps && controlProps.id })}
+      {createHTMLLabel(label, { defaultProps: {
+        htmlFor: _.get(controlProps, 'id') },
+      })}


Factories where updated earlier

layershifter · 2017-04-19T15:13:08Z

test/specs/commonTests/implementsCommonProps.js

-      labelNode.should.have.prop('htmlFor', idToTest)
+
+      wrapper.should.to.have.descendants(`#${id}`)
+      labelNode.should.have.prop('htmlFor', id)


Updated to use BDD style

pedrocostadev · 2017-04-19T15:17:51Z

I'm glad to help. Let's go to another :-)

levithomason · 2017-04-20T03:26:46Z

💥

levithomason · 2017-04-22T17:02:31Z

Released in semantic-ui-react@0.68.1.

camsjams · 2017-04-25T21:17:02Z

Thanks all - I am glad this was released!

Resolve #980 passing Form.Input's id to label's htmlFor prop

f9ab300

docs(Form): fix reversed label props/element examples

1c3ff62

levithomason requested changes Mar 28, 2017

View reviewed changes

docs(Form): fix spelling of Subcomponent

edfdb3e

levithomason changed the title ~~Resolve #980 passing Form.Input's id to label's htmlFor prop~~ fix(Form): pass shorthand ids to the label's htmlFor prop Mar 28, 2017

layershifter requested changes Mar 28, 2017

View reviewed changes

pedrocostadev added 2 commits March 28, 2017 20:47

fix(Form): pass shorthand ids to the label's htmlFor prop resolve #1517

1af621e

fix(Form): fixed lint in FormExampleFieldControlId #1517

33114eb

pedrocostadev and others added 6 commits March 30, 2017 19:35

Resolve #980 passing Form.Input's id to label's htmlFor prop

f60fc4a

docs(Form): fix reversed label props/element examples

af30386

docs(Form): fix spelling of Subcomponent

1d8b81e

fix(Form): pass shorthand ids to the label's htmlFor prop resolve #1517

7b32c1a

fix(Form): fixed lint in FormExampleFieldControlId #1517

82ca8de

docs(Form): fix line endings and formatting

fce9ea9

levithomason reviewed Mar 31, 2017

View reviewed changes

levithomason added 3 commits March 30, 2017 19:50

fix(htmlInputPropsUtils): restore lf line endings

102bc2e

fix(Form-test): restore lf line endings

17c28a2

fix(implementsCommonProps): use single new line

b7134b8

levithomason reviewed Mar 31, 2017

View reviewed changes

levithomason added the needs author feedback label Mar 31, 2017

pedrocostadev added 4 commits March 31, 2017 23:06

fix(FormExampleSubcomponentId.js and FormExampleSubcomponentControl.j…

1ce21ee

…s): convert to stateless components

fix(implementsCommonProps): removed props parameter from labelImpleme…

ed8a958

…ntsHtmlForProp test and call each form type on corresponding test file

fix(FormExamples): removed id prop since specific examples were added

27a5b0f

fix(Form-test): removed comments

b6632a6

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

89d2d99

…React into accessibility/label-click-for-input-element # Conflicts: # src/lib/htmlInputPropsUtils.js

levithomason approved these changes Apr 19, 2017

View reviewed changes

Merge branch 'master' into accessibility/label-click-for-input-element

d26c980

levithomason added ready for review and removed needs author feedback labels Apr 19, 2017

Alexander Fedyashov added 2 commits April 19, 2017 18:11

style(mixed): style fixes

e29ee65

Merge branch 'accessibility/label-click-for-input-element' of https:/…

3280764

…/github.com/pedrocostadev/Semantic-UI-React into accessibility/label-click-for-input-element

layershifter approved these changes Apr 19, 2017

View reviewed changes

levithomason merged commit 91a0710 into Semantic-Org:master Apr 20, 2017

pedrocostadev deleted the accessibility/label-click-for-input-element branch April 20, 2017 08:55

layershifter mentioned this pull request May 29, 2017

docs(Icon): fix selector for input #1714

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Form): pass shorthand ids to the label's htmlFor prop #1517

fix(Form): pass shorthand ids to the label's htmlFor prop #1517

pedrocostadev commented Mar 27, 2017 •

edited by levithomason

Loading

codecov-io commented Mar 28, 2017 •

edited

Loading

levithomason left a comment

levithomason Mar 28, 2017

levithomason Mar 28, 2017

levithomason commented Mar 28, 2017

layershifter Mar 28, 2017

pedrocostadev commented Mar 28, 2017

levithomason commented Mar 28, 2017 •

edited

Loading

pedrocostadev commented Mar 28, 2017

levithomason commented Mar 28, 2017

pedrocostadev commented Mar 29, 2017 •

edited

Loading

levithomason Mar 31, 2017

levithomason Mar 31, 2017

levithomason Mar 31, 2017

levithomason Mar 31, 2017

levithomason commented Mar 31, 2017

pedrocostadev commented Apr 4, 2017

pedrocostadev commented Apr 19, 2017

levithomason left a comment

levithomason commented Apr 19, 2017

layershifter commented Apr 19, 2017

layershifter left a comment

layershifter Apr 19, 2017

layershifter Apr 19, 2017

pedrocostadev commented Apr 19, 2017

levithomason commented Apr 20, 2017

levithomason commented Apr 22, 2017

camsjams commented Apr 25, 2017

fix(Form): pass shorthand ids to the label's htmlFor prop #1517

fix(Form): pass shorthand ids to the label's htmlFor prop #1517

Conversation

pedrocostadev commented Mar 27, 2017 • edited by levithomason Loading

codecov-io commented Mar 28, 2017 • edited Loading

Codecov Report

levithomason left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

levithomason commented Mar 28, 2017

Choose a reason for hiding this comment

pedrocostadev commented Mar 28, 2017

levithomason commented Mar 28, 2017 • edited Loading

pedrocostadev commented Mar 28, 2017

levithomason commented Mar 28, 2017

pedrocostadev commented Mar 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

levithomason commented Mar 31, 2017

pedrocostadev commented Apr 4, 2017

pedrocostadev commented Apr 19, 2017

levithomason left a comment

Choose a reason for hiding this comment

levithomason commented Apr 19, 2017

layershifter commented Apr 19, 2017

layershifter left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pedrocostadev commented Apr 19, 2017

levithomason commented Apr 20, 2017

levithomason commented Apr 22, 2017

camsjams commented Apr 25, 2017

pedrocostadev commented Mar 27, 2017 •

edited by levithomason

Loading

codecov-io commented Mar 28, 2017 •

edited

Loading

levithomason commented Mar 28, 2017 •

edited

Loading

pedrocostadev commented Mar 29, 2017 •

edited

Loading