Doc/lens/popups design

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -338,7 +338,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
                   existingFields={state.existingFields}
                   selectionStyle={selectedOperationDefinition.selectionStyle}
                   dateRange={dateRange}
-                  helpText={selectedOperationDefinition?.getHelpMessage?.({
+                  labelAppend={selectedOperationDefinition?.getHelpMessage?.({
                     data: props.data,
                     uiSettings: props.uiSettings,
                     currentColumn: state.layers[layerId].columns[columnId],
@@ -362,7 +362,7 @@ export function DimensionEditor(props: DimensionEditorProps) {
             fullWidth
             isInvalid={Boolean(incompleteOperation || currentFieldIsInvalid)}
             error={fieldErrorMessage}
-            helpText={
+            labelAppend={
               !fieldErrorMessage &&
               selectedOperationDefinition?.getHelpMessage?.({
                 data: props.data,

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/reference_editor.tsx

@@ -8,7 +8,13 @@ import './dimension_editor.scss';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiFormRow, EuiSpacer, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
+import {
+  EuiFormRow,
+  EuiFormRowProps,
+  EuiSpacer,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+} from '@elastic/eui';
 import type { IUiSettingsClient, SavedObjectsClientContract, HttpSetup } from 'kibana/public';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import type { DataPublicPluginStart } from 'src/plugins/data/public';
@@ -40,7 +46,8 @@ export interface ReferenceEditorProps {
   currentIndexPattern: IndexPattern;
   existingFields: IndexPatternPrivateState['existingFields'];
   dateRange: DateRange;
-  helpText?: React.ReactNode;
+  helpText?: EuiFormRowProps['helpText'];
+  labelAppend?: EuiFormRowProps['labelAppend'];
 
   // Services
   uiSettings: IUiSettingsClient;
@@ -61,6 +68,7 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
     selectionStyle,
     dateRange,
     helpText,
+    labelAppend,
     ...services
   } = props;
 
@@ -254,6 +262,7 @@ export function ReferenceEditor(props: ReferenceEditorProps) {
             fullWidth
             isInvalid={showFieldInvalid}
             helpText={helpText}
+            labelAppend={labelAppend}
           >
             <FieldSelect
               fieldIsInvalid={showFieldInvalid}

x-pack/plugins/lens/public/indexpattern_datasource/help_popover.scss

@@ -0,0 +1,13 @@
+.lnsHelpPopover__panel {
+  max-width: $euiSize * 30;
+}
+
+.lnsHelpPopover__content {
+  @include euiYScrollWithShadows;
+  max-height: 40vh;
+  padding: $euiSizeM;
+}
+
+.lnsHelpPopover__buttonIcon {
+  margin-right: $euiSizeXS;
+}

x-pack/plugins/lens/public/indexpattern_datasource/help_popover.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { ReactNode } from 'react';
+import {
+  EuiIcon,
+  EuiLink,
+  EuiLinkButtonProps,
+  EuiPopover,
+  EuiPopoverProps,
+  EuiPopoverTitle,
+  EuiText,
+} from '@elastic/eui';
+import './help_popover.scss';
+
+export const HelpPopoverButton = ({
+  children,
+  onClick,
+}: {
+  children: string;
+  onClick: EuiLinkButtonProps['onClick'];
+}) => {
+  return (
+    <EuiText size="xs">
+      <EuiLink onClick={onClick}>
+        <EuiIcon className="lnsHelpPopover__buttonIcon" size="s" type="help" />
+
+        {children}
+      </EuiLink>
+    </EuiText>
+  );
+};
+
+export const HelpPopover = ({
+  anchorPosition,
+  button,
+  children,
+  closePopover,
+  isOpen,
+  title,
+}: {
+  anchorPosition?: EuiPopoverProps['anchorPosition'];
+  button: EuiPopoverProps['button'];
+  children: ReactNode;
+  closePopover: EuiPopoverProps['closePopover'];
+  isOpen: EuiPopoverProps['isOpen'];
+  title?: string;
+}) => {
+  return (
+    <EuiPopover
+      anchorPosition={anchorPosition}
+      button={button}
+      className="lnsHelpPopover"
+      closePopover={closePopover}
+      isOpen={isOpen}
+      ownFocus
+      panelClassName="lnsHelpPopover__panel"
+      panelPaddingSize="none"
+    >
+      {title && <EuiPopoverTitle>{title}</EuiPopoverTitle>}
+
+      <EuiText className="lnsHelpPopover__content" size="s">
+        {children}
+      </EuiText>
+    </EuiPopover>
+  );
+};

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/calculations/moving_average.tsx

@@ -7,15 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useState } from 'react';
-import {
-  EuiFormRow,
-  EuiPopover,
-  EuiText,
-  EuiLink,
-  EuiFieldNumber,
-  EuiPopoverTitle,
-  EuiIcon,
-} from '@elastic/eui';
+import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
 import { FormattedIndexPatternColumn, ReferenceBasedIndexPatternColumn } from '../column_types';
 import { IndexPatternLayer } from '../../../types';
 import {
@@ -28,6 +20,7 @@ import {
 import { updateColumnParam } from '../../layer_helpers';
 import { isValidNumber, useDebounceWithOptions } from '../helpers';
 import { adjustTimeScaleOnOtherColumnChange } from '../../time_scale_utils';
+import { HelpPopover, HelpPopoverButton } from '../../../help_popover';
 import type { OperationDefinition, ParamEditorProps } from '..';
 
 const ofName = buildLabelFunction((name?: string) => {
@@ -180,67 +173,63 @@ function MovingAverageParamEditor({
 const MovingAveragePopup = () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   return (
-    <EuiPopover
-      ownFocus
-      isOpen={isPopoverOpen}
+    <HelpPopover
+      anchorPosition="upCenter"
       button={
-        <EuiText size="xs">
-          <EuiLink onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
-            {i18n.translate('xpack.lens.indexPattern.movingAverage.helpText', {
-              defaultMessage: 'How does it work?',
-            })}
-          </EuiLink>
-        </EuiText>
+        <HelpPopoverButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+          {i18n.translate('xpack.lens.indexPattern.movingAverage.helpText', {
+            defaultMessage: 'How does it work?',
+          })}
+        </HelpPopoverButton>
       }
       closePopover={() => setIsPopoverOpen(false)}
-      anchorPosition="leftCenter"
+      isOpen={isPopoverOpen}
+      title={i18n.translate('xpack.lens.indexPattern.movingAverage.titleHelp', {
+        defaultMessage: 'How does moving average work?',
+      })}
     >
-      <EuiPopoverTitle>
-        <EuiIcon type="help" />{' '}
+      <p>
         <FormattedMessage
-          id="xpack.lens.indexPattern.movingAverage.titleHelp"
-          defaultMessage="How does moving average work?"
+          id="xpack.lens.indexPattern.movingAverage.basicExplanation"
+          defaultMessage="The Moving Average slides a window across the data and emits the average value of that window."
         />
-      </EuiPopoverTitle>
-      <EuiText size="s" style={{ width: 300 }}>
-        <p>
-          <FormattedMessage
-            id="xpack.lens.indexPattern.movingAverage.basicExplanation"
-            defaultMessage="The Moving Average slides a window across the data and emits the average value of that window."
-          />
-        </p>
-        <p>
-          <FormattedMessage
-            id="xpack.lens.indexPattern.movingAverage.longerExplanation"
-            defaultMessage="The Lens Moving Average uses a simple arithmetic mean of the window and applies a skip policy for gaps: 
+      </p>
+
+      <p>
+        <FormattedMessage
+          id="xpack.lens.indexPattern.movingAverage.longerExplanation"
+          defaultMessage="The Lens Moving Average uses a simple arithmetic mean of the window and applies a skip policy for gaps: 
             this means that for missing values the bucket is skipped and the calculation is performed on the next one."
-          />
-        </p>
-        <p>
-          <FormattedMessage
-            id="xpack.lens.indexPattern.movingAverage.tableExplanation"
-            defaultMessage="For example, given the data [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], we can calculate a simple moving average with windows size of 5 as follows:"
-          />
-        </p>
-        <ul>
-          <li>(1 + 2 + 3 + 4 + 5) / 5 = 3</li>
-          <li>(2 + 3 + 4 + 5 + 6) / 5 = 4</li>
-          <li>...</li>
-          <li>(5 + 6 + 7 + 8 + 9) / 5 = 7</li>
-        </ul>
-        <p>
-          <FormattedMessage
-            id="xpack.lens.indexPattern.movingAverage.windowLimitations"
-            defaultMessage="Note that the window does not include the current value."
-          />
-        </p>
-        <p>
-          <FormattedMessage
-            id="xpack.lens.indexPattern.movingAverage.limitations"
-            defaultMessage=" It works only for date histograms."
-          />
-        </p>
-      </EuiText>
-    </EuiPopover>
+        />
+      </p>
+
+      <p>
+        <FormattedMessage
+          id="xpack.lens.indexPattern.movingAverage.tableExplanation"
+          defaultMessage="For example, given the data [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], we can calculate a simple moving average with windows size of 5 as follows:"
+        />
+      </p>
+
+      <ul>
+        <li>(1 + 2 + 3 + 4 + 5) / 5 = 3</li>
+        <li>(2 + 3 + 4 + 5 + 6) / 5 = 4</li>
+        <li>...</li>
+        <li>(5 + 6 + 7 + 8 + 9) / 5 = 7</li>
+      </ul>
+
+      <p>
+        <FormattedMessage
+          id="xpack.lens.indexPattern.movingAverage.windowLimitations"
+          defaultMessage="Note that the window does not include the current value."
+        />
+      </p>
+
+      <p>
+        <FormattedMessage
+          id="xpack.lens.indexPattern.movingAverage.limitations"
+          defaultMessage=" It works only for date histograms."
+        />
+      </p>
+    </HelpPopover>
   );
 };