Merge branch 'develop' into feature/handleTools-CMEM-5037

# Conflicts: # CHANGELOG.md # src/components/Dialog/Modal.tsx
eccenca · Sep 5, 2023 · fdcc9bd · fdcc9bd
2 parents d760118 + 53904df
commit fdcc9bd
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,12 +8,27 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ### Added
 
+-   `<TextField />`:
+    - Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
+-   `<Modal />`:
+    - Parameter `modalFocusable: boolean`: When `true` the outer `div` element of the modal can be focused by clicking on it.
+                                           This is needed e.g. when key (down, up) events should trigger on the modal in order
+                                           to bubble up to its parent elements.
 -   `<HandleTools />`: can be used as single handle content to add an context menu to handles
 -   `<NodeContent />`
     -   `introductionTime` parameter could be used to visualize the node was added or updated
 -   `<ReactFlow />`:
     -   Support disabling the react-flow hot keys via a React context, e.g. `Delete` etc.
 
+### Fixed
+
+-   `<Modal />`:
+    - Escape key to close does not work anymore after clicking on the backdrop for `canOutsideClickClose=false` and `canEscapeKeyClose=true`. 
+-   `<PropertyName />`
+    -   provide `labelProps` to configure the automatically injected `Label` element when `PropertyName` is only a string
+-   `<Spacing />`
+    -   allow other `div` attributes, e.g. `style`
+
 ## [23.2.0] - 2023-07-14
 
 ### Added

diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
         "@blueprintjs/select": "^4.9.14",
         "@carbon/icons": "^11.19.0",
         "@carbon/icons-react": "^11.19.0",
-        "@carbon/styles": "^1.28.0",
+        "@carbon/styles": "1.32.0",
         "@mavrin/remark-typograf": "^2.2.0",
         "carbon-components-react": "^8.28.0",
         "codemirror": "^5.65.13",
@@ -146,6 +146,7 @@
         "yargs": "^17.7.2"
     },
     "peerDependencies": {
+        "@carbon/styles": "<1.33.0",
         "@types/carbon-components-react": ">=7",
         "react": ">=16",
         "react-dom": ">=16"

diff --git a/src/components/Application/_toolbar.scss b/src/components/Application/_toolbar.scss
@@ -6,83 +6,72 @@
     own rule patches.
 */
 
+@use "sass:color";
+
 /// Header-panel background
 $shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: adjust-color($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-panel-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: adjust-color($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+$shell-panel-bg-04: color.adjust($eccgui-color-applicationheader-background, $lightness: 5%) !default;
 
 /// Panel border
-$shell-panel-border: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-border: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
 
 /// Header panel text
-$shell-panel-text-01: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%) !default;
+$shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
 
 /// Header panel secondary text
 $shell-panel-text-02: $eccgui-color-applicationheader-text !default;
 
 /// Header panel focus border
-$shell-panel-focus: adjust-color($eccgui-color-applicationheader-text, $lightness: 39%) !default;
+$shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightness: 39%) !default;
 
 @import "~@carbon/styles/scss/components/ui-shell/header-panel/index";
 
 // tweack original layout
 
 .#{$prefix}--header-panel {
     top: mini-units(8);
+    padding: $eccgui-size-block-whitespace;
+    color: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%);
+    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 .#{$prefix}--header-panel--expanded {
-    //width: carbon--mini-units(32);
+    border-right-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-left-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    top: mini-units(8);
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: mini-units(8) 0 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// tweak original colors
-
-// $shell-panel-bg-01
-.#{$prefix}--header-panel {
-    background-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    padding: $eccgui-size-block-whitespace;
-}
-
-// $shell-panel-text-01
-.#{$prefix}--header-panel {
-    color: adjust-color($eccgui-color-applicationheader-text, $lightness: -5%);
-}
-
-// $shell-panel-border
-.#{$prefix}--header-panel--expanded {
-    border-left-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-right-color: adjust-color($eccgui-color-applicationheader-background, $lightness: -5%);
-}
-
 // add rules for own class identiiers
 
 .#{$eccgui}-application__toolbar {
-    flex-grow: 0;
     flex-basis: auto;
+    flex-grow: 0;
+
+    .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
+        // for some reason the original calculation still moves out the tooltip
+        transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
+    }
 }
 
 .#{$eccgui}-application__toolbar__section {
-    padding: 0 mini-units(1);
     display: flex;
     align-items: center;
+    padding: 0 mini-units(1);
 }
diff --git a/src/components/Dialog/Modal.tsx b/src/components/Dialog/Modal.tsx
@@ -24,11 +24,14 @@ export interface ModalProps extends OverlayProps, IOverlayState {
   preventBackdrop?: boolean;
     /** Optional props for the wrapper div element inside the modal overlay. */
   wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+    /** Make the modal focusable, e.g. when clicking somewhere on it. This is needed, e.g. when capturing key (down, up) events that
+     * should bubble to the modal's parent elements. */
+    modalFocusable?: boolean
 }
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
- * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficent.
+ * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
  * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
  * Then it is recommended to use the `Card` element inside.
  */
@@ -41,8 +44,20 @@ export const Modal = ({
     canEscapeKeyClose=false,
     preventBackdrop=false,
     wrapperDivProps,
+    modalFocusable = true,
     ...otherProps
 }: ModalProps) => {
+
+    const backdropProps: React.HTMLProps<HTMLDivElement> | undefined = !canOutsideClickClose && canEscapeKeyClose ? {
+        ...otherProps.backdropProps,
+        // Escape key won't work anymore otherwise after clicking on the backdrop
+        tabIndex: 0
+    } : otherProps.backdropProps
+
+    const focusableProps = modalFocusable ? {
+        tabIndex: 0
+    } : undefined
+
     const alteredChildren = React.Children.map(children, (child) => {
         if ((child as React.ReactElement).type && (child  as React.ReactElement).type === Card) {
             return React.cloneElement(
@@ -60,6 +75,7 @@ export const Modal = ({
     return (
         <BlueprintOverlay
             {...otherProps}
+            backdropProps={backdropProps}
             className={overlayClassName}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
@@ -71,6 +87,7 @@ export const Modal = ({
                 className={BlueprintClassNames.DIALOG_CONTAINER}
                 // this is a workaround because data attribute on SimpleDialog is not correctly routed to the overlay by blueprint js
                 data-test-id={(otherProps as any)["data-test-id"] ?? "simpleDialogWidget"}
+                {...focusableProps}
                 tabIndex={0}
             >
                 <section

diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
@@ -13,6 +13,7 @@ export type ValidIconName =
     | "application-useraccount"
     | "application-vocabularies"
     | "application-warning"
+    | "application-hotkeys"
     | "artefact-commit"
     | "artefact-customtask"
     | "artefact-dataset"
@@ -162,6 +163,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "application-useraccount": icons.UserAvatar,
     "application-vocabularies": icons.Catalog,
     "application-warning": icons.WarningAlt,
+    "application-hotkeys": icons.Keyboard,
 
     "artefact-commit": icons.Commit,
     "artefact-customtask": icons.Script,

diff --git a/src/components/PropertyValuePair/PropertyName.tsx b/src/components/PropertyValuePair/PropertyName.tsx
@@ -1,26 +1,37 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 
 export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
     /**
      * Increase or decrease the width used for the property name.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * Additional label properties, e.g. `tooltip`.
+     * It is only used if the `PropertyName` has simple text input.
+     */
+    labelProps?: LabelProps;
 }
 
-export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
+export const PropertyName = ({ className = "", size, children, labelProps, ...otherDtProps }: PropertyNameProps) => {
     return (
         <dt
             className={
                 `${eccgui}-propertyvalue__property` +
                 (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
                 (className ? " " + className : "")
             }
-            {...otherProps}
+            {...otherDtProps}
         >
-            <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
+            <div>
+                {typeof children === "string" ? (
+                    <Label text={children} isLayoutForElement="span" {...labelProps} />
+                ) : (
+                    children
+                )}
+            </div>
         </dt>
     );
 };

diff --git a/src/components/Separation/Spacing.tsx b/src/components/Separation/Spacing.tsx
@@ -1,38 +1,42 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SpacingProps {
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Set the amount of white space that separates two elements.
      */
-    size?: "tiny" | "small" | "medium" | "large" | "xlarge"
+    size?: "tiny" | "small" | "medium" | "large" | "xlarge";
     /**
      * If set then is a ruler displayed in the middle of the spacing area.
      * The direction of the ruler is used from the spacing.
      */
-    hasDivider?: boolean
+    hasDivider?: boolean;
     /**
      * If set then the spacing separates two elements on the horizontal axis.
      * The spacing area then is created on a vertical axis.
      */
-    vertical?: boolean
+    vertical?: boolean;
 }
 
 /**
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false, ...otherDivProps }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div
             className={
-                `${eccgui}-separation__spacing-` + direction +
-                ` ${eccgui}-separation__spacing--` + size +
+                `${eccgui}-separation__spacing-` +
+                direction +
+                ` ${eccgui}-separation__spacing--` +
+                size +
                 (hasDivider ? ` ${eccgui}-separation__spacing--hasdivider` : "")
             }
+            {...otherDivProps}
         />
     );
-}
+};
 
 export default Spacing;
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -1,15 +1,15 @@
-import React from "react";
+import React, {KeyboardEventHandler, RefObject} from "react";
 import {
-    InputGroup as BlueprintInputGroup,
     Classes as BlueprintClassNames,
-    Intent as BlueprintIntent,
-    MaybeElement,
     HTMLInputProps,
+    InputGroup as BlueprintInputGroup,
     InputGroupProps2,
+    Intent as BlueprintIntent,
+    MaybeElement,
 } from "@blueprintjs/core";
-import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
+import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
 import Icon from "../Icon/Icon";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
 import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
@@ -50,6 +50,9 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
     invisibleCharacterWarning?: InvisibleCharacterWarningProps
+
+    /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
+    escapeToBlur?: boolean
 }
 
 /**
@@ -64,8 +67,10 @@ export const TextField = ({
   fullWidth = true,
   leftIcon,
   invisibleCharacterWarning,
+  escapeToBlur = false,
   ...otherProps
 }: TextFieldProps) => {
+    const inputRef = React.useRef<HTMLInputElement | null>(null)
   let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
@@ -84,6 +89,25 @@ export const TextField = ({
       break;
   }
 
+    const handleLabelEscape = React.useCallback(() => {
+        inputRef.current?.blur()
+        if(otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
+            if(otherInputRef.current) {
+                otherInputRef.current.blur()
+            }
+        }
+    }, [])
+
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
+        if(escapeToBlur && event.key === "Escape") {
+            event.preventDefault()
+            handleLabelEscape()
+            return false
+        }
+        return otherProps.onKeyDown?.(event)
+    }, [otherProps.onKeyDown, escapeToBlur])
+
   const {
       intent = deprecatedIntent,
       ...otherBlueprintInputGroupProps
@@ -110,6 +134,7 @@ export const TextField = ({
 
   return (
     <BlueprintInputGroup
+        inputRef={inputRef}
       className={
           `${eccgui}-textfield` +
           (intent ? ` ${eccgui}-intent--${intent}` : "") +
@@ -133,6 +158,7 @@ export const TextField = ({
       }
       dir={"auto"}
       onChange={maybeWrappedOnChange}
+        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
     />
   );
 }