From 7b5b1c5a58cbaf4b0371ebd2c9753148f2bbd7a6 Mon Sep 17 00:00:00 2001 From: Edivan Silva Date: Thu, 21 Dec 2017 04:17:24 -0800 Subject: [PATCH] feat(select): Adjust accessibility for select / Abstract Helper to its own component (Feedback) / Add docs select component --- .../Checkbox/__tests__/Checkbox.spec.jsx | 2 +- src/components/Choice/Choice.jsx | 6 ++-- .../Helper.jsx => Feedback/Feedback.jsx} | 14 ++++---- src/components/Feedback/Feedback.modules.scss | 18 ++++++++++ .../__tests__/Feedback.spec.jsx} | 2 +- .../__snapshots__/Feedback.spec.jsx.snap} | 0 src/components/FormField/FormField.jsx | 34 +++++++++---------- .../FormField/Helper/Helper.modules.scss | 18 ---------- src/components/Input/Input.jsx | 4 +-- src/components/Input/__tests__/Input.spec.jsx | 2 +- src/components/Radio/__tests__/Radio.spec.jsx | 2 +- src/components/Select/Select.jsx | 2 +- src/components/Select/Select.md | 16 ++++++++- .../Select/__tests__/Select.spec.jsx | 2 +- .../Textarea/__tests__/Textarea.spec.jsx | 2 +- 15 files changed, 69 insertions(+), 55 deletions(-) rename src/components/{FormField/Helper/Helper.jsx => Feedback/Feedback.jsx} (57%) create mode 100644 src/components/Feedback/Feedback.modules.scss rename src/components/{FormField/Helper/__tests__/Helper.spec.jsx => Feedback/__tests__/Feedback.spec.jsx} (97%) rename src/components/{FormField/Helper/__tests__/__snapshots__/Helper.spec.jsx.snap => Feedback/__tests__/__snapshots__/Feedback.spec.jsx.snap} (100%) delete mode 100644 src/components/FormField/Helper/Helper.modules.scss diff --git a/src/components/Checkbox/__tests__/Checkbox.spec.jsx b/src/components/Checkbox/__tests__/Checkbox.spec.jsx index 3b8e032a48..b9a6d15727 100644 --- a/src/components/Checkbox/__tests__/Checkbox.spec.jsx +++ b/src/components/Checkbox/__tests__/Checkbox.spec.jsx @@ -5,7 +5,7 @@ import Text from '../../Typography/Text/Text' import Paragraph from '../../Typography/Paragraph/Paragraph' import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon' import Checkbox from '../Checkbox' -import Helper from '../../FormField/Helper/Helper' +import Helper from '../../Feedback/Feedback' import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider' describe('Checkbox', () => { diff --git a/src/components/Choice/Choice.jsx b/src/components/Choice/Choice.jsx index 1064e47f43..7e8dfa1d1f 100644 --- a/src/components/Choice/Choice.jsx +++ b/src/components/Choice/Choice.jsx @@ -10,7 +10,7 @@ import Paragraph from '../Typography/Paragraph/Paragraph' import Box from '../Box/Box' import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider' import Flexbox from '../Flexbox/Flexbox' -import Helper from '../FormField/Helper/Helper' +import Feedback from '../Feedback/Feedback' import styles from './Choice.modules.scss' import messagingStyles from '../Messaging.modules.scss' @@ -63,9 +63,9 @@ const renderLabel = (label, feedback, checked, disabled) => { } const renderError = (error, errorId) => ( - + {error} - + ) class Choice extends React.Component { diff --git a/src/components/FormField/Helper/Helper.jsx b/src/components/Feedback/Feedback.jsx similarity index 57% rename from src/components/FormField/Helper/Helper.jsx rename to src/components/Feedback/Feedback.jsx index 74265e7609..4e162e409f 100644 --- a/src/components/FormField/Helper/Helper.jsx +++ b/src/components/Feedback/Feedback.jsx @@ -1,13 +1,13 @@ import React from 'react' import PropTypes from 'prop-types' -import Box from '../../Box/Box' +import Box from '../Box/Box' -import safeRest from '../../../utils/safeRest' +import safeRest from '../../utils/safeRest' -import styles from './Helper.modules.scss' +import styles from './Feedback.modules.scss' -const Helper = ({ feedback, children, ...rest }) => ( +const Feedback = ({ feedback, children, ...rest }) => ( ( ) -Helper.propTypes = { +Feedback.propTypes = { feedback: PropTypes.oneOf(['success', 'error']), children: PropTypes.node.isRequired, } -Helper.defaultProps = { +Feedback.defaultProps = { feedback: undefined, } -export default Helper +export default Feedback diff --git a/src/components/Feedback/Feedback.modules.scss b/src/components/Feedback/Feedback.modules.scss new file mode 100644 index 0000000000..9c192cfb1a --- /dev/null +++ b/src/components/Feedback/Feedback.modules.scss @@ -0,0 +1,18 @@ +.base { + composes: rounded from '../Borders.modules.scss'; +} + +.default { + composes: base; + composes: default from '../Messaging.modules.scss'; +} + +.success { + composes: base; + composes: success from '../Messaging.modules.scss'; +} + +.error { + composes: base; + composes: error from '../Messaging.modules.scss'; +} diff --git a/src/components/FormField/Helper/__tests__/Helper.spec.jsx b/src/components/Feedback/__tests__/Feedback.spec.jsx similarity index 97% rename from src/components/FormField/Helper/__tests__/Helper.spec.jsx rename to src/components/Feedback/__tests__/Feedback.spec.jsx index 10b7918419..006dbaa300 100644 --- a/src/components/FormField/Helper/__tests__/Helper.spec.jsx +++ b/src/components/Feedback/__tests__/Feedback.spec.jsx @@ -1,7 +1,7 @@ import React from 'react' import { shallow, mount, render } from 'enzyme' -import Helper from '../Helper' +import Helper from '../Feedback' describe('Helper', () => { const defaultChildren = 'Some helper text.' diff --git a/src/components/FormField/Helper/__tests__/__snapshots__/Helper.spec.jsx.snap b/src/components/Feedback/__tests__/__snapshots__/Feedback.spec.jsx.snap similarity index 100% rename from src/components/FormField/Helper/__tests__/__snapshots__/Helper.spec.jsx.snap rename to src/components/Feedback/__tests__/__snapshots__/Feedback.spec.jsx.snap diff --git a/src/components/FormField/FormField.jsx b/src/components/FormField/FormField.jsx index 957ea3af57..83beb71ff0 100644 --- a/src/components/FormField/FormField.jsx +++ b/src/components/FormField/FormField.jsx @@ -9,7 +9,7 @@ import Box from '../Box/Box' import Flexbox from '../Flexbox/Flexbox' import Text from '../Typography/Text/Text' import Paragraph from '../Typography/Paragraph/Paragraph' -import Helper from './Helper/Helper' +import Feedback from '../Feedback/Feedback' import Tooltip from '../Tooltip/Tooltip' import styles from './FormField.modules.scss' @@ -34,22 +34,22 @@ const getClassName = (feedback, focus, disabled) => { const showFeedbackIcon = (feedback, focus) => (feedback === 'success' || feedback === 'error') && !focus -const renderLabel = (label, hint, fieldId) => ( - -) - +const renderLabel = (label, hint, fieldId) => { + return ( + + ) +} const renderError = (error, errorId) => ( - + {error} - + ) const renderHelper = (helper, helperId, feedback, value) => { @@ -62,9 +62,9 @@ const renderHelper = (helper, helperId, feedback, value) => { } return ( - + {helper} - + ) } diff --git a/src/components/FormField/Helper/Helper.modules.scss b/src/components/FormField/Helper/Helper.modules.scss deleted file mode 100644 index 7867953e6d..0000000000 --- a/src/components/FormField/Helper/Helper.modules.scss +++ /dev/null @@ -1,18 +0,0 @@ -.base { - composes: rounded from '../../Borders.modules.scss'; -} - -.default { - composes: base; - composes: default from '../../Messaging.modules.scss'; -} - -.success { - composes: base; - composes: success from '../../Messaging.modules.scss'; -} - -.error { - composes: base; - composes: error from '../../Messaging.modules.scss'; -} diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx index 4dd8d9ad02..510d55f686 100644 --- a/src/components/Input/Input.jsx +++ b/src/components/Input/Input.jsx @@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types' import joinClassNames from '../../utils/joinClassNames' import Tooltip from '../Tooltip/Tooltip' -import Helper from '../FormField/Helper/Helper' +import Feedback from '../Feedback/Feedback' import FormField from '../FormField/FormField' import FeedbackIcon from '../FormField/FeedbackIcon' @@ -109,6 +109,6 @@ Input.defaultProps = { } // TODO: This will no longer necessary once Helper is exported on its own. Removing this will be a breaking change. -Input.Helper = Helper +Input.Helper = Feedback export default Input diff --git a/src/components/Input/__tests__/Input.spec.jsx b/src/components/Input/__tests__/Input.spec.jsx index 939f4d9e36..01003257c8 100644 --- a/src/components/Input/__tests__/Input.spec.jsx +++ b/src/components/Input/__tests__/Input.spec.jsx @@ -6,7 +6,7 @@ import Text from '../../Typography/Text/Text' import Paragraph from '../../Typography/Paragraph/Paragraph' import Fade from '../../Animation/Fade' import Input from '../Input' -import Helper from '../../FormField/Helper/Helper' +import Helper from '../../Feedback/Feedback' import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon' describe('Input', () => { diff --git a/src/components/Radio/__tests__/Radio.spec.jsx b/src/components/Radio/__tests__/Radio.spec.jsx index 13b9d70a67..f20a1ccdd8 100644 --- a/src/components/Radio/__tests__/Radio.spec.jsx +++ b/src/components/Radio/__tests__/Radio.spec.jsx @@ -4,7 +4,7 @@ import { mount, render } from 'enzyme' import Text from '../../Typography/Text/Text' import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon' import Radio from '../Radio' -import Helper from '../../FormField/Helper/Helper' +import Helper from '../../Feedback/Feedback' import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider' describe('Radio', () => { diff --git a/src/components/Select/Select.jsx b/src/components/Select/Select.jsx index 8caf9774ae..4f0da2d5bc 100644 --- a/src/components/Select/Select.jsx +++ b/src/components/Select/Select.jsx @@ -96,7 +96,7 @@ Select.propTypes = { * A detailed explanation of the input expected by a form field. Can be text, * other components, or HTML elements. * - * If a function is provided, it must return a `Helper`. The function will be + * If a function is provided, it must return a `Feedback` component. The function will be * invoked with the following arguments. * * @param {String} feedback The input's current feedback state. diff --git a/src/components/Select/Select.md b/src/components/Select/Select.md index 82af212876..ced7b8e3eb 100644 --- a/src/components/Select/Select.md +++ b/src/components/Select/Select.md @@ -1,7 +1,21 @@ + +### Usage criteria + +* Selects should be used sparingly where possible or need to reduce space on forms etc. (Work with design for specifics) +* Selects should have instructions such as "Please select…" as a default option but not able to be selected. +* Selects are most appropriate when there are 4 or more choice. Less than 4, checkboxes or radios are more appropriate. + ``` +const info = ( + + We have special promotions in British Columbia, Ontario and Quebec. + +); +