diff --git a/README.md b/README.md index cb5e9c35..97d30bc0 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,11 @@ class Example extends Component { ## Change log +### 0.12.0 + +🚀 New Feature +- Updated all components to `styled-system` v5. + ### 0.11.1 🐛 Bug Fix @@ -42,7 +47,6 @@ class Example extends Component { - fixed display prop not rendering correctly for `Icon` component. #380 - fixed disabled styling for `Slider` component. #414 - ### 0.11.0 🚀 New Feature diff --git a/demo/public/index.html b/demo/public/index.html index a146b6fd..a3a5085b 100644 --- a/demo/public/index.html +++ b/demo/public/index.html @@ -25,6 +25,7 @@ Learn how to configure a non-root public URL by running `npm run build`. --> React App + diff --git a/demo/src/App.js b/demo/src/App.js index 4fa465c6..ea56ffd1 100644 --- a/demo/src/App.js +++ b/demo/src/App.js @@ -36,6 +36,7 @@ import { theme, } from 'rimble-ui'; +import TestForm from './components/TestForm'; import BaseLineGrid from './components/BaseLineGrid'; const testTheme = { @@ -45,6 +46,12 @@ const testTheme = { text: 'black', background: 'white', primary: 'crimson', + 'primary-light': 'red', + 'primary-dark': 'darkred', + success: 'green', + warning: 'orange', + danger: 'orangered', + info: 'blue', }, }; @@ -123,7 +130,10 @@ const testComponents = props => ( textLabels address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" /> - + + + + @@ -142,7 +152,7 @@ const testComponents = props => ( spotcolor: '#4E3FCE', }} /> - + @@ -212,7 +222,48 @@ const testComponents = props => ( - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Heading @@ -222,10 +273,12 @@ const testComponents = props => ( delectus architecto nemo quos alias sunt voluptate impedit, facilis sequi tempore. Amet! - - Cancel + + + Cancel + Skip + - @@ -247,33 +300,12 @@ const testComponents = props => ( - - {'Pending'} - - - {'Pending'} - - - - {'Pending'} - - - {'Pending'} - - - - {'Pending'} - - - {'Pending'} - - - - {'Pending'} - - - {'Pending'} - + {'Pill Text'} + {'Pill Text'} + {'Pill Text'} + {'Pill Text'} + {'Pill Text'} + {'Pill Text'} I am a Flash with a Link diff --git a/demo/src/components/TestForm.js b/demo/src/components/TestForm.js new file mode 100644 index 00000000..933c4795 --- /dev/null +++ b/demo/src/components/TestForm.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import { Form, Button } from 'rimble-ui'; + +class TestForm extends Component { + constructor(props) { + super(props); + this.state = { validated: false }; + } + + handleSubmit = e => { + e.preventDefault(); + this.setState({ validated: true }); + }; + + handleValidation = e => { + e.target.parentNode.classList.add('was-validated'); + }; + + render() { + return ( +
+ + + + + + + + + + + + ); + } +} + +export default TestForm; diff --git a/package.json b/package.json index 874bd954..3b6dca21 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rimble-ui", - "version": "0.11.1", + "version": "0.12.0", "description": "Rimble Design System react component library.", "author": "ConsenSys Design", "homepage": "https://rimble.consensys.design/", @@ -23,6 +23,8 @@ }, "dependencies": { "@d8660091/react-popper": "^1.0.4", + "@styled-system/prop-types": "^5.1.2", + "@styled-system/theme-get": "^5.1.2", "@svgr/rollup": "^4.2.0", "clipboard": "^2.0.4", "ethereum-blockies": "^0.1.1", @@ -31,7 +33,7 @@ "qrcode.react": "^0.9.3", "rmdi": "^1.0.1", "set-value": "^3.0.1", - "styled-system": "^4.1.0" + "styled-system": "^5.1.2" }, "peerDependencies": { "prop-types": "^15.7.2", diff --git a/src/Avatar/__snapshots__/Avatar.test.js.snap b/src/Avatar/__snapshots__/Avatar.test.js.snap index b16f343c..c2ba14ca 100644 --- a/src/Avatar/__snapshots__/Avatar.test.js.snap +++ b/src/Avatar/__snapshots__/Avatar.test.js.snap @@ -2,13 +2,10 @@ exports[`Avatar component sanity matches default snapshot 1`] = ` .c0 { - background-color: #CCC; + box-sizing: border-box; width: 2rem; height: 2rem; -} - -.c0 { - box-sizing: border-box; + background-color: #CCC; } .c1 { @@ -30,13 +27,10 @@ exports[`Avatar component sanity matches default snapshot 1`] = ` exports[`Avatar component sanity matches themed snapshot 1`] = ` .c0 { - background-color: #CCC; + box-sizing: border-box; width: 2rem; height: 2rem; -} - -.c0 { - box-sizing: border-box; + background-color: #CCC; } .c1 { diff --git a/src/BaseStyles.js b/src/BaseStyles.js index 080b1bda..37758592 100644 --- a/src/BaseStyles.js +++ b/src/BaseStyles.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled, { createGlobalStyle } from 'styled-components'; -import { themeGet } from 'styled-system'; +import { compose, color, typography } from 'styled-system'; +import propTypes from '@styled-system/prop-types'; +import { themeGet } from '@styled-system/theme-get'; import { normalize } from 'polished'; -import { TYPOGRAPHY, COMMON } from './constants'; import theme from './theme'; const GlobalStyle = createGlobalStyle` @@ -47,9 +48,13 @@ const Base = ({ children, ...rest }) => { ); }; +const styleProps = compose( + color, + typography +); + const BaseStyles = styled(Base)` - ${TYPOGRAPHY}; - ${COMMON}; + ${styleProps} `; BaseStyles.defaultProps = { @@ -60,8 +65,7 @@ BaseStyles.defaultProps = { }; BaseStyles.propTypes = { - ...TYPOGRAPHY.propTypes, - ...COMMON.propTypes, + ...propTypes.styleProps, theme: PropTypes.object, }; diff --git a/src/Box/index.js b/src/Box/index.js index 083f752a..5fa4b946 100644 --- a/src/Box/index.js +++ b/src/Box/index.js @@ -1,21 +1,34 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { opacity } from 'styled-system'; -import { COMMON, LAYOUT, POSITION, FLEXBOX, BORDERS } from '../constants'; +import { + compose, + color, + space, + layout, + position, + flexbox, + border, + typography, + shadow, +} from 'styled-system'; +import propTypes from '@styled-system/prop-types'; import theme from '../theme'; -const StyledBox = styled.div` - & { - box-sizing: border-box; - } - - ${COMMON} - ${LAYOUT} - ${POSITION} - ${FLEXBOX} - ${BORDERS} - ${opacity} +const styleProps = compose( + color, + space, + layout, + position, + flexbox, + border, + typography, + shadow +); + +const StyledBox = styled('div')` + box-sizing: border-box; + ${styleProps} `; StyledBox.defaultProps = { @@ -27,14 +40,12 @@ const Box = React.forwardRef((props, ref) => ( )); Box.propTypes = { - ...COMMON.propTypes, - ...LAYOUT.propTypes, - ...POSITION.propTypes, - ...FLEXBOX.propTypes, - ...BORDERS.propTypes, + ...propTypes.styleProps, theme: PropTypes.object, }; Box.displayName = 'Box'; +export { StyledBox }; + export default Box; diff --git a/src/Button/BaseButton.js b/src/Button/BaseButton.js index 539efa62..de5990d9 100644 --- a/src/Button/BaseButton.js +++ b/src/Button/BaseButton.js @@ -2,8 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { buttonStyle, variant, style } from 'styled-system'; -import { COMMON, LAYOUT, POSITION, BORDERS, TYPOGRAPHY } from '../constants'; -import theme from '../theme'; +import { StyledBox } from '../Box'; import Icon from '../Icon'; const buttonSize = variant({ @@ -23,7 +22,7 @@ const contrastColor = style({ key: 'colors', }); -const StyledButton = styled('button')` +const StyledButton = styled(StyledBox)` & { -webkit-font-smoothing: antialiased; appearance: none; @@ -35,7 +34,6 @@ const StyledButton = styled('button')` display: inline-flex; align-items: center; justify-content: center; - padding: ${props => (props.icononly ? '0' : props.p)}; } @@ -76,18 +74,16 @@ const StyledButton = styled('button')` margin: 0; } - ${COMMON} - ${LAYOUT} - ${POSITION} - ${BORDERS} - ${TYPOGRAPHY} - ${mainColor} ${contrastColor} ${buttonStyle} ${buttonSize} `; +StyledButton.defaultProps = { + as: 'button', +}; + const ButtonBody = ({ children, icon, iconpos }) => { if (icon) { return ( @@ -107,18 +103,11 @@ const Button = React.forwardRef((props, ref) => { return ; }); -StyledButton.defaultProps = { - theme, -}; - Button.defaultProps = { // base props - // variant: 'primary', - // size: 'medium', position: 'relative', height: '3rem', minWidth: '3rem', - m: 0, px: 4, py: 0, fontSize: 'inherit', @@ -134,11 +123,6 @@ Button.defaultProps = { }; Button.propTypes = { - ...COMMON.propTypes, - ...LAYOUT.propTypes, - ...POSITION.propTypes, - ...BORDERS.propTypes, - ...TYPOGRAPHY.propTypes, /** * Sets theme */ diff --git a/src/Button/__snapshots__/Button.test.js.snap b/src/Button/__snapshots__/Button.test.js.snap index 68be9573..1e823960 100644 --- a/src/Button/__snapshots__/Button.test.js.snap +++ b/src/Button/__snapshots__/Button.test.js.snap @@ -2,34 +2,31 @@ exports[`Button Icon component sanity matches default snapshot 1`] = ` .c1 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -173,34 +170,31 @@ exports[`Button Icon component sanity matches default snapshot 1`] = ` exports[`Button Icon component sanity matches themed snapshot 1`] = ` .c1 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -344,34 +338,31 @@ exports[`Button Icon component sanity matches themed snapshot 1`] = ` exports[`Button Icon only component sanity matches default snapshot 1`] = ` .c1 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -516,34 +507,31 @@ exports[`Button Icon only component sanity matches default snapshot 1`] = ` exports[`Button Icon with position prop component sanity matches default snapshot 1`] = ` .c1 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -687,23 +675,23 @@ exports[`Button Icon with position prop component sanity matches default snapsho exports[`Button component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -834,23 +822,23 @@ exports[`Button component sanity matches default snapshot 1`] = ` exports[`Button component sanity matches themed snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -981,23 +969,23 @@ exports[`Button component sanity matches themed snapshot 1`] = ` exports[`Button disabled component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -1129,23 +1117,23 @@ exports[`Button disabled component sanity matches default snapshot 1`] = ` exports[`Button disabled component sanity matches themed snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -1277,24 +1265,24 @@ exports[`Button disabled component sanity matches themed snapshot 1`] = ` exports[`Button size variant component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1429,24 +1417,24 @@ exports[`Button size variant component sanity matches default snapshot 1`] = ` exports[`Button size variant component sanity matches default snapshot 2`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: large; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 1.5rem; @@ -1580,24 +1568,24 @@ exports[`Button size variant component sanity matches default snapshot 2`] = ` exports[`Button size variant component sanity matches themed snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1732,24 +1720,24 @@ exports[`Button size variant component sanity matches themed snapshot 1`] = ` exports[`Button size variant component sanity matches themed snapshot 2`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: large; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 1.5rem; @@ -1883,24 +1871,24 @@ exports[`Button size variant component sanity matches themed snapshot 2`] = ` exports[`Button.Outline component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: 1px solid transparent; - border-color: #CCC; - border-radius: 4px; - box-shadow: 0; - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0; + border-color: #CCC; --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2056,24 +2044,24 @@ exports[`Button.Outline component sanity matches default snapshot 1`] = ` exports[`Button.Outline component sanity matches themed snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: 1px solid transparent; - border-color: #CCC; - border-radius: 4px; - box-shadow: 0; - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0; + border-color: #CCC; --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2229,21 +2217,21 @@ exports[`Button.Outline component sanity matches themed snapshot 1`] = ` exports[`Button.Text component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 8px; - padding-right: 8px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2360,21 +2348,21 @@ exports[`Button.Text component sanity matches default snapshot 1`] = ` exports[`Button.Text component sanity matches themed snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 8px; - padding-right: 8px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 8px; + padding-right: 8px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2491,24 +2479,24 @@ exports[`Button.Text component sanity matches themed snapshot 1`] = ` exports[`Link Button Outline component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: 1px solid transparent; - border-color: #CCC; - border-radius: 4px; - box-shadow: 0; - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0; + border-color: #CCC; --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2669,23 +2657,23 @@ exports[`Link Button Outline component sanity matches default snapshot 1`] = ` exports[`Link Button component sanity matches default snapshot 1`] = ` .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -2821,34 +2809,31 @@ exports[`Link Button component sanity matches default snapshot 1`] = ` exports[`Loading Button component sanity matches default snapshot 1`] = ` .c1 { + box-sizing: border-box; color: #fff; background-color: transparent; width: 1rem; height: 1rem; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } @@ -3041,34 +3026,31 @@ exports[`Loading Button component sanity matches default snapshot 1`] = ` exports[`Loading Button component sanity matches default snapshot 2`] = ` .c1 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c1 { - box-sizing: border-box; -} - .c0 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; + position: relative; height: 3rem; min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; } diff --git a/src/Card/__snapshots__/Card.test.js.snap b/src/Card/__snapshots__/Card.test.js.snap index 96396df2..14ef7cff 100644 --- a/src/Card/__snapshots__/Card.test.js.snap +++ b/src/Card/__snapshots__/Card.test.js.snap @@ -2,16 +2,13 @@ exports[`Card component sanity matches default snapshot 1`] = ` .c0 { - background-color: #fff; - padding: 32px; + box-sizing: border-box; position: relative; + background-color: #fff; border: 1px solid transparent; border-color: #eee; box-shadow: 0px 8px 16px rgba(0,0,0,0.1); -} - -.c0 { - box-sizing: border-box; + padding: 32px; }
@@ -138,7 +127,7 @@ exports[`Checkbox component sanity matches default snapshot 1`] = ` exports[`Checkbox component sanity matches themed snapshot 1`] = ` .c0 { - color: #4E3FCE; + box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -147,32 +136,22 @@ exports[`Checkbox component sanity matches themed snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; + color: #4E3FCE; opacity: 1; } -.c0 { - box-sizing: border-box; -} - .c2 { box-sizing: border-box; } -.c4 { - color: #3F3D4B; - margin-left: 4px; - margin-right: 8px; -} - .c4 { box-sizing: border-box; -} - -.c5 { - font-family: "Source Sans Pro",-apple-system,sans-serif; + color: #3F3D4B; font-size: 14px; font-weight: 600; line-height: 1; + margin-left: 4px; + margin-right: 8px; } .c3 { @@ -263,9 +242,8 @@ exports[`Checkbox component sanity matches themed snapshot 1`] = `
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js index aee7bc82..820d73b4 100644 --- a/src/Checkbox/index.js +++ b/src/Checkbox/index.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { themeGet } from 'styled-system'; +import { themeGet } from '@styled-system/theme-get'; import IconChecked from 'rmdi/lib/CheckBox'; import IconUnChecked from 'rmdi/lib/CheckBoxOutlineBlank'; import Box from '../Box'; diff --git a/src/EthAddress/__snapshots__/EthAddress.test.js.snap b/src/EthAddress/__snapshots__/EthAddress.test.js.snap index f5c82da6..dee7949e 100644 --- a/src/EthAddress/__snapshots__/EthAddress.test.js.snap +++ b/src/EthAddress/__snapshots__/EthAddress.test.js.snap @@ -6,50 +6,44 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` } .c4 { + box-sizing: border-box; + position: absolute; + right: 0; margin-right: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - position: absolute; - right: 0; -} - -.c4 { - box-sizing: border-box; } .c6 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c6 { - box-sizing: border-box; -} - .c5 { - color: #fff; - background-color: #999; - margin: 0; - padding: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; + padding: 0; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -170,26 +164,26 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` } .c7 { - color: #fff; - background-color: #999; - margin: 0; + box-sizing: border-box; + width: small; + height: 3rem; margin-left: 8px; padding: 0; - padding-top: 0; - padding-bottom: 0; + position: relative; + min-width: 3rem; padding-left: 32px; padding-right: 32px; - width: small; - height: 3rem; - min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -310,27 +304,27 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` } .c2 { + box-sizing: border-box; + width: 100%; + font-weight: 600; + padding: auto; + padding-left: 16px; + padding-right: 6rem; color: #3F3D4B; background-color: #fff; - padding: 16px; - padding-right: 6rem; - width: 100%; + font-size: 1rem; + line-height: initial; height: 3rem; border: 1px solid transparent; - border-color: #CCC; + border-color: #ccc; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; - font-size: 1rem; - font-weight: 600; - line-height: 1; } .c2 { -webkit-appearance: none; -moz-appearance: none; appearance: none; - box-sizing: border-box; } .c2:hover { @@ -391,6 +385,7 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` .was-validated .c2:valid ~ svg.icon-valid { visibility: visible; + color: #28C081; } .was-validated .c2:invalid { @@ -399,6 +394,7 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` .was-validated .c2:invalid ~ svg.icon-invalid { visibility: visible; + color: #DC2C10; } .c3 { @@ -429,7 +425,6 @@ exports[`EthAddress component sanity matches default snapshot 1`] = ` aria-label="Ethereum Address" class="c2 c3" color="text" - font-family="sansSerif" font-size="1rem" font-weight="3" height="3rem" @@ -512,38 +507,35 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` } .c4 { + box-sizing: border-box; + position: absolute; + right: 0; margin-right: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - position: absolute; - right: 0; -} - -.c4 { - box-sizing: border-box; } .c5 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -663,25 +655,25 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` } .c6 { - color: #fff; - background-color: #999; - margin: 0; - margin-left: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; + margin-left: 8px; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -801,27 +793,27 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` } .c2 { + box-sizing: border-box; + width: 100%; + font-weight: 600; + padding: auto; + padding-left: 16px; + padding-right: 12rem; color: #3F3D4B; background-color: #fff; - padding: 16px; - padding-right: 13rem; - width: 100%; + font-size: 1rem; + line-height: initial; height: 3rem; border: 1px solid transparent; - border-color: #CCC; + border-color: #ccc; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; - font-size: 1rem; - font-weight: 600; - line-height: 1; } .c2 { -webkit-appearance: none; -moz-appearance: none; appearance: none; - box-sizing: border-box; } .c2:hover { @@ -882,6 +874,7 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` .was-validated .c2:valid ~ svg.icon-valid { visibility: visible; + color: #28C081; } .was-validated .c2:invalid { @@ -890,6 +883,7 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` .was-validated .c2:invalid ~ svg.icon-invalid { visibility: visible; + color: #DC2C10; } .c3 { @@ -920,7 +914,6 @@ exports[`EthAddress component sanity matches default snapshot textLabels 1`] = ` aria-label="Ethereum Address" class="c2 c3" color="text" - font-family="sansSerif" font-size="1rem" font-weight="3" height="3rem" @@ -973,50 +966,44 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` } .c4 { + box-sizing: border-box; + position: absolute; + right: 0; margin-right: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - position: absolute; - right: 0; -} - -.c4 { - box-sizing: border-box; } .c6 { + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } -.c6 { - box-sizing: border-box; -} - .c5 { - color: #fff; - background-color: #999; - margin: 0; - padding: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; + padding: 0; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1137,26 +1124,26 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` } .c7 { - color: #fff; - background-color: #999; - margin: 0; + box-sizing: border-box; + width: small; + height: 3rem; margin-left: 8px; padding: 0; - padding-top: 0; - padding-bottom: 0; + position: relative; + min-width: 3rem; padding-left: 32px; padding-right: 32px; - width: small; - height: 3rem; - min-width: 3rem; - position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1277,27 +1264,27 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` } .c2 { + box-sizing: border-box; + width: 100%; + font-weight: 600; + padding: auto; + padding-left: 16px; + padding-right: 6rem; color: #3F3D4B; background-color: #fff; - padding: 16px; - padding-right: 6rem; - width: 100%; + font-size: 1rem; + line-height: initial; height: 3rem; border: 1px solid transparent; - border-color: #CCC; + border-color: #ccc; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; - font-size: 1rem; - font-weight: 600; - line-height: 1; } .c2 { -webkit-appearance: none; -moz-appearance: none; appearance: none; - box-sizing: border-box; } .c2:hover { @@ -1358,6 +1345,7 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` .was-validated .c2:valid ~ svg.icon-valid { visibility: visible; + color: #28C081; } .was-validated .c2:invalid { @@ -1366,6 +1354,7 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` .was-validated .c2:invalid ~ svg.icon-invalid { visibility: visible; + color: #DC2C10; } .c3 { @@ -1396,7 +1385,6 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = ` aria-label="Ethereum Address" class="c2 c3" color="text" - font-family="sansSerif" font-size="1rem" font-weight="3" height="3rem" @@ -1479,38 +1467,35 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` } .c4 { + box-sizing: border-box; + position: absolute; + right: 0; margin-right: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - position: absolute; - right: 0; -} - -.c4 { - box-sizing: border-box; } .c5 { - color: #fff; - background-color: #999; - margin: 0; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1630,25 +1615,25 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` } .c6 { - color: #fff; - background-color: #999; - margin: 0; - margin-left: 8px; - padding-top: 0; - padding-bottom: 0; - padding-left: 32px; - padding-right: 32px; + box-sizing: border-box; width: small; height: 3rem; - min-width: 3rem; + margin-left: 8px; position: relative; - border: none; - border-radius: 4px; - box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; + min-width: 3rem; + padding-left: 32px; + padding-right: 32px; + padding-top: 0; + padding-bottom: 0; font-size: inherit; + font-family: "Source Sans Pro",-apple-system,sans-serif; font-weight: 600; line-height: 1; + color: #fff; + background-color: #999; + border: none; + border-radius: 4px; + box-shadow: 0px 2px 4px rgba(0,0,0,0.1); --main-color: #4E3FCE; --contrast-color: #fff; font-size: 0.75rem; @@ -1768,27 +1753,27 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` } .c2 { + box-sizing: border-box; + width: 100%; + font-weight: 600; + padding: auto; + padding-left: 16px; + padding-right: 12rem; color: #3F3D4B; background-color: #fff; - padding: 16px; - padding-right: 13rem; - width: 100%; + font-size: 1rem; + line-height: initial; height: 3rem; border: 1px solid transparent; - border-color: #CCC; + border-color: #ccc; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; - font-size: 1rem; - font-weight: 600; - line-height: 1; } .c2 { -webkit-appearance: none; -moz-appearance: none; appearance: none; - box-sizing: border-box; } .c2:hover { @@ -1849,6 +1834,7 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` .was-validated .c2:valid ~ svg.icon-valid { visibility: visible; + color: #28C081; } .was-validated .c2:invalid { @@ -1857,6 +1843,7 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` .was-validated .c2:invalid ~ svg.icon-invalid { visibility: visible; + color: #DC2C10; } .c3 { @@ -1887,7 +1874,6 @@ exports[`EthAddress component sanity matches themed snapshot textLabels 1`] = ` aria-label="Ethereum Address" class="c2 c3" color="text" - font-family="sansSerif" font-size="1rem" font-weight="3" height="3rem" diff --git a/src/EthAddress/index.js b/src/EthAddress/index.js index 503611ab..3e1c3159 100644 --- a/src/EthAddress/index.js +++ b/src/EthAddress/index.js @@ -55,8 +55,7 @@ const AddressQrModal = ({ isOpen, hide, address }) => { { readOnly value={address} width={1} + p={'auto'} + pl={3} pr={'5rem'} fontWeight={3} /> @@ -212,7 +213,9 @@ class EthAddress extends Component { ref={this.inputRef} width={1} fontWeight={3} - pr={this.props.textLabels ? '13rem' : '6rem'} + p={'auto'} + pl={3} + pr={this.props.textLabels ? '12rem' : '6rem'} /> diff --git a/src/Field/__snapshots__/Field.test.js.snap b/src/Field/__snapshots__/Field.test.js.snap index 6db4cf5c..b09a05db 100644 --- a/src/Field/__snapshots__/Field.test.js.snap +++ b/src/Field/__snapshots__/Field.test.js.snap @@ -2,7 +2,7 @@ exports[`Field component sanity matches default snapshot 1`] = ` .c0 { - margin-bottom: 16px; + box-sizing: border-box; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -14,74 +14,63 @@ exports[`Field component sanity matches default snapshot 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; -} - -.c0 { - box-sizing: border-box; -} - -.c1 { - margin-bottom: 8px; + margin-bottom: 16px; } .c1 { box-sizing: border-box; -} - -.c2 { - font-family: "Source Sans Pro",-apple-system,sans-serif; font-size: 14px; font-weight: 600; + margin-bottom: 8px; line-height: 1.5; } -.c3:after { +.c2:after { content: ' (optional)'; font-weight: normal; font-style: italic; } -.c4 { +.c3 { + box-sizing: border-box; color: #3F3D4B; background-color: #fff; - padding: 16px; + font-size: 1rem; + line-height: initial; height: 3rem; + padding: 16px; border: 1px solid transparent; - border-color: #CCC; + border-color: #ccc; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); - font-family: "Source Sans Pro",-apple-system,sans-serif; - font-size: 1rem; - line-height: 1; } -.c4 { +.c3 { -webkit-appearance: none; -moz-appearance: none; appearance: none; - box-sizing: border-box; } -.c4:hover { +.c3:hover { box-shadow: 0px 2px 6px rgba(0,0,0,0.3); } -.c4:focus { +.c3:focus { outline: none; border-color: #4E3FCE; } -.c4:disabled { +.c3:disabled { opacity: 0.4; pointer-events: none; } -.c4[type="color"] { +.c3[type="color"] { min-width: 3rem; padding: 0; } -.c4[type="color"]::-webkit-color-swatch-wrapper { +.c3[type="color"]::-webkit-color-swatch-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -97,7 +86,7 @@ exports[`Field component sanity matches default snapshot 1`] = ` padding: 0; } -.c4[type="color"]::-webkit-color-swatch { +.c3[type="color"]::-webkit-color-swatch { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -107,27 +96,29 @@ exports[`Field component sanity matches default snapshot 1`] = ` border-radius: 100%; } -.c4[type="color"]::-moz-color-swatch { +.c3[type="color"]::-moz-color-swatch { height: 2rem; width: 2rem; border: none; border-radius: 100%; } -.was-validated .c4:valid { +.was-validated .c3:valid { border-color: #28C081; } -.was-validated .c4:valid ~ svg.icon-valid { +.was-validated .c3:valid ~ svg.icon-valid { visibility: visible; + color: #28C081; } -.was-validated .c4:invalid { +.was-validated .c3:invalid { border-color: #DC2C10; } -.was-validated .c4:invalid ~ svg.icon-invalid { +.was-validated .c3:invalid ~ svg.icon-invalid { visibility: visible; + color: #DC2C10; }