From 69ace51f7d08ad4a4604c7b6941630f75b4001f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9COscar?= Date: Tue, 19 Sep 2023 09:13:15 -0600 Subject: [PATCH 1/5] selectNext required asterisks --- src/inputs/selectNext/selectNext.tsx | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx index 40bd082c..01990c02 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,7 @@ const useStyles = makeStyles((theme) => { const { // @ts-ignore palette: p, + typography, } = theme; const darkThemeBoxShadow = '0 4px 4px 0 rgba(0, 0, 0, 0.43)'; @@ -266,6 +280,12 @@ const useStyles = makeStyles((theme) => { label: { marginBottom: 8, }, + requiredIndicator: { + color: p.error.main, + display: 'inline-block', + fontSize: typography.pxToRem(14), + marginLeft: 3, + }, }; }); @@ -360,6 +380,7 @@ const SelectNext = React.forwardRef(function SelectNext( ref: LegacyRef, ) { const { + alwaysShowRequiredIndicator, className, dropdownMenuMaxHeight, dropdownMenuMinHeight, @@ -372,6 +393,7 @@ const SelectNext = React.forwardRef(function SelectNext( onChange: onChangeProp, options, placeholder, + required, styles, tabIndex, value, @@ -393,6 +415,8 @@ const SelectNext = React.forwardRef(function SelectNext( className, ); + const showRequiredIndicator = required && (alwaysShowRequiredIndicator || isEmpty(value)); + return (
{label} + + {required && showRequiredIndicator ? ( + * + ) : null} )} From 269d1ed94154fea0c3efe5488650f26129729f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9COscar?= Date: Tue, 19 Sep 2023 09:16:30 -0600 Subject: [PATCH 2/5] selectNext required asterisks 2 --- src/inputs/selectNext/selectNext.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx index 01990c02..9c0e83da 100644 --- a/src/inputs/selectNext/selectNext.tsx +++ b/src/inputs/selectNext/selectNext.tsx @@ -117,7 +117,6 @@ const useStyles = makeStyles((theme) => { const { // @ts-ignore palette: p, - typography, } = theme; const darkThemeBoxShadow = '0 4px 4px 0 rgba(0, 0, 0, 0.43)'; @@ -283,7 +282,7 @@ const useStyles = makeStyles((theme) => { requiredIndicator: { color: p.error.main, display: 'inline-block', - fontSize: typography.pxToRem(14), + fontSize: '14px', marginLeft: 3, }, }; From bc5c1bb8e56a83248ae6125c0946ae97cc3306f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9COscar?= Date: Tue, 19 Sep 2023 13:56:18 -0600 Subject: [PATCH 3/5] minor changes --- src/inputs/selectNext/selectNext.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx index 9c0e83da..9b9a9304 100644 --- a/src/inputs/selectNext/selectNext.tsx +++ b/src/inputs/selectNext/selectNext.tsx @@ -117,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)'; @@ -282,7 +284,7 @@ const useStyles = makeStyles((theme) => { requiredIndicator: { color: p.error.main, display: 'inline-block', - fontSize: '14px', + fontSize: typography.pxToRem(14), marginLeft: 3, }, }; From a9b97e03bd4f25c81b8a7f8c2013bc6feb50f15c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9COscar?= Date: Tue, 19 Sep 2023 16:28:57 -0600 Subject: [PATCH 4/5] code cleaning --- src/inputs/selectNext/selectNext.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/inputs/selectNext/selectNext.tsx b/src/inputs/selectNext/selectNext.tsx index 9b9a9304..65b3116c 100644 --- a/src/inputs/selectNext/selectNext.tsx +++ b/src/inputs/selectNext/selectNext.tsx @@ -25,7 +25,7 @@ type PropTypes = { * 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; + alwaysShowRequiredIndicator?: boolean; /** * Assign a class name to the outer component. */ @@ -435,7 +435,7 @@ const SelectNext = React.forwardRef(function SelectNext( > {label} - {required && showRequiredIndicator ? ( + {showRequiredIndicator ? ( * ) : null} From 76ba2df72a3c1b0f78e315bbd48ea4bb4d9bde24 Mon Sep 17 00:00:00 2001 From: Geoffrey Roberts Date: Wed, 20 Sep 2023 07:14:37 -0700 Subject: [PATCH 5/5] feat: update version to 10.7.1 --- CHANGELOG.md | 4 ++++ package-lock.json | 2 +- package.json | 2 +- src/versions.js | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) 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/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: {