From 29f72c4ccdfa376034edbb70e674842526c139af Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Thu, 8 Feb 2024 15:33:30 +0100 Subject: [PATCH 01/11] Forward ref for CardContent --- CHANGELOG.md | 7 +++++++ src/components/Card/CardContent.tsx | 9 ++++----- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa65b920..8e3ed2a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ## [Unreleased] +### Changed + +- ` + - Forward ref + +## [Unreleased] + ### Added - ``, ``, `` diff --git a/src/components/Card/CardContent.tsx b/src/components/Card/CardContent.tsx index 2a5d8b48..6d24adf6 100644 --- a/src/components/Card/CardContent.tsx +++ b/src/components/Card/CardContent.tsx @@ -14,15 +14,16 @@ export interface CardContentProps extends React.HTMLAttributes { * Holds the card content. * Display scrollbars in case there is not enough space for it. */ -export const CardContent = ({ +export const CardContent = React.forwardRef(({ children, className='', noFlexHeight, ...otherProps -}: CardContentProps) => { +}: CardContentProps, ref) => { return (
); -}; - -export default CardContent; +}); From 259ded762fc52d5c34dbea0df14c47a3d83043cb Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Tue, 12 Mar 2024 12:07:53 +0100 Subject: [PATCH 02/11] Add 'Compare' icon --- src/components/Icon/canonicalIconNames.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx index c023ba1e..8de437e7 100644 --- a/src/components/Icon/canonicalIconNames.tsx +++ b/src/components/Icon/canonicalIconNames.tsx @@ -151,6 +151,7 @@ export type ValidIconName = | "toggler-star-filled" | "toggler-tree" | "form-template" + | "compare" | "undefined"; export type CarbonIconType = React.ComponentType; @@ -204,6 +205,8 @@ const canonicalIconNames: Record = { "artefact-uncategorized": icons.Unknown, "artefact-workflow": icons.ModelBuilder, + "compare": icons.Compare, + "data-sourcepath": icons.Data_2, "data-targetpath": icons.Data_1, "data-string": icons.StringText, From e77a91ebc6bc012bf16c9e0bdfcaf37d74f5674d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Mar 2024 13:52:39 +0100 Subject: [PATCH 03/11] improve style import from libs --- src/components/Application/application.scss | 1 - src/includes/blueprintjs/_requisits.scss | 2 +- src/includes/blueprintjs/_variables.scss | 175 +----------------- .../carbon-components/_requisits.scss | 1 + 4 files changed, 5 insertions(+), 174 deletions(-) diff --git a/src/components/Application/application.scss b/src/components/Application/application.scss index 77dae0df..257d2f55 100644 --- a/src/components/Application/application.scss +++ b/src/components/Application/application.scss @@ -1,5 +1,4 @@ // @import 'config'; -@import "~@carbon/styles/scss/components/ui-shell/functions"; @import "header"; @import "toolbar"; diff --git a/src/includes/blueprintjs/_requisits.scss b/src/includes/blueprintjs/_requisits.scss index 5d6ebd54..780d4ccc 100644 --- a/src/includes/blueprintjs/_requisits.scss +++ b/src/includes/blueprintjs/_requisits.scss @@ -1,5 +1,5 @@ @import "~@blueprintjs/colors/src/colors"; -@import "~@blueprintjs/core/src/common/variables"; +@import "~@blueprintjs/core/src/common/variables-extended"; // future home for $icon-classes var @import "~@blueprintjs/core/src/common/variables-extended"; @import "~@blueprintjs/core/src/common/react-transition"; diff --git a/src/includes/blueprintjs/_variables.scss b/src/includes/blueprintjs/_variables.scss index 71c9b615..8787cac6 100644 --- a/src/includes/blueprintjs/_variables.scss +++ b/src/includes/blueprintjs/_variables.scss @@ -1,83 +1,21 @@ @use "sass:math"; // Stack of BlueprintJS variables that are necessary to use their framework -// TODO: calculate them from own configuration variables, all unchanged variables are commented out +// calculate them from own configuration variables here +// see blueprint import for variables that need to be overwritten with other values $icon-font-path: "~@blueprintjs/icons/resources/icons" !default; -// Gray scale - -// $black: #10161a !default; - -// $dark-gray1: #182026 !default; -// $dark-gray2: #202b33 !default; -// $dark-gray3: #293742 !default; -// $dark-gray4: #30404d !default; -// $dark-gray5: #394b59 !default; - -// $gray1: #5c7080 !default; -// $gray2: #738694 !default; -// $gray3: #8a9ba8 !default; -// $gray4: #a7b6c2 !default; -// $gray5: #bfccd6 !default; - -// $light-gray1: #ced9e0 !default; -// $light-gray2: #d8e1e8 !default; -// $light-gray3: #e1e8ed !default; -// $light-gray4: #ebf1f5 !default; -// $light-gray5: #f5f8fa !default; - -// $white: #ffffff !default; - -// Other colors -// @import '~@blueprintjs/core/src/common/colors'; - // Color aliases $pt-intent-primary: $eccgui-color-accent !default; $pt-intent-success: $eccgui-color-success-text !default; $pt-intent-warning: $eccgui-color-warning-text !default; $pt-intent-danger: $eccgui-color-danger-text !default; - -// $pt-app-background-color: $light-gray5 !default; -// $pt-dark-app-background-color: $dark-gray3 !default; - $pt-outline-color: rgba($eccgui-color-accent, 0.6); $pt-text-color: $eccgui-color-application-text !default; -// $pt-text-color-muted: $gray1 !default; -// $pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default; -// $pt-heading-color: $pt-text-color !default; -// $pt-link-color: $pt-intent-primary !default; -// $pt-dark-text-color: $light-gray5 !default; -// $pt-dark-text-color-muted: $gray4 !default; -// $pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 0.6) !default; -// $pt-dark-heading-color: $pt-dark-text-color !default; -// $pt-dark-link-color: $blue5 !default; -// Default text selection color using #7dbcff -// $pt-text-selection-color: rgba(125, 188, 255, 0.6) !default; - -// $pt-icon-color: $pt-text-color-muted !default; -// $pt-icon-color-hover: $pt-text-color !default; -// $pt-icon-color-disabled: $pt-text-color-disabled !default; -// $pt-icon-color-selected: $pt-intent-primary !default; -// $pt-dark-icon-color: $pt-dark-text-color-muted !default; -// $pt-dark-icon-color-hover: $pt-dark-text-color !default; -// $pt-dark-icon-color-disabled: $pt-dark-text-color-disabled !default; -// $pt-dark-icon-color-selected: $pt-intent-primary !default; - -// $pt-divider-black: rgba($black, 0.15) !default; -// $pt-dark-divider-black: rgba($black, 0.4) !default; -// $pt-dark-divider-white: rgba($white, 0.15) !default; - -// $pt-code-text-color: $pt-text-color-muted !default; -// $pt-dark-code-text-color: $pt-dark-text-color-muted !default; -// $pt-code-background-color: rgba($white, 0.7) !default; -// $pt-dark-code-background-color: rgba($black, 0.3) !default; - -// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`. -// Do not quote this value, for Less consumers. -$ns: bp5 !default; +// Size aliases // easily the most important variable, so it comes up top // (so other variables can use it to define themselves) @@ -89,112 +27,5 @@ $pt-font-size-large: $eccgui-size-typo-subtitle !default; $pt-font-size-small: $eccgui-size-typo-caption !default; $pt-line-height: $eccgui-size-typo-text-lineheight !default; -// tag: (font-size, line-height) - -/* -$headings: ( - "h1": (36px, 40px), - "h2": (28px, 32px), - "h3": (22px, 25px), - "h4": (18px, 21px), - "h5": (16px, 19px), - "h6": (14px, 16px) -) !default; -*/ - -// Icon variables -// $icons16-family: "Icons16" !default; -// $icons20-family: "Icons20" !default; $pt-icon-size-standard: 20px !default; $pt-icon-size-large: 32px !default; - -// Grids & dimensions - -// $pt-border-radius: floor($pt-grid-size / 3) !default; - -// Buttons -// $pt-button-height: $pt-grid-size * 3 !default; -// $pt-button-height-small: $pt-grid-size * 2.4 !default; -// $pt-button-height-smaller: $pt-grid-size * 2 !default; -// $pt-button-height-large: $pt-grid-size * 4 !default; - -// Inputs -// $pt-input-height: $pt-grid-size * 3 !default; -// $pt-input-height-large: $pt-grid-size * 4 !default; -// $pt-input-height-small: $pt-grid-size * 2.4 !default; - -// Others -// $pt-navbar-height: $pt-grid-size * 5 !default; - -// Z-indices -// $pt-z-index-base: 0 !default; -// $pt-z-index-content: $pt-z-index-base + 10 !default; -// $pt-z-index-overlay: $pt-z-index-content + 10 !default; - -// Shadow opacities -// $pt-border-shadow-opacity: 0.1 !default; -// $pt-drop-shadow-opacity: 0.2 !default; -// $pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2 !default; -// $pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2 !default; - -// Elevations -// all shadow lists must be the same length to avoid flicker in transitions. - -/* -$pt-elevation-shadow-0: 0 0 0 1px $pt-divider-black, - 0 0 0 rgba($black, 0), - 0 0 0 rgba($black, 0) !default; -$pt-elevation-shadow-1: border-shadow($pt-border-shadow-opacity), - 0 0 0 rgba($black, 0), - 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default; -$pt-elevation-shadow-2: border-shadow($pt-border-shadow-opacity), - 0 1px 1px rgba($black, $pt-drop-shadow-opacity), - 0 2px 6px rgba($black, $pt-drop-shadow-opacity) !default; -$pt-elevation-shadow-3: border-shadow($pt-border-shadow-opacity), - 0 2px 4px rgba($black, $pt-drop-shadow-opacity), - 0 8px 24px rgba($black, $pt-drop-shadow-opacity) !default; -$pt-elevation-shadow-4: border-shadow($pt-border-shadow-opacity), - 0 4px 8px rgba($black, $pt-drop-shadow-opacity), - 0 18px 46px 6px rgba($black, $pt-drop-shadow-opacity) !default; - -$pt-dark-elevation-shadow-0: 0 0 0 1px $pt-dark-divider-black, - 0 0 0 rgba($black, 0), - 0 0 0 rgba($black, 0) !default; -$pt-dark-elevation-shadow-1: border-shadow($pt-dark-border-shadow-opacity), - 0 0 0 rgba($black, 0), - 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default; -$pt-dark-elevation-shadow-2: border-shadow($pt-dark-border-shadow-opacity), - 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity), - 0 2px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default; -$pt-dark-elevation-shadow-3: border-shadow($pt-dark-border-shadow-opacity), - 0 2px 4px rgba($black, $pt-dark-drop-shadow-opacity), - 0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity) !default; -$pt-dark-elevation-shadow-4: border-shadow($pt-dark-border-shadow-opacity), - 0 4px 8px rgba($black, $pt-dark-drop-shadow-opacity), - 0 18px 46px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default; -*/ - -// Transitions -// $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default; -// $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default; -// $pt-transition-duration: 100ms !default; - -// Light theme styles - -/* -$pt-input-box-shadow: inset border-shadow(0.15), - inset 0 1px 1px rgba($black, $pt-drop-shadow-opacity) !default; -*/ -// $pt-dialog-box-shadow: $pt-elevation-shadow-4 !default; -// $pt-popover-box-shadow: $pt-elevation-shadow-3 !default; -// $pt-tooltip-box-shadow: $pt-popover-box-shadow !default; - -// Dark theme styles - -/* -$pt-dark-input-box-shadow: inset border-shadow(0.3), - inset 0 1px 1px rgba($black, $pt-dark-drop-shadow-opacity) !default; -*/ -// $pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4 !default; -// $pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default; -// $pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default; diff --git a/src/includes/carbon-components/_requisits.scss b/src/includes/carbon-components/_requisits.scss index c27af147..530dc546 100644 --- a/src/includes/carbon-components/_requisits.scss +++ b/src/includes/carbon-components/_requisits.scss @@ -8,6 +8,7 @@ $use-flexbox-grid: $use-flexbox-grid ); @use "~@carbon/styles/scss/utilities/_visually-hidden"; +@import "~@carbon/styles/scss/components/ui-shell/functions"; @import "~@carbon/styles/scss/feature-flags"; @import "~@carbon/styles/scss/colors"; @import "~@carbon/styles/scss/theme"; From 4b2625fe594752fcf5f0f2fae2b7a1245e757ef3 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 26 Mar 2024 09:52:42 +0100 Subject: [PATCH 04/11] fix and change behavior if onItemClick is executed or not --- CHANGELOG.md | 7 +++++++ src/components/Breadcrumb/BreadcrumbList.tsx | 6 +++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 924b1734..5a782f98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p export const bpButtonClass = ClassNames.Blueprint.BUTTON; ``` +### Fixed + +- `` + - `onItemClick` handler is only executed if breadcrumb has `href` set because this is one callback parameter + ### Changed - BlueprintJS libraries was updated to v5 @@ -23,6 +28,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - @see https://github.com/palantir/blueprint/wiki/Overlay2-migration - `` - Forward ref +- `` + - `onItemClick` handler is only executed when the breadcrumb has no own `onClick` handler defined ### Deprecated diff --git a/src/components/Breadcrumb/BreadcrumbList.tsx b/src/components/Breadcrumb/BreadcrumbList.tsx index 2cb32fbc..e945b527 100644 --- a/src/components/Breadcrumb/BreadcrumbList.tsx +++ b/src/components/Breadcrumb/BreadcrumbList.tsx @@ -9,7 +9,6 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import BreadcrumbItem from "./BreadcrumbItem"; import { BreadcrumbItemProps } from "./BreadcrumbItem"; -// FIXME: enforce onItemClick later when href value can always be routed correctly export interface BreadcrumbListProps extends Omit< BlueprintBreadcrumbsProps, @@ -26,7 +25,8 @@ export interface BreadcrumbListProps */ items: BreadcrumbItemProps[]; /** - click handler used on breadcrumb items + Click handler used on all breadcrumb items using their `href` property. + Is only used if the breadcrumb item have not defined an own `onClick` handler. */ onItemClick?(itemUrl: string | undefined, event: object): boolean | void; /** @@ -69,7 +69,7 @@ export const BreadcrumbList = ({ /*itemDivider="/"*/ {...otherProps} onClick={ - onItemClick + onItemClick && propsBreadcrumb.href && !onClick ? (e) => { onItemClick(propsBreadcrumb.href, e); } From d27b0589f967589d9fe808ddd9bec7f9bc9fac87 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 26 Mar 2024 16:47:10 +0100 Subject: [PATCH 05/11] display card borderless if elevation is set to -1 --- CHANGELOG.md | 2 ++ src/components/Card/Card.tsx | 20 ++++++++++++++++---- src/components/Card/card.scss | 13 ++++++++----- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a782f98..82eca59f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - `` from BlueprintJS is now used - @see https://github.com/palantir/blueprint/wiki/Overlay2-migration +- `` + - `elevation` allows now `-1` as value, the card is borderless then - `` - Forward ref - `` diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 8fd6d33d..98d7b49d 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -1,9 +1,13 @@ import React from "react"; -import { Card as BlueprintCard, CardProps as BlueprintCardProps } from "@blueprintjs/core"; +import { + Card as BlueprintCard, + CardProps as BlueprintCardProps, + Elevation as BlueprintCardElevation, +} from "@blueprintjs/core"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -export interface CardProps extends BlueprintCardProps { +export interface CardProps extends Omit { /** * `` element is included in DOM as simple `div` element. * By default it is a HTML `section`. @@ -17,6 +21,12 @@ export interface CardProps extends BlueprintCardProps { * Background color is slightly altered to differ card display from other cards. */ elevated?: boolean; + /** + * Controls the intensity of the drop shadow beneath the card. + * At elevation `0`, no drop shadow is applied. + * At elevation `-1`, the card is even borderless. + */ + elevation?: -1 | BlueprintCardElevation; /** * When card (or its children) get focus the card is scrolled into the viewport. * Property value defined which part of the card is always scrolled in, this may important when the card is larger than the viewport. @@ -35,7 +45,7 @@ export interface CardProps extends BlueprintCardProps { export const Card = ({ children, className = "", - elevation = 1, + elevation = -1, isOnlyLayout = false, fullHeight = false, elevated = false, @@ -48,6 +58,7 @@ export const Card = ({ ? { tabIndex: 0, onFocus: (e: any) => { + // FIXME: we should not have any hard relations to apps that using this lib const el = e.target.closest(".diapp-iframewindow__content"); setTimeout(() => { if (el) @@ -68,9 +79,10 @@ export const Card = ({ (elevated ? ` ${eccgui}-card--elevated` : "") + (scrollinOnFocus ? ` ${eccgui}-card--scrollonfocus` : "") + (whitespaceAmount !== "medium" ? ` ${eccgui}-card--whitespace-${whitespaceAmount}` : "") + + (elevation < 0 ? ` ${eccgui}-card--whitespace-borderless` : "") + (className ? ` ${className}` : "") } - elevation={elevation} + elevation={Math.max(0, elevation) as BlueprintCardElevation} interactive={otherProps.onClick ? true : interactive} {...scrollIn} {...otherProps} diff --git a/src/components/Card/card.scss b/src/components/Card/card.scss index 490647bb..480dab1c 100644 --- a/src/components/Card/card.scss +++ b/src/components/Card/card.scss @@ -1,8 +1,7 @@ +@use "sass:color"; + $card-padding: 0 !default; $card-background-color: $white !default; - -//$dark-card-background-color: $dark-gray4 !default; - $eccgui-size-card-spacing: $eccgui-size-typo-base !default; @import "~@blueprintjs/core/src/components/card/card"; @@ -14,10 +13,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default; justify-content: flex-start; &.#{$eccgui}-intent--primary { - background-color: mix($eccgui-color-primary, $card-background-color, 5%); + background-color: color.mix($eccgui-color-primary, $card-background-color, 5%); } &.#{$eccgui}-intent--accent { - background-color: mix($eccgui-color-accent, $card-background-color, 10%); + background-color: color.mix($eccgui-color-accent, $card-background-color, 10%); } &.#{$eccgui}-intent--success { background-color: $eccgui-color-success-background; @@ -49,6 +48,10 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default; outline: none; } +.#{$eccgui}-card--whitespace-borderless { + box-shadow: none; +} + .#{$eccgui}-card__header { box-sizing: content-box; flex-grow: 0; From 4f71075b2cb7e81237de2df3059b9d476c95d904 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 27 Mar 2024 10:31:35 +0100 Subject: [PATCH 06/11] fix default value for card elevation --- src/components/Card/Card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 98d7b49d..abb5f690 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -45,7 +45,7 @@ export interface CardProps extends Omit { export const Card = ({ children, className = "", - elevation = -1, + elevation = 1, isOnlyLayout = false, fullHeight = false, elevated = false, From de2a127e5b5a00ff424332cd2bdf4726a966f6c8 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 2 Apr 2024 14:01:00 +0200 Subject: [PATCH 07/11] add flexible layout helper components --- .../FlexibleLayoutContainer.tsx | 45 ++++++++++++++ .../FlexibleLayout/FlexibleLayoutItem.tsx | 59 +++++++++++++++++++ .../FlexibleLayout/flexiblelayout.scss | 28 +++++++++ src/components/FlexibleLayout/index.ts | 2 + src/components/index.scss | 1 + src/components/index.ts | 1 + 6 files changed, 136 insertions(+) create mode 100644 src/components/FlexibleLayout/FlexibleLayoutContainer.tsx create mode 100644 src/components/FlexibleLayout/FlexibleLayoutItem.tsx create mode 100644 src/components/FlexibleLayout/flexiblelayout.scss create mode 100644 src/components/FlexibleLayout/index.ts diff --git a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx new file mode 100644 index 00000000..e738c2c0 --- /dev/null +++ b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +import { CLASSPREFIX as eccgui } from "../../configuration/constants"; + +export interface FlexibleLayoutContainerProps extends React.HTMLAttributes { + /** + * Use the exact space defined by the parent element. + * This parent element must be displayed using a fixed, relative or absolute position. + */ + useAbsoluteSpace?: boolean; + /** + * If set then the container behaves similar to a row and displays its items on a horizontal axis. + * Children could used as columns in this situation. + */ + horizontal?: boolean; +} + +/** + * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned. + * A `FlexibleLayoutContainer` can contain `FlexibleLayoutItem`s. + * Do not misuse it as grid because it comes without any predefined ratios for widths and heights. + */ +export const FlexibleLayoutContainer = React.forwardRef( + ( + { children, className = "", useAbsoluteSpace, horizontal, ...otherDivProps }: FlexibleLayoutContainerProps, + ref + ) => { + return ( +
+ {children} +
+ ); + } +); + +export default FlexibleLayoutContainer; diff --git a/src/components/FlexibleLayout/FlexibleLayoutItem.tsx b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx new file mode 100644 index 00000000..44959236 --- /dev/null +++ b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx @@ -0,0 +1,59 @@ +import React from "react"; + +import { CLASSPREFIX as eccgui } from "../../configuration/constants"; + +export interface FlexibleLayoutItemProps extends React.HTMLAttributes { + /** + * Defines the ability for the item to grow. + * The factor defines how much space the item would take up compared to the other items with a grow factor greater than zero. + * Must be equal or greater than zero. + * With a factor of `0` the item cannot grow. + */ + growFactor?: number; + /** + * Defines the ability for the item to shrink. + * The factor defines how strong the shrink effect has impact on the item compared to the other items with a shrink factor greater than zero. + * Must be equal or greater than zero. + * With a factor of `0` the item cannot shrink. + */ + shrinkFactor?: number; +} + +/** + * Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned. + * `FlexibleLayoutItem`s can contain `FlexibleLayoutContainer` for more partitions. + * `FlexibleLayoutItem` siblings will share all available space from the `FlexibleLayoutContainer` container. + */ +export const FlexibleLayoutItem = React.forwardRef( + ( + { + children, + className = "", + growFactor = 1, + shrinkFactor = 0, + style, + ...otherDivProps + }: FlexibleLayoutItemProps, + ref + ) => { + const sizing = {} as any; + if (typeof growFactor !== "undefined" && growFactor >= 0 && growFactor !== 1) { + sizing[`--${eccgui}-flexible-item-grow`] = growFactor.toString(10); + } + if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 0) { + sizing[`--${eccgui}-flexible-item-shrink`] = shrinkFactor.toString(10); + } + return ( +
+ {children} +
+ ); + } +); + +export default FlexibleLayoutItem; diff --git a/src/components/FlexibleLayout/flexiblelayout.scss b/src/components/FlexibleLayout/flexiblelayout.scss new file mode 100644 index 00000000..9a5e0983 --- /dev/null +++ b/src/components/FlexibleLayout/flexiblelayout.scss @@ -0,0 +1,28 @@ +.#{$eccgui}-flexible__container { + position: relative; + display: flex; + flex-flow: column nowrap; + place-content: stretch center; + align-items: stretch; + width: 100%; + + --#{$eccgui}-flexible-item-shrink: 0; + --#{$eccgui}-flexible-item-grow: 1; +} + +.#{$eccgui}-flexible__container--absolutespace { + position: absolute; + inset: 0; +} + +.#{$eccgui}-flexible__container--horizontal { + flex-direction: row; +} + +.#{$eccgui}-flexible__item { + position: relative; + flex-grow: var(--#{$eccgui}-flexible-item-grow); + flex-shrink: var(--#{$eccgui}-flexible-item-grow); + width: 100%; + min-width: 0; +} diff --git a/src/components/FlexibleLayout/index.ts b/src/components/FlexibleLayout/index.ts new file mode 100644 index 00000000..7f587e05 --- /dev/null +++ b/src/components/FlexibleLayout/index.ts @@ -0,0 +1,2 @@ +export * from "./FlexibleLayoutContainer"; +export * from "./FlexibleLayoutItem"; diff --git a/src/components/index.scss b/src/components/index.scss index e1981627..78dcb54d 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -6,6 +6,7 @@ @import "./Checkbox/checkbox"; @import "./Depiction/depiction"; @import "./Dialog/dialog"; +@import "./FlexibleLayout/flexiblelayout"; @import "./Form/form"; @import "./Grid/grid"; @import "./HoverToggler/hovertoggler"; diff --git a/src/components/index.ts b/src/components/index.ts index 835f9866..91e8eb85 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox"; export * from "./ContextOverlay"; export * from "./Depiction/Depiction"; export * from "./Dialog"; +export * from "./FlexibleLayout"; export * from "./Form"; export * from "./Grid"; export * from "./HoverToggler/HoverToggler"; From 668a23a606382540f86ddb4383e0ac546f298fe4 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 9 Apr 2024 11:44:54 +0200 Subject: [PATCH 08/11] add user stories for FlexibleLayout* documentation --- .../FlexibleLayoutContainer.tsx | 4 +-- .../FlexibleLayout/FlexibleLayoutItem.tsx | 4 +-- .../FlexibleLayoutContainer.stories.tsx | 31 +++++++++++++++++++ .../stories/FlexibleLayoutItem.stories.tsx | 28 +++++++++++++++++ 4 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx create mode 100644 src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx diff --git a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx index e738c2c0..6da4d412 100644 --- a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx +++ b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { forwardRef } from "react"; // @see https://github.com/storybookjs/storybook/issues/8881#issuecomment-831937051 import { CLASSPREFIX as eccgui } from "../../configuration/constants"; @@ -20,7 +20,7 @@ export interface FlexibleLayoutContainerProps extends React.HTMLAttributes( +export const FlexibleLayoutContainer = forwardRef( ( { children, className = "", useAbsoluteSpace, horizontal, ...otherDivProps }: FlexibleLayoutContainerProps, ref diff --git a/src/components/FlexibleLayout/FlexibleLayoutItem.tsx b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx index 44959236..66ee1311 100644 --- a/src/components/FlexibleLayout/FlexibleLayoutItem.tsx +++ b/src/components/FlexibleLayout/FlexibleLayoutItem.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { forwardRef } from "react"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; @@ -24,7 +24,7 @@ export interface FlexibleLayoutItemProps extends React.HTMLAttributes( +export const FlexibleLayoutItem = forwardRef( ( { children, diff --git a/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx b/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx new file mode 100644 index 00000000..cd381fc1 --- /dev/null +++ b/src/components/FlexibleLayout/stories/FlexibleLayoutContainer.stories.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import { LoremIpsum } from "react-lorem-ipsum"; +import { Meta, StoryFn } from "@storybook/react"; + +import { Divider, FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index"; + +export default { + title: "Components/FlexibleLayout/Container", + component: FlexibleLayoutContainer, +} as Meta; + +const Template: StoryFn = (args) => ( +
+ + + + + + + + + + + + + +
+); + +export const Default = Template.bind({}); +Default.args = {}; diff --git a/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx b/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx new file mode 100644 index 00000000..1119649c --- /dev/null +++ b/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { LoremIpsum } from "react-lorem-ipsum"; +import { Meta, StoryFn } from "@storybook/react"; + +import { FlexibleLayoutContainer, FlexibleLayoutItem, HtmlContentBlock } from "../../../../index"; + +export default { + title: "Components/FlexibleLayout/Item", + component: FlexibleLayoutItem, +} as Meta; + +const Template: StoryFn = (args) => ( + + + + + + + + + + + + +); + +export const Default = Template.bind({}); +Default.args = {}; From 522f75fd5e2c1b5d0661c258fc8a2bca5c2c8fb8 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 9 Apr 2024 12:40:12 +0200 Subject: [PATCH 09/11] fix default layout and add property for space usage --- .../FlexibleLayout/FlexibleLayoutContainer.tsx | 15 ++++++++++++++- .../FlexibleLayout/FlexibleLayoutItem.tsx | 4 ++-- src/components/FlexibleLayout/flexiblelayout.scss | 10 ++++++---- .../stories/FlexibleLayoutItem.stories.tsx | 4 ++-- 4 files changed, 24 insertions(+), 9 deletions(-) diff --git a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx index 6da4d412..bf76ad0a 100644 --- a/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx +++ b/src/components/FlexibleLayout/FlexibleLayoutContainer.tsx @@ -13,6 +13,11 @@ export interface FlexibleLayoutContainerProps extends React.HTMLAttributes( ( - { children, className = "", useAbsoluteSpace, horizontal, ...otherDivProps }: FlexibleLayoutContainerProps, + { + children, + className = "", + useAbsoluteSpace, + horizontal, + noEqualItemSpace, + ...otherDivProps + }: FlexibleLayoutContainerProps, ref ) => { return ( @@ -31,6 +43,7 @@ export const FlexibleLayoutContainer = forwardRef= 0 && growFactor !== 1) { sizing[`--${eccgui}-flexible-item-grow`] = growFactor.toString(10); } - if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 0) { + if (typeof shrinkFactor !== "undefined" && shrinkFactor >= 0 && shrinkFactor !== 1) { sizing[`--${eccgui}-flexible-item-shrink`] = shrinkFactor.toString(10); } return ( diff --git a/src/components/FlexibleLayout/flexiblelayout.scss b/src/components/FlexibleLayout/flexiblelayout.scss index 9a5e0983..019d89de 100644 --- a/src/components/FlexibleLayout/flexiblelayout.scss +++ b/src/components/FlexibleLayout/flexiblelayout.scss @@ -6,7 +6,7 @@ align-items: stretch; width: 100%; - --#{$eccgui}-flexible-item-shrink: 0; + --#{$eccgui}-flexible-item-shrink: 1; --#{$eccgui}-flexible-item-grow: 1; } @@ -21,8 +21,10 @@ .#{$eccgui}-flexible__item { position: relative; - flex-grow: var(--#{$eccgui}-flexible-item-grow); - flex-shrink: var(--#{$eccgui}-flexible-item-grow); - width: 100%; + flex: var(--#{$eccgui}-flexible-item-grow) var(--#{$eccgui}-flexible-item-shrink) 100%; min-width: 0; + + .#{$eccgui}-flexible__container--notequalitemspace > & { + flex-basis: auto; + } } diff --git a/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx b/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx index 1119649c..0f83a233 100644 --- a/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx +++ b/src/components/FlexibleLayout/stories/FlexibleLayoutItem.stories.tsx @@ -11,12 +11,12 @@ export default { const Template: StoryFn = (args) => ( - + - + From c7142814ef823d9d5c399ed47aad6b922e27e2af Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 9 Apr 2024 12:44:02 +0200 Subject: [PATCH 10/11] update changelog --- CHANGELOG.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bc80b4d..a14c6119 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,14 +8,16 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Added +- `` and `` + - Simple layout helper to organize items into rows and columns that are not necessarily need to be aligned in sense of a grid. +- new icons: `state-locked`, `state-unlocked`, `application-notification` +- new use hook + - `useApplicationHeaderOverModals`: forces the application header to be displayed over modal backgrounds - `ClassNames` now forwards all BlueprintJS CSS class names - ``` import { ClassNames } from "@eccenca/gui-elements"; export const bpButtonClass = ClassNames.Blueprint.BUTTON; ``` -- new icons: `state-locked`, `state-unlocked`, `application-notification` -- new use hook - - `useApplicationHeaderOverModals`: forces the application header to be displayed over modal backgrounds ### Fixed From a147dc0eec7afb25c6746b7736aa30b288360c81 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 11 Apr 2024 16:32:07 +0200 Subject: [PATCH 11/11] adjust color for property --- CHANGELOG.md | 2 ++ src/cmem/react-flow/configuration/_colors-graph.scss | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a14c6119..11d334cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -44,6 +44,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `onItemClick` handler is only executed when the breadcrumb has no own `onClick` handler defined - `` - included icons are always limited to the height of the text label +- `` + - property color for `graph`configuration was adjusted ### Deprecated diff --git a/src/cmem/react-flow/configuration/_colors-graph.scss b/src/cmem/react-flow/configuration/_colors-graph.scss index 34c457b0..96816cba 100644 --- a/src/cmem/react-flow/configuration/_colors-graph.scss +++ b/src/cmem/react-flow/configuration/_colors-graph.scss @@ -1,7 +1,7 @@ $reactflow-color-graph-node: #745a85 !default; $reactflow-color-class-node: #3a7896 !default; $reactflow-color-instance-node: #0097a7 !default; -$reactflow-color-property-node: #ffd54f !default; +$reactflow-color-property-node: #40a691 !default; $reactflow-color-implicit-edge: #ae3c74 !default; $reactflow-color-import-edge: $reactflow-color-graph-node !default; $reactflow-color-subclass-edge: $reactflow-color-class-node !default; @@ -13,6 +13,8 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default; } .#{eccgui}-configuration--colors__react-flow-graph { + /* stylelint-disable custom-property-pattern */ + // TODO: we should correct custom property names later but atm this would lead to broken consumer apps --graphNode: #{$reactflow-color-graph-node}; --classNode: #{$reactflow-color-class-node}; --instanceNode: #{$reactflow-color-instance-node}; @@ -31,4 +33,5 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default; --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)}; --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)}; --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)}; + /* stylelint-enable custom-property-pattern */ }