Merge pull request #677 from lumapps/fix/is-required

fix(input-field): fix isRequired props ui and support
lumapps · Jul 15, 2021 · e210e05 · e210e05
2 parents 355dd1c + e5399a8
commit e210e05
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   AutoComplete: Added `isRequired` prop to the component to indicated if field is required
+-   AutoCompleteMultiple: Added `isRequired` prop to the component to indicated if field is required
+
+### Fixed
+
+-   TextField: Add space after asterisk if component has `isRequired` props
+
 ## [1.0.18][] - 2021-06-28
 
 ### Added

diff --git a/packages/lumx-core/src/scss/components/input-label/_index.scss b/packages/lumx-core/src/scss/components/input-label/_index.scss
@@ -4,6 +4,7 @@
 
 .#{$lumx-base-prefix}-input-label {
     &--is-required:before {
+        margin-right: $lumx-spacing-unit-tiny;
         content: '*';
         font-weight: 700;
     }

diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.test.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.test.tsx
@@ -49,7 +49,9 @@ describe(`<${Autocomplete.displayName}>`, () => {
                         ))}
                     </List>
                 ),
+                label: 'Field label',
                 isOpen: true,
+                isRequired: true,
                 onChange: jest.fn(),
                 value: '',
             });

diff --git a/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx b/packages/lumx-react/src/components/autocomplete/Autocomplete.tsx
@@ -74,6 +74,11 @@ export interface AutocompleteProps extends GenericProps {
      * @see {@link TextFieldProps#isDisabled}
      */
     isDisabled?: boolean;
+    /**
+     * Whether the component is required or not.
+     * @see {@link TextFieldProps#isRequired}
+     */
+    isRequired?: boolean;
     /**
      * Whether the text field is displayed with valid style or not.
      * @see {@link TextFieldProps#isValid}
@@ -200,6 +205,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
         inputRef,
         clearButtonProps,
         isDisabled = disabled,
+        isRequired,
         isOpen,
         isValid,
         label,
@@ -241,6 +247,7 @@ export const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef(
                 inputRef={mergeRefs(inputAnchorRef, inputRef) as any}
                 clearButtonProps={clearButtonProps}
                 isDisabled={isDisabled}
+                isRequired={isRequired}
                 isValid={isValid}
                 label={label}
                 name={name}

diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.test.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.test.tsx
@@ -55,7 +55,9 @@ describe(`<${AutocompleteMultiple.displayName}>`, () => {
                         text: 'Montevideo',
                     },
                 ],
+                label: 'Field label',
                 isOpen: true,
+                isRequired: true,
                 onChange: jest.fn(),
                 value: '',
             });

diff --git a/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx b/packages/lumx-react/src/components/autocomplete/AutocompleteMultiple.tsx
@@ -79,6 +79,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
         inputRef,
         clearButtonProps,
         isDisabled,
+        isRequired,
         isOpen,
         isValid,
         label,
@@ -130,6 +131,7 @@ export const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElemen
                 </ChipGroup>
             }
             isDisabled={isDisabled}
+            isRequired={isRequired}
             clearButtonProps={clearButtonProps}
             isValid={isValid}
             label={label}

diff --git a/packages/lumx-react/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap b/packages/lumx-react/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap
@@ -109,6 +109,8 @@ exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
 >
   <TextField
     inputRef={[Function]}
+    isRequired={true}
+    label="Field label"
     onChange={[MockFunction]}
     textFieldRef={
       Object {

diff --git a/...s/lumx-react/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap b/...s/lumx-react/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap
@@ -13,6 +13,8 @@ exports[`<AutocompleteMultiple> Snapshots and structure should render correctly
   closeOnClickAway={true}
   closeOnEscape={true}
   isOpen={true}
+  isRequired={true}
+  label="Field label"
   onChange={[MockFunction]}
   shouldFocusOnClose={false}
   value=""