fix: Theming and typography (#56)

* Remove unused helper

* Fix wrong Icon reference

* Re-enable Storybook on IE11

* Update style mixins for Button

* Add Label component

* Speed-up Icon mouting

* Condense helpers

* Remove labels from CheckBox and RadioButton

* Avoid runtime string transformations

* Update theming for CheckBox, RadioButton, and ToggleSwitch

* Add Hint component; update Field, ButtonGroup, and FieldGroup

* Remove obsolete mixins

* Remove styled-components from the final bundle

* Use adimensional lengths on tokens

* Add some typographic components

* Update storybook helpers

* Update dependencies

* Autoprefix standard classes

* Rename typography module as textStyles

* Rename actions module as buttonColors

* Drop CSS variables again

* Remove some subclasses

* Add missing diplayName

* Reenable CSS vars to base theme variables

* Reattach theme variables to components

package.json

@@ -6,17 +6,11 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "babel-loader": "^8.0.6",
     "cross-env": "^5.2.0",
     "fs-extra": "^8.0.1",
     "gh-pages": "^2.0.1",
     "husky": "^2.3.0",
-    "jest": "^24.8.0",
-    "lerna": "^3.14.1",
-    "webpack-cli": "^3.3.2"
+    "lerna": "^3.14.1"
   },
   "scripts": {
     "build": "lerna run build --stream",

packages/fuselage/.storybook/addons.js

@@ -6,4 +6,3 @@ import '@storybook/addon-links/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-viewport/register';
-import 'storybook-addon-jsx/register';

packages/fuselage/package.json

@@ -26,10 +26,10 @@
     "lint-staged": "lint-staged",
     "test": "jest",
     "test:results": "jest --json --outputFile=.storybook/jest-results.json",
-    "loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:73 --chromeFlags=\"--headless --no-sandbox --disable-gpu\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-    "loki:update": "loki update --chromeDockerImage=chinello/alpine-chrome:73 --chromeFlags=\"--headless --no-sandbox --disable-gpu\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-    "loki:test-ci": "loki test --chromeFlags=\"--headless --no-sandbox --disable-gpu\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
-    "loki:update-ci": "loki update --chromeFlags=\"--headless --no-sandbox --disable-gpu\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    "loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:73 --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    "loki:update": "loki update --chromeDockerImage=chinello/alpine-chrome:73 --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    "loki:test-ci": "loki test --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
+    "loki:update-ci": "loki update --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "update-storybook": "run-s test:results build-storybook loki:update"
@@ -58,6 +58,7 @@
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.6",
+    "cross-env": "^5.2.0",
     "css-vars-ponyfill": "^2.0.2",
     "cssnano": "^4.1.10",
     "eslint": "^6.1.0",
@@ -79,7 +80,6 @@
     "react-final-form-hooks": "^2.0.0",
     "react-helmet": "^5.2.1",
     "sass-loader": "^7.1.0",
-    "storybook-addon-jsx": "^7.1.2",
     "stylelint": "^10.0.1",
     "stylelint-order": "^3.0.0",
     "webpack-bundle-analyzer": "^3.3.2",

packages/fuselage/src/components/Button/index.js

@@ -1,181 +1,100 @@
 import styled, { css } from 'styled-components';
 
-import { rebuildClassName } from '../../helpers/rebuildClassName';
-import { disableable } from '../../mixins/disableable';
-import { reset } from '../../mixins/reset';
-import { unselectable } from '../../mixins/unselectable';
-import { withText } from '../../mixins/withText';
+import { extendClassName } from '../../helpers';
+import {
+  withText,
+  normalized,
+  clickable,
+  withTruncatedText,
+  withBorder,
+  withButtonActionColors,
+} from '../../mixins';
 import { Icon } from '../Icon';
-import theme from './theme';
-
-
-const sizeVariant = ({
-  height,
-  paddingVertical,
-  paddingHorizontal,
-  fontSize,
-  lineHeight,
-  iconSize,
+import {
+  mediumSizeParameters,
+  smallSizeParameters,
+  basicColors,
+  basicDangerColors,
+  primaryColors,
+  primaryDangerColors,
+  ghostColors,
+  ghostDangerColors,
+} from './theme';
+
+
+const withSizeVariant = ({
+  border,
+  paddingX,
+  textStyle,
+  iconSizeRatio,
 }) => css`
-  height: ${ height };
-  padding: ${ paddingVertical } ${ paddingHorizontal };
+  ${ withBorder(border) }
+  padding: 0 calc(${ paddingX } - ${ border.width });
+
+  ${ withText(textStyle) }
 
-  font-size: ${ fontSize };
-  line-height: ${ lineHeight };
+  line-height: calc(2 * ${ textStyle.lineHeight } - 2 * ${ border.width });
 
   & > ${ Icon } {
-    font-size: ${ iconSize };
+    font-size: ${ iconSizeRatio * textStyle.lineHeight };
   }
 
   ${ ({ square }) => square && css`
-    width: ${ height };
-    padding: ${ paddingVertical } 0;
+    width: calc(2 * ${ textStyle.lineHeight });
+    padding: 0;
 
-    & > .rcx-icon {
-      font-size: ${ lineHeight };
+    & > ${ Icon } {
+      font-size: ${ textStyle.lineHeight };
     }
   ` }
 `;
 
-const mediumSizeVariant = () => sizeVariant({
-  height: theme.height,
-  paddingVertical: theme.paddingVertical,
-  paddingHorizontal: theme.paddingHorizontal,
-  fontSize: theme.fontSize,
-  lineHeight: theme.lineHeight,
-  iconSize: theme.iconSize,
-});
-
-const smallSizeVariant = ({ small }) => small && sizeVariant({
-  height: theme.smallHeight,
-  paddingVertical: theme.smallPaddingVertical,
-  paddingHorizontal: theme.smallPaddingHorizontal,
-  fontSize: theme.smallFontSize,
-  lineHeight: theme.smallLineHeight,
-  iconSize: theme.smallIconSize,
-});
-
-const colorsVariant = ({
-  color,
-  backgroundColor,
-  hoverBackgroundColor,
-  activeBackgroundColor,
-  focusBackgroundColor,
-  focusBorderColor,
-  focusShadowColor,
-  disabledColor,
-  disabledBackgroundColor,
-}) => css`
-  color: ${ color };
-  border-color: ${ backgroundColor };
-  background-color: ${ backgroundColor };
-
-  &:enabled:focus,
-  &:enabled.focus {
-    border-color: ${ focusBorderColor };
-    background-color: ${ focusBackgroundColor };
-
-    ${ focusShadowColor && css`box-shadow: 0 0 0 6px ${ focusShadowColor };` }
-  }
-
-  &:enabled:hover,
-  &:enabled.hover {
-    border-color: ${ hoverBackgroundColor };
-    background-color: ${ hoverBackgroundColor };
-    box-shadow: none;
-  }
-
-  &:enabled:active,
-  &:enabled.active {
-    border-color: ${ activeBackgroundColor };
-    background-color: ${ activeBackgroundColor };
-    box-shadow: none;
-  }
-
-  &:disabled {
-    color: ${ disabledColor };
-    border-color: ${ disabledBackgroundColor };
-    background-color: ${ disabledBackgroundColor };
-  }
-`;
-
-const basicColorsVariant = () => css`
-  ${ colorsVariant({
-    color: theme.basicColor,
-    backgroundColor: theme.basicBackgroundColor,
-    hoverBackgroundColor: theme.basicHoverBackgroundColor,
-    activeBackgroundColor: theme.basicActiveBackgroundColor,
-    focusBackgroundColor: theme.basicFocusBackgroundColor,
-    focusBorderColor: theme.basicFocusBorderColor,
-    focusShadowColor: theme.basicFocusShadowColor,
-    disabledColor: theme.basicDisabledColor,
-    disabledBackgroundColor: theme.basicDisabledBackgroundColor,
-  }) }
-
-  ${ ({ danger }) => danger && colorsVariant({
-    color: theme.basicDangerColor,
-    disabledColor: theme.basicDisabledDangerColor,
-  }) }
-`;
-
-const primaryColorsVariant = ({ primary }) => primary && css`
-  ${ colorsVariant({
-    color: theme.primaryColor,
-    backgroundColor: theme.primaryBackgroundColor,
-    hoverBackgroundColor: theme.primaryHoverBackgroundColor,
-    activeBackgroundColor: theme.primaryActiveBackgroundColor,
-    focusBackgroundColor: theme.primaryFocusBackgroundColor,
-    focusBorderColor: theme.primaryFocusBorderColor,
-    focusShadowColor: theme.primaryFocusShadowColor,
-    disabledColor: theme.primaryColor,
-    disabledBackgroundColor: theme.primaryDisabledBackgroundColor,
-  }) }
-
-  ${ ({ danger }) => danger && colorsVariant({
-    color: theme.primaryColor,
-    backgroundColor: theme.primaryDangerBackgroundColor,
-    hoverBackgroundColor: theme.primaryDangerHoverBackgroundColor,
-    activeBackgroundColor: theme.primaryDangerActiveBackgroundColor,
-    focusBackgroundColor: theme.primaryDangerFocusBackgroundColor,
-    focusBorderColor: theme.primaryDangerFocusBorderColor,
-    focusShadowColor: theme.primaryDangerFocusShadowColor,
-    disabledColor: theme.primaryColor,
-    disabledBackgroundColor: theme.primaryDangerDisabledBackgroundColor,
-  }) }
-`;
-
-const ghostColorsVariant = ({ ghost }) => ghost && colorsVariant({
-  backgroundColor: 'transparent',
-});
-
-export const Button = styled.button.attrs(rebuildClassName('rcx-button'))`
-  ${ reset }
-  ${ disableable }
-  ${ unselectable }
-  ${ withText }
+const mediumSized = withSizeVariant(mediumSizeParameters);
+const smallSized = withSizeVariant(smallSizeParameters);
+
+const basicColored = withButtonActionColors(basicColors);
+const basicDangerColored = withButtonActionColors(basicDangerColors);
+const primaryColored = withButtonActionColors(primaryColors);
+const primaryDangerColored = withButtonActionColors(primaryDangerColors);
+const ghostColored = withButtonActionColors(ghostColors);
+const ghostDangerColored = withButtonActionColors(ghostDangerColors);
+
+export const Button = styled.button.attrs(({
+  className,
+  external,
+  ...props
+}) => ({
+  className: extendClassName('button', className, props),
+  type: props.type || ((!props.as || props.as === 'button') && 'button') || undefined,
+  rel: props.rel || (props.as === 'a' && external && 'noopener noreferrer') || undefined,
+  target: props.target || (props.as === 'a' && external && '_blank') || undefined,
+}))`
+  ${ normalized }
+  ${ clickable }
+  ${ withTruncatedText }
 
   display: inline-block;
 
-  cursor: pointer;
-
-  border-width: ${ theme.borderWidth };
-  border-style: solid;
-  border-radius: ${ theme.borderRadius };
-
   text-align: center;
+  vertical-align: middle;
 
-  font-family: ${ theme.fontFamily };
-  font-weight: ${ theme.fontWeight };
+  appearance: none;
 
   & > ${ Icon } {
     vertical-align: middle;
   }
 
-  ${ mediumSizeVariant }
-  ${ smallSizeVariant }
-
-  ${ basicColorsVariant }
-  ${ primaryColorsVariant }
-  ${ ghostColorsVariant }
+  ${ ({ small }) =>
+    (small && smallSized)
+    || mediumSized }
+
+  ${ ({ danger, ghost, primary }) =>
+    (ghost && danger && ghostDangerColored)
+    || (ghost && ghostColored)
+    || (primary && danger && primaryDangerColored)
+    || (primary && primaryColored)
+    || (danger && basicDangerColored)
+    || basicColored }
 `;
+
 Button.displayName = 'Button';

packages/fuselage/src/components/Button/stories.js

@@ -1,16 +1,22 @@
 import * as icons from '@rocket.chat/icons/dist/font';
+import { action } from '@storybook/addon-actions';
 import centered from '@storybook/addon-centered/react';
 import { withKnobs, text, select } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { jsxDecorator } from 'storybook-addon-jsx';
 
-import { Document, TextSection, VariationsTable, createPropsFromKnobs, handleEvent } from '../../helpers/storybook';
+import {
+  createPropsFromKnobs,
+  Document,
+  PropsVariationSection,
+  TextSection,
+} from '../../helpers/storybook';
 import { Icon } from '../Icon';
 import { Button } from './index';
 
 
 storiesOf('Elements|Button', module)
+  .addParameters({ jest: ['Button/spec'] })
   .lokiSkip('Button', () => <Document>
     <TextSection>
       <h1>Button</h1>
@@ -21,7 +27,7 @@ storiesOf('Elements|Button', module)
     <TextSection>
       <h2>Basic</h2>
     </TextSection>
-    <VariationsTable
+    <PropsVariationSection
       component={Button}
       xAxis={{
         text: { children: 'Button' },
@@ -40,7 +46,7 @@ storiesOf('Elements|Button', module)
     <TextSection>
       <h2>Primary</h2>
     </TextSection>
-    <VariationsTable
+    <PropsVariationSection
       component={Button}
       common={{ primary: true }}
       xAxis={{
@@ -60,7 +66,7 @@ storiesOf('Elements|Button', module)
     <TextSection>
       <h2>Ghost</h2>
     </TextSection>
-    <VariationsTable
+    <PropsVariationSection
       component={Button}
       common={{ ghost: true }}
       xAxis={{
@@ -88,14 +94,13 @@ const props = createPropsFromKnobs({
   small: false,
   square: false,
   children: 'Button',
-  onClick: handleEvent('click'),
+  onClick: action('click'),
 });
 
 storiesOf('Elements|Button', module)
-  .addDecorator(jsxDecorator)
   .addDecorator(withKnobs)
   .addDecorator(centered)
-  .addParameters({ jest: ['spec'] })
+  .addParameters({ jest: ['Button/spec'] })
   .add('basic', () => <Button {...props()} />)
   .add('primary', () => <Button {...props({ primary: true })} />)
   .add('ghost', () => <Button {...props({ ghost: true })} />)
@@ -110,10 +115,9 @@ storiesOf('Elements|Button', module)
   />)
   .add('as link', () => <Button
     {...props()}
-    forwardedAs='a'
+    as='a'
     href='https://rocket.chat'
-    target='_blank'
-    rel='noopener noreferrer'
+    external
   />
   )
   .add('square', () => (