@eccenca/gui-elements 24.4.1 → 25.0.0-featurecolorwheelinputcmem7327.0

package/src/components/TextField/textfield.scss

@@ -9,8 +9,9 @@ $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $ec
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
-$eccgui-color-textfield-text: $eccgui-color-application-text !default;
-$eccgui-color-textfield-background: white !default; // TODO define global var for it
+$eccgui-color-textfield-text: $eccgui-color-workspace-text !default;
+$eccgui-color-textfield-background: eccgui-color-var("identity", "background", 100) !default;
+
 // lib vars
 $pt-input-height: $eccgui-size-textfield-height-regular; // !default;
 $pt-input-height-large: $eccgui-size-textfield-height-large; // !default;
@@ -20,8 +21,8 @@ $input-small-padding: $eccgui-size-textfield-padding-horizontal-small; // !defau
 $input-font-weight: $eccgui-typo-textfield-fontweight; // !default;
 // $input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
 $input-color: $eccgui-color-textfield-text; // !default;
-$input-color-disabled: rgba($eccgui-color-textfield-text, 0.39); // !default;
-$input-placeholder-color: rgba($eccgui-color-textfield-text, 0.61); // !default;
+$input-color-disabled: eccgui-color-rgba($eccgui-color-textfield-text, 0.39); // !default;
+$input-placeholder-color: eccgui-color-rgba($eccgui-color-textfield-text, 0.61); // !default;
 $input-background-color: $eccgui-color-textfield-background; // !default;
 // $input-background-color-disabled: rgba($light-gray1, 0.5) !default;
 // $input-shadow-color-focus: $pt-intent-primary !default;
@@ -84,15 +85,15 @@ $eccgui-map-intent-bgcolors: (
 @mixin intent-state-flash-animation($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
         0% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
 
         39% {
-            background-color: $bgcolor;
+            background-color: eccgui-color-var("semantic", $state, "300");
         }
 
         100% {
-            background-color: color.mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+            background-color: eccgui-color-var("semantic", $state, "100");
         }
     }
 }
@@ -109,7 +110,7 @@ $eccgui-map-intent-bgcolors: (
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         .#{$ns}-input-group.#{$ns}-intent-#{$each-intent} & {
-            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            background-color: eccgui-color-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -149,7 +150,7 @@ $eccgui-map-intent-bgcolors: (
 
     @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
         &.#{$eccgui}-intent--#{$each-intent} {
-            background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+            background-color: eccgui-color-var("semantic", $each-intent, "100");
             animation-name: intent-state-flash-#{$each-intent};
         }
     }
@@ -191,33 +192,40 @@ $eccgui-map-intent-bgcolors: (
     position: absolute;
     top: 0;
     left: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
 }
 
 .#{$eccgui}-textarea__options {
     position: absolute;
     top: 0;
     right: 0;
+    margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
+    text-align: right;
     filter: grayscale(1);
 
+    .#{$ns}-input.#{$ns}-small ~ & {
+        margin-top: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+        margin-right: -0.5 * $eccgui-size-textfield-padding-horizontal-small;
+    }
+
     &:hover,
     .#{$eccgui}-textarea:focus ~ & {
         filter: none;
     }
 
-    & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-regular;
-        }
-    }
-
-    .#{$ns}-input.#{$ns}-small ~ & > .#{$eccgui}-button--icon {
-        margin-top: -1 * $eccgui-size-textfield-padding-horizontal-small;
-
-        &:last-of-type {
-            margin-right: -1 * $eccgui-size-textfield-padding-horizontal-small;
-        }
+    & > .#{$eccgui}-button,
+    & > .#{$eccgui}-icon,
+    & > .#{$eccgui}-contextoverlay,
+    & > .#{$eccgui}-tooltip__wrapper {
+        display: inline-block;
+        vertical-align: middle;
     }
 }
 

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+
+export default {
+    title: "Components/TextReducer",
+    component: TextReducer,
+    argTypes: {},
+} as Meta<typeof TextReducer>;
+
+const TemplateFull: StoryFn<typeof TextReducer> = (args) => <TextReducer {...args} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: [
+        <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />,
+        "Simple text with URL http://example.com/ that should not get parsed.",
+        "a < b to test equations in text like b > a.",
+        `Something with a "quote" in it.`,
+        <>
+            <Markdown>{`* This\n* is\n* a\n* list\n\nwritten in Markdown\n* containing a few HTML 'entities' & "quotes".`}</Markdown>
+            <HtmlContentBlock>
+                <h1>Block with sub elements</h1>
+                <LoremIpsum p={3} avgSentencesPerParagraph={3} random={false} />
+            </HtmlContentBlock>
+        </>,
+    ],
+};
+
+export const UseMaximumContraints = TemplateFull.bind({});
+UseMaximumContraints.args = {
+    ...Default.args,
+    maxNodes: 3,
+    maxLength: 130,
+};
+
+export const WithOverflowText = TemplateFull.bind({});
+WithOverflowText.args = {
+    ...Default.args,
+    useOverflowTextWrapper: true,
+    overflowTextProps: {
+        className: "my-extra-class",
+        "data-test-id": "my-test-id",
+        ellipsis: "reverse",
+    },
+};

package/src/components/TextReducer/TextReducer.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { Markdown, TextReducer } from "./../../";
+import { Default as TextReducerStory } from "./TextReducer.stories";
+
+describe("TextReducer", () => {
+    const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).not.toBeNull();
+    };
+    const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+        expect(queryByText(text, { exact: false })).toBeNull();
+    };
+    it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
+        textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustNotExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should not display encoded HTML entities if `decodeHtmlEntities` is enabled", () => {
+        const { queryByText } = render(<TextReducer {...TextReducerStory.args} decodeHtmlEntities />);
+        textMustNotExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");
+        textMustExist(queryByText, `'entities' & "quotes"`);
+    });
+    it("should only decode if correct encoded HTML entities are found (strict mode)", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustExist(queryByText, "& &amp foo&ampbar");
+        textMustNotExist(queryByText, "& & foo&ampbar");
+    });
+    it("should allow decoding non-strict encoded HTML entities", () => {
+        const { queryByText } = render(
+            <TextReducer decodeHtmlEntities decodeHtmlEntitiesOptions={{ strict: false }}>
+                <Markdown>&</Markdown>&amp foo&ampbar
+            </TextReducer>
+        );
+        textMustNotExist(queryByText, "& &amp foo&ampbar");
+        textMustExist(queryByText, "& & foo&ampbar");
+    });
+});

package/src/components/TextReducer/TextReducer.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+
+import { DecodeHtmlEntitiesOptions, utils } from "../../common";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import { OverflowText, OverflowTextProps } from "./../Typography";
+
+export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Maximum number of nodes that are used from the HTML content.
+     * An HTML element with multiple sub elements is count as only 1 node.
+     */
+    maxNodes?: number;
+    /**
+     * Set maximum string length of returned content.
+     */
+    maxLength?: number;
+    /**
+     * Wrap returned content automatically in a `OverflowText` component.
+     * This way you always will get a element returned that displays only 1 single text line.
+     */
+    useOverflowTextWrapper?: boolean;
+    /**
+     * Specify more `OverflowText` properties used when `useOverflowTextWrapper` is set to `true`.
+     */
+    overflowTextProps?: Omit<OverflowTextProps, "passDown">;
+    /**
+     * If you transform HTML markup to text then the result could contain HTML entity encoded strings.
+     * By enabling this option they are decoded back to it's original char.
+     */
+    decodeHtmlEntities?: boolean;
+    /**
+     * Set the options used to decode the HTML entities, if `decodeHtmlEntities` is enabled.
+     * Internally we use `he` library, see their [documentation on decode options](https://www.npmjs.com/package/he#hedecodehtml-options).
+     * If not set we use `{ isAttributeValue: true, strict: true }` as default value.
+     */
+    decodeHtmlEntitiesOptions?: DecodeHtmlEntitiesOptions;
+}
+
+/**
+ * Component to reduce HTML markup content to simple text.
+ * Display can be wrapped easily in `OverflowText`.
+ */
+export const TextReducer = ({
+    children,
+    useOverflowTextWrapper,
+    overflowTextProps,
+    ...reduceToTextOptions
+}: TextReducerProps) => {
+    if (typeof children === "undefined") {
+        return <></>;
+    }
+
+    const shrinkedContent = utils.reduceToText(children, reduceToTextOptions);
+
+    return useOverflowTextWrapper ? (
+        <OverflowText
+            {...overflowTextProps}
+            className={
+                `${eccgui}-textreducer` +
+                (overflowTextProps && overflowTextProps.className ? ` ${overflowTextProps.className}` : "")
+            }
+        >
+            {shrinkedContent}
+        </OverflowText>
+    ) : (
+        <>{shrinkedContent}</>
+    );
+};
+
+export default TextReducer;

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Tooltip } from "../../index";
 
@@ -34,6 +35,7 @@ Default.args = {
     children: "hover me",
     content: testContent,
     addIndicator: true,
+    onOpening: fn(),
 };
 
 export const MarkdownSupport = Template.bind({});

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+import Tooltip from "./Tooltip";
+import { Default as TooltipStory } from "./Tooltip.stories";
+
+const checkForPlaceholderClass = (container: HTMLElement, tobe: number) => {
+    expect(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`).length).toBe(tobe);
+};
+
+describe("Tooltip", () => {
+    it("should render placeholder automatically for text tooltip", () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} content="this is a simple text tooltip" />);
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder automatically for html tooltip", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should render placeholder when `usePlaceholder===true`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />
+        );
+        checkForPlaceholderClass(container, 1);
+    });
+    it("should render no placeholder when `usePlaceholder===false`", () => {
+        const { container } = render(
+            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />
+        );
+        checkForPlaceholderClass(container, 0);
+    });
+    it("should be displayed on first mouse hover when no placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={false} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+    });
+    it("should not be displayed on first mouse hover when placeholder is used but placeholder markup is swapped", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+        });
+    });
+    it("should be displayed on two continues mouse hover when placeholder is used", async () => {
+        const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        checkForPlaceholderClass(container, 1);
+        await waitFor(async () => {
+            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+            checkForPlaceholderClass(container, 0);
+            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
+        });
+    });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -19,7 +19,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * The size specifies the dimension the tooltip overlay element can maximal grow.
      */
-    size?: "small" | "medium" | "large";
+    size?: TooltipSize;
     /**
      * The tooltip will be attached to this element when it is hovered.
      */
@@ -50,6 +50,8 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
+export type TooltipSize = "small" | "medium" | "large"
+
 export const Tooltip = ({
     children,
     content,
@@ -199,7 +201,10 @@ export const Tooltip = ({
             targetProps={
                 {
                     ...otherTooltipProps.targetProps,
-                    "data-postplaceholder": `id${eventMemory.current}${searchId.current}`,
+                    "data-postplaceholder":
+                        eventMemory.current && searchId.current
+                            ? `id${eventMemory.current}${searchId.current}`
+                            : undefined,
                 } as React.HTMLProps<HTMLElement>
             }
         >

package/src/components/Tooltip/tooltip.scss

@@ -6,8 +6,9 @@ $eccgui-size-typo-tooltip-lineheight: $eccgui-size-typo-caption-lineheight !defa
 $eccgui-size-tooltip-width: 20em !default;
 
 // library vars
-$tooltip-background-color: $eccgui-color-applicationheader-text; // !default;
-$tooltip-text-color: $eccgui-color-applicationheader-background; // !default;
+$tooltip-background-color: #{eccgui-color-var("layout", "grey", "900")};
+$tooltip-text-color: #{eccgui-color-var("identity", "text", "300")};
+
 // $dark-tooltip-background-color: $light-gray3 !default;
 // $dark-tooltip-text-color: $dark-gray5 !default;
 $tooltip-padding-vertical: $eccgui-size-block-whitespace * 0.25; // !default;
@@ -45,7 +46,10 @@ $tooltip-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     pre,
     .#{$eccgui}-typography__contentblock pre,
     pre.#{$eccgui}-typography__text {
-        background-color: color.invert($eccgui-color-workspace-background);
+        background-color: eccgui-color-mix(
+            eccgui-color-var("identity", "background", "900") 100% * $eccgui-opacity-ghostly,
+            transparent
+        );
     }
 }
 

package/src/components/Typography/InlineText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({ className = "", children, ...otherProps }: InlineTextProps) => {
+    return (
+        <div {...otherProps} className={`${eccgui}-typography__inlinetext` + (className ? " " + className : "")}>
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

package/src/components/Typography/OverflowText.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
     /**
@@ -25,11 +25,6 @@ export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, Te
      * HTML element that is used for the component.
      */
     useHtmlElement?: "p" | "div" | "span";
-    /**
-     * Used for all other necessary properties.
-     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
-     */
-    [key: string]: any;
 }
 
 /** Prevents text from overflowing. */

package/src/components/Typography/_reset.scss

@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 

package/src/components/Typography/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/src/components/Typography/stories/InlineText.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InlineText } from "../InlineText";
+
+import overflowTextConfig from "./OverflowText.stories";
+
+const config = {
+    title: "Components/Typography/InlineText",
+    component: InlineText,
+    argTypes: {
+        children: overflowTextConfig.argTypes?.children,
+    },
+} as Meta<typeof InlineText>;
+export default config;
+
+const Template: StoryFn<typeof InlineText> = (args) => <InlineText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <div>
+            <div>Block line 1.</div>
+            <div>Block line 2.</div>
+        </div>
+    ),
+};

package/src/components/Typography/typography.scss

@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
 }
 
 code {
@@ -53,7 +58,7 @@ mark {
         styles from other stylesheets we cannot control here
         TODO: need to reevaluated when it is not used together with MDL anymore
     */
-    background-color: rgba($eccgui-color-info-background, 1) !important;
+    background-color: eccgui-color-rgba($eccgui-color-info-background, 1) !important;
 }
 
 // HtmlContentBlock
@@ -68,6 +73,11 @@ mark {
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+    font-size: $eccgui-size-typo-subtitle;
+    line-height: $eccgui-size-typo-subtitle-lineheight;
+}
+
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
@@ -223,9 +233,9 @@ table {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     overflow-wrap: normal;
     white-space: nowrap;
-    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -241,8 +251,8 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     direction: rtl;
     unicode-bidi: embed;
 
@@ -263,6 +273,22 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+
+        & + * {
+            &::before {
+                content: " ";
+            }
+        }
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {