feat(input): Make the helper text size small

telus · Sep 21, 2017 · df0122b · df0122b
1 parent fe11fae
commit df0122b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -92,7 +92,7 @@ class Input extends React.Component {
   renderError(error, errorId) {
     return (
       <Helper id={errorId} feedback="error">
-        <Paragraph>{error}</Paragraph>
+        <Paragraph size="small">{error}</Paragraph>
       </Helper>
     )
   }
@@ -108,7 +108,7 @@ class Input extends React.Component {
 
     return (
       <Helper id={helperId} feedback={feedback}>
-        {helper}
+        <Text size="small">{helper}</Text>
       </Helper>
     )
   }
@@ -195,7 +195,7 @@ Input.propTypes = {
    * A detailed explanation of the input expected by a form field. Can be text,
    * other components, or HTML elements.
    *
-   * If a function is provided, it must return a "node". The function will be
+   * If a function is provided, it must return an `Input.Helper`. The function will be
    * invoked with the following arguments.
    *
    * @param {String} feedback The input's current feedback state.

diff --git a/src/components/Input/Input.md b/src/components/Input/Input.md
@@ -89,9 +89,9 @@ component, which can contain any content.
 
 ```
 const creditCards = (
-  <Paragraph>
+  <Text>
     We accept the following credit cards: <Text bold>Visa, Mastercard, Discover</Text>.
-  </Paragraph>
+  </Text>
 );
 
 <Input label="Credit Card Number" helper={creditCards} />

diff --git a/src/components/Input/__tests__/Input.spec.jsx b/src/components/Input/__tests__/Input.spec.jsx
@@ -206,19 +206,19 @@ describe('Input', () => {
 
     expect(input).toContainReact(
       <Helper id="some-id_error-message" feedback="error">
-        <Paragraph>Oh no a terrible error!</Paragraph>
+        <Paragraph size="small">Oh no a terrible error!</Paragraph>
       </Helper>
     )
   })
 
   describe('helpers', () => {
     it('can have a simple helper of some components', () => {
-      const helper = <Paragraph>Some helper text.</Paragraph>
+      const helper = <div>Some helper text.</div>
       const input = doShallow({ id: 'some-id', helper })
 
       expect(input).toContainReact(
         <Input.Helper id="some-id_helper">
-          <Paragraph>Some helper text.</Paragraph>
+          <Text size="small"><div>Some helper text.</div></Text>
         </Input.Helper>
       )
     })