feat(field-label): add tone (#1147)

* feat(field-label): add tone to be passed to label

* feat(label-field): add tone to story

* fix(field-label): typo

Co-Authored-By: Abel Almeida <[email protected]>

* docs(readme/field-label) to have other non default indicator

Co-Authored-By: Abel Almeida <[email protected]>

* feat(label-field): forward tone

* feat(label-field): add to vrt

* fix(label-field): to properly vrt things

* fix(label-field): make canada happy

* fix(label-field): swap wrap and detail

Author: tdeekens

src/components/field-label/README.md

@@ -55,6 +55,7 @@ The `hintIcon` also accepts a custom `color` while defaulting to `warning` in th
 | `hint`                 | `string` or `node` |    -     | -                            | -       | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. |
 | `description`          | `string` or `node` |    -     | -                            | -       | Provides a description for the title.                                                                                                                                                                                                                                 |
 | `onInfoButtonClick`    | `function`         |    -     | -                            | -       | Function called when info button is pressed. Info button will only be visible when this prop is passed.                                                                                                                                                               |
+| `tone`                 | `string`           |    -     | `['primary', 'inverted']`    |  _      | Indicates the tone to be applied to the label                                                                                                                                                                                                                         |
 | `hintIcon`             | `node`             |    -     | -                            | -       | Icon to be displayed beside the hint text. Will only get rendered when `hint` is passed as well.                                                                                                                                                                      |
 | `badge`                | `node`             |    -     | -                            | -       | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                           |
 | `hasRequiredIndicator` | `bool`             |    -     | -                            | `false` | Indicates if the labeled field is required in a form                                                                                                                                                                                                                  |

src/components/field-label/field-label.js

@@ -26,6 +26,7 @@ export const FieldLabel = props => {
               isBold={true}
               isRequiredIndicatorVisible={props.hasRequiredIndicator}
               htmlFor={props.htmlFor}
+              tone={props.tone}
             >
               {props.title}
             </Label>
@@ -51,13 +52,15 @@ export const FieldLabel = props => {
                 })}
               </Spacings.Inline>
             )}
-            {props.hint && <Text.Detail>{props.hint}</Text.Detail>}
+            {props.hint && (
+              <Text.Detail tone={props.tone}>{props.hint}</Text.Detail>
+            )}
           </Spacings.Inline>
         )}
         {props.description && (
-          <Text.Detail>
-            <Text.Wrap>{props.description}</Text.Wrap>
-          </Text.Detail>
+          <Text.Wrap>
+            <Text.Detail tone={props.tone}>{props.description}</Text.Detail>
+          </Text.Wrap>
         )}
 
         {props.badge && (
@@ -85,6 +88,7 @@ FieldLabel.propTypes = {
   ),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onInfoButtonClick: PropTypes.func,
+  tone: PropTypes.oneOf(['primary', 'inverted']),
   hintIcon: PropTypes.node,
   badge: PropTypes.node,
   hasRequiredIndicator: PropTypes.bool,

src/components/field-label/field-label.story.js

@@ -33,6 +33,7 @@ storiesOf('Components|FieldLabel', module)
           )}
           title={text('title', 'Sort Order')}
           hasRequiredIndicator={boolean('hasRequiredIndicator', false)}
+          tone={select('tone', ['', 'inverted'])}
           onInfoButtonClick={
             boolean('show info button', true)
               ? action('onInfoButtonClick')

src/components/field-label/field-label.visualroute.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { FieldLabel, WarningIcon, FlatButton } from 'ui-kit';
+import { ThemeProvider } from 'emotion-theming';
+import { FieldLabel, WarningIcon, FlatButton, customProperties } from 'ui-kit';
 import { Suite, Spec } from '../../../test/percy';
 
 export const routePath = '/field-label';
 
-export const component = () => (
+export const component = ({ themes }) => (
   <Suite>
     <Spec label="minimal">
       <FieldLabel title="Hello" horizontalConstraint="m" />
@@ -58,5 +59,17 @@ export const component = () => (
         horizontalConstraint="m"
       />
     </Spec>
+    <ThemeProvider theme={themes.darkTheme}>
+      <Spec label="with inverted tone" omitPropsList>
+        <ThemeProvider theme={customProperties}>
+          <FieldLabel
+            title="Hello"
+            description="description"
+            hasRequiredIndicator={true}
+            tone="inverted"
+          />
+        </ThemeProvider>
+      </Spec>
+    </ThemeProvider>
   </Suite>
 );