Skip to content

Commit

Permalink
Merge tag 'v23.3.0' into develop
Browse files Browse the repository at this point in the history
tag final release v23.3.0
  • Loading branch information
haschek committed Nov 9, 2023
2 parents ea2e18b + e879eb0 commit fb810ca
Show file tree
Hide file tree
Showing 11 changed files with 206 additions and 119 deletions.
39 changes: 22 additions & 17 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,61 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p

## [Unreleased]

## [23.3.0] - 2023-11-09

### Added

- `<PropertyName />`
- provide `labelProps` to configure the automatically injected `Label` element when `PropertyName` is only a string
- `labelProps`: configure the automatically injected `Label` element when `PropertyName` is only a string
- `<TextField />`
- Parameter `escapeToBlur`: If set to true the input field blurs/de-focuces when the `Escape` key is pressed.
- `escapeToBlur`: if set to true the input field blurs/de-focuces when the `Escape` key is pressed.
- `<CodeEditor />`
- support for additional modes: jinja2, yaml and json
- support for additional modes: `jinja2`, `yaml` and `json`
- add read-only mode
- 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)
- `height`: set a fixed height of the editor
- `wrapLines`: control auto-wrapping long lines (the default for wrap long lines is set to false now)
- `<Modal />`
- `modalFocusable`: 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.
- `forceTopPosition`: when `true` then the `z-index` of the modal's portal element is recalculated, so that the modal is always displayed on top of all other visible elements. Use with care, see documentation.
- `<ContextOverlay />`
- `preventTopPosition`: when true then the `z-index` is decreased to the value for modals. Use it when you need to display modal dialogs out of the context overlay. Type of counter property to `Modal.forceTopPosition`.
- `<ReactFlow />`
- Support disabling the react-flow hot keys via a React context, e.g. `Delete` etc.
- support disabling the react-flow hot keys via a React context, e.g. `Delete` etc.
- `<HandleDefault />`
- new `category` options that lead to different handle layouts: `dependency`, `fixed`, `flexible` and `unknown`
- `intent` option with defined colors for: primary, accent, info, success, warning, danger
- `<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
- `introductionTime`: can be used to visualize the node was added or updated
- `<EdgeLabel />`
- `loose` property can be set to `true` to prevent the box with border on the label component
- `loose`: can be set to `true` to prevent the box with border on the label component
- `<TableExpandHeader />`
- `toggleIcon`: Optional icon that should be displayed instead of the default ones.
- `toggleIcon`: optional icon that should be displayed instead of the default ones.
- `Utilities`
- methods `getGlobalVar` and `setGlobalVar` can be used to manage global variables indepentently from component states. They are stored to the `window` object under a `eccgui` "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!
- `getGlobalVar` and `setGlobalVar`: can be used to manage global variables indepentently from component states. They are stored to the `window` object under a `eccgui` "namespace". Can be used for example to manage globally increased counters. Do not use them if you need to store user session properties or confidential data!
- canonical icons for `artefact-chatlog`, `entity-human`, `entity-robot` and `operation-magic`

### Changed

- `<SimpleDialog />`:
- By default, prevent certain (React) events from bubbling up through the dialog (backdrop is not affected):
- Event handler: onContextMenu, onDrag, onDragStart, onDragEnd, onMouseDown, onMouseUp, onClick
- The handlers can be overwritten via `wrapperDivProps`.
- `<SimpleDialog />`
- by default, prevent certain (React) events from bubbling up through the dialog (backdrop is not affected):
- event handler: `onContextMenu`, `onDrag`, `onDragStart`, `onDragEnd`, `onMouseDown`, `onMouseUp`, `onClick`
- handlers can be overwritten via `wrapperDivProps`
- `<ApplicationHeader />`
- it is now possible to overwrite the background color by setting `--eccgui-appheader-color-background`
- it is now possible to overwrite the background color by setting `--eccgui-appheader-color-background` in its `style` attribute
- `<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`.
- `<Spacing />`
- allow other `div` attributes, e.g. `style`
- Tooltips of Carbon based elements display correctly in position and layout
- tooltips of Carbon based elements are displayed correctly in position and layout
- `<PropertyValuePair />`
- force maximum width for situation when the block could be wider, e.g. inside a flex layout, otherwise name and value could be wrongly aligned in a list with other property value pairs

Expand Down
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@eccenca/gui-elements",
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
"version": "23.2.0",
"version": "23.3.0",
"license": "Apache-2.0",
"homepage": "https://github.com/eccenca/gui-elements",
"bugs": "https://github.com/eccenca/gui-elements/issues",
Expand Down Expand Up @@ -152,8 +152,9 @@
"react-dom": ">=16"
},
"resolutions": {
"**/@babel/traverse": "^7.23.2",
"**/@types/react": "^17.0.59",
"**/postcss": "^8.4.23",
"**/postcss": "^8.4.31",
"**/parse5": "^6.0.1"
},
"husky": {
Expand Down
4 changes: 0 additions & 4 deletions src/components/Application/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,3 @@

// @import '~@carbon/styles/scss/components/ui-shell/navigation-menu';
@import "content";

.#{$ns}-portal {
z-index: 10001; // higher than carbon ui shell header and delta to dialog portals
}
32 changes: 20 additions & 12 deletions src/components/ContextOverlay/ContextOverlay.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import React from 'react';
import {
Popover2 as BlueprintPropover,
Popover2Props as BlueprintPopoverProps,
} from "@blueprintjs/popover2";
import React from "react";
import { Popover2 as BlueprintPopover, Popover2Props as BlueprintPopoverProps } from "@blueprintjs/popover2";

import { CLASSPREFIX as eccgui } from "../../configuration/constants";

export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "position"> {
/**
* `target` element to use as toggler for the overlay display.
*/
children?: JSX.Element;
/**
* Type of counter property to `Modal.forceTopPosition`.
* Use it when you need to display modal dialogs out of the context overlay.
*/
preventTopPosition?: boolean;
}

/**
Expand All @@ -18,19 +21,24 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
*/
export const ContextOverlay = ({
children,
className='',
portalClassName,
preventTopPosition,
className = "",
...restProps
}: ContextOverlayProps) => {

return (
<BlueprintPropover
<BlueprintPopover
placement="bottom"
{...restProps}
className={`${eccgui}-contextoverlay ` + className}
className={`${eccgui}-contextoverlay` + (className ? ` ${className}` : "")}
portalClassName={
(preventTopPosition ? `${eccgui}-contextoverlay__portal--lowertop` : "") +
(portalClassName ? ` ${portalClassName}` : "")
}
>
{children}
</BlueprintPropover>
)
}
</BlueprintPopover>
);
};

export default ContextOverlay;
8 changes: 8 additions & 0 deletions src/components/ContextOverlay/contextoverlay.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@ $pt-dark-popover2-background-color: $dark-gray4 !default;

@import "~@blueprintjs/popover2/src/popover2";

.#{$ns}-portal {
z-index: $eccgui-zindex-overlays;
}

.#{$eccgui}-contextoverlay__portal--lowertop {
z-index: $eccgui-zindex-modals;
}

.#{$ns}-overlay-content,
.#{$ns}-popover2,
.#{$ns}-popover2-content,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ $eccgui-color-modal-backdrop: rgba(invert($eccgui-color-workspace-background), 0
@import "~@blueprintjs/core/src/components/dialog/dialog";

.#{$eccgui}-dialog__portal {
z-index: 8001; // higher than carbon ui shell header
z-index: $eccgui-zindex-modals;
}

.#{$eccgui}-dialog__backdrop {
Expand Down
9 changes: 9 additions & 0 deletions src/components/Icon/canonicalIconNames.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export type ValidIconName =
| "application-vocabularies"
| "application-warning"
| "application-hotkeys"
| "artefact-chatlog"
| "artefact-commit"
| "artefact-customtask"
| "artefact-dataset"
Expand Down Expand Up @@ -44,6 +45,8 @@ export type ValidIconName =
| "artefact-workflow"
| "data-sourcepath"
| "data-targetpath"
| "entity-human"
| "entity-robot"
| "item-add-artefact"
| "item-clone"
| "item-comment"
Expand Down Expand Up @@ -108,6 +111,7 @@ export type ValidIconName =
| "operation-fix"
| "operation-link"
| "operation-logout"
| "operation-magic"
| "operation-merge"
| "operation-redo"
| "operation-search"
Expand Down Expand Up @@ -165,6 +169,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
"application-warning": icons.WarningAlt,
"application-hotkeys": icons.Keyboard,

"artefact-chatlog": icons.Chat,
"artefact-commit": icons.Commit,
"artefact-customtask": icons.Script,
"artefact-dataset-csv": icons.Csv,
Expand Down Expand Up @@ -197,6 +202,9 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
"data-sourcepath": icons.Data_2,
"data-targetpath": icons.Data_1,

"entity-human": icons.User,
"entity-robot": icons.Bot,

"item-add-artefact": icons.AddAlt,
"item-clone": icons.Copy,
"item-comment": icons.AddComment,
Expand Down Expand Up @@ -265,6 +273,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
"operation-fix": icons.Tools,
"operation-link": icons.Link,
"operation-logout": icons.Logout,
"operation-magic": icons.MagicWand,
"operation-merge": icons.DirectionMerge,
"operation-redo": icons.Redo,
"operation-search": icons.Search,
Expand Down
63 changes: 27 additions & 36 deletions src/configuration/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,22 @@ $eccgui: "eccgui" !default;

// -- Configuration stack of colors --------------------------------------------

$eccgui-color-primary: rgb(254, 143, 1) !default;
$eccgui-color-primary-contrast: rgb(255, 255, 255) !default;
$eccgui-color-accent: rgb(10, 103, 163) !default;
$eccgui-color-accent-contrast: rgb(255, 255, 255) !default;

$eccgui-color-primary: rgb(254 143 1) !default;
$eccgui-color-primary-contrast: rgb(255 255 255) !default;
$eccgui-color-accent: rgb(10 103 163) !default;
$eccgui-color-accent-contrast: rgb(255 255 255) !default;
$eccgui-color-success-text: #1b5e20 !default;
$eccgui-color-success-background: rgb(232, 245, 233) !default;
$eccgui-color-info-text: rgb(21, 101, 192) !default;
$eccgui-color-info-background: rgb(227, 242, 253) !default;
$eccgui-color-success-background: rgb(232 245 233) !default;
$eccgui-color-info-text: rgb(21 101 192) !default;
$eccgui-color-info-background: rgb(227 242 253) !default;
$eccgui-color-warning-text: #e65100 !default;
$eccgui-color-warning-background: rgb(255, 243, 224) !default;
$eccgui-color-warning-background: rgb(255 243 224) !default;
$eccgui-color-danger-text: #b71c1c !default;
$eccgui-color-danger-background: rgb(255, 235, 238) !default;

$eccgui-color-danger-background: rgb(255 235 238) !default;
$eccgui-color-applicationheader-text: #222 !default;
$eccgui-color-applicationheader-background: #ddd !default;
$eccgui-color-workspace-text: #444 !default;
$eccgui-color-workspace-background: #f5f5f5 !default;

$eccgui-color-application-text: $eccgui-color-workspace-text !default; // deprecated
$eccgui-color-application-background: $eccgui-color-workspace-background !default; // deprecated

Expand All @@ -52,7 +49,10 @@ $eccgui-font-family-fantasy: fantasy !default;
$eccgui-font-family-default: $eccgui-font-family-sans !default;
$eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px
$eccgui-size-typo-base-lineheight: 1.39 !default; // only ratio to font size, no unit!
$eccgui-size-type-levelratio: math.div(7, 6) !default; // ratio without unit! used to calculate different text sizes, etc ...
$eccgui-size-type-levelratio: math.div(
7,
6
) !default; // ratio without unit! used to calculate different text sizes, etc ...

$eccgui-font-weight-light: 300 !default;
$eccgui-font-weight-regular: 400 !default;
Expand All @@ -74,59 +74,50 @@ $eccgui-opacity-muted: 0.61 !default;
$eccgui-opacity-disabled: 0.39 !default;
$eccgui-opacity-invisible: 0 !default;

// -- Configuration stack of z-indexes -----------------------------------------

$eccgui-zindex-modals: 8001 !default; // higher than carbon ui shell header
$eccgui-zindex-overlays: 10001 !default; // add delta to dialog portals

// -- Calculation of more config vars ------------------------------------------

/*
You can overwrite them by setting them before loading this configuration but
it is not recommended to do so.
*/

$eccgui-size-typo-caption: math.div(1, $eccgui-size-type-levelratio) *
$eccgui-size-typo-base !default;
$eccgui-size-typo-caption-lineheight: max(
$eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight,
1
) !default;
$eccgui-size-typo-caption: math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-base !default;
$eccgui-size-typo-caption-lineheight: max($eccgui-size-type-levelratio * $eccgui-size-typo-base-lineheight, 1) !default;
$eccgui-size-typo-text: $eccgui-size-typo-base !default; // should be `1rem` but bp3 currently do not support rem units here, leads to errors in their calculations for values of other properties
$eccgui-size-typo-text-lineheight: max(
$eccgui-size-typo-base-lineheight,
1
) !default;
$eccgui-size-typo-subtitle: $eccgui-size-type-levelratio *
$eccgui-size-typo-text !default;
$eccgui-size-typo-text-lineheight: max($eccgui-size-typo-base-lineheight, 1) !default;
$eccgui-size-typo-subtitle: $eccgui-size-type-levelratio * $eccgui-size-typo-text !default;
$eccgui-size-typo-subtitle-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-text-lineheight,
1
) !default;
$eccgui-size-typo-title: $eccgui-size-type-levelratio *
$eccgui-size-typo-subtitle !default;
$eccgui-size-typo-title: $eccgui-size-type-levelratio * $eccgui-size-typo-subtitle !default;
$eccgui-size-typo-title-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-subtitle-lineheight,
1
) !default;
$eccgui-size-typo-headline: $eccgui-size-type-levelratio *
$eccgui-size-typo-title !default;
$eccgui-size-typo-headline: $eccgui-size-type-levelratio * $eccgui-size-typo-title !default;
$eccgui-size-typo-headline-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-title-lineheight,
1
) !default;
$eccgui-size-typo-display-1: $eccgui-size-type-levelratio *
$eccgui-size-typo-headline !default;
$eccgui-size-typo-display-1: $eccgui-size-type-levelratio * $eccgui-size-typo-headline !default;
$eccgui-size-typo-display-1-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-headline-lineheight,
1
) !default;
$eccgui-size-typo-display-2: $eccgui-size-type-levelratio *
$eccgui-size-typo-display-1 !default;
$eccgui-size-typo-display-2: $eccgui-size-type-levelratio * $eccgui-size-typo-display-1 !default;
$eccgui-size-typo-display-2-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-1-lineheight,
1
) !default;
$eccgui-size-typo-display-3: $eccgui-size-type-levelratio *
$eccgui-size-typo-display-2 !default;
$eccgui-size-typo-display-3: $eccgui-size-type-levelratio * $eccgui-size-typo-display-2 !default;
$eccgui-size-typo-display-3-lineheight: max(
math.div(1, $eccgui-size-type-levelratio) * $eccgui-size-typo-display-2-lineheight,
1
) !default;

$eccgui-size-maxwidth-workview: 100 * $eccgui-size-typo-text;
Loading

0 comments on commit fb810ca

Please sign in to comment.