feat(flat-button): add inverted tone (#1175)

* feat(flat-button): add `inverted` tone

* fix(flat-button): use dark theme for inverted color VRT scenario

* chore: fix visual spec

Author: Fedor Kulikov

materials/custom-properties.css

@@ -104,6 +104,7 @@
   --font-color-for-input-when-warning: #f16d0e;
   --font-color-for-tag: #1a1a1a;
   --font-color-for-tag-when-disabled: hsl(0, 0%, 60%);
+  --font-color-for-text-when-inverted: #fff;
   --font-family: 'Open Sans', sans-serif;
   --placeholder-font-color-for-input: hsl(0, 0%, 60%);
   --font-size-for-input: 1rem;

materials/custom-properties.js

@@ -99,6 +99,7 @@ export default {
   fontColorForInputWhenWarning: '#f16d0e',
   fontColorForTag: '#1a1a1a',
   fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
+  fontColorForTextWhenInverted: '#fff',
   fontFamily: "'Open Sans', sans-serif",
   placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
   fontSizeForInput: '1rem',

materials/custom-properties.json

@@ -88,6 +88,7 @@
   "--font-color-for-input-when-warning": "#f16d0e",
   "--font-color-for-tag": "#1a1a1a",
   "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)",
+  "--font-color-for-text-when-inverted": "#fff",
   "--font-family": "'Open Sans', sans-serif",
   "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
   "--font-size-for-input": "1rem",

materials/custom-properties.ts

@@ -95,6 +95,7 @@ type CustomProperties = {
   fontColorForInputWhenWarning: '#f16d0e',
   fontColorForTag: '#1a1a1a',
   fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
+  fontColorForTextWhenInverted: '#fff',
   fontFamily: "'Open Sans', sans-serif",
   placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
   fontSizeForInput: '1rem',
@@ -203,6 +204,7 @@ const customProperties: CustomProperties = {
   fontColorForInputWhenWarning: '#f16d0e',
   fontColorForTag: '#1a1a1a',
   fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
+  fontColorForTextWhenInverted: '#fff',
   fontFamily: "'Open Sans', sans-serif",
   placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
   fontSizeForInput: '1rem',

materials/design-tokens.js

@@ -30,6 +30,7 @@ export default {
   fontColorForInputWhenWarning: 'colorWarning',
   fontColorForTag: 'colorSolid',
   fontColorForTagWhenDisabled: 'colorNeutral60',
+  fontColorForTextWhenInverted: 'colorSurface',
   fontFamily: 'fontFamilyBody',
   placeholderFontColorForInput: 'colorNeutral60',
   fontSizeForInput: 'fontSizeM',

materials/internals/definition.yaml

@@ -145,13 +145,17 @@ states:
     description: 'When the element has invalid input'
   selected:
     description: 'When the element is selected'
+  inverted:
+    description: 'When the element has inverted colors'
 componentGroups:
   input:
     description: 'Input elements'
   tag:
     description: 'Tag elements'
   tag-warning:
     description: 'Tag elements with type warning'
+  text:
+    description: 'Text elements'
 
 decisionGroups:
   backgroundColors:
@@ -247,6 +251,9 @@ decisionGroups:
       font-color-for-tag-when-disabled:
         description: ''
         choice: color-neutral-60
+      font-color-for-text-when-inverted:
+        description: ''
+        choice: color-surface
 
   fontFamily:
     label: Font family

philosophy/FORMS.md

@@ -323,21 +323,21 @@ In this case, there is another thing we need to be aware of: When a form is subm
 We can pass an `onSubmit` property to Formik. That function will be called with `values` and `formik`.
 
 ```js
-import omitEmpty from 'omit-empty'
-import validate from './validate'
+import omitEmpty from 'omit-empty';
+import validate from './validate';
 
 <GetProduct id="party-parrot">
   {product => (
     <Formik
       initialValues={docToFormValues(product)}
       validate={validate}
       onSubmit={(values, formik) => {
-        console.log(values)
+        console.log(values);
       }}
       render={/* same as before */}
     />
   )}
-</GetProduct>
+</GetProduct>;
 ```
 
 We can then do anything from `onSubmit`. Most likely we'll want to make an async call and then reset the form state. We can do that like this:

src/components/buttons/flat-button/README.md

@@ -26,16 +26,16 @@ iconClass label url onClick
 
 #### Properties
 
-| Props          | Type                  | Required | Values                      | Default   | Description                                                                                                                                  |
-| -------------- | --------------------- | :------: | --------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
-| `tone`         | `oneOf`               |    -     | `primary`, `secondary`      | `primary` | -                                                                                                                                            |
-| `type`         | `string`              |    -     | `submit`, `reset`, `button` | `button`  | Used as the HTML `type` attribute.                                                                                                           |
-| `label`        | `string`              |    ✅    | -                           | -         | Should describe what the button is for                                                                                                       |
-| `onClick`      | `func`                |    ✅    | -                           | -         | What the button will trigger when clicked                                                                                                    |
-| `icon`         | `element`             |    -     | -                           | -         | The icon of the button                                                                                                                       |
-| `iconPosition` | `oneOf`               |    -     | `left`, `right`             | `left`    | The position of the icon                                                                                                                     |
-| `isDisabled`   | `boolean`             |    -     | -                           | -         | Tells when the button should present a disabled state                                                                                        |
-| `as`           | `string` or `element` |    -     | -                           | -         | You may pass in a string like "a" to have the button render as an anchor tag instead. Or you could pass in a React Component, like a `Link`. |
+| Props          | Type                  | Required | Values                            | Default   | Description                                                                                                                                  |
+| -------------- | --------------------- | :------: | --------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tone`         | `oneOf`               |    -     | `primary`, `secondary`, `iverted` | `primary` | -                                                                                                                                            |
+| `type`         | `string`              |    -     | `submit`, `reset`, `button`       | `button`  | Used as the HTML `type` attribute.                                                                                                           |
+| `label`        | `string`              |    ✅    | -                                 | -         | Should describe what the button is for                                                                                                       |
+| `onClick`      | `func`                |    ✅    | -                                 | -         | What the button will trigger when clicked                                                                                                    |
+| `icon`         | `element`             |    -     | -                                 | -         | The icon of the button                                                                                                                       |
+| `iconPosition` | `oneOf`               |    -     | `left`, `right`                   | `left`    | The position of the icon                                                                                                                     |
+| `isDisabled`   | `boolean`             |    -     | -                                 | -         | Tells when the button should present a disabled state                                                                                        |
+| `as`           | `string` or `element` |    -     | -                                 | -         | You may pass in a string like "a" to have the button render as an anchor tag instead. Or you could pass in a React Component, like a `Link`. |
 
 The component further forwards all valid HTML attributes to the underlying `button` component.
 

src/components/buttons/flat-button/flat-button.js

@@ -18,6 +18,7 @@ const getIconElement = props => {
   else if (props.tone === 'primary') iconColor = 'primary';
   else if (props.tone === 'secondary' && props.isMouseOver)
     iconColor = 'warning';
+  else if (props.tone === 'inverted') iconColor = 'surface';
 
   return React.cloneElement(props.icon, {
     size: 'medium',
@@ -33,6 +34,8 @@ const getTextColor = (tone, isHover = false, overwrittenVars) => {
         : overwrittenVars.colorPrimary;
     case 'secondary':
       return overwrittenVars.colorSolid;
+    case 'inverted':
+      return overwrittenVars.fontColorForTextWhenInverted;
     default:
       return 'inherit';
   }
@@ -110,7 +113,7 @@ export const FlatButton = props => {
 FlatButton.displayName = 'FlatButton';
 FlatButton.propTypes = {
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  tone: PropTypes.oneOf(['primary', 'secondary']),
+  tone: PropTypes.oneOf(['primary', 'secondary', 'inverted']),
   type: PropTypes.oneOf(['submit', 'reset', 'button']),
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,

src/components/buttons/flat-button/flat-button.story.js

@@ -20,7 +20,7 @@ storiesOf('Components|Buttons', module)
     <Section>
       <FlatButton
         type={select('type', ['submit', 'reset', 'button'], 'button')}
-        tone={select('tone', ['primary', 'secondary'], 'primary')}
+        tone={select('tone', ['primary', 'secondary', 'inverted'], 'primary')}
         label={text('label', 'Accessibility text')}
         icon={React.createElement(
           icons[select('icon', iconNames, iconNames[0])]

src/components/buttons/flat-button/flat-button.visualroute.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { FlatButton, InformationIcon } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
+import vars from '../../../../materials/custom-properties';
 
 export const routePath = '/flat-button';
 
@@ -44,10 +45,20 @@ export const component = ({ themes }) => (
       />
     </Spec>
     <ThemeProvider theme={themes.darkTheme}>
-      <Spec label="secondary">
+      <Spec label="inverted" listPropsOfNestedChild>
+        <ThemeProvider theme={vars}>
+          <FlatButton
+            tone="inverted"
+            label="A label text"
+            onClick={() => {}}
+            icon={<InformationIcon />}
+          />
+        </ThemeProvider>
+      </Spec>
+      <Spec label="secondary in dark theme">
         <FlatButton
           tone="secondary"
-          label="Inverted"
+          label="A label text"
           onClick={() => {}}
           icon={<InformationIcon />}
         />

src/components/inputs/async-creatable-select-input/README.md

@@ -13,7 +13,10 @@ import { AsyncCreatableSelectInput } from '@commercetools-frontend/ui-kit';
   name="form-field-name"
   value={value}
   onChange={handleChange}
-  options={[{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }]}
+  options={[
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+  ]}
 />;
 ```
 

src/components/inputs/async-select-input/README.md

@@ -13,7 +13,10 @@ import { AsyncSelectInput } from '@commercetools-frontend/ui-kit';
   name="form-field-name"
   value={value}
   onChange={handleChange}
-  options={[{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }]}
+  options={[
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+  ]}
 />;
 ```
 

src/components/inputs/creatable-select-input/README.md

@@ -13,7 +13,10 @@ import { CreatableSelectInput } from '@commercetools-frontend/ui-kit';
   name="form-field-name"
   value={value}
   onChange={handleChange}
-  options={[{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }]}
+  options={[
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+  ]}
 />;
 ```
 

src/components/inputs/select-input/README.md

@@ -13,7 +13,10 @@ import { SelectInput } from '@commercetools-frontend/ui-kit';
   name="form-field-name"
   value={value}
   onChange={event => alert(event.target.value)}
-  options={[{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }]}
+  options={[
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+  ]}
 />;
 ```