[EuiInlineEdit] Create Component Directory and Base Functionality

src-docs/src/routes.js

@@ -151,6 +151,8 @@ import { ImageExample } from './views/image/image_example';
 
 import { InnerTextExample } from './views/inner_text/inner_text_example';
 
+import { InlineEditExample } from './views/inline_edit/inline_edit_example';
+
 import { KeyPadMenuExample } from './views/key_pad_menu/key_pad_menu_example';
 
 import { LinkExample } from './views/link/link_example';
@@ -561,6 +563,7 @@ const navigation = [
       HealthExample,
       IconExample,
       ImageExample,
+      InlineEditExample,
       ListGroupExample,
       LoadingExample,
       NotificationEventExample,

src-docs/src/views/inline_edit/inline_edit_confirm.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { EuiInlineEditText } from '../../../../src';
+
+export default () => {
+  // TO DO: Convert this example to use something like a modal
+  const confirmInlineEditChanges = () => {
+    // eslint-disable-next-line no-restricted-globals
+    const flag = confirm('Are you sure you want to save?') ? true : false;
+    return flag;
+  };
+
+  return (
+    <>
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue="Hello World!"
+        size="m"
+        editModeProps={{
+          icon: 'cross',
+        }}
+        readModeProps={{
+          color: 'success',
+        }}
+        onConfirm={confirmInlineEditChanges}
+      />
+    </>
+  );
+};

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import { GuideSectionTypes } from '../../components';
+
+import {
+  EuiText,
+  EuiInlineEditText,
+  EuiInlineEditTitle,
+} from '../../../../src';
+
+import InlineEditText from './inline_edit_text';
+const inlineEditTextSource = require('!!raw-loader!./inline_edit_text');
+
+import InlineEditTitle from './inline_edit_title';
+const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
+
+import InlineEditConfirm from './inline_edit_confirm';
+const inlineEditConfirmSource = require('!!raw-loader!././inline_edit_confirm');
+
+export const InlineEditExample = {
+  title: 'Inline edit',
+  intro: (
+    <>
+      <EuiText>This is where the description will go</EuiText>
+    </>
+  ),
+  sections: [
+    {
+      title: 'InlineEditText',
+      text: (
+        <>
+          <p>
+            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
+            component.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineEditTextSource,
+        },
+      ],
+      demo: <InlineEditText />,
+      props: { EuiInlineEditText },
+    },
+    {
+      title: 'InlineEditTitle',
+      text: (
+        <>
+          <p>
+            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
+            component.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineEditTitleSource,
+        },
+      ],
+      demo: <InlineEditTitle />,
+      props: { EuiInlineEditTitle },
+    },
+    {
+      title: 'Confirm inline edit',
+      text: (
+        <>
+          <p>
+            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
+            component.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineEditConfirmSource,
+        },
+      ],
+      demo: <InlineEditConfirm />,
+      props: { EuiInlineEditText },
+    },
+  ],
+};

src-docs/src/views/inline_edit/inline_edit_text.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInlineEditText,
+  EuiSpacer,
+  EuiButtonGroup,
+  EuiInlineEditTextSizes,
+} from '../../../../src';
+
+export default () => {
+  const textSizeButtons = [
+    {
+      id: 'xs',
+      label: 'Extra Small',
+    },
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+  ];
+
+  const [toggleTextButtonSize, setToggleTextButtonSize] = useState<
+    EuiInlineEditTextSizes
+  >('m');
+
+  const textSizeOnChange = (optionId: EuiInlineEditTextSizes) => {
+    setToggleTextButtonSize(optionId);
+  };
+
+  return (
+    <>
+      <EuiButtonGroup
+        legend="Text size"
+        options={textSizeButtons}
+        idSelected={toggleTextButtonSize as string}
+        onChange={(id) => textSizeOnChange(id as EuiInlineEditTextSizes)}
+      />
+
+      <EuiSpacer />
+
+      <EuiInlineEditText
+        inputAriaLabel="Edit text inline"
+        defaultValue="Hello World!"
+        size={toggleTextButtonSize}
+      />
+    </>
+  );
+};

src-docs/src/views/inline_edit/inline_edit_title.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInlineEditTitle,
+  EuiSpacer,
+  EuiButtonGroup,
+  EuiTitleSize,
+} from '../../../../src';
+
+export default () => {
+  const titleSizeButtons = [
+    {
+      id: 'xxxs',
+      label: '3X Small',
+    },
+    {
+      id: 'xxs',
+      label: '2X Small',
+    },
+    {
+      id: 'xs',
+      label: 'Extra small',
+    },
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+    {
+      id: 'l',
+      label: 'Large',
+    },
+  ];
+
+  const [toggleTitleButtonSize, setToggleTitleButtonSize] = useState<
+    EuiTitleSize
+  >('m');
+
+  const titleSizeOnChange = (optionId: EuiTitleSize) => {
+    setToggleTitleButtonSize(optionId);
+  };
+
+  return (
+    <>
+      <EuiButtonGroup
+        legend="Title size"
+        options={titleSizeButtons}
+        idSelected={toggleTitleButtonSize}
+        onChange={(id) => titleSizeOnChange(id as EuiTitleSize)}
+      />
+
+      <EuiSpacer />
+
+      <EuiInlineEditTitle
+        inputAriaLabel="Edit title inline"
+        defaultValue="Hello World (but as a title)!"
+        size={toggleTitleButtonSize}
+        heading="h3"
+        editModeProps={{
+          icon: 'cross',
+        }}
+        readModeProps={{
+          color: 'success',
+        }}
+      />
+    </>
+  );
+};

src/components/button/button_empty/button_empty.tsx

@@ -91,7 +91,9 @@ export interface CommonEuiButtonEmptyProps
 
 type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
 
-type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
+export type EuiButtonEmptyPropsForButton = PropsForButton<
+  CommonEuiButtonEmptyProps
+>;
 
 export type EuiButtonEmptyProps = ExclusiveUnion<
   EuiButtonEmptyPropsForAnchor,

src/components/index.ts

@@ -91,6 +91,8 @@ export * from './image';
 
 export * from './inner_text';
 
+export * from './inline_edit';
+
 export * from './i18n';
 
 export * from './loading';

src/components/inline_edit/__snapshots__/inline_edit_text.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiInlineEditText props renders as text 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditText testClass1 testClass2"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <div
+          class="euiText emotion-euiText-m"
+        >
+          hello world
+        </div>
+      </span>
+    </span>
+  </button>
+</div>
+`;

src/components/inline_edit/__snapshots__/inline_edit_title.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiInlineEditTitle props renders as title 1`] = `
+<div
+  class="euiInlineEdit euiInlineEditTitle testClass1 testClass2"
+>
+  <button
+    class="euiButtonEmpty euiButtonEmpty--flushBoth css-wvaqcf-empty-text"
+    type="button"
+  >
+    <span
+      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+    >
+      <span
+        class="euiButtonContent__icon"
+        color="inherit"
+        data-euiicon-type="pencil"
+      />
+      <span
+        class="euiButtonEmpty__text"
+      >
+        <h2
+          class="euiTitle emotion-euiTitle-m"
+        >
+          hello world
+        </h2>
+      </span>
+    </span>
+  </button>
+</div>
+`;

src/components/inline_edit/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiInlineEditText } from './inline_edit_text';
+
+export { EuiInlineEditTitle } from './inline_edit_title';
+
+export type { EuiInlineEditTextSizes } from './inline_edit_text';

src/components/inline_edit/inline_edit.styles.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiInlineEditStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiInlineEdit: css`
+      // Always start the object with the first key being the name of the component
+      color: ${euiTheme.colors.primaryText};
+    `,
+  };
+};