diff --git a/CHANGELOG.md b/CHANGELOG.md index cb76729d..11fd5a3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Change Log This project adheres to [Semantic Versioning](http://semver.org/). +## 10.7.1 +_September 20, 2023_ +- Add `alwaysShowRequiredIndicator` and `required` props to ``. [PR #462](https://github.com/saddlebackdev/react-cm-ui/pull/462) + ## 10.7.0 _September 7, 2023_ - Add `` component, powered by React Select v5. [PR #461](https://github.com/saddlebackdev/react-cm-ui/pull/461) diff --git a/package-lock.json b/package-lock.json index a009a216..40e3826b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@saddlebackchurch/react-cm-ui", - "version": "10.7.0", + "version": "10.7.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 187988af..266f6386 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@saddlebackchurch/react-cm-ui", - "version": "10.7.0", + "version": "10.7.1", "description": "React UI for Healthy Church", "jsnext:main": "src/", "main": "core/", diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx index 40bd082c..65b3116c 100644 --- a/src/inputs/selectNext/selectNext.tsx +++ b/src/inputs/selectNext/selectNext.tsx @@ -1,6 +1,7 @@ import ClassNames from 'classnames'; import { isFunction, + isEmpty, } from 'lodash'; import React, { LegacyRef, @@ -19,6 +20,12 @@ import { import makeStyles from '../../styles/makeStyles'; type PropTypes = { + /** + * Forces the Select component to always show the required indicator + * next to the label. The default behavior (if this prop is omitted or false) is for + * the required field indicator to disappear once a value has been selected. + */ + alwaysShowRequiredIndicator?: boolean; /** * Assign a class name to the outer component. */ @@ -68,6 +75,10 @@ type PropTypes = { * Supply a placeholder text for the best UX. */ placeholder?: string; + /** + * A Select can be required + */ + required?: boolean; /** * Style modifier methods * A basic example can be found at the bottom of the Replacing builtins documentation. @@ -86,6 +97,7 @@ type PropTypes = { }; const defaultProps = { + alwaysShowRequiredIndicator: false, className: null, dropdownMenuMaxHeight: 180, dropdownMenuMinHeight: null, @@ -96,6 +108,7 @@ const defaultProps = { onChange: null, options: [], placeholder: null, + required: false, tabIndex: -1, value: null, }; @@ -104,6 +117,8 @@ const useStyles = makeStyles((theme) => { const { // @ts-ignore palette: p, + // @ts-ignore + typography, } = theme; const darkThemeBoxShadow = '0 4px 4px 0 rgba(0, 0, 0, 0.43)'; @@ -266,6 +281,12 @@ const useStyles = makeStyles((theme) => { label: { marginBottom: 8, }, + requiredIndicator: { + color: p.error.main, + display: 'inline-block', + fontSize: typography.pxToRem(14), + marginLeft: 3, + }, }; }); @@ -360,6 +381,7 @@ const SelectNext = React.forwardRef(function SelectNext( ref: LegacyRef, ) { const { + alwaysShowRequiredIndicator, className, dropdownMenuMaxHeight, dropdownMenuMinHeight, @@ -372,6 +394,7 @@ const SelectNext = React.forwardRef(function SelectNext( onChange: onChangeProp, options, placeholder, + required, styles, tabIndex, value, @@ -393,6 +416,8 @@ const SelectNext = React.forwardRef(function SelectNext( className, ); + const showRequiredIndicator = required && (alwaysShowRequiredIndicator || isEmpty(value)); + return (
{label} + + {showRequiredIndicator ? ( + * + ) : null} )} diff --git a/src/versions.js b/src/versions.js index f34c814f..e064c13f 100644 --- a/src/versions.js +++ b/src/versions.js @@ -18,7 +18,7 @@ const versions = { 'react-cm-ui': { - package: '10.7.0', + package: '10.7.1', components: { dataDisplay: { chip: {