From 75ac667ea568305ee830e1ea03040636be9346ce Mon Sep 17 00:00:00 2001 From: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> Date: Thu, 10 Oct 2019 11:20:29 -0400 Subject: [PATCH 1/9] initial commit --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b8725b62..e5b5efe7 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ [![npm version](https://badge.fury.io/js/%40lightspeed%2Fflame.svg)](https://badge.fury.io/js/%40lightspeed%2Fflame) [![Circle CI status](https://circleci.com/gh/lightspeed/flame/tree/master.svg?style=shield)](https://circleci.com/gh/lightspeed/flame/tree/master) [![codecov](https://codecov.io/gh/lightspeed/flame/branch/master/graph/badge.svg)](https://codecov.io/gh/lightspeed/flame) +## 🚨 You are currently viewing the work in progress branch for Flame Mobile Friendliness 🚨 + ### Storybook For the deployed version of our development environment visit https://lightspeed-flame.netlify.com. From feae1a5f3a56ded8d2e500f5b80ce5ef488c0b9f Mon Sep 17 00:00:00 2001 From: Guillaume Lambert <24464151+glambert@users.noreply.github.com> Date: Wed, 16 Oct 2019 17:00:08 -0400 Subject: [PATCH 2/9] Add Storybook viewport addon --- .storybook/addons.js | 1 + .storybook/config.js | 23 +++++++ package.json | 1 + yarn.lock | 150 ++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 174 insertions(+), 1 deletion(-) diff --git a/.storybook/addons.js b/.storybook/addons.js index 7dc28b2a..1e650ab4 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -2,3 +2,4 @@ import '@storybook/addon-options/register'; import 'storybook-readme/register'; import '@storybook/addon-actions/register'; import '@storybook/addon-knobs/register'; +import '@storybook/addon-viewport/register'; diff --git a/.storybook/config.js b/.storybook/config.js index 16e4afcf..fd039d10 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -57,6 +57,29 @@ addParameters({ }, }); +addParameters({ + viewport: { + viewports: { + small: { + name: 'Small', + styles: { + width: '623px', + height: '100%', + }, + type: 'mobile', + }, + medium: { + name: 'Medium', + styles: { + width: '1023px', + height: '100%', + }, + type: 'tablet', + }, + }, + }, +}); + function loadStories() { /* eslint-disable global-require, import/no-unresolved, import/no-webpack-loader-syntax */ require('./require-stories!./empty'); diff --git a/package.json b/package.json index c0b74bc0..4f19eede 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "@storybook/addon-info": "^5.2.1", "@storybook/addon-knobs": "^5.2.1", "@storybook/addon-options": "^5.2.1", + "@storybook/addon-viewport": "^5.2.4", "@storybook/addons": "^5.2.1", "@storybook/react": "^5.2.1", "@testing-library/react": "^8.0.1", diff --git a/yarn.lock b/yarn.lock index e444da5e..3638c5b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2267,6 +2267,23 @@ core-js "^3.0.1" util-deprecate "^1.0.2" +"@storybook/addon-viewport@^5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-5.2.4.tgz#4d7dd0e8a84d249519effc224ee0c937cc3403ac" + integrity sha512-R49wSaiouSVBYeus5Xibv+XXX9Nc3/rZ1NB5yIgj658aDeuB8WgkHbM3dKd/GrWeVZWv3o4CjW81ernd3f8sdw== + dependencies: + "@storybook/addons" "5.2.4" + "@storybook/api" "5.2.4" + "@storybook/client-logger" "5.2.4" + "@storybook/components" "5.2.4" + "@storybook/core-events" "5.2.4" + "@storybook/theming" "5.2.4" + core-js "^3.0.1" + global "^4.3.2" + memoizerific "^1.11.3" + prop-types "^15.7.2" + util-deprecate "^1.0.2" + "@storybook/addons@5.2.1", "@storybook/addons@^5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.1.tgz#6e52aa1fa2737e170fb675eb1fcceebd0a915a0b" @@ -2280,6 +2297,19 @@ global "^4.3.2" util-deprecate "^1.0.2" +"@storybook/addons@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.4.tgz#5c4f031e403c90a517cd6d208ec51d7e2455683a" + integrity sha512-Q+bnVlBA308qnELxnh18hBDRSUgltR9KbV537285dUL/okv/NC6n51mxJwIaG+ksBW2wU+5e6tqSayaKF3uHLw== + dependencies: + "@storybook/api" "5.2.4" + "@storybook/channels" "5.2.4" + "@storybook/client-logger" "5.2.4" + "@storybook/core-events" "5.2.4" + core-js "^3.0.1" + global "^4.3.2" + util-deprecate "^1.0.2" + "@storybook/api@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.1.tgz#b9cd6639019e044a8ade6fb358cade79c0e3b5d3" @@ -2303,6 +2333,29 @@ telejson "^2.2.2" util-deprecate "^1.0.2" +"@storybook/api@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.4.tgz#b0b3dbd93444d163a80b455fb877d816a37b3149" + integrity sha512-KqAB+NkHIHdwu749NDP+7i44jy1bFgpq7GTJlG+sx/XLZHQveK/8yn109g9bXHFth7SvdXI1+9GA/apzwBU/Mw== + dependencies: + "@storybook/channels" "5.2.4" + "@storybook/client-logger" "5.2.4" + "@storybook/core-events" "5.2.4" + "@storybook/router" "5.2.4" + "@storybook/theming" "5.2.4" + core-js "^3.0.1" + fast-deep-equal "^2.0.1" + global "^4.3.2" + lodash "^4.17.11" + memoizerific "^1.11.3" + prop-types "^15.6.2" + react "^16.8.3" + semver "^6.0.0" + shallow-equal "^1.1.0" + store2 "^2.7.1" + telejson "^3.0.2" + util-deprecate "^1.0.2" + "@storybook/channel-postmessage@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.2.1.tgz#85541f926d61eedbe2a687bb394d37fc06252751" @@ -2321,6 +2374,13 @@ dependencies: core-js "^3.0.1" +"@storybook/channels@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.2.4.tgz#7ab5c9478517ddb9e8ac0c4188b408b9d7e6b7e4" + integrity sha512-/r39yEZ5QiGdiq95DhXBypdBo7urkD3Sp1WDyK48uGkZ0gdHWSPy3BBy8OJhEhfNz7nVisTiVIBr4gIrubKDjw== + dependencies: + core-js "^3.0.1" + "@storybook/client-api@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.2.1.tgz#bdd335187279a4ab45e20d6d5e9131e5f7098acf" @@ -2356,6 +2416,13 @@ dependencies: core-js "^3.0.1" +"@storybook/client-logger@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.4.tgz#6ebe37cbc92e0efe27c7119f52d94f647fbb470c" + integrity sha512-ofp6QQPQZBU+RvlAH5KpZRsfAFHecCZDnl/7YG6FwjHseJr3jHTYmBGGjJDMHFHq+Q7FGQu/yVb9lMFgoQ43QQ== + dependencies: + core-js "^3.0.1" + "@storybook/components@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.1.tgz#a4519c5d435c2c25c481e2b64a768e1e568a223f" @@ -2380,6 +2447,30 @@ react-textarea-autosize "^7.1.0" simplebar-react "^1.0.0-alpha.6" +"@storybook/components@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.4.tgz#9ecd080416eac4e8453030dd601cbeaa32ce4126" + integrity sha512-APhw+XGag0RTCRJ8eCWKVr8dLt9SRqnS8LtzcZJbokCYRxRTFzhmX2eVEE1v+d0gHib1/yh2COxOjMzv3m/rQA== + dependencies: + "@storybook/client-logger" "5.2.4" + "@storybook/theming" "5.2.4" + "@types/react-syntax-highlighter" "10.1.0" + core-js "^3.0.1" + global "^4.3.2" + markdown-to-jsx "^6.9.1" + memoizerific "^1.11.3" + polished "^3.3.1" + popper.js "^1.14.7" + prop-types "^15.7.2" + react "^16.8.3" + react-dom "^16.8.3" + react-focus-lock "^1.18.3" + react-helmet-async "^1.0.2" + react-popper-tooltip "^2.8.3" + react-syntax-highlighter "^8.0.1" + react-textarea-autosize "^7.1.0" + simplebar-react "^1.0.0-alpha.6" + "@storybook/components@^5.0.6": version "5.1.11" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.1.11.tgz#da253af0a8cb1b063c5c2e8016c4540c983f717d" @@ -2411,6 +2502,13 @@ dependencies: core-js "^3.0.1" +"@storybook/core-events@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.2.4.tgz#210c968e96e2fc031cad1d3a09b06fa69ae433fc" + integrity sha512-nQknCmaz2S2HW6PSGcuFzve7Y1Js2Cb268vUG0ZMNtJZwFawqYc+KSQHqmOY0pVm8dyROTcWCudPA0k+hk6N5Q== + dependencies: + core-js "^3.0.1" + "@storybook/core-events@^5.0.6": version "5.1.11" resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.1.11.tgz#9d00503a936d30398f7a64336eb956303d053765" @@ -2543,6 +2641,19 @@ memoizerific "^1.11.3" qs "^6.6.0" +"@storybook/router@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.4.tgz#e47af60478da7730c7d82de3d089d12c17077333" + integrity sha512-GL7eGdj5oYST0mE9fThJB9ye9tTTgrP+aP3okZ6MeMGtNytb7bmJRpAD2E4ouuPTQVppyHI5re8g/HUxUNOT1g== + dependencies: + "@reach/router" "^1.2.1" + "@types/reach__router" "^1.2.3" + core-js "^3.0.1" + global "^4.3.2" + lodash "^4.17.11" + memoizerific "^1.11.3" + qs "^6.6.0" + "@storybook/theming@5.1.11": version "5.1.11" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.1.11.tgz#0d1af46535f2e601293c999a314905069a93ec3b" @@ -2579,6 +2690,24 @@ prop-types "^15.7.2" resolve-from "^5.0.0" +"@storybook/theming@5.2.4": + version "5.2.4" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.4.tgz#79c99f65992082fdb4d39fb652db435dd6bebaca" + integrity sha512-2ZlqBrmnm8N0352Fnu2+GB3pEsHL4Eb2eKxV0VLLgkjJuAlm7CK6+I/e4ZknQWxwYm2pQj1y6ta68A62fGBYyA== + dependencies: + "@emotion/core" "^10.0.14" + "@emotion/styled" "^10.0.14" + "@storybook/client-logger" "5.2.4" + common-tags "^1.8.0" + core-js "^3.0.1" + deep-object-diff "^1.1.0" + emotion-theming "^10.0.14" + global "^4.3.2" + memoizerific "^1.11.3" + polished "^3.3.1" + prop-types "^15.7.2" + resolve-from "^5.0.0" + "@storybook/ui@5.2.1": version "5.2.1" resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.2.1.tgz#ceba1657a232efd10f839027f8ae274e370c89f6" @@ -2901,6 +3030,11 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a" integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw== +"@types/is-function@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83" + integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w== + "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff" @@ -8639,7 +8773,7 @@ global-prefix@^3.0.0: kind-of "^6.0.2" which "^1.3.1" -global@^4.3.2: +global@^4.3.2, global@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406" integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w== @@ -15927,6 +16061,20 @@ telejson@^2.2.2: lodash "^4.17.11" memoizerific "^1.11.3" +telejson@^3.0.2: + version "3.0.3" + resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.0.3.tgz#442af55f78d791d3744c9e7a696be6cdf789a4b5" + integrity sha512-gUOh6wox1zJjbGMg+e26NquZcp/F18EbIaqVvjiGqikRqVB4fYEAM8Nyin8smgwX30XhaRBOg+kCj4vInmvwAg== + dependencies: + "@types/is-function" "^1.0.0" + global "^4.4.0" + is-function "^1.0.1" + is-regex "^1.0.4" + is-symbol "^1.0.2" + isobject "^4.0.0" + lodash "^4.17.15" + memoizerific "^1.11.3" + temp-dir@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d" From 36a353afefcc587b2edeeefaf945b3203e911dc2 Mon Sep 17 00:00:00 2001 From: Guillaume Lambert <24464151+glambert@users.noreply.github.com> Date: Wed, 16 Oct 2019 17:07:57 -0400 Subject: [PATCH 3/9] Make viewport fit in window --- .storybook/config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index fd039d10..6a5d0cda 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -64,7 +64,7 @@ addParameters({ name: 'Small', styles: { width: '623px', - height: '100%', + height: '98%', }, type: 'mobile', }, @@ -72,7 +72,7 @@ addParameters({ name: 'Medium', styles: { width: '1023px', - height: '100%', + height: '98%', }, type: 'tablet', }, From 3a1bcc2246da23a7c22d2641ddb1c0e8703ec394 Mon Sep 17 00:00:00 2001 From: Guillaume Lambert <24464151+glambert@users.noreply.github.com> Date: Thu, 17 Oct 2019 10:08:30 -0400 Subject: [PATCH 4/9] Use common breakpoints from theme --- .storybook/config.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index 6a5d0cda..247fe270 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -3,6 +3,7 @@ import { configure, addDecorator, addParameters } from '@storybook/react'; import { Global } from '@emotion/core'; import { FlameTheme, FlameGlobalStyles, Box } from '../packages/flame/src/Core'; import { Select } from '../packages/flame/src/Select'; +import { commonTheme } from '../packages/flame-tokens/src/theme-ui/common'; class FlameStyling extends React.Component { constructor(props) { @@ -63,7 +64,7 @@ addParameters({ small: { name: 'Small', styles: { - width: '623px', + width: `${Number.parseInt(commonTheme.breakpoints[0].replace('px', ''), 10) - 1}px`, height: '98%', }, type: 'mobile', @@ -71,7 +72,7 @@ addParameters({ medium: { name: 'Medium', styles: { - width: '1023px', + width: `${Number.parseInt(commonTheme.breakpoints[1].replace('px', ''), 10) - 1}px`, height: '98%', }, type: 'tablet', From b10a25561d441973dd4c9ace40f034fa2c3f1156 Mon Sep 17 00:00:00 2001 From: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> Date: Thu, 17 Oct 2019 14:12:13 -0400 Subject: [PATCH 5/9] Better mobile responsiveness for Checkbox/Radio (#26) * Add responsive styled props and adjust based on specs * Update CHANGELOG.md * Slightly better lineheight * More fun typescript clashing * Update snapshots * Update CHANGELOG.md * Update CHANGELOG.md * Added percy configs as helpers * Fix description spacing for Checkbox/Radio * Update snapshots for Checkbox/Radio --- packages/flame/CHANGELOG.md | 6 + packages/flame/src/Checkbox/Checkbox.tsx | 27 +- .../__snapshots__/Checkbox.test.tsx.snap | 345 ++++++++++++++++-- packages/flame/src/Checkbox/story.tsx | 145 ++++---- packages/flame/src/Radio/Radio.tsx | 35 +- .../Radio/__snapshots__/Radio.test.tsx.snap | 293 ++++++++++++++- packages/flame/src/Radio/story.tsx | 149 ++++---- stories/helpers/percy.ts | 10 + 8 files changed, 803 insertions(+), 207 deletions(-) create mode 100644 stories/helpers/percy.ts diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md index 8f0725a5..c35c6764 100644 --- a/packages/flame/CHANGELOG.md +++ b/packages/flame/CHANGELOG.md @@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info. +## [Unreleased] + +### Added + +- Checkbox and Radio mobile view ([#26](https://github.com/lightspeed/flame/pull/26)) + ## 1.0.0 - 2019-10-08 - Flame is now considered stable :tada: diff --git a/packages/flame/src/Checkbox/Checkbox.tsx b/packages/flame/src/Checkbox/Checkbox.tsx index 14111a96..b9154f54 100644 --- a/packages/flame/src/Checkbox/Checkbox.tsx +++ b/packages/flame/src/Checkbox/Checkbox.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { css } from '@emotion/core'; import styled from '@emotion/styled'; import { themeGet } from '@styled-system/theme-get'; +import { layout, LayoutProps } from 'styled-system'; import { Merge } from 'type-fest'; import { IconCheckmark } from '../Icon/Checkmark'; import { Box } from '../Core'; @@ -17,10 +18,9 @@ const Label = styled('label')` display: inline-flex; `; -const CheckboxCheckmarkWrapper = styled('div')<{ indeterminate: boolean }>` +const CheckboxCheckmarkWrapper = styled('div')` position: relative; - width: 1rem; - height: 1rem; + ${layout}; flex: 0 0 auto; border-radius: ${themeGet('radii.radius-1')}; background-color: transparent; @@ -37,6 +37,11 @@ const CheckboxCheckmarkWrapper = styled('div')<{ indeterminate: boolean }>` `}; `; +CheckboxCheckmarkWrapper.defaultProps = { + width: ['18px', '16px'], + height: ['18px', '16px'], +}; + const CheckboxIndeterminate = styled('div')` position: absolute; top: 50%; @@ -58,8 +63,7 @@ const StyledIcon = styled(IconCheckmark)<{ size: string }>` const CheckboxInput = styled('input')<{ indeterminate: boolean }>` position: absolute; - width: 1rem; - height: 1rem; + ${layout} top: 0; left: 0; opacity: 0; @@ -93,6 +97,14 @@ const CheckboxInput = styled('input')<{ indeterminate: boolean }>` } `; +CheckboxInput.defaultProps = { + // Fun clashing between legacy props and our custom props + // @ts-ignore + width: ['18px', '16px'], + // @ts-ignore + height: ['18px', '16px'], +}; + export type CheckboxLabelProps = TextProps; export const CheckboxLabel = styled(Text)` ${props => @@ -104,7 +116,8 @@ export const CheckboxLabel = styled(Text)` CheckboxLabel.defaultProps = { ml: 2, fontWeight: 'bold', - size: 'small', + fontSize: ['text', 'text-s'], + lineHeight: 3, as: 'div', }; @@ -130,7 +143,7 @@ export const CheckboxDescription: React.FC = ({ color, ...restProps }) => ( - + {children} diff --git a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap index d3634c64..048d69b3 100644 --- a/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/packages/flame/src/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -16,8 +16,8 @@ exports[` Snapshots when all props and label/description with html s .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -26,6 +26,13 @@ exports[` Snapshots when all props and label/description with html s z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -53,8 +60,8 @@ exports[` Snapshots when all props and label/description with html s .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -67,6 +74,13 @@ exports[` Snapshots when all props and label/description with html s background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -91,12 +105,36 @@ exports[` Snapshots when all props and label/description with html s aria-describedby="id-description" aria-labelledby="id-label" className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } id="id" type="checkbox" value="value" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when all props should render correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -151,6 +189,13 @@ exports[` Snapshots when all props should render correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -178,8 +223,8 @@ exports[` Snapshots when all props should render correctly 1`] = ` .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -192,6 +237,13 @@ exports[` Snapshots when all props should render correctly 1`] = ` background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -209,14 +261,26 @@ exports[` Snapshots when all props should render correctly 1`] = ` margin: 0; margin-left: 0.75rem; font-weight: 700; - font-size: 0.875rem; + font-size: 1rem; line-height: 1.125rem; font-weight: 700; color: #0c0d0d; } +@media screen and (min-width:601px) { + .emotion-7 { + font-size: 0.875rem; + } +} + .emotion-13 { - margin-left: 1rem; + margin-left: 18px; +} + +@media screen and (min-width:601px) { + .emotion-13 { + margin-left: 16px; + } } .emotion-13 .emotion-12 { @@ -241,12 +305,36 @@ exports[` Snapshots when all props should render correctly 1`] = ` aria-describedby="id-description" aria-labelledby="id-label" className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } id="id" type="checkbox" value="value" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when all props should render correctly 1`] = `
Label
@@ -304,8 +397,8 @@ exports[` Snapshots when checked should render correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -314,6 +407,13 @@ exports[` Snapshots when checked should render correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -341,8 +441,8 @@ exports[` Snapshots when checked should render correctly 1`] = ` .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -355,6 +455,13 @@ exports[` Snapshots when checked should render correctly 1`] = ` background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -380,11 +487,35 @@ exports[` Snapshots when checked should render correctly 1`] = ` aria-labelledby={null} checked={true} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } onChange={[Function]} type="checkbox" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when disabled should render correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -433,6 +564,13 @@ exports[` Snapshots when disabled should render correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -460,8 +598,8 @@ exports[` Snapshots when disabled should render correctly 1`] = ` .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -474,6 +612,13 @@ exports[` Snapshots when disabled should render correctly 1`] = ` background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -499,10 +644,34 @@ exports[` Snapshots when disabled should render correctly 1`] = ` aria-labelledby={null} className="emotion-0 emotion-1" disabled={true} + height={ + Array [ + "18px", + "16px", + ] + } type="checkbox" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when empty props should render correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -551,6 +720,13 @@ exports[` Snapshots when empty props should render correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -578,8 +754,8 @@ exports[` Snapshots when empty props should render correctly 1`] = ` .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -592,6 +768,13 @@ exports[` Snapshots when empty props should render correctly 1`] = ` background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -616,10 +799,34 @@ exports[` Snapshots when empty props should render correctly 1`] = ` aria-describedby={null} aria-labelledby={null} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } type="checkbox" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when indeterminate should render correctly 1`] = .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -668,6 +875,13 @@ exports[` Snapshots when indeterminate should render correctly 1`] = z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-8 { background: #2875c6; border-color: #1d5794; @@ -708,8 +922,8 @@ exports[` Snapshots when indeterminate should render correctly 1`] = .emotion-7 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -723,6 +937,13 @@ exports[` Snapshots when indeterminate should render correctly 1`] = border-color: #2875c6; } +@media screen and (min-width:601px) { + .emotion-7 { + width: 16px; + height: 16px; + } +} + .emotion-5 { position: absolute; top: 50%; @@ -747,10 +968,34 @@ exports[` Snapshots when indeterminate should render correctly 1`] = aria-describedby={null} aria-labelledby={null} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } type="checkbox" + width={ + Array [ + "18px", + "16px", + ] + } />
Snapshots when not checked should render correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -802,6 +1047,13 @@ exports[` Snapshots when not checked should render correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-6 { background: #2875c6; border-color: #1d5794; @@ -829,8 +1081,8 @@ exports[` Snapshots when not checked should render correctly 1`] = ` .emotion-5 { position: relative; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -843,6 +1095,13 @@ exports[` Snapshots when not checked should render correctly 1`] = ` background: linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + .emotion-3 { width: 1rem; height: 1rem; @@ -868,10 +1127,34 @@ exports[` Snapshots when not checked should render correctly 1`] = ` aria-labelledby={null} checked={false} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } type="checkbox" + width={ + Array [ + "18px", + "16px", + ] + } />
( -
- - Checkbox types - Checkbox with label - - - - Checkbox with label and description - - - - Checkbox with long label and description in a 50% container - - - - Using custom elements - - ( - - Customizing the base exported `CheckboxLabel` - - )} - description={() => ( - - Customizing the base exported `CheckboxDescription` - - )} - /> - - - - - Checkbox states - - - - - - - - - - - - - - - - - - - - -
-)); +stories.add( + 'Story', + () => ( +
+ + Checkbox types + Checkbox with label + + + + Checkbox with label and description + + + + Checkbox with long label and description in a 50% container + + + + Using custom elements + + ( + + Customizing the base exported `CheckboxLabel` + + )} + description={() => ( + + Customizing the base exported `CheckboxDescription` + + )} + /> + + + + + Checkbox states + + + + + + + + + + + + + + + + + + + + +
+ ), + { + ...percyBreakpoints, + }, +); stories.add( 'Events', @@ -192,5 +199,5 @@ stories.add(
), - { percy: { skip: true } }, + { ...percySkip }, ); diff --git a/packages/flame/src/Radio/Radio.tsx b/packages/flame/src/Radio/Radio.tsx index 57301b30..46290604 100644 --- a/packages/flame/src/Radio/Radio.tsx +++ b/packages/flame/src/Radio/Radio.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { css } from '@emotion/core'; import styled from '@emotion/styled'; import { themeGet } from '@styled-system/theme-get'; +import { layout, LayoutProps } from 'styled-system'; import { Merge } from 'type-fest'; import { Text, TextProps } from '../Text'; @@ -17,10 +18,11 @@ const Label = styled('label')` display: inline-flex; `; -const Checkmark = styled('div')` +const Checkmark = styled('div')` position: relative; width: 1rem; height: 1rem; + ${layout}; flex: 0 0 auto; border-radius: ${themeGet('radii.radius-circle')}; background-color: transparent; @@ -30,21 +32,29 @@ const Checkmark = styled('div')` background: ${themeGet('radioStyles.background')}; `; -const Centermark = styled('div')` +Checkmark.defaultProps = { + width: ['18px', '16px'], + height: ['18px', '16px'], +}; + +const Centermark = styled('div')` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - width: ${themeGet('space.1')}; - height: ${themeGet('space.1')}; + ${layout}; border-radius: ${themeGet('radii.radius-circle')}; background: ${themeGet('radioStyles.background')}; `; +Centermark.defaultProps = { + width: ['7px', '6px'], + height: ['7px', '6px'], +}; + const RadioInput = styled('input')` position: absolute; - width: 1rem; - height: 1rem; + ${layout}; top: 0; left: 0; opacity: 0; @@ -71,6 +81,14 @@ const RadioInput = styled('input')` } `; +RadioInput.defaultProps = { + // Fun clashing between legacy props and our custom props + // @ts-ignore + width: ['18px', '16px'], + // @ts-ignore + height: ['18px', '16px'], +}; + export const RadioLabel = styled(Text)` ${props => !props.color && @@ -80,7 +98,8 @@ export const RadioLabel = styled(Text)` `.withComponent('div'); RadioLabel.defaultProps = { - size: 'small', + fontSize: ['text', 'text-s'], + lineHeight: 3, fontWeight: 'bold', ml: 2, }; @@ -107,7 +126,7 @@ export const RadioDescription: React.FC = ({ color, ...restProps }) => ( - + {children} diff --git a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap index 4a4b1d3c..ebacdf80 100644 --- a/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap +++ b/packages/flame/src/Radio/__snapshots__/Radio.test.tsx.snap @@ -16,8 +16,8 @@ exports[` Snapshots renders a Radio with a label and description correc .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -26,6 +26,13 @@ exports[` Snapshots renders a Radio with a label and description correc z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-5 { background: #2875c6; border-color: #1d5794; @@ -48,6 +55,8 @@ exports[` Snapshots renders a Radio with a label and description correc position: relative; width: 1rem; height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -59,6 +68,13 @@ exports[` Snapshots renders a Radio with a label and description correc background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-4 { + width: 16px; + height: 16px; + } +} + .emotion-2 { position: absolute; top: 50%; @@ -66,24 +82,43 @@ exports[` Snapshots renders a Radio with a label and description correc -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); - width: 0.375rem; - height: 0.375rem; + width: 7px; + height: 7px; border-radius: 50%; background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-2 { + width: 6px; + height: 6px; + } +} + .emotion-6 { margin: 0; + font-size: 1rem; + line-height: 1.125rem; font-weight: 700; margin-left: 0.75rem; - font-size: 0.875rem; - line-height: 1.125rem; font-weight: 700; color: #0c0d0d; } +@media screen and (min-width:601px) { + .emotion-6 { + font-size: 0.875rem; + } +} + .emotion-12 { - margin-left: 1rem; + margin-left: 18px; +} + +@media screen and (min-width:601px) { + .emotion-12 { + margin-left: 16px; + } } .emotion-12 .emotion-11 { @@ -110,24 +145,65 @@ exports[` Snapshots renders a Radio with a label and description correc aria-labelledby="Radio-label" checked={false} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } id="Radio" onChange={[MockFunction]} type="radio" value="value" + width={ + Array [ + "18px", + "16px", + ] + } />
Label
@@ -162,8 +238,8 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -172,6 +248,13 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-5 { background: #2875c6; border-color: #1d5794; @@ -194,6 +277,8 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` position: relative; width: 1rem; height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -205,6 +290,13 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-4 { + width: 16px; + height: 16px; + } +} + .emotion-2 { position: absolute; top: 50%; @@ -212,12 +304,19 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); - width: 0.375rem; - height: 0.375rem; + width: 7px; + height: 7px; border-radius: 50%; background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-2 { + width: 6px; + height: 6px; + } +} +
@@ -231,17 +330,53 @@ exports[` Snapshots renders a checked Radio correctly 1`] = ` aria-labelledby={null} checked={true} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } id="Radio" onChange={[MockFunction]} type="radio" value="value" + width={ + Array [ + "18px", + "16px", + ] + } />
@@ -264,8 +399,8 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -274,6 +409,13 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-5 { background: #2875c6; border-color: #1d5794; @@ -296,6 +438,8 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` position: relative; width: 1rem; height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -307,6 +451,13 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-4 { + width: 16px; + height: 16px; + } +} + .emotion-2 { position: absolute; top: 50%; @@ -314,12 +465,19 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); - width: 0.375rem; - height: 0.375rem; + width: 7px; + height: 7px; border-radius: 50%; background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-2 { + width: 6px; + height: 6px; + } +} +
@@ -334,17 +492,53 @@ exports[` Snapshots renders a disabled Radio correctly 1`] = ` checked={false} className="emotion-0 emotion-1" disabled={true} + height={ + Array [ + "18px", + "16px", + ] + } id="Radio" onChange={[MockFunction]} type="radio" value="value" + width={ + Array [ + "18px", + "16px", + ] + } />
@@ -367,8 +561,8 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` .emotion-0 { position: absolute; - width: 1rem; - height: 1rem; + width: 18px; + height: 18px; top: 0; left: 0; opacity: 0; @@ -377,6 +571,13 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` z-index: 1; } +@media screen and (min-width:601px) { + .emotion-0 { + width: 16px; + height: 16px; + } +} + .emotion-0:checked + .emotion-5 { background: #2875c6; border-color: #1d5794; @@ -399,6 +600,8 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` position: relative; width: 1rem; height: 1rem; + width: 18px; + height: 18px; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -410,6 +613,13 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-4 { + width: 16px; + height: 16px; + } +} + .emotion-2 { position: absolute; top: 50%; @@ -417,12 +627,19 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); - width: 0.375rem; - height: 0.375rem; + width: 7px; + height: 7px; border-radius: 50%; background: #fff linear-gradient(180deg,#fff,#f3f3f3); } +@media screen and (min-width:601px) { + .emotion-2 { + width: 6px; + height: 6px; + } +} +
@@ -435,15 +652,51 @@ exports[` Snapshots renders a simple Radio correctly 1`] = ` aria-labelledby={null} checked={false} className="emotion-0 emotion-1" + height={ + Array [ + "18px", + "16px", + ] + } onChange={[MockFunction]} type="radio" + width={ + Array [ + "18px", + "16px", + ] + } />
diff --git a/packages/flame/src/Radio/story.tsx b/packages/flame/src/Radio/story.tsx index 97e21c1f..631f63c9 100644 --- a/packages/flame/src/Radio/story.tsx +++ b/packages/flame/src/Radio/story.tsx @@ -7,81 +7,86 @@ import { Text, Heading2, Heading3, TextContent } from '../Text'; import RadioWrapper from './examples'; import { Radio, RadioLabel, RadioDescription } from './Radio'; import { Box } from '../Core'; +import { percyBreakpoints, percySkip } from '../../../../stories/helpers/percy'; import Readme from './README.md'; const stories = storiesOf('Radio', module).addDecorator(withReadme(Readme)); -stories.add('Story', () => ( -
- - Radio types - Radio with label - - {}} /> - - Radio with label and description - - {}} - /> - - Radio with long label and description in a 50% container - - {}} - /> - - Using custom elements - - ( - - Customizing the base exported `RadioLabel` - - )} - description={() => ( - - Customizing the base exported `RadioDescription` - - )} - checked={false} - onChange={() => {}} - /> - - - - Radio states - - {}} /> - - - {}} /> - - - {}} /> - - - {}} - disabled - /> - - -
-)); +stories.add( + 'Story', + () => ( +
+ + Radio types + Radio with label + + {}} /> + + Radio with label and description + + {}} + /> + + Radio with long label and description in a 50% container + + {}} + /> + + Using custom elements + + ( + + Customizing the base exported `RadioLabel` + + )} + description={() => ( + + Customizing the base exported `RadioDescription` + + )} + checked={false} + onChange={() => {}} + /> + + + + Radio states + + {}} /> + + + {}} /> + + + {}} /> + + + {}} + disabled + /> + + +
+ ), + { ...percyBreakpoints }, +); stories.add( 'Uncontrolled state', @@ -99,7 +104,7 @@ stories.add( ), - { percy: { skip: true } }, + { ...percySkip }, ); stories.add( @@ -151,5 +156,5 @@ stories.add( ), - { percy: { skip: true } }, + { ...percySkip }, ); diff --git a/stories/helpers/percy.ts b/stories/helpers/percy.ts new file mode 100644 index 00000000..b7bc8b8a --- /dev/null +++ b/stories/helpers/percy.ts @@ -0,0 +1,10 @@ +import { commonTheme } from '../../packages/flame-tokens/src/theme-ui/common'; + +const integerBreakpoints = commonTheme.breakpoints.map(v => + Number.parseInt(v.replace('px', ''), 10), +); + +const percyBreakpoints = { percy: { widths: integerBreakpoints } }; +const percySkip = { percy: { skip: true } }; + +export { percyBreakpoints, percySkip }; From 5809a803ff10914d8cfd3b59c23756f4c0f77bc5 Mon Sep 17 00:00:00 2001 From: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> Date: Tue, 22 Oct 2019 04:55:26 +0900 Subject: [PATCH 6/9] Mobile friendly Alert & Icon (#27) * Make Alert and Icon mobile friendlier --- packages/flame/src/Alert/Alert.tsx | 102 +- .../Alert/__snapshots__/Alert.test.tsx.snap | 1100 ++++++++++++----- .../__snapshots__/Autocomplete.test.tsx.snap | 68 +- .../__snapshots__/Checkbox.test.tsx.snap | 84 +- .../__snapshots__/Icon.test.tsx.snap | 81 +- packages/flame/src/Icon/utils/iconFactory.tsx | 14 +- .../__snapshots__/Spinner.test.tsx.snap | 66 +- .../Switch/__snapshots__/Switch.test.tsx.snap | 144 +-- .../src/Tag/__snapshots__/Tag.test.tsx.snap | 54 +- 9 files changed, 1099 insertions(+), 614 deletions(-) diff --git a/packages/flame/src/Alert/Alert.tsx b/packages/flame/src/Alert/Alert.tsx index 2e5f1a44..ec91c25d 100644 --- a/packages/flame/src/Alert/Alert.tsx +++ b/packages/flame/src/Alert/Alert.tsx @@ -1,50 +1,57 @@ import * as React from 'react'; import styled from '@emotion/styled'; import { transparentize } from 'polished'; -import { space, variant, SpaceProps } from 'styled-system'; +import { space, variant, SpaceProps, layout, LayoutProps } from 'styled-system'; import { themeGet } from '@styled-system/theme-get'; import { Flex, Box } from '../Core'; import { Text } from '../Text'; +const borderTopHeight = '4px'; + const alertStyles = variant({ key: 'alertVariants', prop: 'type', }); -const AlertWrapper = styled('div')<{ type: string }>` +const AlertWrapper = styled('div')` display: flex; justify-content: space-between; align-items: flex-start; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 3px 6px 0 rgba(0, 0, 0, 0.03), 0 1px 2px 0 rgba(0, 0, 0, 0.1); - border-top: 4px solid; + border-top: ${borderTopHeight} solid; border-radius: ${themeGet('radii.radius-2')}; - padding: ${themeGet('space.2')} ${themeGet('space.3')}; ${space} ${alertStyles} `; AlertWrapper.defaultProps = { type: 'info', + px: 3, + py: [3, 2], }; -const CloseButton = styled('button')` +const CloseButton = styled('button')` font-size: ${themeGet('fontSizes.text')}; color: ${themeGet('colors.textHeading')}; background-color: ${props => transparentize(0.9, themeGet('colors.textHeading', '#000')(props))}; border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + ${layout} &:focus { outline: none; } `; +CloseButton.defaultProps = { + width: ['18px', '16px'], + height: ['18px', '16px'], +}; + CloseButton.displayName = 'CloseButton'; export interface AlertProps { @@ -82,46 +89,59 @@ const Alert: React.FunctionComponent = ({ return ( - + {icon && ( - + {icon} - + )} - {title && ( - - {title} - - )} - {children} + + {title && ( + + + {title} + + + )} + {!noCloseBtn && ( + + + + + + + + )} + + + {children} - {!noCloseBtn && ( - - - - - - - - )} ); }; diff --git a/packages/flame/src/Alert/__snapshots__/Alert.test.tsx.snap b/packages/flame/src/Alert/__snapshots__/Alert.test.tsx.snap index cb45b0a9..4f3c1ffe 100644 --- a/packages/flame/src/Alert/__snapshots__/Alert.test.tsx.snap +++ b/packages/flame/src/Alert/__snapshots__/Alert.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Alert Removes close button 1`] = ` -.emotion-8 { +.emotion-12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -17,12 +17,22 @@ exports[`Alert Removes close button 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e9fafe; border-color: #2875c6; } -.emotion-6 { +@media screen and (min-width:601px) { + .emotion-12 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} + +.emotion-10 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -30,55 +40,98 @@ exports[`Alert Removes close button 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-4 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-2 { - font-size: 0.875rem; +.emotion-4 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-6 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-6 { + font-size: 0.875rem; + } } .emotion-0 { margin: 0; color: #0c0d0d; font-weight: 700; - font-size: 1rem; + line-height: 1.5rem; + font-size: 1.125rem; margin-top: 0; margin-right: 0; - margin-bottom: 0.375rem; + margin-bottom: 0; margin-left: 0; font-weight: 700; } +@media screen and (min-width:601px) { + .emotion-0 { + font-size: 1rem; + } +} +
-

- My Title -

+
+

+ My Title +

+
+
Hello World
@@ -88,7 +141,7 @@ exports[`Alert Removes close button 1`] = ` `; exports[`Alert renders a number 1`] = ` -.emotion-9 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -104,12 +157,22 @@ exports[`Alert renders a number 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e9fafe; border-color: #2875c6; } -.emotion-4 { +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} + +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -117,94 +180,141 @@ exports[`Alert renders a number 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; +} + +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } } -.emotion-7:focus { +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} + +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } }
+ +
+
300
-
`; exports[`Alert renders correctly 1`] = ` -.emotion-9 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -220,12 +330,22 @@ exports[`Alert renders correctly 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e9fafe; border-color: #2875c6; } -.emotion-4 { +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} + +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -233,94 +353,141 @@ exports[`Alert renders correctly 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; } -.emotion-7:focus { +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } +} + +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} + +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } }
+ +
+
Hello World
-
`; exports[`Alert renders type danger correctly 1`] = ` -.emotion-4 { +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -328,51 +495,77 @@ exports[`Alert renders type danger correctly 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; } -.emotion-7:focus { +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } +} + +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); } -.emotion-9 { +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } +} + +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -388,55 +581,86 @@ exports[`Alert renders type danger correctly 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #fee3e3; border-color: #b93435; } +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +
+ +
+
Hello World
-
`; exports[`Alert renders type info correctly 1`] = ` -.emotion-9 { +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -452,12 +676,22 @@ exports[`Alert renders type info correctly 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e9fafe; border-color: #2875c6; } -.emotion-4 { +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} + +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -465,94 +699,141 @@ exports[`Alert renders type info correctly 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; +} + +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } } -.emotion-7:focus { +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} + +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } }
+ +
+
Hello World
-
`; exports[`Alert renders type success correctly 1`] = ` -.emotion-4 { +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -560,51 +841,77 @@ exports[`Alert renders type success correctly 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; +} + +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } } -.emotion-7:focus { +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); } -.emotion-9 { +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } +} + +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -620,55 +927,86 @@ exports[`Alert renders type success correctly 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e0f8e6; border-color: #26853f; } +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +
+ +
+
Hello World
-
`; exports[`Alert renders type warning correctly 1`] = ` -.emotion-4 { +.emotion-9 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -676,51 +1014,77 @@ exports[`Alert renders type warning correctly 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-2 { +.emotion-7 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-0 { - font-size: 0.875rem; +.emotion-3 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-7 { +.emotion-1 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; } -.emotion-7:focus { +@media screen and (min-width:601px) { + .emotion-1 { + width: 16px; + height: 16px; + } +} + +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-0 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); } -.emotion-9 { +.emotion-5 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-5 { + font-size: 0.875rem; + } +} + +.emotion-11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -736,55 +1100,86 @@ exports[`Alert renders type warning correctly 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #fdebd0; border-color: #e69524; } +@media screen and (min-width:601px) { + .emotion-11 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} +
+ +
+
Hello World
-
`; exports[`Alert renders with a title 1`] = ` -.emotion-11 { +.emotion-15 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -800,12 +1195,22 @@ exports[`Alert renders with a title 1`] = ` box-shadow: 0 0 0 1px rgba(0,0,0,0.06),0 3px 6px 0 rgba(0,0,0,0.03),0 1px 2px 0 rgba(0,0,0,0.1); border-top: 4px solid; border-radius: 0.375rem; - padding: 0.75rem 1.125rem; + padding-left: 1.125rem; + padding-right: 1.125rem; + padding-top: 1.125rem; + padding-bottom: 1.125rem; background: #e9fafe; border-color: #2875c6; } -.emotion-6 { +@media screen and (min-width:601px) { + .emotion-15 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + } +} + +.emotion-13 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -813,108 +1218,171 @@ exports[`Alert renders with a title 1`] = ` -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; + margin-top: -4px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } -.emotion-4 { +.emotion-2 { -webkit-flex: 1; -ms-flex: 1; flex: 1; } -.emotion-2 { - font-size: 0.875rem; +.emotion-7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; } -.emotion-9 { +.emotion-5 { font-size: 1rem; color: #0c0d0d; background-color: rgba(12,13,13,0.1); border-radius: 50%; border: none; cursor: pointer; - width: 1em; - height: 1em; padding: 0; position: relative; + width: 18px; + height: 18px; } -.emotion-9:focus { +@media screen and (min-width:601px) { + .emotion-5 { + width: 16px; + height: 16px; + } +} + +.emotion-5:focus { outline: none; } -.emotion-8 { +.emotion-4 { width: 0.5em; height: 0.5em; fill: black; position: absolute; - top: 0.25em; - left: 0.25em; - right: 0; - bottom: 0; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%,-50%); + -ms-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); +} + +.emotion-9 { + font-size: 1rem; +} + +@media screen and (min-width:601px) { + .emotion-9 { + font-size: 0.875rem; + } } .emotion-0 { margin: 0; color: #0c0d0d; font-weight: 700; - font-size: 1rem; + line-height: 1.5rem; + font-size: 1.125rem; margin-top: 0; margin-right: 0; - margin-bottom: 0.375rem; + margin-bottom: 0; margin-left: 0; font-weight: 700; } +@media screen and (min-width:601px) { + .emotion-0 { + font-size: 1rem; + } +} +
-

- My Title -

+
+

+ My Title +

+
+ +
Hello World
-
`; diff --git a/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap index 18861deb..b65ee677 100644 --- a/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap +++ b/packages/flame/src/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap @@ -125,9 +125,9 @@ exports[`Autocomplete renders as disabled 1`] = ` } .emotion-3 { + vertical-align: text-bottom; width: 1rem; height: 1rem; - vertical-align: text-bottom; }
Snapshots when all props and label/description with html s } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -138,13 +138,9 @@ exports[` Snapshots when all props and label/description with html s > Snapshots when all props should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -338,13 +334,9 @@ exports[` Snapshots when all props should render correctly 1`] = ` > Snapshots when checked should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -519,13 +511,9 @@ exports[` Snapshots when checked should render correctly 1`] = ` > Snapshots when disabled should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -675,13 +663,9 @@ exports[` Snapshots when disabled should render correctly 1`] = ` > Snapshots when empty props should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -830,13 +814,9 @@ exports[` Snapshots when empty props should render correctly 1`] = ` > Snapshots when indeterminate should render correctly 1`] = } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -999,13 +979,9 @@ exports[` Snapshots when indeterminate should render correctly 1`] = > Snapshots when not checked should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.65rem; + height: 0.65rem; position: absolute; top: 50%; left: 50%; @@ -1158,13 +1134,9 @@ exports[` Snapshots when not checked should render correctly 1`] = ` > = ({ - size = '1rem', + size, className, color, baseColor, @@ -59,15 +60,18 @@ export default function iconFactory(BaseIconComponent: React.FC, displayName = ' to set an icons color or fill property. */ className: [className, 'cr-icon'].join(' '), - style: { width: iconSize, height: iconSize }, }; - const StyledIcon = styled(BaseIconComponent)` - width: 1rem; - height: 1rem; + const StyledIcon = styled(BaseIconComponent)` vertical-align: text-bottom; + ${layout}; `; + StyledIcon.defaultProps = { + width: iconSize || ['18px', '1rem'], + height: iconSize || ['18px', '1rem'], + }; + return ; }; diff --git a/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap b/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap index e7aacfd5..88822a41 100644 --- a/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap +++ b/packages/flame/src/Spinner/__snapshots__/Spinner.test.tsx.snap @@ -16,23 +16,36 @@ exports[` Snapshots when color is cr-blue should render correctly 1`] } .emotion-1 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 18px; + height: 18px; -webkit-animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); } +@media screen and (min-width:601px) { + .emotion-1 { + width: 1rem; + height: 1rem; + } +} + Snapshots when empty props should render correctly 1`] = ` } .emotion-1 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 18px; + height: 18px; -webkit-animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); } +@media screen and (min-width:601px) { + .emotion-1 { + width: 1rem; + height: 1rem; + } +} + Snapshots when size is xlarge should render correctly 1`] = } .emotion-1 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 1.5rem; + height: 1.5rem; -webkit-animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); animation: animation-0 1s infinite cubic-bezier(0.35,0.3,0.3,0.35); } when autoFocus should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -166,13 +166,9 @@ exports[` when autoFocus should render correctly 1`] = ` > when autoFocus should render correctly 1`] = ` when checked should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -367,13 +359,9 @@ exports[` when checked should render correctly 1`] = ` > when checked should render correctly 1`] = ` when disabled should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -568,13 +552,9 @@ exports[` when disabled should render correctly 1`] = ` > when disabled should render correctly 1`] = ` when empty props should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -768,13 +744,9 @@ exports[` when empty props should render correctly 1`] = ` > when empty props should render correctly 1`] = ` when id, name should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -970,13 +938,9 @@ exports[` when id, name should render correctly 1`] = ` > when id, name should render correctly 1`] = ` when passing data-props should render correctly 1`] = ` } .emotion-7 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #fff; } .emotion-10 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 0.75rem; + height: 0.75rem; fill: #848a8a; } @@ -1171,13 +1131,9 @@ exports[` when passing data-props should render correctly 1`] = ` > when passing data-props should render correctly 1`] = ` Snapshots when dismissible should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 18px; + height: 18px; margin: 0 0.375rem; border-radius: 50%; z-index: 1; } +@media screen and (min-width:601px) { + .emotion-3 { + width: 1rem; + height: 1rem; + } +} +
@@ -269,13 +276,19 @@ exports[` Snapshots when dismissible should render correctly 1`] = ` > Snapshots when small should render correctly 1`] = ` } .emotion-3 { - width: 1rem; - height: 1rem; vertical-align: text-bottom; + width: 18px; + height: 18px; margin: 0 0.375rem; border-radius: 50%; z-index: 1; } +@media screen and (min-width:601px) { + .emotion-3 { + width: 1rem; + height: 1rem; + } +} + .emotion-0 { -webkit-appearance: none; -moz-appearance: none; @@ -463,13 +483,19 @@ exports[` Snapshots when small should render correctly 1`] = ` > Date: Mon, 25 Nov 2019 11:15:40 -0500 Subject: [PATCH 7/9] Make switch more mobile friendly (#48) * Make switch more mobile friendly * Add percy breakpoints to story snapshots --- package.json | 9 +- packages/flame/package.json | 2 + packages/flame/src/Checkbox/index.tsx | 10 +- packages/flame/src/Core/index.tsx | 18 + packages/flame/src/Switch/Switch.tsx | 226 +++++----- .../Switch/__snapshots__/Switch.test.tsx.snap | 403 +++++++++++------- packages/flame/src/Switch/story.tsx | 39 +- yarn.lock | 118 ++++- 8 files changed, 532 insertions(+), 293 deletions(-) diff --git a/package.json b/package.json index 5b7ea2c3..0b8fec1a 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,9 @@ "percy": "build-storybook -c .storybook && percy-storybook --widths=1280" }, "dependencies": { - "@emotion/core": "^10.0.9", - "@emotion/styled": "^10.0.9", - "@styled-system/theme-get": "5.0.16", + "@emotion/core": "^10.0.22", + "@emotion/styled": "^10.0.23", + "@styled-system/theme-get": "5.1.2", "classnames": "^2.2.5", "emotion-theming": "^10.0.7", "polished": "^2.3.0", @@ -80,7 +80,8 @@ "@types/storybook-readme": "^5.0.3", "@types/storybook__addon-actions": "^3.4.3", "@types/storybook__react": "^4.0.2", - "@types/styled-system": "^5.0.0", + "@types/styled-system": "^5.1.4", + "@types/styled-system__css": "^5.0.4", "array-move": "^2.1.0", "autoprefixer": "^8.0.0", "babel-eslint": "^10.0.1", diff --git a/packages/flame/package.json b/packages/flame/package.json index 415366aa..66bea891 100644 --- a/packages/flame/package.json +++ b/packages/flame/package.json @@ -35,8 +35,10 @@ "release:dryrun": "npm publish dist --dry-run" }, "dependencies": { + "@styled-system/css": "^5.0.23", "@styled-system/theme-get": "5.0.16", "@types/styled-system": "^5.0.0", + "@types/styled-system__css": "^5.0.4", "polished": "^2.3.0", "popper.js": "^1.15.0", "react-modal": "^3.5.1", diff --git a/packages/flame/src/Checkbox/index.tsx b/packages/flame/src/Checkbox/index.tsx index dca8ad9b..a07e2be6 100644 --- a/packages/flame/src/Checkbox/index.tsx +++ b/packages/flame/src/Checkbox/index.tsx @@ -4,14 +4,6 @@ import { Checkbox, CheckboxProps, CheckboxLabel, - CheckboxDescriptionProps, } from './Checkbox'; -export { - BaseCheckbox, - BaseCheckboxProps, - Checkbox, - CheckboxProps, - CheckboxLabel, - CheckboxDescriptionProps, -}; +export { BaseCheckbox, BaseCheckboxProps, Checkbox, CheckboxProps, CheckboxLabel }; diff --git a/packages/flame/src/Core/index.tsx b/packages/flame/src/Core/index.tsx index 05a20f5f..7d5a20b6 100644 --- a/packages/flame/src/Core/index.tsx +++ b/packages/flame/src/Core/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Global, css } from '@emotion/core'; import styled from '@emotion/styled'; import { ThemeProvider } from 'emotion-theming'; +import { css as styledSystemCss } from '@styled-system/css'; import { Omit } from 'type-fest'; import { @@ -142,6 +143,22 @@ const FlameGlobalStyles: React.FunctionComponent<{ themeName?: string }> = ({ th ); }; +const get = (theme: object) => (path: string) => themeGet(path)({ theme }); +type flameCssCallback = (get: (path: string) => any, theme: object) => object; +/** + * flameCss + * @description + * Augmented version of styled-system/css with a pre-bound themeGet to safely access + * token values + * + * Note: + * Use the return type `any` for now until styled-system/css has fixed their wonky typing + * issues with css props + */ +const flameCss = (cb: flameCssCallback): any => { + return styledSystemCss(theme => cb(get(theme), get)); +}; + export { lightTheme, flameTheme, @@ -150,5 +167,6 @@ export { FlameGlobalStyles, themeGet, ThemeUIFlame, + flameCss as css, border, }; diff --git a/packages/flame/src/Switch/Switch.tsx b/packages/flame/src/Switch/Switch.tsx index 99ec4793..375ed760 100644 --- a/packages/flame/src/Switch/Switch.tsx +++ b/packages/flame/src/Switch/Switch.tsx @@ -1,113 +1,73 @@ import * as React from 'react'; -import styled from '@emotion/styled'; -import { themeGet } from '@styled-system/theme-get'; import { Merge } from 'type-fest'; +import { css } from '../Core'; import { IconCheckmark } from '../Icon/Checkmark'; import { IconCross } from '../Icon/Cross'; -const SwitchWrapper = styled('span')` - display: flex; - justify-content: space-between; - width: ${themeGet('space.8')}; - height: ${themeGet('space.4')}; - box-sizing: border-box; - border: solid 1px ${themeGet('switchStyles.off.border')}; - border-radius: ${themeGet('space.2')}; - background: ${themeGet('switchStyles.off.background')}; - transition-property: background; - transition-duration: ${themeGet('transition.transition-duration-slow')}; - transition-timing-function: cubic-bezier(0.68, 1.46, 0.1, 1.06); -`; - -const WrapperLabel = styled('label')` - position: relative; - display: inline-block; - cursor: pointer; -`; - -const SwitchSlider = styled('span')` - display: flex; - justify-content: center; - align-self: center; - position: absolute; - top: calc(${themeGet('space.1')} / 2); - width: calc(${themeGet('space.4')} - ${themeGet('space.1')}); - height: calc(${themeGet('space.4')} - ${themeGet('space.1')}); - margin: 0 2px; - box-sizing: border-box; - border: solid 1px ${themeGet('switchStyles.slider.border')}; - border-radius: ${themeGet('radii.radius-circle')}; - background: ${themeGet('switchStyles.slider.background')}; - z-index: 2; - box-shadow: ${themeGet('switchStyles.slider.shadow')}; - transition-property: translateX(0); - transition-duration: ${themeGet('transition.transition-duration-slow')}; - transition-timing-function: cubic-bezier(0.68, 1.46, 0.1, 1.06); -`; - -const Svg = styled('svg')` - align-self: center; -`; - -const SwitchSliderIcon = () => ( - +const SwitchSliderIcon: React.FC = () => ( + - + ); -const SwitchInput = styled('input')` - opacity: 0; - position: absolute; - width: 100%; - height: 100%; - margin: 0; - z-index: 3; - cursor: pointer; - - &:checked + ${SwitchWrapper} { - background: ${themeGet('switchStyles.on.background')}; - border-color: ${themeGet('switchStyles.on.checkedBorder')}; - - ${SwitchSlider} { - transform: translateX(1.5rem); - border-color: ${themeGet('switchStyles.on.border')}; - } - } - - &:focus + ${SwitchWrapper} { - box-shadow: 0 0 0 1pt ${themeGet('switchStyles.on.color')}, - 0 0 0 3pt ${themeGet('switchStyles.on.background')}; - } - - &:disabled { - cursor: default; - - & + ${SwitchWrapper} { - opacity: 0.5; +const SwitchBackgroundIcons: React.FC = () => ( + ({ + display: 'flex', + justifyContent: 'space-between', + alignSelf: 'center', + width: '100%', + margin: `0 ${get('space.1')}`, + zIndex: 1, + })) as any } - } -`; - -const IconWrapper = styled('span')` - display: flex; - justify-content: space-between; - align-self: center; - width: 100%; - margin: 0 ${themeGet('space.1')}; - z-index: 1; -`; - -const Checkmark = styled(IconCheckmark)` - fill: ${themeGet('switchStyles.icons.checkmarkBackground')}; -`; + > + ({ + fill: get('switchStyles.icons.checkmarkBackground'), + }))} + /> + ({ + fill: get('switchStyles.icons.crossBackground'), + }))} + /> + +); -const Cross = styled(IconCross)` - fill: ${themeGet('switchStyles.icons.crossBackground')}; -`; +const SwitchSlider: React.FC = ({ children }) => ( + ({ + display: 'flex', + justifyContent: 'center', + alignSelf: 'center', + position: 'absolute', + margin: '0 2px', + top: ['3px', '3px'], + width: ['24px', '18px'], + height: ['24px', '18px'], + boxSizing: 'border-box', + border: `solid 1px ${get('switchStyles.slider.border')}`, + borderRadius: get('radii.radius-circle'), + background: get('switchStyles.slider.background'), + zIndex: 2, + boxShadow: get('switchStyles.slider.shadow'), + transitionProperty: 'translateX(0)', + transitionDuration: get('transition.transition-duration-slow'), + transitionTimingFunction: 'cubic-bezier(0.68, 1.46, 0.1, 1.06)', + }))} + > + {children} + +); export type SwitchProps = Merge< React.HTMLProps, @@ -119,19 +79,73 @@ export type SwitchProps = Merge< checked?: boolean; } >; -const Switch: React.FC = ({ className, checked, ...restProps }) => ( - - - +const Switch: React.FC = ({ className, checked, id, ...restProps }) => ( + - + + + ); export { Switch }; diff --git a/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap b/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap index afed6d0e..c73110e9 100644 --- a/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap +++ b/packages/flame/src/Switch/__snapshots__/Switch.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` when autoFocus should render correctly 1`] = ` -.emotion-16 { +.emotion-9 { position: relative; display: inline-block; cursor: pointer; @@ -17,19 +17,19 @@ exports[` when autoFocus should render correctly 1`] = ` cursor: pointer; } -.emotion-0:checked + .emotion-15 { +.emotion-0:checked + .fl-switch__wrapper { background: #2875c6; border-color: #1d5794; } -.emotion-0:checked + .emotion-15 .emotion-5 { +.emotion-0:checked + .fl-switch__wrapper .fl-switch__slider { -webkit-transform: translateX(1.5rem); -ms-transform: translateX(1.5rem); transform: translateX(1.5rem); border-color: #1d5794; } -.emotion-0:focus + .emotion-15 { +.emotion-0:focus + .fl-switch__wrapper { box-shadow: 0 0 0 1pt #fff,0 0 0 3pt #2875c6; } @@ -37,11 +37,13 @@ exports[` when autoFocus should render correctly 1`] = ` cursor: default; } -.emotion-0:disabled + .emotion-15 { +.emotion-0:disabled + .fl-switch__wrapper { opacity: 0.5; } -.emotion-14 { +.emotion-8 { + width: 3.375rem; + height: 1.875rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -50,11 +52,9 @@ exports[` when autoFocus should render correctly 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - width: 3rem; - height: 1.5rem; box-sizing: border-box; border: solid 1px #abb3b3; - border-radius: 0.75rem; + border-radius: 1.125rem; background: #fff; -webkit-transition-property: background; transition-property: background; @@ -64,7 +64,15 @@ exports[` when autoFocus should render correctly 1`] = ` transition-timing-function: cubic-bezier(0.68,1.46,0.1,1.06); } -.emotion-4 { +@media screen and (min-width:601px) { + .emotion-8 { + width: 3rem; + height: 1.5rem; + border-radius: 0.75rem; + } +} + +.emotion-2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -77,10 +85,10 @@ exports[` when autoFocus should render correctly 1`] = ` -ms-flex-item-align: center; align-self: center; position: absolute; - top: calc(0.375rem / 2); - width: calc(1.5rem - 0.375rem); - height: calc(1.5rem - 0.375rem); margin: 0 2px; + top: 3px; + width: 24px; + height: 24px; box-sizing: border-box; border: solid 1px #abb3b3; border-radius: 50%; @@ -95,13 +103,21 @@ exports[` when autoFocus should render correctly 1`] = ` transition-timing-function: cubic-bezier(0.68,1.46,0.1,1.06); } -.emotion-2 { +@media screen and (min-width:601px) { + .emotion-2 { + top: 3px; + width: 18px; + height: 18px; + } +} + +.emotion-1 { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } -.emotion-12 { +.emotion-7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -118,14 +134,14 @@ exports[` when autoFocus should render correctly 1`] = ` z-index: 1; } -.emotion-7 { +.emotion-3 { vertical-align: text-bottom; width: 0.75rem; height: 0.75rem; fill: #fff; } -.emotion-10 { +.emotion-5 { vertical-align: text-bottom; width: 0.75rem; height: 0.75rem; @@ -133,23 +149,22 @@ exports[` when autoFocus should render correctly 1`] = ` }
), - { percy: { skip: true } }, + { ...percySkip }, ); diff --git a/yarn.lock b/yarn.lock index 3638c5b8..df5979ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1000,6 +1000,18 @@ "@emotion/sheet" "0.9.3" "@emotion/utils" "0.11.2" +"@emotion/core@^10.0.22": + version "10.0.22" + resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177" + integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/cache" "^10.0.17" + "@emotion/css" "^10.0.22" + "@emotion/serialize" "^0.11.12" + "@emotion/sheet" "0.9.3" + "@emotion/utils" "0.11.2" + "@emotion/css@^10.0.14", "@emotion/css@^10.0.9": version "10.0.14" resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139" @@ -1009,11 +1021,25 @@ "@emotion/utils" "0.11.2" babel-plugin-emotion "^10.0.14" +"@emotion/css@^10.0.22": + version "10.0.22" + resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793" + integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA== + dependencies: + "@emotion/serialize" "^0.11.12" + "@emotion/utils" "0.11.2" + babel-plugin-emotion "^10.0.22" + "@emotion/hash@0.7.2": version "0.7.2" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.2.tgz#53211e564604beb9befa7a4400ebf8147473eeef" integrity sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q== +"@emotion/hash@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" + integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== + "@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6": version "0.6.6" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44" @@ -1026,11 +1052,23 @@ dependencies: "@emotion/memoize" "0.7.2" +"@emotion/is-prop-valid@0.8.5": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983" + integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg== + dependencies: + "@emotion/memoize" "0.7.3" + "@emotion/memoize@0.7.2": version "0.7.2" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30" integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w== +"@emotion/memoize@0.7.3": + version "0.7.3" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" + integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== + "@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6": version "0.6.6" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b" @@ -1047,6 +1085,17 @@ "@emotion/utils" "0.11.2" csstype "^2.5.7" +"@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14": + version "0.11.14" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488" + integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA== + dependencies: + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/unitless" "0.7.4" + "@emotion/utils" "0.11.2" + csstype "^2.5.7" + "@emotion/serialize@^0.9.1": version "0.9.1" resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145" @@ -1072,7 +1121,17 @@ "@emotion/serialize" "^0.11.10" "@emotion/utils" "0.11.2" -"@emotion/styled@^10.0.14", "@emotion/styled@^10.0.7", "@emotion/styled@^10.0.9": +"@emotion/styled-base@^10.0.23": + version "10.0.24" + resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b" + integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ== + dependencies: + "@babel/runtime" "^7.5.5" + "@emotion/is-prop-valid" "0.8.5" + "@emotion/serialize" "^0.11.14" + "@emotion/utils" "0.11.2" + +"@emotion/styled@^10.0.14", "@emotion/styled@^10.0.7": version "10.0.17" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.17.tgz#0cd38b8b36259541f2c6717fc22607a120623654" integrity sha512-zHMgWjHDMNjD+ux64POtDnjLAObniu3znxFBLSdV/RiEhSLjHIowfvSbbd/C33/3uwtI6Uzs2KXnRZtka/PpAQ== @@ -1080,6 +1139,14 @@ "@emotion/styled-base" "^10.0.17" babel-plugin-emotion "^10.0.17" +"@emotion/styled@^10.0.23": + version "10.0.23" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b" + integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ== + dependencies: + "@emotion/styled-base" "^10.0.23" + babel-plugin-emotion "^10.0.23" + "@emotion/stylis@0.8.4": version "0.8.4" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c" @@ -2777,6 +2844,13 @@ dependencies: object-assign "^4.1.1" +"@styled-system/core@^5.1.2": + version "5.1.2" + resolved "https://registry.yarnpkg.com/@styled-system/core/-/core-5.1.2.tgz#b8b7b86455d5a0514f071c4fa8e434b987f6a772" + integrity sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw== + dependencies: + object-assign "^4.1.1" + "@styled-system/css@^5.0.23": version "5.0.23" resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.0.23.tgz#35ad4f34fe0fec9b011a5468ac0821f12f5e4b1a" @@ -2831,6 +2905,13 @@ dependencies: "@styled-system/core" "^5.0.16" +"@styled-system/theme-get@5.1.2": + version "5.1.2" + resolved "https://registry.yarnpkg.com/@styled-system/theme-get/-/theme-get-5.1.2.tgz#b40a00a44da63b7a6ed85f73f737c4defecd6049" + integrity sha512-afAYdRqrKfNIbVgmn/2Qet1HabxmpRnzhFwttbGr6F/mJ4RDS/Cmn+KHwHvNXangQsWw/5TfjpWV+rgcqqIcJQ== + dependencies: + "@styled-system/core" "^5.1.2" + "@styled-system/typography@^5.1.1": version "5.1.1" resolved "https://registry.yarnpkg.com/@styled-system/typography/-/typography-5.1.1.tgz#3fd54a317e1fcb51c16e981f23ba3f03de2cd515" @@ -3218,6 +3299,20 @@ dependencies: csstype "^2.6.4" +"@types/styled-system@^5.1.4": + version "5.1.4" + resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.4.tgz#c273b1ebb9b26cb1bd9282c994fc56c82d0fbfaf" + integrity sha512-iBtFFmlxBbiTMpoKvRupwg75PeVbf7BBsgTlpcVBBbZyUKrhuU/4jtJQUn/wsSndKfxW0U9T17Geq0GGFWkCZw== + dependencies: + csstype "^2.6.4" + +"@types/styled-system__css@^5.0.4": + version "5.0.4" + resolved "https://registry.yarnpkg.com/@types/styled-system__css/-/styled-system__css-5.0.4.tgz#df83b015cf377ab39ecf33ea31339c05eeb9230a" + integrity sha512-SHHoNh9cCRTG9hcmCD2ua0NeYUrLmLXoMJ7g0U/e0FjrzcwNQtM5wjjEJVCVZymU632xA1PdPEykrtoSHTIecA== + dependencies: + csstype "^2.6.6" + "@types/webpack-env@*": version "1.14.0" resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.0.tgz#8edfc5f8e6eae20eeed3ca0d02974ed4ee5e4efc" @@ -4310,6 +4405,22 @@ babel-plugin-emotion@^10.0.0, babel-plugin-emotion@^10.0.14, babel-plugin-emotio find-root "^1.1.0" source-map "^0.5.7" +babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23: + version "10.0.23" + resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b" + integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@emotion/hash" "0.7.3" + "@emotion/memoize" "0.7.3" + "@emotion/serialize" "^0.11.14" + babel-plugin-macros "^2.0.0" + babel-plugin-syntax-jsx "^6.18.0" + convert-source-map "^1.5.0" + escape-string-regexp "^1.0.5" + find-root "^1.1.0" + source-map "^0.5.7" + babel-plugin-emotion@^9.2.11: version "9.2.11" resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728" @@ -6734,6 +6845,11 @@ csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7, csstype@^2.6.4: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41" integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg== +csstype@^2.6.6: + version "2.6.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" + integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" From 32c2374c55a4de6cd1f4dcc90b4d7391acb7668a Mon Sep 17 00:00:00 2001 From: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> Date: Mon, 25 Nov 2019 16:29:23 -0500 Subject: [PATCH 8/9] Make BaseInput responsive. Leverage css prop (#45) * Make BaseInput responsive. Leverage css prop * Remove usage of cssGet in favour of core/css * Fix core/css function. Convert input wrapper to use css props * Leverage css props for input * Replace setBaseInputSize * Add percy breakpoint snapshots * Resize label component for mobile --- packages/flame/src/Core/index.tsx | 2 +- packages/flame/src/Input/Input.tsx | 344 ++++++++---------- .../Input/__snapshots__/Input.test.tsx.snap | 42 ++- packages/flame/src/Input/story.tsx | 155 ++++---- 4 files changed, 252 insertions(+), 291 deletions(-) diff --git a/packages/flame/src/Core/index.tsx b/packages/flame/src/Core/index.tsx index 7d5a20b6..b6129362 100644 --- a/packages/flame/src/Core/index.tsx +++ b/packages/flame/src/Core/index.tsx @@ -156,7 +156,7 @@ type flameCssCallback = (get: (path: string) => any, theme: object) => object; * issues with css props */ const flameCss = (cb: flameCssCallback): any => { - return styledSystemCss(theme => cb(get(theme), get)); + return styledSystemCss(theme => cb(get(theme), theme)); }; export { diff --git a/packages/flame/src/Input/Input.tsx b/packages/flame/src/Input/Input.tsx index b04000b4..0fbfa0a2 100644 --- a/packages/flame/src/Input/Input.tsx +++ b/packages/flame/src/Input/Input.tsx @@ -1,12 +1,6 @@ import * as React from 'react'; -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; -import { themeGet } from '@styled-system/theme-get'; -import { layout, LayoutProps, zIndex, ZIndexProps, compose } from 'styled-system'; -import { Merge } from 'type-fest'; - -import { Flex, Box, border, BorderProps } from '../Core'; +import { Flex, Box, BorderProps, css } from '../Core'; import { Label, FormHelper } from '../FormField'; import { IconVerified } from '../Icon/Verified'; @@ -16,181 +10,88 @@ import { IconDanger } from '../Icon/Danger'; type StatusType = 'valid' | 'error' | 'warning'; type InputSizes = 'small' | 'regular' | 'large'; -type StyledInputProps = { - inputSize?: InputSizes; - hasSuffix?: boolean; - hasPrefix?: boolean; - readOnly?: boolean; -}; -const StyledInput = styled('input')` - width: 100%; - flex: 1 1 0%; - box-sizing: border-box; - height: ${themeGet('space.6')}; - font-family: ${themeGet('fontFamily.sans-serif')}; - font-size: ${themeGet('fontSizes.text-s')}; - padding-left: ${themeGet('space.2')}; - padding-right: ${themeGet('space.2')}; - border: solid 1px transparent; - background: transparent; - color: ${themeGet('inputStyles.color')}; - min-width: 0; - transition: all ${themeGet('transition.transition-duration-fast')} ease-in-out; - - &:disabled { - opacity: 1; - } - - ${props => { - switch (props.inputSize) { - case 'small': - return css` - font-size: ${themeGet('fontSizes.text-xs')(props)}; - height: ${themeGet('space.5')(props)}; - `; - case 'large': - return css` - height: ${themeGet('space.7')(props)}; - `; - case 'regular': - default: - return css``; - } - }} - - ${props => - props.hasPrefix && - css` - padding-left: 0; - `}; - - ${props => - props.hasSuffix && - css` - padding-right: 0; - `}; - - &::placeholder { - color: ${themeGet('inputStyles.placeholder.color')}; - } - - &:focus, - &:active { - outline: none; - } - - ${props => - props.readOnly && - css` - color: ${themeGet('inputStyles.readonly.color')(props)}; - `}; - - &:not([disabled]):not([readonly]):hover + div { - border-color: ${themeGet('inputStyles.hover.border')}; - } - - /* Prettier does some nasty things if we merge both selectors... */ - &:not([disabled]):not([readonly]):focus + div { - border-color: ${themeGet('inputStyles.focus.border')}; - } - - &:not([disabled]):not([readonly]):active + div { - border-color: ${themeGet('inputStyles.active.border')}; - } -`; - -interface InputBackdropProps extends BorderProps { +interface InputBackdropProps { status?: StatusType; } -const InputBackdrop = styled('div')` - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - pointer-events: none; - border-radius: ${themeGet('radii.radius-1')}; - background: transparent; - box-shadow: ${themeGet('inputStyles.boxShadow')}; - border: solid 1px ${themeGet('inputStyles.border')}; - transition: border-color ${themeGet('transition.transition-duration-fast')} ease-in-out; - - ${props => - props.status === 'error' && - css` - border-color: ${themeGet('inputStyles.error.border')(props)} !important; - `}; - ${border} -`; +const InputBackdrop: React.FC = ({ status, children, ...restProps }) => ( +
({ + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + pointerEvents: 'none', + borderRadius: 'radius-1', + background: 'transparent', + boxShadow: get('inputStyles.boxShadow'), + border: `solid 1px ${get('inputStyles.border')}`, + transition: `border-color ${get('transition.transition-duration-fast')} ease-in-out`, + ...(status === 'error' && { + borderColor: `${get('inputStyles.error.border')} !important`, + }), + }))} + {...restProps} + > + {children} +
+); -interface WrapperProps extends BorderProps, LayoutProps, ZIndexProps { +interface WrapperProps { disabled: boolean; readOnly: boolean; isAutofilled: boolean; status?: StatusType; } -const Wrapper = styled('div')` - position: relative; - display: flex; - align-items: center; - border-radius: ${themeGet('radii.radius-2')}; - background: ${themeGet('inputStyles.background')}; - transition: all ${themeGet('transition.transition-duration-fast')} ease-in-out; - width: 100%; - - ${compose( - layout, - border, - zIndex, - )} - - ${props => - props.disabled && - css` - color: ${themeGet('inputStyles.disabled.color')(props)}; - background: ${themeGet('inputStyles.disabled.background')(props)}; - -webkit-text-fill-color: currentColor; - `}; - - ${props => - props.readOnly && - css` - background: ${themeGet('inputStyles.readonly.background')(props)}; - `}; - - ${props => - props.isAutofilled && - css` - background: ${themeGet('inputStyles.autofilled.background')(props)}; - background-image: none; - color: ${themeGet('inputStyles.autofilled.color')(props)}; - `}; - - ${props => { - switch (props.status) { - case 'error': - return css` - .cr-input__status-icon { - fill: ${themeGet('inputStyles.error.border')(props)}; - } - `; - case 'valid': - return css` - .cr-input__status-icon { - fill: ${themeGet('inputStyles.valid.color')(props)}; - } - `; - case 'warning': - return css` - .cr-input__status-icon { - fill: ${themeGet('inputStyles.warning.color')(props)}; - } - `; - default: - return ''; - } - }}; -`; +const Wrapper: React.FC = ({ + disabled, + readOnly, + isAutofilled, + status, + children, + ...restProps +}) => ( +
({ + position: 'relative', + display: 'flex', + alignItems: 'center', + transition: `all ${get('transition.transition-duration-fast')} ease-in-out`, + background: get('inputStyles.background'), + ...(disabled && { + color: get('inputStyles.disabled.color'), + background: get('inputStyles.disabled.background'), + '-webkit-text-fill-color': 'currentColor', + }), + ...(readOnly && { + background: get('inputStyles.readonly.background'), + }), + ...(isAutofilled && { + background: get('inputStyles.autofilled.background'), + backgroundImage: 'none', + color: get('inputStyles.autofilled.color'), + }), + ...(status === 'error' && { + '.cr-input__status-icon': { + fill: get('inputStyles.error.border'), + }, + }), + ...(status === 'valid' && { + '.cr-input__status-icon': { + fill: get('inputStyles.valid.color'), + }, + }), + ...(status === 'warning' && { + '.cr-input__status-icon': { + fill: get('inputStyles.warning.color'), + }, + }), + }))} + {...restProps} + > + {children} +
+); interface StatusIconProps { status?: StatusType; @@ -208,11 +109,9 @@ const StatusIcon: React.FC = ({ status }) => { } }; -export type BaseInputProps = Merge< - Omit, 'size' | 'prefix'>, - Omit -> & - InputBackdropProps & { +export type BaseInputProps = Omit, 'size' | 'prefix'> & + BorderProps & { + readOnly?: boolean; size?: InputSizes; status?: StatusType; disabled?: boolean; @@ -246,41 +145,85 @@ const BaseInput = React.forwardRef( return ( ({ + borderRadius: borderRadius || get('radii.radius-2'), + width: width || '100%', + borderLeft, + borderRight, + borderTopLeftRadius, + borderTopRightRadius, + borderBottomLeftRadius, + borderBottomRightRadius, + }))} > {prefix && ( {prefix} )} - ({ + color: readOnly ? get('inputStyles.readonly.color') : get('inputStyles.color'), + width: '100%', + flex: '1 1 0%', + boxSizing: 'border-box', + border: 'solid 1px transparent', + background: 'transparent', + fontFamily: 'sans-serif', + minWidth: 0, + fontSize: ['text', 'text-s'], + height: ['40px', '36px'], + paddingLeft: prefix ? 0 : 2, + paddingRight: suffix ? 0 : 2, + '&::placeholder': { + color: get('inputStyles.placeholder.color'), + }, + transition: `all ${get('transition.transition-duration-fast')} ease-in-out`, + '&:disabled': { + opacity: 1, + }, + '&:focus': { + outline: 'none', + }, + '&:active ': { + outline: 'none', + }, + '&:not([disabled]):not([readonly]):hover + div ': { + borderColor: get('inputStyles.hover.border'), + }, + '&:not([disabled]):not([readonly]):focus + div ': { + borderColor: get('inputStyles.focus.border'), + }, + '&:not([disabled]):not([readonly]):active + div ': { + borderColor: get('inputStyles.active.border'), + }, + ...(size === 'small' && { + fontSize: 'text-xs', + height: get('space.5'), + }), + ...(size === 'large' && { + height: get('space.7'), + }), + }))} {...restProps} /> ({ + borderLeft, + borderRight, + borderRadius, + borderTopLeftRadius, + borderTopRightRadius, + borderBottomLeftRadius, + borderBottomRightRadius, + }))} /> {(status || suffix) && ( @@ -338,6 +281,9 @@ pass the status.message to the statusMessage prop. htmlFor={id} description={description} descriptionProps={{ id: descriptionId }} + css={css(() => ({ + fontSize: ['text', 'text-s'], + }))} > {labelHelper ? ( Snapshot should match snapshot 1`] = ` -.emotion-4 { +.emotion-2 { position: relative; display: -webkit-box; display: -webkit-flex; @@ -11,34 +11,37 @@ exports[` Snapshot should match snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - border-radius: 0.375rem; - background: #fff; -webkit-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; + background: #fff; + border-radius: 0.375rem; width: 100%; } .emotion-0 { + color: #494c4c; width: 100%; -webkit-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; box-sizing: border-box; - height: 2.25rem; - font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; - font-size: 0.875rem; - padding-left: 0.75rem; - padding-right: 0.75rem; border: solid 1px transparent; background: transparent; - color: #494c4c; + font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; min-width: 0; + font-size: 1rem; + height: 40px; + padding-left: 0.75rem; + padding-right: 0.75rem; -webkit-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; } -.emotion-0:disabled { - opacity: 1; +@media screen and (min-width:601px) { + .emotion-0 { + font-size: 0.875rem; + height: 36px; + } } .emotion-0::-webkit-input-placeholder { @@ -57,7 +60,14 @@ exports[` Snapshot should match snapshot 1`] = ` color: #abb3b3; } -.emotion-0:focus, +.emotion-0:disabled { + opacity: 1; +} + +.emotion-0:focus { + outline: none; +} + .emotion-0:active { outline: none; } @@ -74,7 +84,7 @@ exports[` Snapshot should match snapshot 1`] = ` border-color: #2875c6; } -.emotion-2 { +.emotion-1 { position: absolute; top: 0; bottom: 0; @@ -90,16 +100,16 @@ exports[` Snapshot should match snapshot 1`] = ` }
`; diff --git a/packages/flame/src/Input/story.tsx b/packages/flame/src/Input/story.tsx index 987c5d60..02e6563d 100644 --- a/packages/flame/src/Input/story.tsx +++ b/packages/flame/src/Input/story.tsx @@ -9,6 +9,7 @@ import { Box } from '../Core'; import { Badge } from '../Badge'; import { Button } from '../Button'; import { Icon } from '../Icon'; +import { percyBreakpoints, percySkip } from '../../../../stories/helpers/percy'; const stories = storiesOf('Input', module).addDecorator(withReadme(Readme)); @@ -68,94 +69,98 @@ class InputWrapper extends React.Component { } } -stories.add('Story', () => ( -
- -

Simple text input

- - - -

Advanced text input

- - Label Helper - - } - textHelper="Text Helper" - description="Description text" - placeholder="Placeholder text..." - prefix="$" - suffix="*" - /> - - -

States

- - - - - - - - - - - - - - - - - } - suffix={} - /> - - - - - - - - +stories.add( + 'Story', + () => (
-

Size

- +

Simple text input

+ - +

Advanced text input

+ + Label Helper + + } + textHelper="Text Helper" + description="Description text" + placeholder="Placeholder text..." + prefix="$" + suffix="*" + /> + +

States

- + -
-
-

Input Error Text

- + + + + + + + + + + -
-
-

Input Error Text (using the legacy API)

} + suffix={} /> + + + + + + + +
+

Size

+ + + + + + + + + +
+
+

Input Error Text

+ + + +
+
+

Input Error Text (using the legacy API)

+ + + +
-
-)); + ), + { ...percyBreakpoints }, +); stories.add( 'Events', @@ -179,5 +184,5 @@ stories.add(
), - { percy: { skip: true } }, + { ...percySkip }, ); From 0db09e463a2a168f5e985861435a0b5ca66c2589 Mon Sep 17 00:00:00 2001 From: Xavier Drdak <1198051+xdrdak@users.noreply.github.com> Date: Tue, 26 Nov 2019 13:16:04 -0500 Subject: [PATCH 9/9] Make select more mobile friendly (#52) * Make select more mobile friendly * Add Percy breakpoints to select story * Fix border radii for select * Update select snapshot --- packages/flame/src/Select/Select.tsx | 102 ++++++++++-------- .../Select/__snapshots__/Select.test.tsx.snap | 23 ++-- packages/flame/src/Select/story.tsx | 75 +++++++------ 3 files changed, 117 insertions(+), 83 deletions(-) diff --git a/packages/flame/src/Select/Select.tsx b/packages/flame/src/Select/Select.tsx index 14c691f8..51ef7c57 100644 --- a/packages/flame/src/Select/Select.tsx +++ b/packages/flame/src/Select/Select.tsx @@ -1,56 +1,74 @@ +import * as React from 'react'; import styled from '@emotion/styled'; import { layout, LayoutProps, compose } from 'styled-system'; -import { themeGet } from '@styled-system/theme-get'; -import { border, BorderProps } from '../Core'; +import { border, BorderProps, css, themeGet } from '../Core'; export type SelectProps = React.SelectHTMLAttributes; -export const Select = styled('select') & BorderProps>` +interface BaseSelectProps extends Omit, BorderProps {} +const BaseSelect = styled('select')` width: 100%; - color: ${themeGet('selectStyles.color')}; - font-size: ${themeGet('fontSizes.text-s')}; - font-family: ${themeGet('fontFamily.sans-serif')}; - font-weight: ${themeGet('fontWeights.bold')}; - height: ${themeGet('space.6')}; - padding: 0 ${themeGet('space.4')} 0 ${themeGet('space.2')}; - background-color: ${themeGet('selectStyles.backgroundColor')}; border: 1px solid ${themeGet('selectStyles.border')}; border-radius: ${themeGet('radii.radius-1')}; - line-height: ${themeGet('space.3')}; - /* stylelint-disable declaration-colon-newline-after */ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='%23494c4c'%3E%3Cg id='chevron-up-down'%3E%3Cpath id='base-1' d='M8 12l2-2 1 1-3 3-3-3 1-1 2 2zm0-8L6 6 5 5l3-3 3 3-1 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"), - ${themeGet('selectStyles.background')}; - /* stylelint-enable */ - appearance: none; - background-repeat: no-repeat; - background-position: right ${themeGet('space.1')} center, center; - z-index: 2; - &:focus { - outline: none; - border-color: ${themeGet('selectStyles.focusBorder')}; - } - - &:disabled { - color: ${themeGet('selectStyles.disabledColor')}; - background-color: ${themeGet('selectStyles.disabledBackground')}; - box-shadow: none; - opacity: 0.5; - } - - /* IE 11 fix to remove default dropdown arrow */ - &::-ms-expand { - display: none; - } - - /* Firefox fix to remove inner outline on focus - // https://twitter.com/sarasoueidan/status/720890849748480002 */ - &:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 ${themeGet('selectStyles.color')}; - } ${compose( layout, border, )} `; + +const generateDataImage = (size: number) => { + return `"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='${size}' height='${size}' fill='%23494c4c'%3E%3Cg id='chevron-up-down'%3E%3Cpath id='base-1' d='M8 12l2-2 1 1-3 3-3-3 1-1 2 2zm0-8L6 6 5 5l3-3 3 3-1 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"`; +}; + +interface Props extends React.SelectHTMLAttributes, BaseSelectProps {} +export const Select: React.FC = ({ children, ...restProps }) => { + return ( + ({ + color: get('selectStyles.color'), + fontSize: ['text-l', 'text-s'], + fontFamily: 'sans-serif', + fontWeight: 'bold', + height: [get('space.8'), get('space.6')], + backgroundColor: get('selectStyles.backgroundColor'), + lineHeight: get('space.3'), + backgroundImage: [ + `url(${generateDataImage(24)}), ${get('selectStyles.background')}`, + `url(${generateDataImage(16)}), ${get('selectStyles.background')}`, + ], + appearance: 'none', + backgroundRepeat: 'no-repeat', + backgroundPosition: `right ${get('space.1')} center, center`, + zIndex: 2, + pt: 0, + pr: 4, + pb: 0, + pl: 2, + '&:focus': { + outline: 'none', + borderColor: get('selectStyles.focusBorder'), + }, + '&:disabled': { + color: get('selectStyles.disabledColor'), + backgroundColor: get('selectStyles.disabledBackground'), + boxShadow: 'none', + opacity: 0.5, + }, + /* IE 11 fix to remove default dropdown arrow */ + '&::-ms-expand': { + display: 'none', + }, + /* Firefox fix to remove inner outline on focus + // https://twitter.com/sarasoueidan/status/720890849748480002 */ + '&:-moz-focusring': { + color: 'transparent', + textShadow: ` 0 0 0 ${get('selectStyles.color')}`, + }, + }))} + {...restProps} + > + {children} + + ); +}; diff --git a/packages/flame/src/Select/__snapshots__/Select.test.tsx.snap b/packages/flame/src/Select/__snapshots__/Select.test.tsx.snap index 649b4f24..e13309e9 100644 --- a/packages/flame/src/Select/__snapshots__/Select.test.tsx.snap +++ b/packages/flame/src/Select/__snapshots__/Select.test.tsx.snap @@ -3,23 +3,34 @@ exports[`Select renders correctly 1`] = ` .emotion-0 { width: 100%; + border: 1px solid #c4cacc; + border-radius: 0.1875rem; color: #494c4c; - font-size: 0.875rem; + font-size: 1.125rem; font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 700; - height: 2.25rem; - padding: 0 1.5rem 0 0.75rem; + height: 3rem; background-color: #fff; - border: 1px solid #c4cacc; - border-radius: 0.1875rem; line-height: 1.125rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='%23494c4c'%3E%3Cg id='chevron-up-down'%3E%3Cpath id='base-1' d='M8 12l2-2 1 1-3 3-3-3 1-1 2 2zm0-8L6 6 5 5l3-3 3 3-1 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#f3f3f3); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='24' height='24' fill='%23494c4c'%3E%3Cg id='chevron-up-down'%3E%3Cpath id='base-1' d='M8 12l2-2 1 1-3 3-3-3 1-1 2 2zm0-8L6 6 5 5l3-3 3 3-1 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#f3f3f3); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 0.375rem center,center; z-index: 2; + padding-top: 0; + padding-right: 1.5rem; + padding-bottom: 0; + padding-left: 0.75rem; +} + +@media screen and (min-width:601px) { + .emotion-0 { + font-size: 0.875rem; + height: 2.25rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='%23494c4c'%3E%3Cg id='chevron-up-down'%3E%3Cpath id='base-1' d='M8 12l2-2 1 1-3 3-3-3 1-1 2 2zm0-8L6 6 5 5l3-3 3 3-1 1-2-2z'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#fff,#f3f3f3); + } } .emotion-0:focus { diff --git a/packages/flame/src/Select/story.tsx b/packages/flame/src/Select/story.tsx index f299a9ea..a0268ccb 100644 --- a/packages/flame/src/Select/story.tsx +++ b/packages/flame/src/Select/story.tsx @@ -7,41 +7,46 @@ import { Box } from '../Core'; import SelectExample from './examples'; import Readme from './README.md'; +import { percyBreakpoints } from '../../../../stories/helpers/percy'; const stories = storiesOf('Select', module).addDecorator(withReadme(Readme)); -stories.add('Story', () => ( - - Default - - - - - - - - Option variants - - - - - - - - - - - - - Disabled - - - - - - - - -)); +stories.add( + 'Story', + () => ( + + Default + + + + + + + + Option variants + + + + + + + + + + + + + Disabled + + + + + + + + + ), + { ...percyBreakpoints }, +);