@patternfly/react-code-editor 5.0.0-alpha.5 → 5.0.0-alpha.50

package/src/components/CodeEditor/CodeEditor.tsx

@@ -7,13 +7,14 @@ import {
   EmptyState,
   EmptyStateBody,
   EmptyStateIcon,
-  EmptyStateSecondaryActions,
+  EmptyStateActions,
   EmptyStateVariant,
+  EmptyStateFooter,
   getResizeObserver,
   Popover,
   PopoverProps,
-  Title,
-  TooltipPosition
+  TooltipPosition,
+  EmptyStateHeader
 } from '@patternfly/react-core';
 import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
@@ -382,7 +383,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
   editorDidMount: EditorDidMount = (editor, monaco) => {
     // eslint-disable-next-line no-bitwise
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Tab, () => this.wrapperRef.current.focus());
-    Array.from(document.getElementsByClassName('monaco-editor')).forEach(editorElement =>
+    Array.from(document.getElementsByClassName('monaco-editor')).forEach((editorElement) =>
       editorElement.removeAttribute('role')
     );
     this.props.onEditorDidMount(editor, monaco);
@@ -418,7 +419,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
       this.handleFileChange('', fileHandle.name); // Show the filename while reading
       this.handleFileReadStarted();
       this.readFile(fileHandle)
-        .then(data => {
+        .then((data) => {
           this.handleFileReadFinished();
           this.toggleEmptyState();
           this.handleFileChange(data, fileHandle.name);
@@ -518,30 +519,40 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
           const emptyState =
             providedEmptyState ||
             (isUploadEnabled ? (
-              <EmptyState variant={EmptyStateVariant.small}>
-                <EmptyStateIcon icon={CodeIcon} />
-                <Title headingLevel="h4" size="lg">
-                  {emptyStateTitle}
-                </Title>
+              <EmptyState variant={EmptyStateVariant.sm}>
+                <EmptyStateHeader
+                  titleText={emptyStateTitle}
+                  icon={<EmptyStateIcon icon={CodeIcon} />}
+                  headingLevel="h4"
+                />
                 <EmptyStateBody>{emptyStateBody}</EmptyStateBody>
-                <Button variant="primary" onClick={open}>
-                  {emptyStateButton}
-                </Button>
-                <EmptyStateSecondaryActions>
-                  <Button variant="link" onClick={this.toggleEmptyState}>
-                    {emptyStateLink}
-                  </Button>
-                </EmptyStateSecondaryActions>
+                <EmptyStateFooter>
+                  <EmptyStateActions>
+                    <Button variant="primary" onClick={open}>
+                      {emptyStateButton}
+                    </Button>
+                  </EmptyStateActions>
+                  <EmptyStateActions>
+                    <Button variant="link" onClick={this.toggleEmptyState}>
+                      {emptyStateLink}
+                    </Button>
+                  </EmptyStateActions>
+                </EmptyStateFooter>
               </EmptyState>
             ) : (
-              <EmptyState variant={EmptyStateVariant.small}>
-                <EmptyStateIcon icon={CodeIcon} />
-                <Title headingLevel="h4" size="lg">
-                  {emptyStateTitle}
-                </Title>
-                <Button variant="primary" onClick={this.toggleEmptyState}>
-                  {emptyStateLink}
-                </Button>
+              <EmptyState variant={EmptyStateVariant.sm}>
+                <EmptyStateHeader
+                  titleText={emptyStateTitle}
+                  icon={<EmptyStateIcon icon={CodeIcon} />}
+                  headingLevel="h4"
+                />
+                <EmptyStateFooter>
+                  <EmptyStateActions>
+                    <Button variant="primary" onClick={this.toggleEmptyState}>
+                      {emptyStateLink}
+                    </Button>
+                  </EmptyStateActions>
+                </EmptyStateFooter>
               </EmptyState>
             ));
 
@@ -634,7 +645,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
               {isUploadEnabled || providedEmptyState ? (
                 <div
                   {...getRootProps({
-                    onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+                    onClick: (event) => event.preventDefault() // Prevents clicking TextArea from opening file dialog
                   })}
                   className={`pf-c-file-upload ${isDragActive && 'pf-m-drag-hover'} ${isLoading && 'pf-m-loading'}`}
                 >

package/src/components/CodeEditor/CodeEditorControl.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, ButtonProps, PopoverPosition, Tooltip } from '@patternfly/react-core';
+import { Button, ButtonProps, Tooltip } from '@patternfly/react-core';
 import { CodeEditorContext } from './CodeEditorUtils';
 
 /** Allows customizing the code editor controls by passing this sub-component into the
@@ -11,32 +11,8 @@ export interface CodeEditorControlProps extends Omit<ButtonProps, 'onClick'> {
   'aria-label'?: string;
   /** Additional classes added to the code editor control. */
   className?: string;
-  /** @deprecated  Delay in ms before the tooltip appears. */
-  entryDelay?: number;
-  /** @deprecated  Delay in ms before the tooltip disappears. */
-  exitDelay?: number;
   /** Icon rendered inside the code editor control. */
   icon: React.ReactNode;
-  /** @deprecated Maximum width of the tooltip (default 150px). */
-  maxWidth?: string;
-  /** @deprecated Copy button popover position. */
-  position?:
-    | PopoverPosition
-    | 'auto'
-    | 'top'
-    | 'bottom'
-    | 'left'
-    | 'right'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left-start'
-    | 'left-end'
-    | 'right-start'
-    | 'right-end';
-  /** @deprecated Text to display in the tooltip*/
-  toolTipText?: React.ReactNode;
   /** Event handler for the click of the button */
   onClick: (code: string, event?: any) => void;
   /** Flag indicating that the button is visible above the code editor. */
@@ -49,11 +25,6 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
   icon,
   className,
   'aria-label': ariaLabel,
-  toolTipText,
-  exitDelay,
-  entryDelay,
-  maxWidth,
-  position,
   onClick = () => {},
   isVisible = true,
   tooltipProps = {},
@@ -61,57 +32,12 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
 }: CodeEditorControlProps) => {
   const context = React.useContext(CodeEditorContext);
 
-  if (entryDelay !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'CodeEditorControl: entryDelay prop has been deprecated. ' +
-        'Pass the entryDelay via the tooltipProps prop instead.'
-    );
-  }
-
-  if (exitDelay !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'CodeEditorControl: exitDelay prop has been deprecated. ' +
-        'Pass the exitDelay via the tooltipProps prop instead.'
-    );
-  }
-
-  if (maxWidth !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'CodeEditorControl: maxWidth prop has been deprecated. ' + 'Pass the maxWidth via the tooltipProps prop instead.'
-    );
-  }
-
-  if (position !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'CodeEditorControl: position prop has been deprecated. ' + 'Pass the position via the tooltipProps prop instead.'
-    );
-  }
-
-  if (toolTipText !== undefined) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'CodeEditorControl: toolTipText prop has been deprecated. ' +
-        'Pass the toolTipText by setting the content field in tooltipProps prop instead.'
-    );
-  }
-
   const onCustomClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClick(context.code, event);
   };
 
   return isVisible ? (
-    <Tooltip
-      exitDelay={exitDelay}
-      entryDelay={entryDelay}
-      maxWidth={maxWidth}
-      position={position}
-      content={<div>{toolTipText}</div>}
-      {...tooltipProps}
-    >
+    <Tooltip {...tooltipProps}>
       <Button className={className} onClick={onCustomClick} variant="control" aria-label={ariaLabel} {...props}>
         {icon}
       </Button>

package/src/components/CodeEditor/examples/CodeEditorBasic.tsx

@@ -40,7 +40,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       <Checkbox
         label="Dark theme"
         isChecked={isDarkTheme}
-        onChange={toggleDarkTheme}
+        onChange={(_event, checked) => toggleDarkTheme(checked)}
         aria-label="dark theme checkbox"
         id="toggle-theme"
         name="toggle-theme"
@@ -48,7 +48,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       <Checkbox
         label="Line numbers"
         isChecked={isLineNumbersVisible}
-        onChange={toggleLineNumbers}
+        onChange={(_event, checked) => toggleLineNumbers(checked)}
         aria-label="line numbers checkbox"
         id="toggle-line-numbers"
         name="toggle-line-numbers"
@@ -56,7 +56,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       <Checkbox
         label="Read only"
         isChecked={isReadOnly}
-        onChange={toggleReadOnly}
+        onChange={(_event, checked) => toggleReadOnly(checked)}
         aria-label="read only checkbox"
         id="toggle-read-only"
         name="toggle-read-only"
@@ -64,7 +64,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       <Checkbox
         label="Minimap"
         isChecked={isMinimapVisible}
-        onChange={toggleMinimap}
+        onChange={(_event, checked) => toggleMinimap(checked)}
         aria-label="display minimap checkbox"
         id="toggle-minimap"
         name="toggle-minimap"