[EuiInlineEdit] Creation of the isLoading and isInvalid Props (#6667

) * Added isInvalid and isLoading props to EuiInlineEdit components (form, title, text). * [REVERT ME] Added prop toggles to the EuiInlineEditText example for validation * Revert "[REVERT ME] Added prop toggles to the EuiInlineEditText example for validation" This reverts commit b72c9ca. Reverting documentation change that was for PR assistance. It's no longer needed. * Updated EuiInlineEditForm by removing the isLoading prop on the confirm and cancel buttons. Instead, these are wrapped in the skeleton component when loading. * Added a new documentation view for the isLoading prop * Updated the editModeProps property to include the erorr prop from EuiFormRowProps. Additionally wrapped EuiFieldText inside of EuiFormRow. This is to allow consumers to pass an error message to the EuiFormRow when the isValid prop is false. * -[PR Feedback] Removed the onChange method from the loading example and placed it directly on the switch element - Created the isValid documentation example * Remove blunder * Added the skeletonHeight index to sizes object. The Skeleton buttons used when isLoading is true need to be smaller when the form is compressed * [PR Feedback - Update the editModeProps prop to include two sub-objects. This includes one that will be placed on the form row and the other will be placed on the input form control in edit mode * [PR Feedback - Combined the isLoading and isValid prop documentation examples. Removed the isValid example completely. * [PR Feedback - Remove hard coded values used for the EuiSkeletonRectangle height when isLoading is true * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <[email protected]> * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <[email protected]> * Update src/components/inline_edit/inline_edit_form.tsx Co-authored-by: Cee Chen <[email protected]> * Updated docs that used the editModeProps prop with EuiInlineEdit * Removed unused code block in EuiInlineEditForm * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <[email protected]> * [PR Feedback] - Removed readModeProps from InlineEditTitle example. Allowed Prettier to format the copy on a documentation file --------- Co-authored-by: Cee Chen <[email protected]>
elastic · Apr 5, 2023 · 117c8b7 · 117c8b7
1 parent d69c093
commit 117c8b7
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 46 deletions.
diff --git a/src-docs/src/views/inline_edit/inline_edit_confirm.tsx b/src-docs/src/views/inline_edit/inline_edit_confirm.tsx
@@ -17,7 +17,7 @@ export default () => {
         defaultValue="Hello World!"
         size="m"
         editModeProps={{
-          icon: 'cross',
+          inputProps: { icon: 'cross' },
         }}
         readModeProps={{
           color: 'success',

diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { GuideSectionTypes } from '../../components';
 
 import {
+  EuiCode,
   EuiText,
   EuiInlineEditText,
   EuiInlineEditTitle,
@@ -17,6 +18,9 @@ const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
 import InlineEditConfirm from './inline_edit_confirm';
 const inlineEditConfirmSource = require('!!raw-loader!././inline_edit_confirm');
 
+import InlineEditStates from './inline_edit_states';
+const inlineEditStatesSource = require('!!raw-loader!././inline_edit_states');
+
 export const InlineEditExample = {
   title: 'Inline edit',
   intro: (
@@ -37,7 +41,7 @@ export const InlineEditExample = {
       ),
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: inlineEditTextSource,
         },
       ],
@@ -56,7 +60,7 @@ export const InlineEditExample = {
       ),
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: inlineEditTitleSource,
         },
       ],
@@ -75,12 +79,37 @@ export const InlineEditExample = {
       ),
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: inlineEditConfirmSource,
         },
       ],
       demo: <InlineEditConfirm />,
       props: { EuiInlineEditText },
     },
+    {
+      title: 'Loading and invalid states',
+      text: (
+        <>
+          <p>
+            Setting the <EuiCode>isLoading</EuiCode> prop to true will add a
+            spinner to the input element in <EuiCode>editMode</EuiCode> and add
+            the loading state to the confirm and cancel input buttons.
+          </p>
+          <p>
+            Setting the <EuiCode>isInvalid</EuiCode> prop to true will display{' '}
+            <strong>EuiInlineEdit</strong>&apos;s error state. Optionally, use{' '}
+            <EuiCode>editModeProps.formRowProps.error</EuiCode> to pass an error
+            message that will be displayed on the form control.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: inlineEditStatesSource,
+        },
+      ],
+      demo: <InlineEditStates />,
+    },
   ],
 };
diff --git a/src-docs/src/views/inline_edit/inline_edit_states.tsx b/src-docs/src/views/inline_edit/inline_edit_states.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiInlineEditText,
+  EuiSwitch,
+  EuiSpacer,
+} from '../../../../src';
+
+export default () => {
+  const [toggleLoading, setToggleLoading] = useState(true);
+
+  const [toggleValid, setToggleValid] = useState(false);
+
+  const errorMessage = ["Here's an example of an error"];
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiSwitch
+          label="Toggle loading state"
+          checked={toggleLoading}
+          onChange={(e) => setToggleLoading(e.target.checked)}
+        />
+
+        <EuiSwitch
+          label="Toggle validation state"
+          checked={toggleValid}
+          onChange={(e) => setToggleValid(e.target.checked)}
+        />
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue="Hello World!"
+        size="m"
+        isLoading={toggleLoading}
+        isInvalid={toggleValid}
+        editModeProps={{ formRowProps: { error: errorMessage } }}
+        startWithEditOpen={true}
+      />
+    </>
+  );
+};
diff --git a/src-docs/src/views/inline_edit/inline_edit_title.tsx b/src-docs/src/views/inline_edit/inline_edit_title.tsx
@@ -59,12 +59,6 @@ export default () => {
         defaultValue="Hello World (but as a title)!"
         size={toggleTitleButtonSize}
         heading="h3"
-        editModeProps={{
-          icon: 'cross',
-        }}
-        readModeProps={{
-          color: 'success',
-        }}
       />
     </>
   );

diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
@@ -10,10 +10,19 @@ import React, { ReactNode, FunctionComponent, useState } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
-import { EuiFormRow, EuiFieldText, EuiForm, EuiFieldTextProps } from '../form';
+import {
+  EuiFormRow,
+  EuiFormRowProps,
+  EuiFieldText,
+  EuiForm,
+  EuiFieldTextProps,
+} from '../form';
+import { euiFormVariables } from '../form/form.styles';
 import { EuiButtonIcon, EuiButtonEmpty, EuiButtonEmptyProps } from '../button';
 import { EuiButtonEmptyPropsForButton } from '../button/button_empty/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiSkeletonRectangle } from '../skeleton';
+import { useEuiTheme } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 
@@ -49,9 +58,21 @@ export type EuiInlineEditCommonProps = CommonProps & {
    */
   readModeProps?: Omit<EuiButtonEmptyPropsForButton, 'onClick'>;
   /**
-   * Props that will be applied directly to the EuiFieldText displayed in editMode
+   * Props that will be applied directly to the `EuiFormRow` and `EuiFieldText` input displayed in editMode
    */
-  editModeProps?: EuiFieldTextProps;
+  editModeProps?: {
+    formRowProps?: Partial<EuiFormRowProps>;
+    inputProps?: Partial<EuiFieldTextProps>;
+  };
+  /**
+   * Loading state when changes are saved in editMode
+   */
+  isLoading?: boolean;
+
+  /**
+   * Validation for the form control used to edit text in editMode
+   */
+  isInvalid?: boolean;
 };
 
 // Internal-only props, passed by the consumer-facing components
@@ -94,13 +115,16 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   startWithEditOpen,
   readModeProps,
   editModeProps,
+  isLoading,
+  isInvalid,
 }) => {
   const classes = classNames('euiInlineEdit', className);
 
-  // Styles to come later! (Styling editMode text to match the size of its readMode counterpart)
-  /*const theme = useEuiTheme();
-  const styles = euiInlineEditStyles(theme);
-  const cssStyles = [styles.euiInlineEdit];*/
+  const euiTheme = useEuiTheme();
+  const { controlHeight, controlCompressedHeight } = euiFormVariables(euiTheme);
+  const loadingSkeletonSize = sizes.compressed
+    ? controlCompressedHeight
+    : controlHeight;
 
   const defaultSaveButtonAriaLabel = useEuiI18n(
     'euiInlineEditForm.saveButtonAriaLabel',
@@ -139,44 +163,69 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
     <EuiForm fullWidth>
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
-          <EuiFieldText
-            id={inlineEditInputId}
-            value={editModeValue}
-            onChange={(e) => {
-              setEditModeValue(e.target.value);
-            }}
-            aria-label={inputAriaLabel}
-            autoFocus
-            compressed={sizes.compressed}
-            {...editModeProps}
-          />
+          <EuiFormRow
+            isInvalid={isInvalid}
+            error={isInvalid && editModeProps?.formRowProps?.error}
+            {...editModeProps?.formRowProps}
+          >
+            <EuiFieldText
+              id={inlineEditInputId}
+              value={editModeValue}
+              onChange={(e) => {
+                setEditModeValue(e.target.value);
+              }}
+              aria-label={inputAriaLabel}
+              autoFocus
+              compressed={sizes.compressed}
+              isInvalid={isInvalid}
+              isLoading={isLoading}
+              {...editModeProps?.inputProps}
+            />
+          </EuiFormRow>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false} className={classes}>
           <EuiFormRow>
-            <EuiButtonIcon
-              iconType="check"
-              aria-label={saveButtonAriaLabel || defaultSaveButtonAriaLabel}
-              onClick={saveInlineEditValue}
-              color="success"
-              display="base"
-              size={sizes.buttonSize}
-              iconSize={sizes.iconSize}
-            />
+            <EuiSkeletonRectangle
+              isLoading={isLoading}
+              height={loadingSkeletonSize}
+              width={loadingSkeletonSize}
+              borderRadius="m"
+            >
+              <EuiButtonIcon
+                iconType="check"
+                aria-label={saveButtonAriaLabel || defaultSaveButtonAriaLabel}
+                onClick={saveInlineEditValue}
+                color="success"
+                display="base"
+                size={sizes.buttonSize}
+                iconSize={sizes.iconSize}
+                disabled={isInvalid}
+              />
+            </EuiSkeletonRectangle>
           </EuiFormRow>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
           <EuiFormRow>
-            <EuiButtonIcon
-              iconType="cross"
-              aria-label={cancelButtonAriaLabel || defaultCancelButtonAriaLabel}
-              onClick={cancelInlineEdit}
-              color="danger"
-              display="base"
-              size={sizes.buttonSize}
-              iconSize={sizes.iconSize}
-            />
+            <EuiSkeletonRectangle
+              isLoading={isLoading}
+              height={loadingSkeletonSize}
+              width={loadingSkeletonSize}
+              borderRadius="m"
+            >
+              <EuiButtonIcon
+                iconType="cross"
+                aria-label={
+                  cancelButtonAriaLabel || defaultCancelButtonAriaLabel
+                }
+                onClick={cancelInlineEdit}
+                color="danger"
+                display="base"
+                size={sizes.buttonSize}
+                iconSize={sizes.iconSize}
+              />
+            </EuiSkeletonRectangle>
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>

diff --git a/src/components/inline_edit/inline_edit_text.tsx b/src/components/inline_edit/inline_edit_text.tsx
@@ -39,6 +39,8 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
   startWithEditOpen,
   readModeProps,
   editModeProps,
+  isLoading = false,
+  isInvalid = false,
   ...rest
 }) => {
   const classes = classNames('euiInlineEditText', className);
@@ -60,6 +62,8 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
     startWithEditOpen,
     readModeProps,
     editModeProps,
+    isLoading,
+    isInvalid,
   };
 
   return (

diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx
@@ -45,6 +45,8 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
   startWithEditOpen = false,
   readModeProps,
   editModeProps,
+  isLoading = false,
+  isInvalid = false,
   ...rest
 }) => {
   const classes = classNames('euiInlineEditTitle', className);
@@ -68,6 +70,8 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
     startWithEditOpen,
     readModeProps,
     editModeProps,
+    isLoading,
+    isInvalid,
   };
 
   return (