From 1a1336fdac0770b45505ce5b1a0743067a565b1c Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Tue, 23 Feb 2021 15:36:06 -0700 Subject: [PATCH 1/6] Change form error state placement, capture in snapshot --- src/components/FormErrorState.stories.tsx | 12 +++++++++++- src/components/Input.js | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/FormErrorState.stories.tsx b/src/components/FormErrorState.stories.tsx index e329dd0d..8f45e7ca 100644 --- a/src/components/FormErrorState.stories.tsx +++ b/src/components/FormErrorState.stories.tsx @@ -14,6 +14,7 @@ import { import { Button } from './Button'; // @ts-ignore import { Input as UnstyledInput } from './Input'; +import { breakpoint } from './shared/styles'; export default { title: 'forms/FormErrorState', @@ -21,7 +22,11 @@ export default { }; const FormWrapper = styled.div` - padding: 3em 12em; + padding: 3em 2em; + + @media (min-width: ${breakpoint}px) { + padding: 3em 12em; + } `; const Input = styled(UnstyledInput)` @@ -104,3 +109,8 @@ PureMultipleErrors.args = { blurredFieldIds: new Set(['input-1', 'input-2']), children: Children, }; +PureMultipleErrors.story = { + parameters: { + chromatic: { viewports: [breakpoint - 1, 1200] }, + }, +}; diff --git a/src/components/Input.js b/src/components/Input.js index 0bec7bcf..4d29c8f3 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -327,7 +327,7 @@ export const PureInput = forwardRef( */} Date: Wed, 24 Feb 2021 10:11:42 -0700 Subject: [PATCH 2/6] Allow for error tooltip placement --- src/components/Input.js | 5 ++++- src/components/Input.stories.js | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Input.js b/src/components/Input.js index 4d29c8f3..0867e86f 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -268,6 +268,7 @@ export const PureInput = forwardRef( icon, error, appearance, + errorTooltipPlacement, className, lastErrorValue, startingType, @@ -327,7 +328,7 @@ export const PureInput = forwardRef( */} ( placeholder="Error with icon" icon="email" error="There's a snake in my boots" + errorTooltipPlacement="bottom" onChange={onChange} appearance={appearance} /> From d6b517fe6c6e256087ea8290d3fdab6b4147f2ab Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Wed, 24 Feb 2021 10:12:47 -0700 Subject: [PATCH 3/6] Remove viewport story for FormErrorState --- src/components/FormErrorState.stories.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/components/FormErrorState.stories.tsx b/src/components/FormErrorState.stories.tsx index 8f45e7ca..4240d363 100644 --- a/src/components/FormErrorState.stories.tsx +++ b/src/components/FormErrorState.stories.tsx @@ -14,7 +14,6 @@ import { import { Button } from './Button'; // @ts-ignore import { Input as UnstyledInput } from './Input'; -import { breakpoint } from './shared/styles'; export default { title: 'forms/FormErrorState', @@ -23,10 +22,6 @@ export default { const FormWrapper = styled.div` padding: 3em 2em; - - @media (min-width: ${breakpoint}px) { - padding: 3em 12em; - } `; const Input = styled(UnstyledInput)` @@ -109,8 +104,3 @@ PureMultipleErrors.args = { blurredFieldIds: new Set(['input-1', 'input-2']), children: Children, }; -PureMultipleErrors.story = { - parameters: { - chromatic: { viewports: [breakpoint - 1, 1200] }, - }, -}; From f17095c5c540213c091e7c87be52c71692f93158 Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Wed, 24 Feb 2021 10:17:29 -0700 Subject: [PATCH 4/6] Set FormErrorState padding back to 3em 12em --- src/components/FormErrorState.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormErrorState.stories.tsx b/src/components/FormErrorState.stories.tsx index 4240d363..e329dd0d 100644 --- a/src/components/FormErrorState.stories.tsx +++ b/src/components/FormErrorState.stories.tsx @@ -21,7 +21,7 @@ export default { }; const FormWrapper = styled.div` - padding: 3em 2em; + padding: 3em 12em; `; const Input = styled(UnstyledInput)` From 9d238e63ee2442428f35e9119de5f1724edab791 Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Wed, 24 Feb 2021 12:09:39 -0700 Subject: [PATCH 5/6] Change last error location to left --- src/components/Input.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Input.stories.js b/src/components/Input.stories.js index cc1b6c05..05d3c665 100644 --- a/src/components/Input.stories.js +++ b/src/components/Input.stories.js @@ -140,7 +140,7 @@ const All = ({ appearance }) => ( placeholder="Error with icon" icon="email" error="There's a snake in my boots" - errorTooltipPlacement="bottom" + errorTooltipPlacement="left" onChange={onChange} appearance={appearance} /> From 594a6af81c239f796fa03f68ed5e10bf7743203b Mon Sep 17 00:00:00 2001 From: Kyle Suss Date: Wed, 24 Feb 2021 15:08:27 -0700 Subject: [PATCH 6/6] Add valid placements in proptypes --- src/components/Input.js | 4 ++-- src/components/tooltip/WithTooltip.js | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/Input.js b/src/components/Input.js index 0867e86f..4d8ff262 100644 --- a/src/components/Input.js +++ b/src/components/Input.js @@ -5,7 +5,7 @@ import { color, typography, spacing } from './shared/styles'; import { jiggle } from './shared/animation'; import { Icon } from './Icon'; import { Link } from './Link'; -import WithTooltip from './tooltip/WithTooltip'; +import WithTooltip, { validPlacements as validTooltipPlacements } from './tooltip/WithTooltip'; import { TooltipMessage } from './tooltip/TooltipMessage'; // prettier-ignore @@ -358,7 +358,7 @@ PureInput.propTypes = { id: PropTypes.string.isRequired, value: PropTypes.string, appearance: PropTypes.oneOf(['default', 'secondary', 'tertiary', 'pill', 'code']), - errorTooltipPlacement: PropTypes.string, + errorTooltipPlacement: PropTypes.oneOf(validTooltipPlacements), stackLevel: PropTypes.oneOf(['top', 'middle', 'bottom']), label: PropTypes.string.isRequired, hideLabel: PropTypes.bool, diff --git a/src/components/tooltip/WithTooltip.js b/src/components/tooltip/WithTooltip.js index eb908e57..9aeb5e6a 100644 --- a/src/components/tooltip/WithTooltip.js +++ b/src/components/tooltip/WithTooltip.js @@ -169,11 +169,17 @@ function WithTooltip({ ); } +const placementVariations = ['start', 'end']; +export const validPlacements = ['auto', 'top', 'right', 'left', 'bottom'].flatMap((placement) => [ + placement, + ...placementVariations.map((variation) => `${placement}-${variation}`), +]); + WithTooltip.propTypes = { tagName: PropTypes.string, trigger: PropTypes.string, closeOnClick: PropTypes.bool, - placement: PropTypes.string, + placement: PropTypes.oneOf(validPlacements), modifiers: PropTypes.shape({}), hasChrome: PropTypes.bool, tooltip: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),