@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.3 → 24.4.1-featurepreparefinalnextcmem6943.0

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -34,9 +34,6 @@ export interface CodeAutocompleteFieldSuggestionBase {
     description?: string;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionBase */
-export type ISuggestionBase = CodeAutocompleteFieldSuggestionBase;
-
 /** Same as CodeAutocompleteFieldSuggestionBase, but with the query that was used to fetch this suggestion. */
 export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends CodeAutocompleteFieldSuggestionBase {
     // The query this result was filtered by
@@ -47,9 +44,6 @@ export interface CodeAutocompleteFieldSuggestionWithReplacementInfo extends Code
     length: number;
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldSuggestionWithReplacementInfo */
-export type ISuggestionWithReplacementInfo = CodeAutocompleteFieldSuggestionWithReplacementInfo;
-
 /** The suggestions for a specific substring of the given input string. */
 export interface CodeAutocompleteFieldReplacementResult {
     // The range of the input string that should be replaced
@@ -63,9 +57,6 @@ export interface CodeAutocompleteFieldReplacementResult {
     replacements: CodeAutocompleteFieldSuggestionBase[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldReplacementResult */
-export type IReplacementResult = CodeAutocompleteFieldReplacementResult;
-
 export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     // Repeats the input string from the corresponding request
     inputString: string;
@@ -74,9 +65,6 @@ export interface CodeAutocompleteFieldPartialAutoCompleteResult {
     replacementResults: CodeAutocompleteFieldReplacementResult[];
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldPartialAutoCompleteResult */
-export type IPartialAutoCompleteResult = CodeAutocompleteFieldPartialAutoCompleteResult;
-
 /** Validation result */
 export interface CodeAutocompleteFieldValidationResult {
     // If the input value is valid or not
@@ -91,13 +79,7 @@ export interface CodeAutocompleteFieldValidationResult {
     };
 }
 
-/** @deprecated (v25) use CodeAutocompleteFieldValidationResult */
-export type IValidationResult = CodeAutocompleteFieldValidationResult;
-
-/**
- * @deprecated (v25) use `CodeAutocompleteFieldProps` instead.
- */
-export interface AutoSuggestionProps {
+export interface CodeAutocompleteFieldProps {
     /** Additional class name.
      */
     className?: string;
@@ -180,9 +162,12 @@ interface RequestMetaData {
 }
 
 /**
- * @deprecated (support already removed) use `CodeAutocompleteField` as replacement.
+ * Input component that allows partial, fine-grained auto-completion, i.e. of sub-strings of the input string.
+ * This is comparable to a one line code editor.
+ *
+ * Example usage: input of a path string offering auto-completion for each single part of the path.
  */
-const AutoSuggestion = ({
+export const CodeAutocompleteField = ({
     className,
     label,
     initialValue,
@@ -206,8 +191,8 @@ const AutoSuggestion = ({
     reInitOnInitialValueChange = false,
     height,
     readOnly,
-    outerDivAttributes
-}: AutoSuggestionProps) => {
+    outerDivAttributes,
+}: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
     const dropdownXYoffset = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
@@ -626,7 +611,7 @@ const AutoSuggestion = ({
                     handleEscapePressed();
                     break;
                 default:
-                //do nothing
+                    //do nothing
                     closeDropDown();
             }
         }
@@ -676,7 +661,7 @@ const AutoSuggestion = ({
         showScrollBar,
         multiline,
         handleInputMouseDown,
-        readOnly
+        readOnly,
     ]);
 
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
@@ -684,7 +669,7 @@ const AutoSuggestion = ({
         <div
             id={id}
             ref={autoSuggestionDivRef}
-            className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+            className={`${eccgui}-codeautocompletefield ${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
             {...outerDivAttributes}
         >
             <div
@@ -756,7 +741,7 @@ const AutoSuggestion = ({
                     </>
                 ),
             }}
-            hasStateDanger={hasError}
+            intent={hasError ? "danger" : undefined}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}
@@ -766,4 +751,4 @@ const AutoSuggestion = ({
     );
 };
 
-export default AutoSuggestion;
+export default CodeAutocompleteField;

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -15,13 +15,13 @@ import {
     Spinner,
     Tooltip,
 } from "./../../";
-import { ISuggestionWithReplacementInfo } from "./AutoSuggestion";
+import { CodeAutocompleteFieldSuggestionWithReplacementInfo } from "./AutoSuggestion";
 
 export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     // The options of the drop down
-    options: Array<ISuggestionWithReplacementInfo>;
+    options: Array<CodeAutocompleteFieldSuggestionWithReplacementInfo>;
     // Called when an item has been selected from the drop down
-    onItemSelectionChange: (item: ISuggestionWithReplacementInfo) => any;
+    onItemSelectionChange: (item: CodeAutocompleteFieldSuggestionWithReplacementInfo) => any;
     // If the drop down is visible
     isOpen: boolean;
     // If the drop down should show a loading state
@@ -29,7 +29,7 @@ export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLD
     // The item from the drop down that is active
     currentlyFocusedIndex: number;
     // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
-    itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+    itemToHighlight: (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => any;
     /** horizontal and vertical offset values in relation to the cursor */
     offsetValues?: { x: number; y: number };
 }
@@ -43,6 +43,13 @@ const ListItem = ({ item }: any, ref: any) => {
                         <Highlighter label={item.value} searchValue={item.query} />
                     </OverflowText>
                 </OverviewItemLine>
+                {item.label ? (
+                    <OverviewItemLine small={true} >
+                        <OverflowText>
+                            <Highlighter label={item.label} searchValue={item.query} />
+                        </OverflowText>
+                    </OverviewItemLine>
+                ) : null}
                 {item.description ? (
                     <OverviewItemLine small={true}>
                         <OverflowText>
@@ -79,7 +86,7 @@ export const AutoSuggestionList = ({
     offsetValues,
     ...otherDivProps
 }: AutoSuggestionListProps) => {
-    const [hoveredItem, setHoveredItem] = React.useState<ISuggestionWithReplacementInfo | undefined>(undefined);
+    const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
     const [refs] = React.useState<React.RefObject<Element>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -67,8 +67,6 @@ export interface ExtendedCodeEditorProps {
     readOnly?: boolean;
 }
 
-export type IEditorProps = ExtendedCodeEditorProps;
-
 /** Supports single-line and multiline editing. */
 export const ExtendedCodeEditor = ({
     multiline = false,

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -23,9 +23,11 @@ type SearchFunction<T> = (value: string) => T[];
 type AsyncSearchFunction<T> = (value: string) => Promise<T[]>;
 
 /**
- * @deprecated (v25) replaced by SuggestFieldProps
+ * Parameters for the auto-complete field parameterized by T and U.
+ * @param T is the input data structure/type of the items that can be selected.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
  */
-export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
+export interface SuggestFieldProps<T, UPDATE_VALUE> {
     /**
      * Additional class names.
      */
@@ -158,12 +160,7 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-/**
- * @deprecated (v25) replaced by SuggestFieldProps
- */
-export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
-
-AutoCompleteField.defaultProps = {
+SuggestField.defaultProps = {
     autoFocus: false,
     disabled: false,
     onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
@@ -173,9 +170,18 @@ AutoCompleteField.defaultProps = {
 };
 
 /**
- * @deprecated (support already removed) use `SuggestField` as replacement.
+ * A component with the appearance of an input field that allows to select and optionally create new items.
+ * It shows suggestions for the entered text from which the user can select any option.
+ * It has the following fixed behavior:
+ *
+ * - When not focused, a different representation of the item value can be shown, e.g. the label of the value.
+ * - When changing an existing item the input text is set to the original value in order to be able to edit the original value.
+ * - When for a specific input text, the only item returns is the currently set item itself, all items are shown below it, to make
+ *   clear that there are still other items to choose from.
+ * - The suggestions are fetched with a short delay, so not too many unnecessary requests are fired.
+ * - Items where itemRenderer returns a string have a default representation, i.e. highlighting of search words, active flag etc.
  */
-function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPDATE_VALUE>) {
+export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE_VALUE>) {
     const {
         className,
         reset,
@@ -368,7 +374,7 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
         setQuery("");
     };
     const requestErrorRenderer = () => {
-        return <Notification danger={true} message={requestError} />;
+        return <Notification intent="danger" message={requestError} />;
     };
     // Optional clear button to reset the selected value
     const clearButton =
@@ -468,7 +474,7 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
 
     return (
         <BlueprintSuggest<T>
-            className={`${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
+            className={`${eccgui}-suggestfield ${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
             disabled={disabled}
             // Need to display error messages in list
             items={requestError ? [requestError as unknown as T] : filtered}
@@ -505,4 +511,4 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
     );
 }
 
-export default AutoCompleteField;
+export default SuggestField;

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -5,7 +5,7 @@ import MenuItem from "../Menu/MenuItem";
 import OverflowText from "../Typography/OverflowText";
 
 import { TestIconProps } from "./../Icon/TestIcon";
-import { IRenderModifiers } from "./interfaces";
+import { SuggestFieldItemRendererModifierProps } from "./interfaces";
 
 /**
  * Returns a function to be used in an AutoComplete widget for rendering custom elements based on the query string.
@@ -18,7 +18,7 @@ export const createNewItemRendererFactory = (
     iconName?: ValidIconName | React.ReactElement<TestIconProps>
 ) => {
     // Return custom render function
-    return (query: string, modifiers: IRenderModifiers, handleClick: React.MouseEventHandler<HTMLElement>) => {
+    return (query: string, modifiers: SuggestFieldItemRendererModifierProps, handleClick: React.MouseEventHandler<HTMLElement>) => {
         let textElement = itemTextRenderer(query);
         if (typeof textElement === "string") {
             textElement = (

package/src/components/AutocompleteField/interfaces.ts

@@ -6,11 +6,7 @@ export interface SuggestFieldItemRendererModifierProps {
     highlightingEnabled: boolean;
 }
 
-/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps` */
-export type IRenderModifiers = SuggestFieldItemRendererModifierProps;
-
-/** @deprecated (v25) use `SuggestFieldItemRendererModifierProps["styleWidth"]` */
-export interface IElementWidth {
+interface IElementWidth {
     minWidth: string;
     maxWidth: string;
 }

package/src/components/Button/Button.stories.tsx

@@ -33,10 +33,6 @@ const TemplateFull: StoryFn<typeof Button> = (args) => (
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {
-    hasStatePrimary: false,
-    hasStateSuccess: false,
-    hasStateWarning: false,
-    hasStateDanger: false,
     elevated: false,
     affirmative: false,
     disruptive: false,

package/src/components/Button/Button.tsx

@@ -30,26 +30,6 @@ interface AdditionalButtonProps {
      * The button is displayed with primary color scheme.
      */
     elevated?: boolean;
-    /**
-     * The button is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The button is displayed with success (some type of green) color scheme.
-     *  @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The button is displayed with warning (some type of orange) color scheme.
-     *  @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The button is displayed with danger (some type of red) color scheme.
-     *  @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Content displayed in a badge that is attached to the button.
      * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
@@ -94,10 +74,6 @@ export const Button = ({
     affirmative = false,
     disruptive = false,
     elevated = false,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     icon,
     rightIcon,
     tooltip = null,
@@ -107,19 +83,13 @@ export const Button = ({
     intent,
     ...restProps
 }: ButtonProps) => {
-    let intention;
+    let intentByFunction;
     switch (true) {
-        case affirmative || elevated || hasStatePrimary:
-            intention = BlueprintIntent.PRIMARY;
-            break;
-        case hasStateSuccess:
-            intention = BlueprintIntent.SUCCESS;
-            break;
-        case hasStateWarning:
-            intention = BlueprintIntent.WARNING;
+        case affirmative || elevated:
+            intentByFunction = BlueprintIntent.PRIMARY;
             break;
-        case disruptive || hasStateDanger:
-            intention = BlueprintIntent.DANGER;
+        case disruptive:
+            intentByFunction = BlueprintIntent.DANGER;
             break;
         default:
             break;
@@ -131,7 +101,7 @@ export const Button = ({
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
-            intent={(intent || intention) as BlueprintIntent}
+            intent={(intent || intentByFunction) as BlueprintIntent}
             icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
             rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
         >
@@ -140,10 +110,7 @@ export const Button = ({
                 <Badge
                     children={badge}
                     {...constructBadgeProperties({
-                        hasStatePrimary,
-                        hasStateSuccess,
-                        hasStateWarning,
-                        hasStateDanger,
+                        intent,
                         minimal: restProps.minimal,
                         outlined: restProps.outlined,
                         badgeProps,
@@ -163,26 +130,12 @@ export const Button = ({
 };
 
 interface constructBadgePropertiesProps
-    extends Pick<
-            ButtonProps,
-            "hasStatePrimary" | "hasStateSuccess" | "hasStateWarning" | "hasStateDanger" | "badgeProps"
-        >,
+    extends Pick<ButtonProps, "intent" | "badgeProps">,
         Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
-const constructBadgeProperties = ({
-    hasStatePrimary,
-    hasStateSuccess,
-    hasStateWarning,
-    hasStateDanger,
-    minimal,
-    outlined,
-    badgeProps = {},
-}: constructBadgePropertiesProps) => {
+const constructBadgeProperties = ({ intent, minimal, outlined, badgeProps = {} }: constructBadgePropertiesProps) => {
     if (badgeProps.intent) return badgeProps;
-    if (hasStatePrimary) badgeProps["intent"] = "accent";
-    if (hasStateSuccess) badgeProps["intent"] = "success";
-    if (hasStateWarning) badgeProps["intent"] = "warning";
-    if (hasStateDanger) badgeProps["intent"] = "danger";
+    if (intent) badgeProps["intent"] = intent;
     if (!badgeProps.tagProps || typeof badgeProps.tagProps.minimal === "undefined") {
         if (!minimal && !outlined) {
             badgeProps["tagProps"] = { ...badgeProps.tagProps, minimal: true };

package/src/components/Button/button.scss

@@ -20,9 +20,9 @@ $button-border-radius: $pt-border-radius;
 // $dark-button-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.6), inset 0 1px 2px rgba($black, 0.2) !default;
 // $dark-button-intent-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4) !default;
 // $dark-button-intent-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.4), inset 0 1px 2px rgba($black, 0.2) !default;
-$button-gradient: none; // !default; // linear-gradient(to bottom, rgba($white, 0.8), rgba($white, 0)) !default;
-$button-intent-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.1), rgba($white, 0)) !default;
-$dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bottom, rgba($white, 0.05), rgba($white, 0)) !default;
+$button-gradient: none; // !default;
+$button-intent-gradient: $button-gradient; // !default;
+$dark-button-gradient: $button-gradient; // !default;
 // $button-color-disabled: $pt-text-color-disabled !default;
 // $button-background-color: $light-gray5 !default;
 // $button-background-color-hover: $light-gray4 !default;
@@ -50,24 +50,24 @@ $dark-button-gradient: $button-gradient; // !default; // linear-gradient(to bott
 
 $button-intents: (
     "primary": (
-        $eccgui-color-accent,
-        color.scale($eccgui-color-accent, $lightness: -20%),
-        color.scale($eccgui-color-accent, $lightness: -40%),
+        eccgui-color-var("identity", "accent", "900"),
+        eccgui-color-var("identity", "accent", "700"),
+        eccgui-color-var("identity", "accent", "500"),
     ),
     "success": (
-        $eccgui-color-success-text,
-        color.scale($eccgui-color-success-text, $lightness: -20%),
-        color.scale($eccgui-color-success-text, $lightness: -40%),
+        eccgui-color-var("semantic", "success", "900"),
+        eccgui-color-var("semantic", "success", "700"),
+        eccgui-color-var("semantic", "success", "500"),
     ),
     "warning": (
-        $eccgui-color-warning-text,
-        color.scale($eccgui-color-warning-text, $lightness: -20%),
-        color.scale($eccgui-color-warning-text, $lightness: -40%),
+        eccgui-color-var("semantic", "warning", "900"),
+        eccgui-color-var("semantic", "warning", "700"),
+        eccgui-color-var("semantic", "warning", "500"),
     ),
     "danger": (
-        $eccgui-color-danger-text,
-        color.scale($eccgui-color-danger-text, $lightness: -20%),
-        color.scale($eccgui-color-danger-text, $lightness: -40%),
+        eccgui-color-var("semantic", "danger", "900"),
+        eccgui-color-var("semantic", "danger", "700"),
+        eccgui-color-var("semantic", "danger", "500"),
     ),
 );
 
@@ -85,7 +85,7 @@ $button-intents: (
         @include pt-button-intent(map.get($button-intents, "warning")...);
 
         &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
-            fill: rgba($white, 0.7);
+            fill: eccgui-color-rgba($white, 0.7);
         }
 
         &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
@@ -101,7 +101,7 @@ $button-intents: (
 
             &:disabled,
             &.#{$ns}-disabled {
-                color: rgba($eccgui-color-warning-text, 0.39);
+                color: eccgui-color-rgba($eccgui-color-warning-text, 0.39);
             }
         }
     }

package/src/components/Card/card.scss

@@ -1,8 +1,8 @@
 @use "sass:color";
 
 $card-padding: 0 !default;
-$card-background-color: $white !default;
-$card-selected-background-color: rgba($blue3, 0.1);
+$card-background-color: #{eccgui-color-var("identity", "background", "100")} !default;
+$card-selected-background-color: eccgui-color-rgba($blue3, 0.1);
 $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 @import "~@blueprintjs/core/src/components/card/card";
@@ -14,22 +14,22 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     justify-content: flex-start;
 
     &.#{$eccgui}-intent--primary {
-        background-color: color.mix($eccgui-color-primary, $card-background-color, 5%);
+        background-color: eccgui-color-var("identity", "brand", "100");
     }
     &.#{$eccgui}-intent--accent {
-        background-color: color.mix($eccgui-color-accent, $card-background-color, 10%);
+        background-color: eccgui-color-var("identity", "accent", "100");
     }
     &.#{$eccgui}-intent--success {
-        background-color: $eccgui-color-success-background;
+        background-color: eccgui-color-var("semantic", "success", "100");
     }
     &.#{$eccgui}-intent--info {
-        background-color: $eccgui-color-info-background;
+        background-color: eccgui-color-var("semantic", "info", "100");
     }
     &.#{$eccgui}-intent--warning {
-        background-color: $eccgui-color-warning-background;
+        background-color: eccgui-color-var("semantic", "warning", "100");
     }
     &.#{$eccgui}-intent--danger {
-        background-color: $eccgui-color-danger-background;
+        background-color: eccgui-color-var("semantic", "danger", "100");
     }
 
     &.#{$ns}-interactive:hover {
@@ -38,13 +38,13 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
     &.#{$ns}-selected {
         background-color: $card-selected-background-color;
-        box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+        box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
 
         &.#{$ns}-interactive {
-            box-shadow: 0 0 0 3px rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
+            box-shadow: 0 0 0 3px eccgui-color-rgba($eccgui-color-accent, 0.2), 0 0 0 1px $eccgui-color-accent;
 
             &:hover {
-                background-color: color.mix($card-selected-background-color, $button-background-color-hover, 50%);
+                background-color: eccgui-color-mix($card-selected-background-color, $button-background-color-hover);
             }
         }
     }
@@ -176,9 +176,9 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 .#{$eccgui}-card__actions {
     display: flex;
-    flex-flow: row wrap;
     flex-grow: 0;
     flex-shrink: 0;
+    flex-flow: row wrap;
     align-items: center;
     padding: $eccgui-size-card-spacing * 0.25 $eccgui-size-card-spacing;
 
@@ -242,8 +242,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
 .#{$eccgui}-card__actions__aux {
     display: flex;
-    flex-flow: row wrap;
     flex-grow: 1;
+    flex-flow: row wrap;
     align-items: center;
     justify-content: flex-end;
     order: 1000;

package/src/components/Chat/ChatArea.tsx

@@ -95,8 +95,8 @@ export const ChatArea = ({
                 <div className={`${eccgui}-chat__area-contentwidth`} ref={chatcontents}>
                     {autoSpacingSize && children ? (
                         <ul>
-                            {React.Children.toArray(children).map((child) => (
-                                <li>
+                            {React.Children.toArray(children).map((child, index) => (
+                                <li key={index}>
                                     {child}
                                     <Spacing size={autoSpacingSize} />
                                 </li>

package/src/components/Chat/ChatContent.tsx

@@ -4,10 +4,10 @@ import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
-import { ContentShrinker } from "./../ContentShrinker/ContentShrinker";
+import { ContextMenuProps } from "./../ContextOverlay/ContextMenu";
 import { DepictionProps } from "./../Depiction/Depiction";
 import { FlexibleLayoutContainer, FlexibleLayoutItem } from "./../FlexibleLayout";
-import { IconButton } from "./../Icon/IconButton";
+import { IconButtonProps } from "./../Icon/IconButton";
 import { Spacing } from "./../Separation/Spacing";
 import { HtmlContentBlock, OverflowTextProps } from "./../Typography";
 
@@ -44,27 +44,13 @@ export interface ChatContentProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     markdownProps?: Omit<MarkdownProps, "children">;
     /**
-     * Callback handler if content should be expanded.
-     * Button to shrink/expand is displayed, depending on `shrinked` value.
-     * If this handler is given then the component never will change the `shrinked` state automatically.
+     * Could be used to add some type of toggle button or to include a context menu.
      */
-    onToggleSize?: () => void;
-    /**
-     * Content should dislayed shrinked.
-     * Button to expand content is displayed.
-     * Component can reduce content automatically to one line if `autoShrink` is set to `true`.
-     * If `onToggleSize` handler is not given then `autoShrink=true` is inferred and size toggling is automatically provided.
-     */
-    shrinked?: boolean;
-    /**
-     * Children elements are automatically shrinked to one line.
-     * If `shrinked` are not given then `shrinked=true` is infered.
-     */
-    autoShrink?: boolean;
+    actionButton?: React.ReactElement<IconButtonProps> | React.ReactElement<ContextMenuProps>;
 }
 
 /**
- * Component to display singe chat contents, including avatar and status line.
+ * Component to display single chat contents, including avatar and status line.
  */
 export const ChatContent = ({
     className,
@@ -76,23 +62,9 @@ export const ChatContent = ({
     alignment = "left",
     limitHeight,
     markdownProps,
-    shrinked,
-    autoShrink,
-    onToggleSize,
+    actionButton,
     ...otherDivProps
 }: ChatContentProps) => {
-    const [displayShrinked, setDispayShrinked] = React.useState<boolean>(
-        shrinked === true || (autoShrink === true && typeof shrinked === "undefined")
-    );
-
-    const toggleSize = () => {
-        if (onToggleSize) {
-            onToggleSize();
-        } else {
-            setDispayShrinked(!displayShrinked);
-        }
-    };
-
     const content =
         markdownProps && typeof children === "string" ? <Markdown {...markdownProps}>{children}</Markdown> : children;
 
@@ -113,7 +85,7 @@ export const ChatContent = ({
                     <Spacing size="tiny" />
                 </HtmlContentBlock>
             )}
-            {displayShrinked && autoShrink ? <ContentShrinker>{content}</ContentShrinker> : content}
+            {content}
         </div>
     );
 
@@ -142,17 +114,14 @@ export const ChatContent = ({
                     </FlexibleLayoutItem>
                 )}
                 <FlexibleLayoutItem className={`${eccgui}-chat__content-wrapper`}>{chatitem}</FlexibleLayoutItem>
-                {(displayShrinked || onToggleSize || autoShrink) && (
+                {actionButton && (
                     <FlexibleLayoutItem
                         className={`${eccgui}-chat__content-sizetoggle`}
                         growFactor={0}
                         shrinkFactor={0}
                         style={alignment === "right" ? { order: -1 } : undefined}
                     >
-                        <IconButton
-                            name={displayShrinked ? "toggler-showmore" : "toggler-showless"}
-                            onClick={() => toggleSize()}
-                        />
+                        {actionButton}
                     </FlexibleLayoutItem>
                 )}
             </FlexibleLayoutContainer>