From bef542c7e4ca3c10b4f75d3e5671d89681729b41 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 21 Jun 2019 16:58:09 -0700 Subject: [PATCH 01/12] Add fullWidth prop (WIP) --- src/shared-components/button/index.js | 4 ++++ src/shared-components/button/style.js | 6 ++++++ 2 files changed, 10 insertions(+) diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js index e3ce54595..8c0cae48f 100644 --- a/src/shared-components/button/index.js +++ b/src/shared-components/button/index.js @@ -22,6 +22,7 @@ class Button extends React.Component { loading: PropTypes.bool, icon: PropTypes.node, textColor: PropTypes.string, + fullWidth: PropTypes.bool, }; static defaultProps = { @@ -30,6 +31,7 @@ class Button extends React.Component { loading: false, onClick() {}, textColor: '', + fullWidth: false, }; render() { @@ -41,6 +43,7 @@ class Button extends React.Component { loading, icon, textColor, + fullWidth, ...rest } = this.props; @@ -52,6 +55,7 @@ class Button extends React.Component { loading={loading} type="button" textColor={textColor} + fullWidth={fullWidth} {...rest} > diff --git a/src/shared-components/button/style.js b/src/shared-components/button/style.js index 102ac90ed..50d7a7464 100644 --- a/src/shared-components/button/style.js +++ b/src/shared-components/button/style.js @@ -118,6 +118,7 @@ export const baseButtonStyles = ({ buttonType, loading, textColor, + fullWidth, }) => css` ${TYPOGRAPHY_STYLE.button}; appearance: none; @@ -155,6 +156,11 @@ export const baseButtonStyles = ({ color: ${textColor}; fill: ${textColor}; `}; + + ${fullWidth && + ` + width: 100%; + `} `; export const ButtonBase = styled.button(baseButtonStyles); From 6d587302e539082699a8831b184019f8e7cd6c31 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 28 Jun 2019 16:21:57 -0700 Subject: [PATCH 02/12] Add Full Button Width story buttons --- stories/button/button/index.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/stories/button/button/index.js b/stories/button/button/index.js index 0e4596d96..b58bccd65 100644 --- a/stories/button/button/index.js +++ b/stories/button/button/index.js @@ -30,6 +30,7 @@ const ButtonStory = withDocs(ButtonReadme, () => ( + + ( + + Date: Fri, 28 Jun 2019 16:25:15 -0700 Subject: [PATCH 03/12] Update button width styling when fullWidth prop is added --- src/shared-components/button/style.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/shared-components/button/style.js b/src/shared-components/button/style.js index cc33917b9..f4d9fe247 100644 --- a/src/shared-components/button/style.js +++ b/src/shared-components/button/style.js @@ -128,15 +128,12 @@ export const baseButtonStyles = ({ cursor: pointer; display: block; margin: 0; - max-width: 325px; min-height: 52px; - min-width: 208px; opacity: 1; padding: 0 ${SPACER.large}; position: relative; transition: all ${ANIMATION.defaultTiming} ease-in-out; text-decoration: none; - width: max-content; &:hover { transition: all ${ANIMATION.defaultTiming} ease-in-out; @@ -156,11 +153,17 @@ export const baseButtonStyles = ({ color: ${textColor}; fill: ${textColor}; `}; - - ${fullWidth && - ` - width: 100%; - `} + + ${fullWidth + ? ` + width: 100%; + ` + : ` + min-width: 208px; + max-width: 325px; + width: max-content; + + `}; `; export const ButtonBase = styled.button(baseButtonStyles); From a81cfe39f6120b72948b19c8f68bd15c83768f57 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 28 Jun 2019 16:28:33 -0700 Subject: [PATCH 04/12] Update snapshots --- .../button/__snapshots__/test.js.snap | 10 +++++----- .../components/linkButton/__snapshots__/test.js.snap | 10 +++++----- .../components/roundButton/__snapshots__/test.js.snap | 10 +++++----- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/shared-components/button/__snapshots__/test.js.snap b/src/shared-components/button/__snapshots__/test.js.snap index 2feb2a26f..40879f440 100644 --- a/src/shared-components/button/__snapshots__/test.js.snap +++ b/src/shared-components/button/__snapshots__/test.js.snap @@ -110,9 +110,7 @@ exports[` + + @@ -37,10 +41,13 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; - + + @@ -53,6 +60,9 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; + ; ``` From 1dfa35bb4dc9ae7f23e5b4dda28a1b5914062ae1 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 28 Jun 2019 16:39:22 -0700 Subject: [PATCH 06/12] Add fullWidth to prop table --- docs/button/button.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/button/button.md b/docs/button/button.md index b2e66337d..e384db0eb 100644 --- a/docs/button/button.md +++ b/docs/button/button.md @@ -80,6 +80,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; | isLoading | bool | no | false | renders loading state and prevents click listener from being called | | onClick | func | no | () => {} | callback function called on click of the button | | textColor | string | no | '' | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true) | +| fullWidth | bool | no | false | adjusts the default button styles so that the button takes the full width of the container | ### Notes From 00ac6689dbefac0d22ef4fab6175ffaa99dcf815 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Mon, 1 Jul 2019 12:52:43 -0700 Subject: [PATCH 07/12] Rename fullWidth to isFullWidth --- docs/button/button.md | 28 +++++++++++++-------------- src/shared-components/button/index.js | 8 ++++---- src/shared-components/button/style.js | 4 ++-- stories/button/button/index.js | 11 +++++------ 4 files changed, 25 insertions(+), 26 deletions(-) diff --git a/docs/button/button.md b/docs/button/button.md index e384db0eb..5f7d09c48 100644 --- a/docs/button/button.md +++ b/docs/button/button.md @@ -13,7 +13,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; - + - @@ -44,7 +44,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; - @@ -60,7 +60,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; - @@ -71,16 +71,16 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; ### Proptypes -| prop | propType | required | default | description | -| ---------- | -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- | -| buttonType | string | no | primary | Determines the button's main style theme. Must be one of `primary`, `secondary`, `tertiary`, `quaternary`. | -| children | node | yes | - | node to be rendered inside the button. Recommended to be the button text | -| disabled | bool | no | false | when disabled, click listener will not be called and the UI will look disabled | -| icon | node | no | null | icon to render in the button. Recommended to use one of Radiance's icons | -| isLoading | bool | no | false | renders loading state and prevents click listener from being called | -| onClick | func | no | () => {} | callback function called on click of the button | -| textColor | string | no | '' | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true) | -| fullWidth | bool | no | false | adjusts the default button styles so that the button takes the full width of the container | +| prop | propType | required | default | description | +| ----------- | -------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- | +| buttonType | string | no | primary | Determines the button's main style theme. Must be one of `primary`, `secondary`, `tertiary`, `quaternary`. | +| children | node | yes | - | node to be rendered inside the button. Recommended to be the button text | +| disabled | bool | no | false | when disabled, click listener will not be called and the UI will look disabled | +| icon | node | no | null | icon to render in the button. Recommended to use one of Radiance's icons | +| isLoading | bool | no | false | renders loading state and prevents click listener from being called | +| onClick | func | no | () => {} | callback function called on click of the button | +| textColor | string | no | '' | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true) | +| isFullWidth | bool | no | false | adjusts the default button styles so that the button takes the full width of the container | ### Notes diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js index 9dfaf76a8..73921df60 100644 --- a/src/shared-components/button/index.js +++ b/src/shared-components/button/index.js @@ -36,7 +36,7 @@ class Button extends React.Component { isLoading: PropTypes.bool, icon: PropTypes.node, textColor: PropTypes.string, - fullWidth: PropTypes.bool, + isFullWidth: PropTypes.bool, }; static defaultProps = { @@ -45,7 +45,7 @@ class Button extends React.Component { isLoading: false, onClick() {}, textColor: '', - fullWidth: false, + isFullWidth: false, }; render() { @@ -58,7 +58,7 @@ class Button extends React.Component { isLoading, icon, textColor, - fullWidth, + isFullWidth, ...rest } = this.props; @@ -74,7 +74,7 @@ class Button extends React.Component { isLoading={loadingVal} type="button" textColor={textColor} - fullWidth={fullWidth} + isFullWidth={isFullWidth} {...rest} > diff --git a/src/shared-components/button/style.js b/src/shared-components/button/style.js index f4d9fe247..b02ad1554 100644 --- a/src/shared-components/button/style.js +++ b/src/shared-components/button/style.js @@ -118,7 +118,7 @@ export const baseButtonStyles = ({ buttonType, isLoading, textColor, - fullWidth, + isFullWidth, }) => css` ${TYPOGRAPHY_STYLE.button}; appearance: none; @@ -154,7 +154,7 @@ export const baseButtonStyles = ({ fill: ${textColor}; `}; - ${fullWidth + ${isFullWidth ? ` width: 100%; ` diff --git a/stories/button/button/index.js b/stories/button/button/index.js index b58bccd65..2781d1822 100644 --- a/stories/button/button/index.js +++ b/stories/button/button/index.js @@ -3,8 +3,7 @@ import { text, select, boolean } from '@storybook/addon-knobs'; import { withDocs } from 'storybook-readme'; import { action } from '@storybook/addon-actions'; import { css } from '@emotion/core'; - -import ButtonReadme from 'docs/button/button.md'; +import ButtonReadme from 'docs/button/button'; import { CheckmarkIcon } from 'src/svgs/icons'; import { Button, Typography } from 'src/shared-components'; import { SPACER } from 'src/constants'; @@ -30,7 +29,7 @@ const ButtonStory = withDocs(ButtonReadme, () => ( - + - @@ -74,7 +73,7 @@ const ButtonStory = withDocs(ButtonReadme, () => ( - @@ -90,7 +89,7 @@ const ButtonStory = withDocs(ButtonReadme, () => ( - From 7becf5ecd3ee23e7c4960bda1e3dfc1b1d7a61e3 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Mon, 1 Jul 2019 12:53:08 -0700 Subject: [PATCH 08/12] Add ESLint fix for stories error, resolve markdown file extension --- .storybook/webpack.config.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 075c2eb45..9dae80211 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -20,12 +20,16 @@ function removeDefaultStorybookSvgRule(config) { ); } -module.exports = ({ config }) => { +module.exports = webpackSettings => { + // ESLint fix for `Resolve error: Cannot destructure property" `config` of 'undefined' or 'null'` in /stories/**/index.js files. + if (!webpackSettings) return {}; + const { config } = webpackSettings; + removeDefaultStorybookSvgRule(config); config.resolve = { modules: [path.resolve(__dirname, '..'), 'node_modules'], - extensions: ['.js', '.jsx'], + extensions: ['.js', '.jsx', '.md'], }; const customRules = [ From e57a4d05e8f1fdd5d4f52ea086107cf992a4debb Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 2 Jul 2019 16:35:10 -0700 Subject: [PATCH 09/12] Add small fix for loading fullWidth icon button height issue --- src/shared-components/button/style.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/shared-components/button/style.js b/src/shared-components/button/style.js index b02ad1554..7c524bf2d 100644 --- a/src/shared-components/button/style.js +++ b/src/shared-components/button/style.js @@ -168,8 +168,17 @@ export const baseButtonStyles = ({ export const ButtonBase = styled.button(baseButtonStyles); +// align-items conditional fixes slight button height misalignment for truthy scenario +// See screenshot in: https://github.com/PocketDerm/radiance-ui/pull/129#issue-292994081 export const ButtonContents = styled.div` - align-items: center; + align-items: ${({ hasIcon, isFullWidth, isLoading }) => { + if (isFullWidth && isLoading && hasIcon) { + return 'baseline'; + } + + return 'center'; + }}; + display: flex; height: 100%; justify-content: center; From 418bae34e570e5bec981ed0ace87873cde54106b Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 2 Jul 2019 16:39:54 -0700 Subject: [PATCH 10/12] Add Loader styling for button when full width --- src/shared-components/button/index.js | 7 ++++++- .../button/shared-components/loader/index.js | 15 ++++++++++++--- .../button/shared-components/loader/style.js | 2 +- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js index 73921df60..1d5185966 100644 --- a/src/shared-components/button/index.js +++ b/src/shared-components/button/index.js @@ -77,7 +77,11 @@ class Button extends React.Component { isFullWidth={isFullWidth} {...rest} > - + {icon} ); diff --git a/src/shared-components/button/shared-components/loader/index.js b/src/shared-components/button/shared-components/loader/index.js index 4e2e03a64..2bd5b4eef 100644 --- a/src/shared-components/button/shared-components/loader/index.js +++ b/src/shared-components/button/shared-components/loader/index.js @@ -3,13 +3,21 @@ import PropTypes from 'prop-types'; import ButtonLoader from './style'; -const Loader = ({ isLoading, disabled, buttonType, className, textColor }) => ( +const Loader = ({ + buttonType, + className, + disabled, + isFullWidth, + isLoading, + textColor, +}) => (
@@ -20,8 +28,6 @@ const Loader = ({ isLoading, disabled, buttonType, className, textColor }) => ( ); Loader.propTypes = { - isLoading: PropTypes.bool, - disabled: PropTypes.bool, buttonType: PropTypes.oneOf([ 'primary', 'secondary', @@ -30,6 +36,9 @@ Loader.propTypes = { 'action', ]), className: PropTypes.string, + disabled: PropTypes.bool, + isFullWidth: PropTypes.bool, + isLoading: PropTypes.bool, textColor: PropTypes.string, }; diff --git a/src/shared-components/button/shared-components/loader/style.js b/src/shared-components/button/shared-components/loader/style.js index f4d80fa9b..44d79c5a3 100644 --- a/src/shared-components/button/shared-components/loader/style.js +++ b/src/shared-components/button/shared-components/loader/style.js @@ -35,7 +35,7 @@ const ButtonLoader = styled.div` right: 0; top: 0; margin-top: -6px; - width: 38px; + width: ${({ isFullWidth }) => (isFullWidth ? `25%` : `38px`)}; opacity: ${({ isLoading }) => (isLoading ? 1 : 0)}; & span { From b8dc12415bf85cf2f35f3377a3e8e46dcbcb784c Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 2 Jul 2019 17:05:50 -0700 Subject: [PATCH 11/12] Add TODO re: Loader component --- src/shared-components/button/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/shared-components/button/index.js b/src/shared-components/button/index.js index 1d5185966..66e1a58cf 100644 --- a/src/shared-components/button/index.js +++ b/src/shared-components/button/index.js @@ -19,6 +19,8 @@ const isLoadingPropFunction = (props, propName, componentName) => { } }; +// TODO: Move to be sibling of for more consistent +// loading animation spacing class Button extends React.Component { static Container = Container; From f71b24e454b817b408fe4c8df414c72747b62865 Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Tue, 2 Jul 2019 17:07:51 -0700 Subject: [PATCH 12/12] Expand on isFullWidth prop table note to mention mobile style preference --- docs/button/button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/button/button.md b/docs/button/button.md index 5f7d09c48..bc7365577 100644 --- a/docs/button/button.md +++ b/docs/button/button.md @@ -80,7 +80,7 @@ import { CheckmarkIcon } from 'radiance-ui/lib/icons'; | isLoading | bool | no | false | renders loading state and prevents click listener from being called | | onClick | func | no | () => {} | callback function called on click of the button | | textColor | string | no | '' | color (as a string) that will override existing text, icon, and loading colors for the button (except when disabled is true) | -| isFullWidth | bool | no | false | adjusts the default button styles so that the button takes the full width of the container | +| isFullWidth | bool | no | false | adjusts the default button styles so that the button takes the full width of the container. Intended for mobile-use only. | ### Notes