Updates for mapping editor (CMEM-5432)

CHANGELOG.md

@@ -57,6 +57,8 @@ This is a major release, and it might be not compatible with your current usage
 ### Fixed
 
 -   toggling on/off the `<HandleTools/>` was corrected, they kept displayed after re-entering with the cursor
+-   `<Pagination/>`
+    -   change text overflow for selectors to `clip` because Firefox rendered `ellipsis` a bit too early
 
 ### Changed
 
@@ -78,8 +80,13 @@ This is a major release, and it might be not compatible with your current usage
     -   link color and separation char were adjusted
 -   `<Markdown/>`
     -   align blocks for language specific code to default code blocks
+-   `<ReactFlow />`
+    -   property color for `graph` configuration was adjusted
 -   switch icons for `item-clone` and `item-copy` to Carbon's `<Replicate/>` and `<Copy/>`
 -   Remove duplicated icon names `artefact-customtask*` and only keep `artefact-task*` names.
+-   `<OverviewItemDepiction/>`
+    -   improve examples in storybook
+    -   improve display for images that are to large for the available space (fully show them)
 
 ### Deprecated
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0-rc.5",
+    "version": "24.0.0-rc.6",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

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 */
 }

src/components/Card/CardContent.tsx

@@ -15,10 +15,16 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
  * Holds the card content.
  * Display scrollbars in case there is not enough space for it.
  */
-export const CardContent = ({ children, className = "", noFlexHeight, ...otherProps }: CardContentProps) => {
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(({
+    children,
+    className='',
+    noFlexHeight,
+    ...otherProps
+}: CardContentProps, ref) => {
     return (
         <div
             {...otherProps}
+            ref={ref}
             className={
                 `${eccgui}-card__content` +
                 (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
@@ -28,6 +34,4 @@ export const CardContent = ({ children, className = "", noFlexHeight, ...otherPr
             {children}
         </div>
     );
-};
-
-export default CardContent;
+});

src/components/Depiction/stories/Depiction.stories.tsx

@@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, Depiction, Icon, TestIcon } from "../../../index";
+import { Badge, Depiction, Icon, OverviewItem, TestIcon } from "../../../index";
 
 import canonicalIcons from "./../../Icon/canonicalIconNames";
 import { Svg9to16 } from "./test-9to16";
@@ -81,8 +81,25 @@ const TemplateFull: StoryFn<typeof Depiction> = (args) => (
     </OverlaysProvider>
 );
 
+const TemplateInsideOverviewItem: StoryFn<typeof Depiction> = (args) => (
+    <OverlaysProvider>
+        <OverviewItem>
+            <Depiction {...args} />
+        </OverviewItem>
+    </OverlaysProvider>
+);
+
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
     image: <img src={png16to9} />,
     caption: "This is a test description for the image.",
 };
+
+export const InsideOverviewItem = TemplateInsideOverviewItem.bind({});
+InsideOverviewItem.args = {
+    ...FullExample.args,
+    backgroundColor: "dark",
+    ratio: "1:1",
+    padding: "medium",
+    resizing: "contain",
+};

src/components/OverviewItem/overviewitem.scss

@@ -46,11 +46,19 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 .#{$eccgui}-overviewitem__item {
     display: flex;
     flex-flow: row nowrap;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     max-width: 100%;
-    height: mini-units(6);
+    height: auto;
+
+    // TODO: we may revalidate later again
+    // @see http://localhost:6006/?path=/docs/components-application--docs as testcase
+    // there is a weird bug in Firefox v132+
+    // with a fixed height the calculation of `asprect-ratio` for child elements seems to be broken in some situations (especially in combination with top/bottom `padding`)
+    // however, it is working when we set min- and max-height (what leads basically to the same layout like a fixed height)
+    // height: mini-units(6);
+    min-height: mini-units(6);
+    max-height: mini-units(6);
 
     &[tabindex]:not([tabindex="-1"]) {
         cursor: pointer;
@@ -70,7 +78,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
 .#{$eccgui}-overviewitem__item--highdensity,
 .#{$eccgui}-overviewitem__list--highdensity > li > .#{$eccgui}-overviewitem__item {
-    height: $button-height; // mini-units(4);
+    // same fix for Firefox v132+ like for the normal element height
+    // height: $button-height; // mini-units(4);
+    min-height: $button-height;
+    max-height: $button-height;
 
     & > .#{$eccgui}-overviewitem__depiction {
         width: $button-height; // mini-units(4);
@@ -107,9 +118,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     & > * {
         display: block;
-        width: auto;
+        max-width: 100%;
         max-height: 100%;
         margin: 0 auto;
+        object-fit: contain;
     }
 
     &:not(.#{$eccgui}-overviewitem__depiction--keepcolors) {
@@ -127,9 +139,8 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    align-content: stretch;
+    place-content: stretch flex-start;
     align-items: stretch;
-    justify-content: flex-start;
     overflow: hidden;
 
     .#{$eccgui}-overviewitem__depiction + & {

src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -13,7 +13,7 @@ import {
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
-import { Default as DepictionExample } from "./OverviewItemDepiction.stories";
+import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
 
 export default {

src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Depiction, Icon, OverviewItemDepiction } from "./../../../../index";
+import png16to9 from "../../Depiction/stories/test-16to9.png";
+
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {
@@ -17,19 +19,35 @@ export default {
 } as Meta<typeof OverviewItemDepiction>;
 
 const Template: StoryFn<typeof OverviewItemDepiction> = (args) => (
-    <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    <OverviewItem>
+        <OverviewItemDepiction {...args}></OverviewItemDepiction>
+    </OverviewItem>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+/**
+ * If a `<Depiction/>` is used as only content then it is returned directly by `<OverviewItemDepiction/>`.
+ */
+export const UseDepictionElement = Template.bind({});
+UseDepictionElement.args = {
+    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+};
+
+/**
+ * If an `<Icon/>` (or `<TestIcon/>`) is used as only content for `<OverviewItemDepiction/>` then it returns automatically a `<Depiction/>` element setting the `image` property to that icon.
+ */
+export const AutoTransform = Template.bind({});
+AutoTransform.args = {
     children: (
         <>
             <Icon name="artefact-dataset" />
         </>
     ),
 };
 
-export const UseDepictionElement = Template.bind({});
-UseDepictionElement.args = {
-    children: <Depiction {...DepictionExample.args} resizing="contain" />,
+/**
+ * For all other content the `<OverviewItemDepiction/>` wrapper is set around it to keep it in the allowed size. This works mainly for image content.
+ */
+export const Default = Template.bind({});
+Default.args = {
+    children: <img src={png16to9} />,
 };

src/components/Pagination/pagination.scss

@@ -16,6 +16,7 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
         font-size: 100%;
+        text-overflow: clip;
     }
 }