Merge pull request #133 from edx/fsheets/label-element

fix(input-label): extend asInput to allow label prop as element
openedx · Jan 29, 2018 · 7a89432 · 7a89432
2 parents 202a273 + 05bd281
commit 7a89432
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 3 deletions.
diff --git a/.storybook/__snapshots__/Storyshots.test.js.snap b/.storybook/__snapshots__/Storyshots.test.js.snap
@@ -881,6 +881,54 @@ exports[`Storyshots InputText focus test 1`] = `
 </div>
 `;
 
+exports[`Storyshots InputText label as element 1`] = `
+<div
+  className={
+    Array [
+      "form-group",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    <span
+      lang="en"
+    >
+      Element
+    </span>
+  </label>
+  <input
+    aria-describedby="error-asInput1"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="asInput1"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    themes={Array []}
+    type="text"
+    value="Label is wrapped in language span"
+  />
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
 exports[`Storyshots InputText minimal usage 1`] = `
 <div
   className={
@@ -1571,7 +1619,7 @@ exports[`Storyshots Modal modal with element body 1`] = `
 </div>
 `;
 
-exports[`Storyshots Modal modal with warning theme 1`] = `
+exports[`Storyshots Modal modal with warning variant 1`] = `
 <div
   aria-labelledby="id10"
   aria-modal={true}
@@ -2599,6 +2647,57 @@ exports[`Storyshots Tabs basic usage 1`] = `
 </div>
 `;
 
+exports[`Storyshots Textarea label as element 1`] = `
+<div
+  className={
+    Array [
+      "form-group",
+    ]
+  }
+>
+  <label
+    className={
+      Array [
+        "",
+      ]
+    }
+    htmlFor="asInput1"
+    id="label-asInput1"
+  >
+    <span
+      lang="en"
+    >
+      Element
+    </span>
+  </label>
+  <textarea
+    aria-describedby="error-asInput1"
+    aria-invalid={false}
+    className="form-control"
+    disabled={false}
+    id="asInput1"
+    name="username"
+    onBlur={[Function]}
+    onChange={[Function]}
+    placeholder={undefined}
+    required={false}
+    themes={
+      Array [
+        "danger",
+      ]
+    }
+    value="Label is wrapped in language span"
+  />
+  <div
+    aria-live="polite"
+    className="form-control-feedback"
+    id="error-asInput1"
+  >
+    <span />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Textarea minimal usage 1`] = `
 <div
   className={

diff --git a/src/InputText/InputText.stories.jsx b/src/InputText/InputText.stories.jsx
@@ -84,6 +84,13 @@ storiesOf('InputText', module)
       themes={['danger']}
     />
   ))
+  .add('label as element', () => (
+    <InputText
+      name="username"
+      label={<span lang="en">Element</span>}
+      value="Label is wrapped in language span"
+    />
+  ))
   .add('focus test', () => (
     <FocusInputWrapper />
   ));
diff --git a/src/Modal/Modal.stories.jsx b/src/Modal/Modal.stories.jsx
@@ -146,7 +146,7 @@ storiesOf('Modal', module)
       onClose={() => {}}
     />
   ))
-  .add('modal with warning theme', () => (
+  .add('modal with warning variant', () => (
     <Modal
       open
       title="Warning Modal"

diff --git a/src/TextArea/TextArea.stories.jsx b/src/TextArea/TextArea.stories.jsx
@@ -45,4 +45,11 @@ storiesOf('Textarea', module)
         return feedback;
       }}
     />
+  ))
+  .add('label as element', () => (
+    <TextArea
+      name="username"
+      label={<span lang="en">Element</span>}
+      value="Label is wrapped in language span"
+    />
   ));
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
@@ -81,6 +81,18 @@ describe('asInput()', () => {
     expect(wrapper.find('small').prop('id')).toEqual(`description-${testId}`);
   });
 
+  it('uses label as element type', () => {
+    const testLabel = (<span lang="en">Label</span>);
+    const props = {
+      ...baseProps,
+      label: testLabel,
+    };
+    const wrapper = mount(<InputTestComponent {...props} />);
+    expect(wrapper.find('label').children()).toHaveLength(1);
+    expect(wrapper.find('label').children().at(0).text()).toEqual('Label');
+    expect(wrapper.find('label').children().at(0).prop('lang')).toEqual('en');
+  });
+
   it('overrides state value when props value changes', () => {
     const initValue = 'foofoo';
     const newValue = 'barbar';

diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
@@ -11,7 +11,7 @@ export const getDisplayName = WrappedComponent =>
   WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
 export const inputProps = {
-  label: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   name: PropTypes.string.isRequired,
   id: PropTypes.string,
   value: PropTypes.string,