Options for app customization (CMEM-5156)

CHANGELOG.md

@@ -16,21 +16,29 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   add `height` parameter to set a fixed height of the editor
     -   add `wrapLines` option to control auto-wrapping long lines (the default for wrap long lines is set to false now)
 -   `<TextField />`:
-    - Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
+    -   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.
+    -   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.
 
+### Changed
+
+-   `<ApplicationHeader />`
+    -   it is now possible to overwrite the background color by setting `--eccgui-appheader-color-background`
+-   `<Modal />`
+    -   new `xlarge` size option
+    -   re-configure appearance of the sizes, `small` is displayed a bit smaller, `large` a bit larger than before
+
 ### Fixed
 
 -   `<Modal />`:
-    - Escape key to close does not work anymore after clicking on the backdrop for `canOutsideClickClose=false` and `canEscapeKeyClose=true`. 
+    -   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 />`

src/components/Application/ApplicationHeader.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import {
-    Header as CarbonHeader,
-    HeaderProps as CarbonHeaderProps,
-} from "carbon-components-react";
+import { Header as CarbonHeader, HeaderProps as CarbonHeaderProps } from "carbon-components-react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface ApplicationHeaderProps extends CarbonHeaderProps {};
+export type ApplicationHeaderProps = CarbonHeaderProps;
 
 export const ApplicationHeader = ({
     children = "",
-    className,
+    className = "",
     ...otherCarbonHeaderProps
 }: ApplicationHeaderProps) => {
     return (
-        <CarbonHeader
-            className={`${eccgui}-application__header ` + className}
-            {...otherCarbonHeaderProps}
-        >
-            { children }
+        <CarbonHeader className={`${eccgui}-application__header ${className}`} {...otherCarbonHeaderProps}>
+            {children}
         </CarbonHeader>
-    )
-}
+    );
+};
 
 export default ApplicationHeader;

src/components/Application/_header.scss

@@ -8,25 +8,25 @@
 @use "sass:color";
 
 /// Header bar background
-$shell-header-bg-01: $eccgui-color-applicationheader-background !default;
+$shell-header-bg-01: var(
+    --#{$eccgui}-appheader-color-background,
+    #{$eccgui-color-applicationheader-background}
+) !default;
 
 /// Header menu trigger hover, Header nav link hover
-$shell-header-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-02: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
 
 /// Header action active background
-$shell-header-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-03: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
 
 /// Header submenu link hover
-$shell-header-bg-04: color.adjust(
-    $eccgui-color-applicationheader-background,
-    $lightness: -5%
-) !default; // TODO needs color var gray-90-hover
+$shell-header-bg-04: $shell-header-bg-02 !default;
 
 /// Header nav link active and focus background
-$shell-header-bg-05: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-header-bg-05: $shell-header-bg-02 !default;
 
 /// Header nav link submenu
-$shell-header-bg-06: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-header-bg-06: $shell-header-bg-03 !default;
 
 /// Header border bottom
 $shell-header-border-01: transparent !default;
@@ -128,42 +128,42 @@ span.#{$prefix}--header__name {
 // $shell-header-bg-01
 .#{$prefix}--header,
 .#{$prefix}--skip-to-content:focus {
-    background-color: $eccgui-color-applicationheader-background;
+    background-color: $shell-header-bg-01;
 }
 
 // $shell-header-bg-02
 a.#{$prefix}--header__menu-item:hover {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-02;
 }
 .#{$prefix}--header__menu-trigger:hover {
-    fill: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    fill: $shell-header-bg-02;
 }
 
 // $shell-header-bg-03
 .#{$prefix}--header__action:active,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:active,
 a.#{$prefix}--header__menu-item:active {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-03;
 }
 
 // $shell-header-bg-04
 .#{$prefix}--header__action:hover,
 .#{$prefix}--header__menu-title[aria-expanded="true"] + .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-04;
 }
 
 // $shell-header-bg-05
 .#{$prefix}--header__action--active {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    background-color: $shell-header-bg-05;
     border-right-color: transparent;
-    border-bottom-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-bottom-color: $shell-header-bg-05;
     border-left-color: transparent;
 }
 
 // $shell-header-bg-06
 .#{$prefix}--header__menu-title[aria-expanded="true"],
 .#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
-    background-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%);
+    background-color: $shell-header-bg-06;
 }
 
 // $shell-header-border-01

src/components/Application/_toolbar.scss

@@ -9,19 +9,19 @@
 @use "sass:color";
 
 /// Header-panel background
-$shell-panel-bg-01: $eccgui-color-applicationheader-background !default;
+$shell-panel-bg-01: $shell-header-bg-01 !default;
 
 /// Panel item hover background
-$shell-panel-bg-02: color.adjust($eccgui-color-applicationheader-background, $lightness: -10%) !default;
+$shell-panel-bg-02: color-mix(in srgb, $shell-header-bg-01, black 10%) !default;
 
 /// Panel item focus and active background
-$shell-panel-bg-03: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-bg-03: color-mix(in srgb, $shell-header-bg-01, black 5%) !default;
 
 /// Panel item link selected background
-$shell-panel-bg-04: color.adjust($eccgui-color-applicationheader-background, $lightness: 5%) !default;
+$shell-panel-bg-04: color-mix(in srgb, $shell-header-bg-01, white 5%) !default;
 
 /// Panel border
-$shell-panel-border: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%) !default;
+$shell-panel-border: $shell-panel-bg-03 !default;
 
 /// Header panel text
 $shell-panel-text-01: color.adjust($eccgui-color-applicationheader-text, $lightness: -5%) !default;
@@ -39,13 +39,13 @@ $shell-panel-focus: color.adjust($eccgui-color-applicationheader-text, $lightnes
 .#{$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%);
+    color: $shell-panel-text-01;
+    background-color: $shell-panel-bg-01;
 }
 
 .#{$prefix}--header-panel--expanded {
-    border-right-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
-    border-left-color: color.adjust($eccgui-color-applicationheader-background, $lightness: -5%);
+    border-right-color: $shell-panel-border;
+    border-left-color: $shell-panel-border;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,

src/components/Dialog/Modal.tsx

@@ -1,32 +1,38 @@
-import React from 'react';
+import React from "react";
 import {
     Classes as BlueprintClassNames,
     IOverlayState,
     Overlay as BlueprintOverlay,
     OverlayProps,
 } from "@blueprintjs/core";
-import {Card} from "./../Card";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { Card } from "./../Card";
 
 export interface ModalProps extends OverlayProps, IOverlayState {
-  children: React.ReactNode | React.ReactNode[];
-  /**
-   * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
-   */
-  overlayClassName?: string;
-  /**
-   * Size of the modal.
-   */
-  size?: "tiny" | "small" | "regular" | "large" | "fullscreen";
-  /**
-   * Prevents that a backdrop area is displayed behind the modal elements.
-   */
-  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
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
+     */
+    overlayClassName?: string;
+    /**
+     * Size of the modal.
+     */
+    size?: "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
+    /**
+     * Prevents that a backdrop area is displayed behind the modal elements.
+     */
+    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;
 }
 
 /**
@@ -37,36 +43,37 @@ export interface ModalProps extends OverlayProps, IOverlayState {
  */
 export const Modal = ({
     children,
-    className='',
-    overlayClassName='',
-    size="regular",
-    canOutsideClickClose=false,
-    canEscapeKeyClose=false,
-    preventBackdrop=false,
+    className = "",
+    overlayClassName = "",
+    size = "regular",
+    canOutsideClickClose = false,
+    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 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 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(
-                child as React.ReactElement,
-                {
-                    isOnlyLayout: true,
-                    elevation: 4
-                }
-            );
+        if ((child as React.ReactElement).type && (child as React.ReactElement).type === Card) {
+            return React.cloneElement(child as React.ReactElement, {
+                isOnlyLayout: true,
+                elevation: 4,
+            });
         }
 
         return child;
@@ -93,15 +100,15 @@ export const Modal = ({
                 <section
                     className={
                         `${eccgui}-dialog__wrapper` +
-                        (typeof size === 'string' ? ` ${eccgui}-dialog__wrapper--` + size : '') +
-                        (className ? ' ' + className : '')
+                        (typeof size === "string" ? ` ${eccgui}-dialog__wrapper--` + size : "") +
+                        (className ? " " + className : "")
                     }
                 >
                     {alteredChildren}
                 </section>
             </div>
         </BlueprintOverlay>
     );
-}
+};
 
 export default Modal;