From f4d33a7c33b3521108808731dff7efb234b9e386 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Mon, 29 Jul 2019 18:34:46 -0500 Subject: [PATCH 01/35] Saving progress on button updates --- package-lock.json | 71 ++++++++++++++--------------- package.json | 2 +- src/Button/Button.js | 42 +++++++++++++---- src/theme.js | 104 ++++++++++++++++++++++++++++++++++++------- 4 files changed, 155 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 33c6fd3..0b385e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9799,8 +9799,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -9821,14 +9820,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9843,20 +9840,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -9973,8 +9967,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -9986,7 +9979,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10001,7 +9993,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10009,14 +10000,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -10035,7 +10024,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -10116,8 +10104,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -10129,7 +10116,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -10215,8 +10201,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -10252,7 +10237,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10272,7 +10256,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10316,14 +10299,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -18799,14 +18780,28 @@ } }, "rollup": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.2.2.tgz", - "integrity": "sha512-fsn5KJcfSuejjrv8GV7kZNciElqxyzZdUq8rA3e528JsR3ccxrWwoptyUY8GGLlgMFAQMB3dZW8nWF2I1/xrZA==", + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.17.0.tgz", + "integrity": "sha512-k/j1m0NIsI4SYgCJR4MWPstGJOWfJyd6gycKoMhyoKPVXxm+L49XtbUwZyFsrSU2YXsOkM4u1ll9CS/ZgJBUpw==", "dev": true, "requires": { "@types/estree": "0.0.39", - "@types/node": "*", - "acorn": "^6.1.0" + "@types/node": "^12.6.2", + "acorn": "^6.2.0" + }, + "dependencies": { + "@types/node": { + "version": "12.6.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-12.6.8.tgz", + "integrity": "sha512-aX+gFgA5GHcDi89KG5keey2zf0WfZk/HAQotEamsK2kbey+8yGKcson0hbK8E+v0NArlCJQCqMP161YhV6ZXLg==", + "dev": true + }, + "acorn": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.2.1.tgz", + "integrity": "sha512-JD0xT5FCRDNyjDda3Lrg/IxFscp9q4tiYtxE1/nOzlKCk7hIRuYjhq1kCNkbPjMRMZuFq20HNQn1I9k8Oj0E+Q==", + "dev": true + } } }, "rollup-plugin-babel": { @@ -20121,7 +20116,7 @@ }, "chalk": { "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "dev": true, "requires": { @@ -20207,7 +20202,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -20284,7 +20279,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { diff --git a/package.json b/package.json index 2f3690a..388e7a9 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "react-router-dom": "^4.2.2", "react-testing-library": "^6.0.0", "rimraf": "^2.6.3", - "rollup": "^1.2.2", + "rollup": "^1.17.0", "rollup-plugin-babel": "^4.3.2", "rollup-plugin-commonjs": "^9.2.0", "rollup-plugin-filesize": "^6.0.1", diff --git a/src/Button/Button.js b/src/Button/Button.js index 5fd9fc6..9e22806 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -1,10 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { css, keyframes } from 'styled-components'; +import styled, { css, keyframes } from 'styled-components'; import { space } from 'styled-system'; -import { lighten } from 'polished'; import { getComponentVariant, createComponent } from '../utils'; import Flex from '../Flex'; +import Icon from '../Icon'; const spinKeyframes = keyframes` from { @@ -71,26 +71,31 @@ const StyledButton = createComponent({ appearance: none; border-radius: ${borderRadius}px; pointer-events: ${disabled ? 'none' : 'auto'}; - opacity: ${disabled ? 0.65 : 1}; color: ${outline ? backgroundColor : fontColor}; height: ${height}px; padding: 0 ${height * 0.5}px; font-size: ${fontSize}px; width: ${block ? '100%' : 'auto'}; background: ${outline || transparent ? 'transparent' : backgroundColor}; - border: ${transparent ? 'none' : `1px solid ${backgroundColor}`}; + border-color: ${transparent ? 'none' : backgroundColor}; + border: ${transparent ? 'none' : '1px solid'}; transition: 175ms; ${loading && loadingCss({ height, fontColor, outline, backgroundColor })}; &:hover { - background: ${outline ? 'transparent' : lighten(0.05, backgroundColor)}; - border-color: ${lighten(0.05, backgroundColor)}; + background: ${outline ? 'transparent !important' : theme.colors.primaryLight}; + border-color: ${theme.colors.primaryLight}; } &:active { - background: ${outline ? 'transparent' : lighten(0.075, backgroundColor)}; - border-color: ${lighten(0.075, backgroundColor)}; + background: ${outline ? 'transparent !important' : theme.colors.primaryDark}; + border-color: ${theme.colors.primaryDark}; + } + + &[disabled] { + background: ${theme.colors.primaryLightest}; + border-color: ${theme.colors.primaryLightest}; } ${space}; @@ -98,7 +103,24 @@ const StyledButton = createComponent({ }, }); -const Button = React.forwardRef((props, ref) => ); +const ButtonIcon = styled(Icon)` + font-size: ${p => p.theme.heights[p.sizing] * 0.54}px; + margin-right: 6px; + margin-top: 2px; +`; + +const Button = React.forwardRef((props, ref) => ( + + {props.icon ? + + + {props.children} + + : + props.children + } + +)); Button.propTypes = { variant: PropTypes.string, @@ -108,6 +130,7 @@ Button.propTypes = { disabled: PropTypes.bool, loading: PropTypes.bool, transparent: PropTypes.bool, + icon: PropTypes.string, }; Button.defaultProps = { @@ -118,6 +141,7 @@ Button.defaultProps = { disabled: false, loading: false, transparent: false, + icon: '', }; const verticalCss = ({ sizes, vertical }) => { diff --git a/src/theme.js b/src/theme.js index a22db91..9ed0b42 100644 --- a/src/theme.js +++ b/src/theme.js @@ -8,23 +8,27 @@ export default (overrides = {}) => { primary: '#2DAAF2', primaryLight: '#9FB8FC', - grayDark: '#43526D', + grayDarkest: '#494D55', + grayDarker: '#767980', + grayDark: '#A4A6AA', grayMid: '#8E97A7', - gray: '#8E97A7', - grayLight: '#DEE0E4', + gray: '#D1D2D5', + grayLight: '#E8E9EA', grayLightest: '#F1F4F6', - redDark: '#B22327', + redLightest: '#FFD7D8', + redLight: '#FE7B7E', red: '#FD575D', - redLight: ' #FFCECF', + redDark: '#F23338', blueDark: '#006DC1', blue: '#0747A5', blueLight: '#C8E8FF', - greenDark: '#196C1C', - green: '#00D684', - greenLight: '#B4F7DE', + greenDark: '#00AC74', + green: '#21B986', + greenLight: '#42C79B', + greenLightest: '#DDF5ED', orangeDark: '#BB520B', orange: '#FFAA70', @@ -47,18 +51,88 @@ export default (overrides = {}) => { fontSize: 12, }; + const greyButton = { + backgroundColor: colors.white, + fontColor: colors.grayDarkest, + style: ` + border-color: ${colors.gray}; + + &[disabled] { + background: ${colors.white}; + color: ${colors.gray}; + } + + &:hover { + background: ${colors.white}; + color: ${colors.grayDarkest}; + border-color: ${colors.grayDark}; + } + + &:active { + background: ${colors.grayLight}; + border-color: ${colors.grayLight}; + } + `, + }; + const buttonVariants = { primary: { backgroundColor: colors.primary, fontColor: 'white', }, + secondary: { + backgroundColor: colors.white, + fontColor: colors.primary, + style: ` + border-color: ${colors.primary}; + &:hover { + border-color: ${colors.primary}; + background: ${colors.primary}; + color: white; + } + + &:active { + background: ${colors.primaryDark}; + border-color: ${colors.primaryDark}; + color: white; + } + `, + }, success: { backgroundColor: colors.green, fontColor: 'white', + style: ` + &:hover { + border-color: ${colors.greenLight}; + background: ${colors.greenLight}; + } + &:active { + border-color: ${colors.greenDark}; + background: ${colors.greenDark}; + } + &[disabled] { + border-color: ${colors.greenLightest}; + background: ${colors.greenLightest}; + } + `, }, danger: { backgroundColor: colors.red, fontColor: 'white', + style: ` + &:hover { + border-color: ${colors.redLight}; + background: ${colors.redLight}; + } + &:active { + border-color: ${colors.redDark}; + background: ${colors.redDark}; + } + &[disabled] { + border-color: ${colors.redLightest}; + background: ${colors.redLightest}; + } + `, }, warning: { backgroundColor: colors.orange, @@ -68,10 +142,8 @@ export default (overrides = {}) => { backgroundColor: colors.blue, fontColor: 'white', }, - gray: { - backgroundColor: colors.grayLight, - fontColor: colors.grayDark, - }, + grey: greyButton, + gray: greyButton, }; const badgeVariants = { @@ -105,10 +177,10 @@ export default (overrides = {}) => { const heights = { xs: 28, - sm: 32, - md: 36, + sm: 24, + md: 32, lg: 40, - xl: 44, + xl: 48, }; const fontSizes = { @@ -141,7 +213,7 @@ export default (overrides = {}) => { grid, heights, radii, - radius: 4, + radius: 8, shadow, shadowHover, typography, From 01b6ef89e9671604d51fdb1d4c41f0a2310abeac Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Thu, 1 Aug 2019 21:35:47 -0500 Subject: [PATCH 02/35] Conform molekule to heydoctor new button styles --- docs/wrapper.js | 51 ++++++++----- src/Button/Button.js | 35 ++++++--- src/Button/Button.mdx | 39 +++++++--- src/theme.js | 165 ++++++++++++++++++++++++------------------ 4 files changed, 180 insertions(+), 110 deletions(-) diff --git a/docs/wrapper.js b/docs/wrapper.js index 11935e2..83834e6 100644 --- a/docs/wrapper.js +++ b/docs/wrapper.js @@ -1,22 +1,37 @@ -import React, { Component } from 'react'; -import { createGlobalStyle } from 'styled-components'; +import React from 'react'; +import { createGlobalStyle, css } from 'styled-components'; import { ThemeProvider } from '../src'; -const GlobalStyle = createGlobalStyle ` - * { - box-sizing: border-box; - } -` +const GlobalStyle = createGlobalStyle` + ${({ theme }) => css` + ${theme.fonts.map( + font => css` + @font-face {f + font-family: "${font.name}"; + font-weight: ${font.weight || 400}; + font-style: normal; + src: url(${font.url}) format("${font.format || 'woff2'}"); + } + ` + )} -class App extends Component { - render() { - return ( - <> - - {this.props.children} - - ); - } -} + * { + font-family: "${theme.typography.bodyFontFamily}", sans-serif !important; + } -export default App; + h1 { + font-family: "${theme.typography.headerFontFamily}", serif !important; + font-size: 38px; + color: ${theme.colors.black}; + } + `} +`; + +export default ({ children }) => ( + + <> + + {children} + + +); diff --git a/src/Button/Button.js b/src/Button/Button.js index 9e22806..4dd7a0b 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -77,20 +77,20 @@ const StyledButton = createComponent({ font-size: ${fontSize}px; width: ${block ? '100%' : 'auto'}; background: ${outline || transparent ? 'transparent' : backgroundColor}; - border-color: ${transparent ? 'none' : backgroundColor}; - border: ${transparent ? 'none' : '1px solid'}; + border-color: ${transparent ? 'transparent' : backgroundColor}; + border-width: 1px; transition: 175ms; ${loading && loadingCss({ height, fontColor, outline, backgroundColor })}; &:hover { - background: ${outline ? 'transparent !important' : theme.colors.primaryLight}; - border-color: ${theme.colors.primaryLight}; + background: ${outline || transparent ? 'transparent !important' : theme.colors.primaryLight}; + border-color: ${transparent ? 'transparent !important' : theme.colors.primaryLight}; } &:active { - background: ${outline ? 'transparent !important' : theme.colors.primaryDark}; - border-color: ${theme.colors.primaryDark}; + background: ${outline || transparent ? 'transparent !important' : theme.colors.primaryDark}; + border-color: ${transparent ? 'transparent !important' : theme.colors.primaryDark}; } &[disabled] { @@ -111,14 +111,14 @@ const ButtonIcon = styled(Icon)` const Button = React.forwardRef((props, ref) => ( - {props.icon ? + {props.icon ? ( {props.children} - : + ) : ( props.children - } + )} )); @@ -169,8 +169,21 @@ Button.Group = createComponent({ grid: { sizes }, }, }) => css` - & > *:not(:first-child) { - margin-left: 1rem; + & > button { + padding-left: 20px; + padding-right: 20px; + } + & > button:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + & > button:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + & > :not(:first-child):not(:last-child) { + border-radius: 0; } ${vertical && verticalCss({ sizes, vertical })}; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index bb7348a..20162a0 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -5,6 +5,8 @@ menu: Core import { Playground, PropsTable } from 'docz'; import Button from './Button'; +import Flex from '../Flex'; +import Box from '../Box'; # Button @@ -17,10 +19,21 @@ Custom button styles for actions in forms, dialogs, and more with support for mu ## Basic usage - + - + + + + +## With Icon + +Buttons may contain an icon by passing an icon prop. + + + + + ## Groups @@ -56,12 +69,13 @@ Buttons can come in several different shapes and colors Use the `variant` prop for predefined button variants. More colors may be added to `theme.colors` if the defaults are not enough or need to be overridden. - - - - - - + + + + + + + ### Sizes @@ -69,11 +83,12 @@ Use the `variant` prop for predefined button variants. More colors may be added Use the `size` prop to change the size of your button. - + - + + ## States @@ -91,8 +106,8 @@ Add the `disabled` prop for disabled button state style. Add the `loading` prop for loading button state style. - + - + diff --git a/src/theme.js b/src/theme.js index 9ed0b42..0bc39d9 100644 --- a/src/theme.js +++ b/src/theme.js @@ -4,43 +4,47 @@ export default (overrides = {}) => { const colors = Object.assign( { - primaryDark: '#002BA0', - primary: '#2DAAF2', - primaryLight: '#9FB8FC', - - grayDarkest: '#494D55', - grayDarker: '#767980', - grayDark: '#A4A6AA', - grayMid: '#8E97A7', - gray: '#D1D2D5', - grayLight: '#E8E9EA', - grayLightest: '#F1F4F6', + default: '#333333', + black: '#1B202B', + white: '#FFFFFF', + + greyLightest: '#F8F8F9', + greyLighter: '#F4F4F4', + greyLight: '#E8E9EA', + grey: '#D1D2D5', + greyDark: '#A4A6AA', + greyDarker: '#767980', + greyDarkest: '#494D55', + + primaryLightest: '#CADCFF', + primaryLight: '#4D89FF', + primary: '#226EFF', + primaryDark: '#0958F3', + + secondaryLightest: '#DDF5ED', + secondaryLight: '#42C79B', + secondary: '#21B986', + secondaryDark: '#00AC74', redLightest: '#FFD7D8', redLight: '#FE7B7E', red: '#FD575D', redDark: '#F23338', - blueDark: '#006DC1', - blue: '#0747A5', - blueLight: '#C8E8FF', + purpleLightest: '#EBDCFC', + purpleLight: '#BB8AF6', + purple: '#A262F0', + purpleDark: '#8B3FE7', - greenDark: '#00AC74', - green: '#21B986', - greenLight: '#42C79B', - greenLightest: '#DDF5ED', + orangeLightest: '#FFE6D4', + orangeLight: '#FFAA70', + orange: '#FF954D', + orangeDark: '#EE7523', - orangeDark: '#BB520B', - orange: '#FFAA70', - orangeLight: '#FFD8BD', - - yellowDark: '#F1BC0B', + yellowLightest: '#FFF6D6', + yellowLight: '#FFE075', yellow: '#FED23D', - yellowLight: '#FFEDB1', - - purpleDark: '#8530FD', - purple: '#9D58FE', - purpleLight: '#DFC8FF', + yellowDark: '#F1BC0B', }, overrides.colors ); @@ -49,30 +53,8 @@ export default (overrides = {}) => { const typography = { fontSize: 12, - }; - - const greyButton = { - backgroundColor: colors.white, - fontColor: colors.grayDarkest, - style: ` - border-color: ${colors.gray}; - - &[disabled] { - background: ${colors.white}; - color: ${colors.gray}; - } - - &:hover { - background: ${colors.white}; - color: ${colors.grayDarkest}; - border-color: ${colors.grayDark}; - } - - &:active { - background: ${colors.grayLight}; - border-color: ${colors.grayLight}; - } - `, + bodyFontFamily: 'Avenir', + headerFontFamily: 'Tiempos', }; const buttonVariants = { @@ -80,6 +62,10 @@ export default (overrides = {}) => { backgroundColor: colors.primary, fontColor: 'white', }, + info: { + backgroundColor: colors.primary, + fontColor: 'white', + }, secondary: { backgroundColor: colors.white, fontColor: colors.primary, @@ -99,20 +85,20 @@ export default (overrides = {}) => { `, }, success: { - backgroundColor: colors.green, + backgroundColor: colors.secondary, fontColor: 'white', style: ` &:hover { - border-color: ${colors.greenLight}; - background: ${colors.greenLight}; + border-color: ${colors.secondaryLight}; + background: ${colors.secondaryLight}; } &:active { - border-color: ${colors.greenDark}; - background: ${colors.greenDark}; + border-color: ${colors.secondaryDark}; + background: ${colors.secondaryDark}; } &[disabled] { - border-color: ${colors.greenLightest}; - background: ${colors.greenLightest}; + border-color: ${colors.secondaryLightest}; + background: ${colors.secondaryLightest}; } `, }, @@ -137,13 +123,44 @@ export default (overrides = {}) => { warning: { backgroundColor: colors.orange, fontColor: 'white', + style: ` + &:hover { + border-color: ${colors.orangeLight}; + background: ${colors.orangeLight}; + } + &:active { + border-color: ${colors.orangeDark}; + background: ${colors.orangeDark}; + } + &[disabled] { + border-color: ${colors.orangeLightest}; + background: ${colors.orangeLightest}; + } + `, }, - info: { - backgroundColor: colors.blue, - fontColor: 'white', + grey: { + backgroundColor: colors.white, + fontColor: colors.greyDarkest, + style: ` + border-color: ${colors.grey}; + + &[disabled] { + background: ${colors.white}; + color: ${colors.grey}; + } + + &:hover { + background: ${colors.white}; + color: ${colors.greyDarkest}; + border-color: ${colors.greyDark}; + } + + &:active { + background: ${colors.greyLight}; + border-color: ${colors.greyLight}; + } + `, }, - grey: greyButton, - gray: greyButton, }; const badgeVariants = { @@ -167,9 +184,9 @@ export default (overrides = {}) => { backgroundColor: colors.blueLight, fontColor: colors.blueDark, }, - gray: { - backgroundColor: colors.grayLight, - fontColor: colors.grayDark, + grey: { + backgroundColor: colors.greyLight, + fontColor: colors.greyDark, }, }; @@ -186,8 +203,8 @@ export default (overrides = {}) => { const fontSizes = { xs: 8, sm: 10, - md: 12, - lg: 14, + md: 14, + lg: 16, xl: 16, }; @@ -205,11 +222,21 @@ export default (overrides = {}) => { }, }; + const fonts = [ + { + name: 'Tiempos', + url: '//cdn.heydoctor.co/fonts/TiemposHeadlineWeb-Semibold.woff2', + format: 'woff2', + weight: 500, + }, + ]; + return { breakpoints, classPrefix: 're', colors, fontSizes, + fonts, grid, heights, radii, From 951f6b7aa48533d75b72175c084d81878f123985 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Thu, 1 Aug 2019 21:40:34 -0500 Subject: [PATCH 03/35] Another button group example --- src/Button/Button.mdx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 20162a0..50db75c 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -41,11 +41,17 @@ Buttons may contain an icon by passing an icon prop. Button groups provide an easy way to horizontally layout a row of buttons. - - - - - + + + + + + + + @@ -90,8 +90,9 @@ Use the `size` prop to change the size of your button. - - + + + diff --git a/src/theme.js b/src/theme.js index 0bc39d9..afbec39 100644 --- a/src/theme.js +++ b/src/theme.js @@ -169,8 +169,8 @@ export default (overrides = {}) => { fontColor: colors.primaryDark, }, success: { - backgroundColor: colors.greenLight, - fontColor: colors.greenDark, + backgroundColor: colors.secondary, + fontColor: colors.secondaryLighter, }, danger: { backgroundColor: colors.redLight, @@ -193,8 +193,8 @@ export default (overrides = {}) => { const alertVariants = badgeVariants; const heights = { - xs: 28, - sm: 24, + xs: 24, + sm: 28, md: 32, lg: 40, xl: 48, @@ -202,12 +202,20 @@ export default (overrides = {}) => { const fontSizes = { xs: 8, - sm: 10, + sm: 12, md: 14, lg: 16, xl: 16, }; + const buttonIconSizes = { + xs: 12, + sm: 14, + md: 16, + lg: 24, + xl: 24, + }; + const breakpoints = [480, 768, 1024, 1440]; const grid = { @@ -233,6 +241,7 @@ export default (overrides = {}) => { return { breakpoints, + buttonIconSizes, classPrefix: 're', colors, fontSizes, From 048f5d6f7c3fa09008a3a0594f82c21bdaad3300 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Sun, 4 Aug 2019 18:37:27 -0500 Subject: [PATCH 07/35] Addressing color updates --- src/Alert/Alert.mdx | 4 ++-- src/Button/Button.js | 1 + src/Card/Card.js | 4 ++-- src/Dropdown/Dropdown.js | 6 +++--- src/Form/Checkbox.js | 2 +- src/Form/CheckboxGroup.js | 2 +- src/Form/Input.js | 6 +++--- src/Form/Select.js | 6 +++--- src/Form/Switch.js | 4 ++-- src/Form/Switch.mdx | 2 +- src/Modal/Modal.dropdownExample.js | 2 +- src/Modal/Modal.example.js | 4 ++-- src/Modal/Modal.js | 6 +++--- src/theme.js | 16 ++++++++-------- 14 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/Alert/Alert.mdx b/src/Alert/Alert.mdx index 67ed056..7bc9c8e 100644 --- a/src/Alert/Alert.mdx +++ b/src/Alert/Alert.mdx @@ -14,13 +14,13 @@ Alerts are typically used to display meaningful copy to users - typically notify -## Exammples +## Examples Well done! You successfully read this important alert link message. - + This is a generic informational message. diff --git a/src/Button/Button.js b/src/Button/Button.js index 648a186..683af11 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -80,6 +80,7 @@ const StyledButton = createComponent({ border-color: ${transparent ? 'transparent' : backgroundColor}; border-width: 1px; transition: 175ms; + white-space: nowrap; ${loading && loadingCss({ height, fontColor, outline, backgroundColor })}; diff --git a/src/Card/Card.js b/src/Card/Card.js index 7b0c7fa..aae5b98 100644 --- a/src/Card/Card.js +++ b/src/Card/Card.js @@ -30,7 +30,7 @@ Card.Header = createComponent({ as: Box, style: ({ theme }) => css` padding: 1rem; - border-bottom: 1px solid ${theme.colors.grayLight}; + border-bottom: 1px solid ${theme.colors.greyLight}; `, }); @@ -47,7 +47,7 @@ Card.Footer = createComponent({ as: Box, style: ({ theme }) => css` padding: 1rem; - border-top: 1px solid ${theme.colors.grayLight}; + border-top: 1px solid ${theme.colors.greyLight}; `, }); diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index 3951496..7dd6d62 100644 --- a/src/Dropdown/Dropdown.js +++ b/src/Dropdown/Dropdown.js @@ -257,7 +257,7 @@ const DropdownHeaderInner = createComponent({ name: 'DropdownHeaderInner', style: css` padding: 0 0 0.25rem; - border-bottom: 2px solid ${p => p.theme.colors.grayLight}; + border-bottom: 2px solid ${p => p.theme.colors.greyLight}; `, }); @@ -331,7 +331,7 @@ const StyledDropdownItem = createComponent({ &:hover, &:focus { color: inherit; - background: ${theme.colors.grayLightest}; + background: ${theme.colors.greyLightest}; } `, }); @@ -356,7 +356,7 @@ Dropdown.Footer = createComponent({ as: 'footer', }), style: ({ theme }) => css` - background: ${theme.colors.grayLightest}; + background: ${theme.colors.greyLightest}; padding: 0.75rem 1rem; border-radius: 0 0 ${themeGet('radius')}px ${themeGet('radius')}px; `, diff --git a/src/Form/Checkbox.js b/src/Form/Checkbox.js index 15dc820..6f4cbe7 100644 --- a/src/Form/Checkbox.js +++ b/src/Form/Checkbox.js @@ -71,7 +71,7 @@ class Checkbox extends React.Component { valueTrue: true, valueFalse: false, colorOn: 'primary', - colorOff: 'grayMid', + colorOff: 'greyMid', iconSize: 18, horizontal: false, onChange() {}, diff --git a/src/Form/CheckboxGroup.js b/src/Form/CheckboxGroup.js index 0500ca2..3ccb203 100644 --- a/src/Form/CheckboxGroup.js +++ b/src/Form/CheckboxGroup.js @@ -27,7 +27,7 @@ class CheckboxGroup extends Component { horizontal: false, onChange() {}, colorOn: 'primary', - colorOff: 'grayMid', + colorOff: 'greyMid', }; state = { diff --git a/src/Form/Input.js b/src/Form/Input.js index de31d2e..d0b0abb 100644 --- a/src/Form/Input.js +++ b/src/Form/Input.js @@ -18,7 +18,7 @@ const StyledInput = createComponent({ name: 'Input', tag: 'input', style: ({ isFloating, size, theme, borderRadius = theme.radius }) => css` - border: 1px solid ${theme.colors.grayLight}; + border: 1px solid ${theme.colors.greyLight}; height: ${theme.heights[size]}px; display: block; outline: none; @@ -33,11 +33,11 @@ const StyledInput = createComponent({ &:hover, &:focus, &:active { - border-color: ${theme.colors.grayMid}; + border-color: ${theme.colors.greyMid}; } ::placeholder { - color: ${theme.colors.grayMid}; + color: ${theme.colors.greyMid}; } &[disabled] { diff --git a/src/Form/Select.js b/src/Form/Select.js index 8d2f484..9104991 100644 --- a/src/Form/Select.js +++ b/src/Form/Select.js @@ -14,7 +14,7 @@ const SelectContainer = createComponent({ as: Flex, style: ({ size, theme, value, borderRadius = theme.radius }) => css` background: white; - border: 1px solid ${theme.colors.grayLight}; + border: 1px solid ${theme.colors.greyLight}; height: ${theme.heights[size]}px; outline: none; width: 100%; @@ -28,9 +28,9 @@ const SelectContainer = createComponent({ ${!value && css` - color: ${p => p.theme.colors.grayMid}; + color: ${p => p.theme.colors.greyMid}; select { - color: ${p => p.theme.colors.grayMid}; + color: ${p => p.theme.colors.greyMid}; } `}; `, diff --git a/src/Form/Switch.js b/src/Form/Switch.js index 5690a12..7acff7e 100644 --- a/src/Form/Switch.js +++ b/src/Form/Switch.js @@ -31,7 +31,7 @@ const SwitchThumb = styled.span` right: 0; bottom: 0; transition: 0.3s; - background-color: ${on ? backgroundColor : theme.colors.grayMid}; + background-color: ${on ? backgroundColor : theme.colors.grey}; &:before { border-radius: 100%; @@ -61,7 +61,7 @@ class Switch extends React.Component { }; static defaultProps = { - defaultValue: false, + value: false, variant: 'primary', size: 16, inset: 8, diff --git a/src/Form/Switch.mdx b/src/Form/Switch.mdx index 754903c..a550cb7 100644 --- a/src/Form/Switch.mdx +++ b/src/Form/Switch.mdx @@ -8,7 +8,7 @@ import Switch from './Switch' # Switch -Form Switch component. Different s are available. +Form Switch component. Different styles are available. ## Props diff --git a/src/Modal/Modal.dropdownExample.js b/src/Modal/Modal.dropdownExample.js index 750ee59..6e53c5a 100644 --- a/src/Modal/Modal.dropdownExample.js +++ b/src/Modal/Modal.dropdownExample.js @@ -53,7 +53,7 @@ export default class ModalDropdownDemo extends React.Component { - diff --git a/src/Modal/Modal.example.js b/src/Modal/Modal.example.js index 2d46d14..92df49e 100644 --- a/src/Modal/Modal.example.js +++ b/src/Modal/Modal.example.js @@ -52,7 +52,7 @@ export default class ModalDemo extends React.Component { - - - + + + + + + + +## Text + + + + + + + @@ -32,7 +45,7 @@ Buttons may contain an icon by passing an icon prop. - + @@ -45,11 +58,11 @@ Button groups provide an easy way to horizontally layout a row of buttons. - + + + + + + + + ### Loading diff --git a/src/Dropdown/Dropdown.mdx b/src/Dropdown/Dropdown.mdx index c397ece..4436afb 100644 --- a/src/Dropdown/Dropdown.mdx +++ b/src/Dropdown/Dropdown.mdx @@ -26,7 +26,7 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos const [placement, setPlacement] = useState('top'); return ( <> - + Placement} value={placement} @@ -36,47 +36,51 @@ Easily display contextual overlays using custom trigger elements. Dropdown's pos }))} onChange={(_, val) => setPlacement(val)} /> - Open Dropdown} - > - - - - Section One - I don't close when clicked - Item Two - - Section Two - Item One - Item Two - - - Footer - - - Open Other Dropdown} - > - - - - - Section One - Item One - Item Two - - Section Two - Item One - Item Two - - - Footer - - -
+ + Open Dropdown} + > + + + + Section One + I don't close when clicked + Item Two + + Section Two + Item One + Item Two + + + Footer + + + + + Open Other Dropdown} + > + + + + + Section One + Item One + Item Two + + Section Two + Item One + Item Two + + + Footer + + + + Footer -
+ Footer - + ); } diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index cb5bb89..8b46e9f 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -24,32 +24,51 @@ exports[` only renders trigger on mount 1`] = ` appearance: none; border-radius: 8px; pointer-events: auto; - color: white; + color: #FFFFFF; height: 32px; padding: 0 16px; font-size: 14px; width: auto; background: #226EFF; border-color: #226EFF; + border-style: solid; border-width: 1px; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .c1:hover { - background: #4D89FF; + background-color: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #4D89FF; border-color: #4D89FF; + color: #FFFFFF; } .c1:active { - background: #0958F3; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #0958F3; border-color: #0958F3; + color: #FFFFFF; } .c1[disabled] { - background: #CADCFF; + pointer-events: none; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #CADCFF; border-color: #CADCFF; + color: #FFFFFF; }
opens menu with focus when trigger is clicked 1`] = ` appearance: none; border-radius: 8px; pointer-events: auto; - color: white; + color: #FFFFFF; height: 32px; padding: 0 16px; font-size: 14px; width: auto; background: #226EFF; border-color: #226EFF; + border-style: solid; border-width: 1px; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .c1:hover { - background: #4D89FF; + background-color: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #4D89FF; border-color: #4D89FF; + color: #FFFFFF; } .c1:active { - background: #0958F3; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #0958F3; border-color: #0958F3; + color: #FFFFFF; } .c1[disabled] { - background: #CADCFF; + pointer-events: none; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #CADCFF; border-color: #CADCFF; + color: #FFFFFF; }
{ const buttonVariants = { primary: { backgroundColor: colors.primary, - fontColor: 'white', - }, - info: { - backgroundColor: colors.primary, - fontColor: 'white', + fontColor: colors.white, + hover: { + backgroundColor: colors.primaryLight, + }, + active: { + backgroundColor: colors.primaryDark, + }, + disabled: { + backgroundColor: colors.primaryLightest, + }, }, secondary: { backgroundColor: colors.white, fontColor: colors.primary, - style: ` - border-color: ${colors.primary}; - &:hover { - border-color: ${colors.primary}; - background: ${colors.primary}; - color: white; - } - - &:active { - background: ${colors.primaryDark}; - border-color: ${colors.primaryDark}; - color: white; - } - `, + borderColor: colors.primary, + textColor: colors.primary, + hover: { + backgroundColor: colors.primary, + fontColor: colors.white, + }, + active: { + backgroundColor: colors.primaryDark, + fontColor: colors.white, + }, + disabled: { + fontColor: colors.primaryLightest, + borderColor: colors.primaryLightest, + }, + }, + grey: { + backgroundColor: colors.white, + fontColor: colors.greyDarkest, + borderColor: colors.grey, + textColor: colors.greyDarkest, + hover: { + borderColor: colors.greyDark, + }, + active: { + backgroundColor: colors.greyLight, + }, + disabled: { + fontColor: colors.grey, + borderColor: colors.grey, + }, }, success: { backgroundColor: colors.secondary, - fontColor: 'white', - style: ` - &:hover { - border-color: ${colors.secondaryLight}; - background: ${colors.secondaryLight}; - } - &:active { - border-color: ${colors.secondaryDark}; - background: ${colors.secondaryDark}; - } - &[disabled] { - border-color: ${colors.secondaryLightest}; - background: ${colors.secondaryLightest}; - } - `, - }, - danger: { - backgroundColor: colors.red, - fontColor: 'white', - style: ` - &:hover { - border-color: ${colors.redLight}; - background: ${colors.redLight}; - } - &:active { - border-color: ${colors.redDark}; - background: ${colors.redDark}; - } - &[disabled] { - border-color: ${colors.redLightest}; - background: ${colors.redLightest}; - } - `, + fontColor: colors.white, + hover: { + backgroundColor: colors.secondaryLight, + }, + active: { + backgroundColor: colors.secondaryDark, + }, + disabled: { + backgroundColor: colors.secondaryLightest, + }, }, warning: { backgroundColor: colors.orange, - fontColor: 'white', - style: ` - &:hover { - border-color: ${colors.orangeLight}; - background: ${colors.orangeLight}; - } - &:active { - border-color: ${colors.orangeDark}; - background: ${colors.orangeDark}; - } - &[disabled] { - border-color: ${colors.orangeLightest}; - background: ${colors.orangeLightest}; - } - `, + fontColor: colors.white, + hover: { + backgroundColor: colors.orangeLight, + }, + active: { + backgroundColor: colors.orangeDark, + }, + disabled: { + backgroundColor: colors.orangeLightest, + }, }, - grey: { - backgroundColor: colors.white, - fontColor: colors.greyDarkest, - style: ` - border-color: ${colors.grey}; - - &[disabled] { - background: ${colors.white}; - color: ${colors.grey}; - } - - &:hover { - background: ${colors.white}; - color: ${colors.greyDarkest}; - border-color: ${colors.greyDark}; - } - - &:active { - background: ${colors.greyLight}; - border-color: ${colors.greyLight}; - } - `, + danger: { + backgroundColor: colors.red, + fontColor: colors.white, + hover: { + backgroundColor: colors.redLight, + }, + active: { + backgroundColor: colors.redDark, + }, + disabled: { + backgroundColor: colors.redLightest, + }, }, }; From 77a2f88bb989a4ee3f346a427cbf3d7d270089c5 Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 03:05:23 -0500 Subject: [PATCH 15/35] Fixes loading symbol --- src/Button/Button.js | 2 +- src/Button/Button.mdx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 2f086ae..7d62e60 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -27,7 +27,7 @@ const loadingCss = ({ height, borderColor, fontColor }) => css` content: ''; border-color: ${borderColor || fontColor}; animation: ${spinKeyframes} 820ms infinite linear; - border-width: ${height * 0.05}px; + border-width: 2px; border-style: solid; border-radius: 100%; border-right-color: transparent; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 894012c..c4bc251 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -75,7 +75,7 @@ Use the `vertical` prop to pass a predefined or custom breakpoint size. - + @@ -134,6 +134,6 @@ Add the `loading` prop for loading button state style. - + From c0e765ca58f038743804c3aa02932be52ca4bd7f Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 03:24:42 -0500 Subject: [PATCH 16/35] Fixes outline prop button --- src/Button/Button.js | 13 +++++++------ src/Button/Button.mdx | 15 +++++++-------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 7d62e60..d022ee5 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -15,7 +15,7 @@ const spinKeyframes = keyframes` transform: rotate(360deg); }`; -const loadingCss = ({ height, borderColor, fontColor }) => css` +const loadingCss = ({ height, borderColor, fontColor, backgroundColor, outline }) => css` color: transparent !important; pointer-events: none; position: relative; @@ -25,7 +25,7 @@ const loadingCss = ({ height, borderColor, fontColor }) => css` &::after { display: block; content: ''; - border-color: ${borderColor || fontColor}; + border-color: ${outline ? backgroundColor : borderColor || fontColor}; animation: ${spinKeyframes} 820ms infinite linear; border-width: 2px; border-style: solid; @@ -53,6 +53,7 @@ const StyledButton = createComponent({ disabled = false, loading = false, text = false, + outline, height = theme.heights[size], fontSize = theme.fontSizes[size], borderRadius = theme.radius || 2, @@ -70,13 +71,13 @@ const StyledButton = createComponent({ appearance: none; border-radius: ${borderRadius}px; pointer-events: ${disabled ? 'none' : 'auto'}; - color: ${fontColor}; + color: ${outline ? backgroundColor : fontColor}; height: ${height}px; padding: 0 ${height * 0.5}px; font-size: ${fontSize}px; width: ${block ? '100%' : 'auto'}; - background: ${backgroundColor}; - border-color: ${borderColor || backgroundColor}; + background: ${outline ? 'transparent' : backgroundColor}; + border-color: ${outline ? backgroundColor : borderColor || backgroundColor}; border-style: solid; border-width: 1px; transition: 175ms; @@ -84,7 +85,7 @@ const StyledButton = createComponent({ outline: none; user-select: none; - ${loading && loadingCss({ height, fontColor, backgroundColor, borderColor })}; + ${loading && loadingCss({ height, fontColor, backgroundColor, borderColor, outline })}; &:hover { background-color: ${backgroundColor}; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index c4bc251..173c053 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -21,15 +21,14 @@ Custom button styles for actions in forms, dialogs, and more with support for mu - - - - + ## Text +Use the `text` prop to use a Text Button. + @@ -58,11 +57,11 @@ Button groups provide an easy way to horizontally layout a row of buttons. - + - + @@ -134,6 +133,6 @@ Add the `loading` prop for loading button state style. - + From 357bbb418267550b439a333c4c5017b36e1555f8 Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 09:59:14 -0500 Subject: [PATCH 17/35] Adds seondary button to docs --- src/Button/Button.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 173c053..e615f42 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -89,6 +89,7 @@ Use the `variant` prop for predefined button variants. More colors may be added + From be6f2d884825fb04641c48e3d5130581dd77f185 Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 10:08:53 -0500 Subject: [PATCH 18/35] Adds prop checks for `text` prop --- src/Button/Button.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index d022ee5..3da77de 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -49,10 +49,10 @@ const StyledButton = createComponent({ variant, size, theme, - block = false, - disabled = false, - loading = false, - text = false, + block, + disabled, + loading, + text, outline, height = theme.heights[size], fontSize = theme.fontSizes[size], @@ -167,8 +167,8 @@ Button.propTypes = { block: PropTypes.bool, disabled: PropTypes.bool, loading: PropTypes.bool, - transparent: PropTypes.bool, icon: PropTypes.string, + text: PropTypes.bool, }; Button.defaultProps = { @@ -178,8 +178,8 @@ Button.defaultProps = { block: false, disabled: false, loading: false, - transparent: false, icon: '', + text: false, }; const verticalCss = ({ sizes, vertical, borderRadius }) => { From 759a837f08ce9a9d449421c53487cfcf48a365d6 Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 10:44:21 -0500 Subject: [PATCH 19/35] Fixes spacing with icon button --- src/Button/Button.js | 50 +++++++++++++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 3da77de..57be32c 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -46,6 +46,8 @@ const StyledButton = createComponent({ name: 'Button', tag: 'button', style: ({ + hasText, + icon, variant, size, theme, @@ -58,7 +60,15 @@ const StyledButton = createComponent({ fontSize = theme.fontSizes[size], borderRadius = theme.radius || 2, }) => { - const { textColor, borderColor, backgroundColor, fontColor, hover, active, disabled: disabledState } = getComponentVariant(theme, 'Button', variant); + const { + textColor, + borderColor, + backgroundColor, + fontColor, + hover, + active, + disabled: disabledState, + } = getComponentVariant(theme, 'Button', variant); return css` font-family: inherit; @@ -85,6 +95,12 @@ const StyledButton = createComponent({ outline: none; user-select: none; + ${icon && + hasText && + css` + padding-left: 8px; + `} + ${loading && loadingCss({ height, fontColor, backgroundColor, borderColor, outline })}; &:hover { @@ -141,24 +157,28 @@ const StyledButton = createComponent({ const ButtonIcon = styled(Icon)` ${p => css` - margin-right: ${p.hasText ? '6px' : 0}; + margin-right: ${p.hasText ? '4px' : 0}; margin-top: 2px; - font-size: ${p.theme.buttonIconSizes[p.sizing]}; + font-size: ${p.theme.buttonIconSizes[p.sizing]}px; `} `; -const Button = React.forwardRef((props, ref) => ( - - {props.icon ? ( - - - {props.children} - - ) : ( - props.children - )} - -)); +const Button = React.forwardRef((props, ref) => { + const hasText = !!props.children; + + return ( + + {props.icon ? ( + + + {props.children} + + ) : ( + props.children + )} + + ) +}); Button.propTypes = { variant: PropTypes.string, From cf154ac50e45e68789b68554854b24274fe7cdbd Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Mon, 12 Aug 2019 10:46:34 -0500 Subject: [PATCH 20/35] Fixes padding --- src/Button/Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 57be32c..ca89886 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -83,7 +83,7 @@ const StyledButton = createComponent({ pointer-events: ${disabled ? 'none' : 'auto'}; color: ${outline ? backgroundColor : fontColor}; height: ${height}px; - padding: 0 ${height * 0.5}px; + padding: 0 16px; font-size: ${fontSize}px; width: ${block ? '100%' : 'auto'}; background: ${outline ? 'transparent' : backgroundColor}; From 170e2486858365a2b62e1347146384ceac73cc46 Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Thu, 15 Aug 2019 17:01:34 -0500 Subject: [PATCH 21/35] Simplifies Button base component --- src/Button/Button.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index ca89886..4ee318a 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -168,16 +168,12 @@ const Button = React.forwardRef((props, ref) => { return ( - {props.icon ? ( - - - {props.children} - - ) : ( - props.children - )} + + {props.icon && } + {props.children} + - ) + ); }); Button.propTypes = { From dba3eed0545dd2d9b314d5602c0e139e5109e08b Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Thu, 15 Aug 2019 17:44:22 -0500 Subject: [PATCH 22/35] Makes Icon in Button better --- src/Button/Button.js | 20 +++++++------------- src/Button/Button.mdx | 9 +++++---- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 4ee318a..f6ed221 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -1,10 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled, { css, keyframes } from 'styled-components'; +import { css, keyframes } from 'styled-components'; import { space } from 'styled-system'; import { getComponentVariant, createComponent } from '../utils'; import Flex from '../Flex'; -import Icon from '../Icon'; const spinKeyframes = keyframes` from { @@ -99,6 +98,10 @@ const StyledButton = createComponent({ hasText && css` padding-left: 8px; + + i { + padding-right: 4px; + } `} ${loading && loadingCss({ height, fontColor, backgroundColor, borderColor, outline })}; @@ -155,21 +158,13 @@ const StyledButton = createComponent({ }, }); -const ButtonIcon = styled(Icon)` - ${p => css` - margin-right: ${p.hasText ? '4px' : 0}; - margin-top: 2px; - font-size: ${p.theme.buttonIconSizes[p.sizing]}px; - `} -`; - const Button = React.forwardRef((props, ref) => { const hasText = !!props.children; return ( - {props.icon && } + {props.icon} {props.children} @@ -183,7 +178,7 @@ Button.propTypes = { block: PropTypes.bool, disabled: PropTypes.bool, loading: PropTypes.bool, - icon: PropTypes.string, + icon: PropTypes.element, text: PropTypes.bool, }; @@ -194,7 +189,6 @@ Button.defaultProps = { block: false, disabled: false, loading: false, - icon: '', text: false, }; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index e615f42..8c1b38c 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -7,6 +7,7 @@ import { Playground, PropsTable } from 'docz'; import Button from './Button'; import Flex from '../Flex'; import Box from '../Box'; +import Icon from '../Icon'; # Button @@ -43,8 +44,8 @@ Use the `text` prop to use a Text Button. Buttons may contain an icon by passing an icon prop. - - + + @@ -60,8 +61,8 @@ Button groups provide an easy way to horizontally layout a row of buttons. - - + From b1fbeb63c78e149ada4be504416e4c49fde7cc3d Mon Sep 17 00:00:00 2001 From: Mathew Morris Date: Thu, 15 Aug 2019 18:06:33 -0500 Subject: [PATCH 24/35] Make connected Button group --- src/Button/Button.js | 34 ++++++++++++++++----------- src/Button/Button.mdx | 54 ++++++++++++++++++++++++++----------------- 2 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index f6ed221..f172dda 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -204,10 +204,11 @@ const verticalCss = ({ sizes, vertical, borderRadius }) => { &&& { & > button { border-radius: ${borderRadius}px; + margin-right: 0; } } - & > *:not(:first-child) { + & > button:not(:first-child) { margin: 1rem 0 0; } } @@ -224,21 +225,28 @@ Button.Group = createComponent({ grid: { sizes }, }, borderRadius = radius || 2, + connected = false, }) => css` - & > button { - padding-left: 20px; - padding-right: 20px; - } - & > button:first-child { - border-radius: ${borderRadius}px 0 0 ${borderRadius}px; - } - & > button:last-child { - border-radius: 0 ${borderRadius}px ${borderRadius}px 0; + & > button:not(:first-child) { + margin-left: 1rem; } - & > :not(:first-child):not(:last-child) { - border-radius: 0; - } + ${connected && + css` + & > button:not(:first-child) { + margin-left: 0; + } + & > button:first-child { + border-radius: ${borderRadius}px 0 0 ${borderRadius}px; + } + & > button:last-child { + border-radius: 0 ${borderRadius}px ${borderRadius}px 0; + } + + & > :not(:first-child):not(:last-child) { + border-radius: 0; + } + `} ${vertical && verticalCss({ sizes, vertical, borderRadius })}; `, diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 7fa8b16..01e0ab1 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -20,10 +20,10 @@ Custom button styles for actions in forms, dialogs, and more with support for mu ## Basic usage - + - + ## Text @@ -31,22 +31,22 @@ Custom button styles for actions in forms, dialogs, and more with support for mu Use the `text` prop to use a Text Button. - + - + ## With Icon Buttons may contain an icon by passing an icon prop. - - + + - + ## Groups @@ -54,17 +54,29 @@ Buttons may contain an icon by passing an icon prop. Button groups provide an easy way to horizontally layout a row of buttons. - + - + - + + - ### Vertical Layout @@ -75,7 +87,7 @@ Use the `vertical` prop to pass a predefined or custom breakpoint size. - + @@ -88,14 +100,14 @@ Buttons can come in several different shapes and colors Use the `variant` prop for predefined button variants. More colors may be added to `theme.colors` if the defaults are not enough or need to be overridden. - + - + ### Sizes @@ -103,13 +115,13 @@ Use the `variant` prop for predefined button variants. More colors may be added Use the `size` prop to change the size of your button. - + - + ## States @@ -119,13 +131,13 @@ Use the `size` prop to change the size of your button. Add the `disabled` prop for disabled button state style. - + - + ### Loading @@ -133,8 +145,8 @@ Add the `disabled` prop for disabled button state style. Add the `loading` prop for loading button state style. - + - + From fdd247859560b1841c3e7e6384e747ecc43fa4b4 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Mon, 19 Aug 2019 17:57:57 -0500 Subject: [PATCH 25/35] Clean up merge --- src/Badge/__snapshots__/Badge.spec.js.snap | 2 +- .../__snapshots__/Dropdown.spec.js.snap | 110 ++++++++++++++---- src/Form/Input.js | 8 -- src/Form/__snapshots__/DateInput.spec.js.snap | 2 +- .../__snapshots__/PhoneInput.spec.js.snap | 2 +- 5 files changed, 92 insertions(+), 32 deletions(-) diff --git a/src/Badge/__snapshots__/Badge.spec.js.snap b/src/Badge/__snapshots__/Badge.spec.js.snap index bdf6f83..bf6f3b5 100644 --- a/src/Badge/__snapshots__/Badge.spec.js.snap +++ b/src/Badge/__snapshots__/Badge.spec.js.snap @@ -7,7 +7,7 @@ exports[`Badge 1`] = ` font-size: 14px; font-family: inherit; font-weight: bold; - border-radius: 12px; + border-radius: 14px; background: #CADCFF; color: #0958F3; } diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index d572801..80dd7a1 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -10,6 +10,17 @@ exports[` only renders trigger on mount 1`] = ` outline: none; } +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + .c1 { font-family: inherit; display: inline-block; @@ -24,14 +35,15 @@ exports[` only renders trigger on mount 1`] = ` appearance: none; border-radius: 8px; pointer-events: auto; - opacity: 1; color: #FFFFFF; - height: 36px; - padding: 0 18px; - font-size: 12px; + height: 32px; + padding: 0 16px; + font-size: 14px; width: auto; background: #226EFF; - border: 1px solid #226EFF; + border-color: #226EFF; + border-style: solid; + border-width: 1px; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; @@ -43,13 +55,31 @@ exports[` only renders trigger on mount 1`] = ` } .c1:hover { - background: #3c7fff; - border-color: #3c7fff; + background-color: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #4D89FF; + border-color: #4D89FF; + color: #FFFFFF; } .c1:active { - background: #4887ff; - border-color: #4887ff; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #0958F3; + border-color: #0958F3; + color: #FFFFFF; +} + +.c1[disabled] { + pointer-events: none; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #CADCFF; + border-color: #CADCFF; + color: #FFFFFF; }
only renders trigger on mount 1`] = ` style="cursor: pointer;" tabindex="0" > - Trigger +
+ Trigger +
@@ -80,6 +114,17 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` outline: none; } +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + .c1 { font-family: inherit; display: inline-block; @@ -94,14 +139,15 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` appearance: none; border-radius: 8px; pointer-events: auto; - opacity: 1; color: #FFFFFF; - height: 36px; - padding: 0 18px; - font-size: 12px; + height: 32px; + padding: 0 16px; + font-size: 14px; width: auto; background: #226EFF; - border: 1px solid #226EFF; + border-color: #226EFF; + border-style: solid; + border-width: 1px; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; @@ -113,13 +159,31 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` } .c1:hover { - background: #3c7fff; - border-color: #3c7fff; + background-color: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #4D89FF; + border-color: #4D89FF; + color: #FFFFFF; } .c1:active { - background: #4887ff; - border-color: #4887ff; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #0958F3; + border-color: #0958F3; + color: #FFFFFF; +} + +.c1[disabled] { + pointer-events: none; + background: #226EFF; + border-color: #226EFF; + color: #FFFFFF; + background-color: #CADCFF; + border-color: #CADCFF; + color: #FFFFFF; }
opens menu with focus when trigger is clicked 1`] = ` style="cursor: pointer;" tabindex="0" > - Trigger +
+ Trigger +
opens menu with focus when trigger is clicked 1`] = ` .c0 { z-index: 10; background: white; - border-radius: 4px; + border-radius: 8px; border: 1px solid #F4F4F4; outline: none; box-shadow: 0 0 3px 0 rgba(178,194,212,0.3); diff --git a/src/Form/Input.js b/src/Form/Input.js index afba9ce..e9b4160 100644 --- a/src/Form/Input.js +++ b/src/Form/Input.js @@ -33,19 +33,11 @@ const StyledInput = createComponent({ &:hover, &:focus, &:active { -<<<<<<< HEAD - border-color: ${theme.colors.greyMid}; - } - - ::placeholder { - color: ${theme.colors.greyMid}; -======= border-color: ${theme.colors.greyDark}; } ::placeholder { color: ${theme.colors.greyDark}; ->>>>>>> origin/v5 } &[disabled] { diff --git a/src/Form/__snapshots__/DateInput.spec.js.snap b/src/Form/__snapshots__/DateInput.spec.js.snap index 8971715..59436b2 100644 --- a/src/Form/__snapshots__/DateInput.spec.js.snap +++ b/src/Form/__snapshots__/DateInput.spec.js.snap @@ -18,7 +18,7 @@ exports[` snapshot 1`] = ` .c3 { border: 1px solid #E8E9EA; - height: 36px; + height: 32px; display: block; outline: none; width: 100%; diff --git a/src/Form/__snapshots__/PhoneInput.spec.js.snap b/src/Form/__snapshots__/PhoneInput.spec.js.snap index 4764266..7a0d07f 100644 --- a/src/Form/__snapshots__/PhoneInput.spec.js.snap +++ b/src/Form/__snapshots__/PhoneInput.spec.js.snap @@ -18,7 +18,7 @@ exports[` snapshot 1`] = ` .c3 { border: 1px solid #E8E9EA; - height: 36px; + height: 32px; display: block; outline: none; width: 100%; From 856cb06ea09a38085fbcdfff78bb577b6c4dc279 Mon Sep 17 00:00:00 2001 From: Kyle Alwyn Date: Tue, 20 Aug 2019 12:14:58 -0700 Subject: [PATCH 26/35] Remove duplicate grey variant --- src/theme.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/theme.js b/src/theme.js index f7d8923..c43383a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -158,10 +158,6 @@ export default (overrides = {}) => { backgroundColor: colors.blue, fontColor: colors.white, }, - grey: { - backgroundColor: colors.greyLight, - fontColor: colors.greyDarkest, - }, }; const badgeVariants = { From 9b6619b99998dea0dab314d5dc39db6e331cada7 Mon Sep 17 00:00:00 2001 From: Kyle Alwyn Date: Tue, 20 Aug 2019 14:23:44 -0700 Subject: [PATCH 27/35] fix: Updated proposal to configure components via size props (#63) --- src/Badge/Badge.js | 10 +++--- src/Badge/Badge.mdx | 10 ++++++ src/Badge/__snapshots__/Badge.spec.js.snap | 2 +- src/Button/Button.js | 21 +++--------- src/Button/Button.mdx | 2 -- .../__snapshots__/Dropdown.spec.js.snap | 8 ++--- src/theme.js | 33 +++++++++++++++++++ src/utils.js | 3 ++ 8 files changed, 60 insertions(+), 29 deletions(-) diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js index e193964..586caf2 100644 --- a/src/Badge/Badge.js +++ b/src/Badge/Badge.js @@ -2,19 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css } from 'styled-components'; import { space } from 'styled-system'; -import { getComponentVariant, createComponent } from '../utils'; +import { getComponentVariant, createComponent, getComponentSize } from '../utils'; const StyledBadge = createComponent({ name: 'Badge', tag: 'span', style: ({ variant, theme, size }) => { const { backgroundColor, fontColor } = getComponentVariant(theme, 'Badge', variant); - const fontSize = theme.fontSizes[size]; + const { fontSize, paddingVertical, paddingHorizontal } = getComponentSize(theme, 'Badge', size); return css` - padding: ${fontSize / 3}px ${fontSize / 1.5}px; - font-size: ${theme.fontSizes[size]}px; - font-family: ${theme.typography.fontFamily || 'inherit'}; + padding: ${paddingVertical}px ${paddingHorizontal}px; + font-size: ${fontSize}px; + font-family: inherit; font-weight: bold; border-radius: ${fontSize}px; background: ${backgroundColor}; diff --git a/src/Badge/Badge.mdx b/src/Badge/Badge.mdx index 58fa284..7a7a12b 100644 --- a/src/Badge/Badge.mdx +++ b/src/Badge/Badge.mdx @@ -16,9 +16,19 @@ Documentation and examples for badges, our small count and labeling component. ## Examples +### Variants + I'm Ze Best I'm So Successful I'm So Dangerous 💁‍♀️ Caution + +### Sizes + + + Small + Medium + Large + diff --git a/src/Badge/__snapshots__/Badge.spec.js.snap b/src/Badge/__snapshots__/Badge.spec.js.snap index bf6f3b5..745ab24 100644 --- a/src/Badge/__snapshots__/Badge.spec.js.snap +++ b/src/Badge/__snapshots__/Badge.spec.js.snap @@ -3,7 +3,7 @@ exports[`Badge 1`] = ` .c0 { - padding: 4.666666666666667px 9.333333333333334px; + padding: 5px 10px; font-size: 14px; font-family: inherit; font-weight: bold; diff --git a/src/Button/Button.js b/src/Button/Button.js index f172dda..24458e5 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { css, keyframes } from 'styled-components'; import { space } from 'styled-system'; -import { getComponentVariant, createComponent } from '../utils'; +import { getComponentVariant, getComponentSize, createComponent } from '../utils'; import Flex from '../Flex'; const spinKeyframes = keyframes` @@ -44,21 +44,7 @@ const loadingCss = ({ height, borderColor, fontColor, backgroundColor, outline } const StyledButton = createComponent({ name: 'Button', tag: 'button', - style: ({ - hasText, - icon, - variant, - size, - theme, - block, - disabled, - loading, - text, - outline, - height = theme.heights[size], - fontSize = theme.fontSizes[size], - borderRadius = theme.radius || 2, - }) => { + style: ({ hasText, icon, variant, size, theme, block, disabled, loading, text, outline, borderRadius }) => { const { textColor, borderColor, @@ -68,6 +54,7 @@ const StyledButton = createComponent({ active, disabled: disabledState, } = getComponentVariant(theme, 'Button', variant); + const { fontSize, height } = getComponentSize(theme, 'Button', size); return css` font-family: inherit; @@ -78,7 +65,7 @@ const StyledButton = createComponent({ font-weight: bold; text-decoration: none; appearance: none; - border-radius: ${borderRadius}px; + border-radius: ${borderRadius || theme.radius}px; pointer-events: ${disabled ? 'none' : 'auto'}; color: ${outline ? backgroundColor : fontColor}; height: ${height}px; diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 01e0ab1..228c3f8 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -116,11 +116,9 @@ Use the `size` prop to change the size of your button. - - diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index 80dd7a1..2407b90 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -36,9 +36,9 @@ exports[` only renders trigger on mount 1`] = ` border-radius: 8px; pointer-events: auto; color: #FFFFFF; - height: 32px; + height: 40px; padding: 0 16px; - font-size: 14px; + font-size: 16px; width: auto; background: #226EFF; border-color: #226EFF; @@ -140,9 +140,9 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` border-radius: 8px; pointer-events: auto; color: #FFFFFF; - height: 32px; + height: 40px; padding: 0 16px; - font-size: 14px; + font-size: 16px; width: auto; background: #226EFF; border-color: #226EFF; diff --git a/src/theme.js b/src/theme.js index c43383a..4d2bc88 100644 --- a/src/theme.js +++ b/src/theme.js @@ -250,6 +250,39 @@ export default (overrides = {}) => { shadow, shadowHover, typography, + sizes: { + Button: { + sm: { + fontSize: 14, + height: 32, + }, + md: { + fontSize: 16, + height: 40, + }, + lg: { + fontSize: 16, + height: 48, + }, + }, + Badge: { + sm: { + fontSize: 12, + paddingVertical: 4, + paddingHorizontal: 8, + }, + md: { + fontSize: 14, + paddingVertical: 5, + paddingHorizontal: 10, + }, + lg: { + fontSize: 16, + paddingVertical: 6, + paddingHorizontal: 12, + }, + }, + }, variants: { Alert: alertVariants, Badge: badgeVariants, diff --git a/src/utils.js b/src/utils.js index 38bcb21..a01f929 100644 --- a/src/utils.js +++ b/src/utils.js @@ -12,6 +12,9 @@ export const getComponentVariant = (theme, componentName, variant) => { return config; }; +export const getComponentSize = (theme, componentName, size) => + themeGet(`sizes.${componentName}.${size}`, {})({ theme }); + export const getComponentStyle = componentName => themeGet(`styles.${componentName}`, {}); export const getVariantStyles = (componentName, variant) => themeGet(`variants.${componentName}.${variant}.style`, {}); From cfe21949ce97972f5bc6bbf892fe8e8c8188f1ac Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Tue, 20 Aug 2019 16:32:17 -0500 Subject: [PATCH 28/35] Remove button outline, Clean up prop variable --- src/Button/Button.js | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 24458e5..9e7feb0 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -78,7 +78,6 @@ const StyledButton = createComponent({ border-width: 1px; transition: 175ms; white-space: nowrap; - outline: none; user-select: none; ${icon && @@ -145,18 +144,14 @@ const StyledButton = createComponent({ }, }); -const Button = React.forwardRef((props, ref) => { - const hasText = !!props.children; - - return ( - - - {props.icon} - {props.children} - - - ); -}); +const Button = React.forwardRef((props, ref) => ( + + + {props.icon} + {props.children} + + +)); Button.propTypes = { variant: PropTypes.string, From 67c9b5ab637064971d95b6b91fe4735653b89984 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Tue, 20 Aug 2019 16:33:58 -0500 Subject: [PATCH 29/35] Update snapshot --- src/Dropdown/__snapshots__/Dropdown.spec.js.snap | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index 2407b90..9c23eab 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -47,7 +47,6 @@ exports[` only renders trigger on mount 1`] = ` -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; - outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -151,7 +150,6 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; - outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; From 24ab262e74db2a265c02412b577a6da34ddfa839 Mon Sep 17 00:00:00 2001 From: Jaden Lemmon Date: Tue, 20 Aug 2019 17:08:21 -0500 Subject: [PATCH 30/35] Update button icon support --- src/Button/Button.js | 48 +++++++++++++++++++++++++++++++++++-------- src/Button/Button.mdx | 13 ++++++------ 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/src/Button/Button.js b/src/Button/Button.js index 9e7feb0..6dfb357 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -4,6 +4,7 @@ import { css, keyframes } from 'styled-components'; import { space } from 'styled-system'; import { getComponentVariant, getComponentSize, createComponent } from '../utils'; import Flex from '../Flex'; +import Icon from '../Icon'; const spinKeyframes = keyframes` from { @@ -44,7 +45,20 @@ const loadingCss = ({ height, borderColor, fontColor, backgroundColor, outline } const StyledButton = createComponent({ name: 'Button', tag: 'button', - style: ({ hasText, icon, variant, size, theme, block, disabled, loading, text, outline, borderRadius }) => { + style: ({ + hasText, + leftIcon, + rightIcon, + variant, + size, + theme, + block, + disabled, + loading, + text, + outline, + borderRadius, + }) => { const { textColor, borderColor, @@ -80,16 +94,22 @@ const StyledButton = createComponent({ white-space: nowrap; user-select: none; - ${icon && + ${leftIcon && hasText && css` - padding-left: 8px; - i { padding-right: 4px; } `} + ${rightIcon && + hasText && + css` + i { + padding-left: 4px; + } + `} + ${loading && loadingCss({ height, fontColor, backgroundColor, borderColor, outline })}; &:hover { @@ -144,11 +164,14 @@ const StyledButton = createComponent({ }, }); -const Button = React.forwardRef((props, ref) => ( - +const renderIcon = (icon, props) => ; + +const Button = React.forwardRef(({ children, leftIcon, leftIconProps, rightIcon, rightIconProps, ...rest }, ref) => ( + - {props.icon} - {props.children} + {leftIcon && renderIcon(leftIcon, leftIconProps)} + {children} + {rightIcon && renderIcon(rightIcon, rightIconProps)} )); @@ -160,8 +183,11 @@ Button.propTypes = { block: PropTypes.bool, disabled: PropTypes.bool, loading: PropTypes.bool, - icon: PropTypes.element, text: PropTypes.bool, + leftIcon: PropTypes.string, + leftIconProps: PropTypes.object, + rightIcon: PropTypes.string, + rightIconProps: PropTypes.object, }; Button.defaultProps = { @@ -172,6 +198,10 @@ Button.defaultProps = { disabled: false, loading: false, text: false, + leftIcon: false, + leftIconProps: {}, + rightIcon: false, + rightIconProps: {}, }; const verticalCss = ({ sizes, vertical, borderRadius }) => { diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx index 228c3f8..978ec18 100644 --- a/src/Button/Button.mdx +++ b/src/Button/Button.mdx @@ -41,18 +41,19 @@ Use the `text` prop to use a Text Button. ## With Icon -Buttons may contain an icon by passing an icon prop. +Buttons may contain a `leftIcon` or `rightIcon` prop. Additional props may be passed via `leftIconProps` or `rightIconProps`. - - + + + + ## Groups Button groups provide an easy way to horizontally layout a row of buttons. - @@ -61,8 +62,8 @@ Button groups provide an easy way to horizontally layout a row of buttons. - - - - - -## Text - -Use the `text` prop to use a Text Button. - - - - - - - + + + @@ -45,8 +34,6 @@ Buttons may contain a `leftIcon` or `rightIcon` prop. Additional props may be pa - - @@ -146,6 +133,6 @@ Add the `loading` prop for loading button state style. - + diff --git a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap index 9c23eab..cdc66bb 100644 --- a/src/Dropdown/__snapshots__/Dropdown.spec.js.snap +++ b/src/Dropdown/__snapshots__/Dropdown.spec.js.snap @@ -22,28 +22,21 @@ exports[` only renders trigger on mount 1`] = ` } .c1 { - font-family: inherit; display: inline-block; - text-align: center; cursor: pointer; text-transform: capitalize; - font-weight: bold; + text-align: center; -webkit-text-decoration: none; text-decoration: none; + font-family: inherit; + font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; pointer-events: auto; - color: #FFFFFF; - height: 40px; - padding: 0 16px; - font-size: 16px; width: auto; - background: #226EFF; - border-color: #226EFF; - border-style: solid; - border-width: 1px; + border: 1px solid transparent; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; @@ -51,34 +44,28 @@ exports[` only renders trigger on mount 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + background-color: #226EFF; + color: #FFFFFF; + font-size: 16px; + height: 40px; + padding: 0 16px; +} + +.c1[disabled] { + pointer-events: none; + opacity: 0.75; } .c1:hover { - background-color: #226EFF; - border-color: #226EFF; - color: #FFFFFF; background-color: #4D89FF; - border-color: #4D89FF; - color: #FFFFFF; } .c1:active { - background: #226EFF; - border-color: #226EFF; - color: #FFFFFF; background-color: #0958F3; - border-color: #0958F3; - color: #FFFFFF; } -.c1[disabled] { - pointer-events: none; - background: #226EFF; - border-color: #226EFF; - color: #FFFFFF; +.c1:disabled { background-color: #CADCFF; - border-color: #CADCFF; - color: #FFFFFF; }
opens menu with focus when trigger is clicked 1`] = ` } .c1 { - font-family: inherit; display: inline-block; - text-align: center; cursor: pointer; text-transform: capitalize; - font-weight: bold; + text-align: center; -webkit-text-decoration: none; text-decoration: none; + font-family: inherit; + font-weight: bold; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; pointer-events: auto; - color: #FFFFFF; - height: 40px; - padding: 0 16px; - font-size: 16px; width: auto; - background: #226EFF; - border-color: #226EFF; - border-style: solid; - border-width: 1px; + border: 1px solid transparent; -webkit-transition: 175ms; transition: 175ms; white-space: nowrap; @@ -154,34 +134,28 @@ exports[` opens menu with focus when trigger is clicked 1`] = ` -moz-user-select: none; -ms-user-select: none; user-select: none; + background-color: #226EFF; + color: #FFFFFF; + font-size: 16px; + height: 40px; + padding: 0 16px; +} + +.c1[disabled] { + pointer-events: none; + opacity: 0.75; } .c1:hover { - background-color: #226EFF; - border-color: #226EFF; - color: #FFFFFF; background-color: #4D89FF; - border-color: #4D89FF; - color: #FFFFFF; } .c1:active { - background: #226EFF; - border-color: #226EFF; - color: #FFFFFF; background-color: #0958F3; - border-color: #0958F3; - color: #FFFFFF; } -.c1[disabled] { - pointer-events: none; - background: #226EFF; - border-color: #226EFF; - color: #FFFFFF; +.c1:disabled { background-color: #CADCFF; - border-color: #CADCFF; - color: #FFFFFF; }
{ const buttonVariants = { primary: { backgroundColor: colors.primary, - fontColor: colors.white, - hover: { + color: colors.white, + '&:hover': { backgroundColor: colors.primaryLight, }, - active: { + '&:active': { backgroundColor: colors.primaryDark, }, - disabled: { + '&:disabled': { backgroundColor: colors.primaryLightest, }, }, + primaryText: { + backgroundColor: 'transparent', + borderColor: 'transparent', + color: colors.primary, + '&:hover': { + color: colors.primaryDark, + }, + }, secondary: { backgroundColor: colors.white, - fontColor: colors.primary, borderColor: colors.primary, - textColor: colors.primary, - hover: { + color: colors.primary, + '&:hover': { backgroundColor: colors.primary, - fontColor: colors.white, + color: colors.white, }, - active: { + '&:active': { backgroundColor: colors.primaryDark, - fontColor: colors.white, + color: colors.white, }, - disabled: { - fontColor: colors.primaryLightest, + '&:disabled': { borderColor: colors.primaryLightest, + color: colors.primaryLightest, }, }, grey: { backgroundColor: colors.white, - fontColor: colors.greyDarkest, borderColor: colors.grey, - textColor: colors.greyDarkest, - hover: { + color: colors.greyDarkest, + '&:hover': { borderColor: colors.greyDark, }, - active: { + '&:active': { backgroundColor: colors.greyLight, }, - disabled: { - fontColor: colors.grey, + '&:disabled': { borderColor: colors.grey, + color: colors.grey, + }, + }, + greyText: { + backgroundColor: 'transparent', + borderColor: 'transparent', + color: colors.grey, + '&:hover': { + color: colors.greyDark, }, }, success: { + color: colors.white, backgroundColor: colors.secondary, - fontColor: colors.white, - hover: { + '&:hover': { backgroundColor: colors.secondaryLight, }, - active: { + '&:active': { backgroundColor: colors.secondaryDark, }, - disabled: { + '&:disabled': { backgroundColor: colors.secondaryLightest, }, }, warning: { backgroundColor: colors.orange, - fontColor: colors.white, - hover: { + color: colors.white, + '&:hover': { backgroundColor: colors.orangeLight, }, - active: { + '&:active': { backgroundColor: colors.orangeDark, }, - disabled: { + '&:disabled': { backgroundColor: colors.orangeLightest, }, }, danger: { backgroundColor: colors.red, - fontColor: colors.white, - hover: { + color: colors.white, + '&:hover': { backgroundColor: colors.redLight, }, - active: { + '&:active': { backgroundColor: colors.redDark, }, - disabled: { + '&:disabled': { backgroundColor: colors.redLightest, }, }, info: { backgroundColor: colors.blue, - fontColor: colors.white, + color: colors.white, }, }; const badgeVariants = { primary: { backgroundColor: colors.primaryLightest, - fontColor: colors.primaryDark, + color: colors.primaryDark, }, success: { backgroundColor: colors.greenLightest, - fontColor: colors.greenDark, + color: colors.greenDark, }, danger: { backgroundColor: colors.redLightest, - fontColor: colors.redDark, + color: colors.redDark, }, warning: { backgroundColor: colors.orangeLightest, - fontColor: colors.orangeDark, + color: colors.orangeDark, }, info: { backgroundColor: colors.blueLightest, - fontColor: colors.blueDark, + color: colors.blueDark, }, grey: { backgroundColor: colors.greyLight, - fontColor: colors.greyDarker, + color: colors.greyDarker, }, }; @@ -236,31 +250,34 @@ export default (overrides = {}) => { sm: { fontSize: 14, height: 32, + padding: '0 12px', }, md: { fontSize: 16, height: 40, + padding: '0 16px', }, lg: { fontSize: 16, height: 48, + padding: '0 20px', }, }, Badge: { sm: { fontSize: 12, - paddingVertical: 4, - paddingHorizontal: 8, + borderRadius: 12, + padding: '4px 8px', }, md: { fontSize: 14, - paddingVertical: 5, - paddingHorizontal: 10, + borderRadius: 14, + padding: '5px 10px', }, lg: { fontSize: 16, - paddingVertical: 6, - paddingHorizontal: 12, + borderRadius: 16, + padding: '6px 12px', }, }, },