@eccenca/gui-elements 25.0.0-rc.2 → 25.1.0-featurev2510colorfield.0

package/src/components/Link/link.scss

@@ -2,8 +2,34 @@
 @include link.link;
 
 .#{$prefix}--link {
-    font-size: 1em;
-    line-height: inherit;
+    &,
+    &:hover {
+        // default case: use font size from context
+        font-size: inherit;
+        line-height: inherit;
+    }
+
+    &.#{$prefix}--link--sm {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-caption;
+            line-height: $eccgui-size-typo-caption-lineheight;
+        }
+    }
+    &.#{$prefix}--link--md {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-text;
+            line-height: $eccgui-size-typo-text-lineheight;
+        }
+    }
+    &.#{$prefix}--link--lg {
+        &,
+        &:hover {
+            font-size: $eccgui-size-typo-subtitle;
+            line-height: $eccgui-size-typo-subtitle-lineheight;
+        }
+    }
 
     &:focus {
         outline: none;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -10,7 +10,15 @@ import { removeExtraSpaces } from "../../common/utils/stringUtils";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
-import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
+import {
+    ContextOverlayProps,
+    Highlighter,
+    highlighterUtils,
+    IconButton,
+    MenuItem,
+    OverflowText,
+    Spinner
+} from "./../../index";
 
 export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
@@ -53,7 +61,7 @@ interface MultiSuggestFieldCommonProps<T>
     /**
      * prop to listen for query changes, when text is entered in the multi-select input
      */
-    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined> | (T[] | undefined);
     /**
      * Whether the component should take up the full width of its container.
      * This overrides `tagInputProps.fill`.
@@ -265,7 +273,8 @@ export function MultiSuggestField<T>({
     };
 
     const defaultFilterPredicate = (item: T, query: string) => {
-        return itemLabel(item).toLowerCase().includes(query);
+        const searchWords = highlighterUtils.extractSearchWords(query, true)
+        return highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords)
     };
 
     /**

package/src/components/Notification/notification.scss

@@ -91,3 +91,9 @@
         color: inherit;
     }
 }
+
+@media print {
+    .#{$eccgui}-notification__actions {
+        display: none;
+    }
+}

package/src/components/OverviewItem/overviewitem.scss

@@ -197,3 +197,12 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
         display: flex;
     }
 }
+
+@media print {
+    .#{$eccgui}-overviewitem__actions {
+        display: none;
+    }
+    .#{$eccgui}-overviewitem__depiction {
+        print-color-adjust: exact;
+    }
+}

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

@@ -6,15 +6,20 @@ import {
     Badge,
     Card,
     Depiction,
+    OverflowText,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
+    OverviewItemLine,
+    Tag,
+    TagList,
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
+import { Default as LineExample } from "./OverviewItemLine.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -76,3 +81,26 @@ ItemWithDepictionElement.args = {
     hasSpacing: true,
     hasCardWrapper: true,
 };
+
+export const ItemWithTags = Template.bind({});
+ItemWithTags.args = {
+    children: [
+        <OverviewItemDepiction {...DepictionExample.args} key={"depiction"} />,
+        <OverviewItemDescription key={"description"}>
+            <OverviewItemLine {...LineExample.args} />
+            <OverviewItemLine small>
+                <OverflowText>
+                    <TagList>
+                        <Tag small>Test</Tag>
+                        <Tag small>Tag</Tag>
+                        <Tag small>List</Tag>
+                    </TagList>
+                </OverflowText>
+            </OverviewItemLine>
+        </OverviewItemDescription>,
+        <OverviewItemActions children={ActionsExample.args.children[0]} key={"actions"} />,
+    ],
+    densityHigh: false,
+    hasSpacing: true,
+    hasCardWrapper: true,
+};

package/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx

@@ -9,7 +9,7 @@ export default {
     subcomponents: { Button, IconButton, ContextMenu },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "User-interactive elements.",
         },
     },
@@ -20,7 +20,7 @@ const Template: StoryFn<typeof OverviewItemActions> = (args) => <OverviewItemAct
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
+        <IconButton name="item-remove" text="Remove this item" disruptive />,
         <Button affirmative>Other action</Button>,
     ],
 };

package/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx

@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for text content.",
         },
     },

package/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx

@@ -9,7 +9,7 @@ export default {
     component: OverviewItemLine,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for line content.",
         },
     },

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -5,9 +5,9 @@
 }
 
 .#{$eccgui}-propertyvalue__pair {
+    clear: both;
     display: block;
     width: 100%;
-    clear: both;
 
     &.#{$eccgui}-propertyvalue__pair--hasdivider {
         &:not(:last-child) {
@@ -94,3 +94,25 @@
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-propertyvalue__pair,
+    .#{$eccgui}-propertyvalue__property,
+    .#{$eccgui}-propertyvalue__value {
+        position: relative;
+        float: none !important;
+        display: block;
+        width: auto;
+        height: auto;
+        min-height: 0 !important;
+        padding: 0;
+        margin: 0 !important;
+
+        &:is(.#{$eccgui}-propertyvalue__property) {
+            margin-bottom: 0.25 * $eccgui-size-block-whitespace !important;
+        }
+        &:is(.#{$eccgui}-propertyvalue__pair) {
+            margin-bottom: 0.5 * $eccgui-size-block-whitespace !important;
+        }
+    }
+}

package/src/components/RadioButton/RadioButton.tsx

@@ -1,13 +1,25 @@
 import React from "react";
 import { Radio as BlueprintRadioButton, RadioProps as BlueprintRadioProps } from "@blueprintjs/core";
+import classNames from "classnames";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type RadioButtonProps = BlueprintRadioProps;
+export interface RadioButtonProps extends BlueprintRadioProps {
+    /**
+     * Hide the indicator.
+     * The element cannot be identified as radio input then but a click on the children can be easily processed via `onChange` event.
+     */
+    hideIndicator?: boolean;
+}
 
-export const RadioButton = ({ children, className = "", ...restProps }: RadioButtonProps) => {
+export const RadioButton = ({ children, className = "", hideIndicator = false, ...restProps }: RadioButtonProps) => {
     return (
-        <BlueprintRadioButton {...restProps} className={`${eccgui}-radiobutton ` + className}>
+        <BlueprintRadioButton
+            {...restProps}
+            className={classNames(`${eccgui}-radiobutton`, className, {
+                [`${eccgui}-radiobutton--hidden-indicator`]: hideIndicator,
+            })}
+        >
             {children}
         </BlueprintRadioButton>
     );

package/src/components/RadioButton/radiobutton.scss

@@ -29,3 +29,16 @@
         }
     }
 }
+
+.#{$eccgui}-radiobutton--hidden-indicator {
+    &:not(.#{$ns}-align-right) {
+        padding-inline-start: 0;
+    }
+    &:not(.#{$ns}-align-left) {
+        padding-inline-end: 0;
+    }
+
+    input ~ .#{$ns}-control-indicator {
+        visibility: hidden;
+    }
+}

package/src/components/Separation/separation.scss

@@ -101,3 +101,9 @@ $eccgui-color-separation-divider: $pt-divider-black !default;
         margin: 0 $eccgui-size-separation-spacing-medium;
     }
 }
+
+@media print {
+    .#{$eccgui}-separation__divider-horizontal {
+        print-color-adjust: exact;
+    }
+}

package/src/components/Table/table.scss

@@ -356,3 +356,25 @@ tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
         min-height: $eccgui-size-tablecell-height-regular;
     }
 }
+
+@media print {
+    .#{$eccgui}-simpletable:has(.#{$eccgui}-simpletable__cell > .#{$eccgui}-typography__overflowtext) {
+        // allow 2 lines of text in `<OverflowText />` elements that are direct children of table cells
+        .#{$eccgui}-simpletable__cell {
+            & > .#{$eccgui}-typography__overflowtext,
+            & > .#{$eccgui}-typography__overflowtext--passdown {
+                display: inline;
+                overflow: visible;
+                text-overflow: unset;
+                white-space: unset;
+            }
+            & > .#{$eccgui}-typography__overflowtext {
+                display: -webkit-box;
+                overflow: hidden;
+                -webkit-line-clamp: 2;
+                line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}

package/src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
     title: "Components/Tabs/TabTitle",
@@ -9,7 +9,7 @@ export default {
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};

package/src/components/Tag/stories/TagList.stories.tsx

@@ -8,7 +8,7 @@ export default {
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };

package/src/components/Tag/tag.scss

@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};
@@ -151,7 +155,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +215,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +235,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {
@@ -267,3 +271,9 @@ $tag-round-adjustment: 0 !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

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

@@ -18,8 +18,9 @@ Default.args = {
         <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.`}</Markdown>
+            <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} />

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { reduceToText } from "../../common/utils/reduceToText";
+import { DecodeHtmlEntitiesOptions, utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { OverflowText, OverflowTextProps } from "./../Typography";
@@ -24,6 +24,17 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
      * 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;
 }
 
 /**
@@ -32,16 +43,15 @@ export interface TextReducerProps extends Pick<React.HTMLAttributes<HTMLElement>
  */
 export const TextReducer = ({
     children,
-    maxNodes,
-    maxLength,
     useOverflowTextWrapper,
     overflowTextProps,
+    ...reduceToTextOptions
 }: TextReducerProps) => {
     if (typeof children === "undefined") {
         return <></>;
     }
 
-    const shrinkedContent = reduceToText(children, { maxLength, maxNodes });
+    const shrinkedContent = utils.reduceToText(children, reduceToTextOptions);
 
     return useOverflowTextWrapper ? (
         <OverflowText

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/_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>
+    ),
+};