[EuiInlineEdit] Created the 'displayDefaultValueAsPlaceholder' prop. This prop adds a different style in readMode and gives the editMode form control the placeholder prop

breehall · breehall · commit 4bda83328bdb · 2023-06-22T13:47:26.000-04:00
diff --git a/src/components/inline_edit/inline_edit_form.styles.ts b/src/components/inline_edit/inline_edit_form.styles.ts
@@ -22,5 +22,13 @@ export const euiInlineEditReadModeStyles = ({ euiTheme }: UseEuiTheme) => {
         user-select: text;
       }
     `,
+
+    hasPlaceholder: css`
+      &.euiButtonEmpty .euiText,
+      &.euiButtonEmpty .euiTitle {
+        font-style: italic;
+        color: ${euiTheme.colors.subduedText};
+      }
+    `,
   };
 };
diff --git a/src/components/inline_edit/inline_edit_form.tsx b/src/components/inline_edit/inline_edit_form.tsx
@@ -40,6 +40,11 @@ import { euiInlineEditReadModeStyles } from './inline_edit_form.styles';
 export type EuiInlineEditCommonProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
     defaultValue: string;
+    /**
+     * Adds styling to display defaultValue as a placeholder in `readMode`.
+     * Adds defaultValue as a placeholder on the `editMode` form control and does not populate the value.
+     */
+    displayDefaultValueAsPlaceholder?: boolean;
     /**
      * Callback that fires when a user clicks the save button.
      * Passes the current edited text value as an argument.
@@ -121,6 +126,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   children,
   sizes,
   defaultValue,
+  displayDefaultValueAsPlaceholder,
   inputAriaLabel,
   startWithEditOpen,
   readModeProps,
@@ -132,12 +138,17 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
 }) => {
   const classes = classNames('euiInlineEdit', className);
 
+  const [renderPlaceholder, setRenderPlaceholder] = useState(
+    displayDefaultValueAsPlaceholder
+  );
+
   const euiTheme = useEuiTheme();
 
   const readModeStyles = euiInlineEditReadModeStyles(euiTheme);
   const readModeCssStyles = [
     readModeStyles.euiInlineEditReadMode,
     isReadOnly && readModeStyles.isReadOnly,
+    renderPlaceholder && readModeStyles.hasPlaceholder,
   ];
 
   const { controlHeight, controlCompressedHeight } = euiFormVariables(euiTheme);
@@ -169,7 +180,9 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   ]);
 
   const [isEditing, setIsEditing] = useState(false || startWithEditOpen);
-  const [editModeValue, setEditModeValue] = useState(defaultValue);
+  const [editModeValue, setEditModeValue] = useState(
+    renderPlaceholder ? '' : defaultValue
+  );
   const [readModeValue, setReadModeValue] = useState(defaultValue);
 
   const activateEditMode = () => {
@@ -179,7 +192,8 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
   };
 
   const cancelInlineEdit = () => {
-    setEditModeValue(readModeValue);
+    // When a placeholder is set, but the save is cancelled, do not change `editModeValue`
+    renderPlaceholder ? setEditModeValue('') : setEditModeValue(readModeValue);
     setIsEditing(false);
     requestAnimationFrame(() => readModeFocusRef.current?.focus());
   };
@@ -193,6 +207,9 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
       if (awaitedReturn === false) return;
     }
 
+    // If a placeholder is present the first time that a text value is saved,
+    // remove placeholder related settings
+    renderPlaceholder && setRenderPlaceholder(false);
     setReadModeValue(editModeValue);
     setIsEditing(false);
     requestAnimationFrame(() => readModeFocusRef.current?.focus());
@@ -248,6 +265,7 @@ export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps> = ({
               editModeDescribedById,
               editModeProps?.inputProps?.['aria-describedby']
             )}
+            placeholder={renderPlaceholder ? defaultValue : undefined}
           />
         </EuiFormRow>
         <span id={editModeDescribedById} hidden>
diff --git a/src/components/inline_edit/inline_edit_text.tsx b/src/components/inline_edit/inline_edit_text.tsx
@@ -32,6 +32,7 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
   className,
   size = 'm',
   defaultValue,
+  displayDefaultValueAsPlaceholder,
   inputAriaLabel,
   startWithEditOpen,
   readModeProps: _readModeProps,
@@ -62,6 +63,7 @@ export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps> = ({
   const formProps = {
     sizes,
     defaultValue,
+    displayDefaultValueAsPlaceholder,
     inputAriaLabel,
     startWithEditOpen,
     readModeProps,
diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx
@@ -39,6 +39,7 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
   size = 'm',
   heading,
   defaultValue,
+  displayDefaultValueAsPlaceholder,
   inputAriaLabel,
   startWithEditOpen,
   readModeProps: _readModeProps,
@@ -78,6 +79,7 @@ export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps> = ({
   const formProps = {
     sizes,
     defaultValue,
+    displayDefaultValueAsPlaceholder,
     inputAriaLabel,
     startWithEditOpen,
     readModeProps,
