@eccenca/gui-elements 25.1.0 → 25.2.0-featureupgradeblueprintjsv6cmem7139.0

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -44,7 +44,7 @@ const ListItem = ({ item }: any, ref: any) => {
                     </OverflowText>
                 </OverviewItemLine>
                 {item.label ? (
-                    <OverviewItemLine small={true} >
+                    <OverviewItemLine small={true}>
                         <OverflowText>
                             <Highlighter label={item.label} searchValue={item.query} />
                         </OverflowText>
@@ -86,9 +86,11 @@ export const AutoSuggestionList = ({
     offsetValues,
     ...otherDivProps
 }: AutoSuggestionListProps) => {
-    const [hoveredItem, setHoveredItem] = React.useState<CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined>(undefined);
+    const [hoveredItem, setHoveredItem] = React.useState<
+        CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
+    >(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([]);
+    const [refs] = React.useState<React.RefObject<Element | null>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -82,8 +82,8 @@ export const ExtendedCodeEditor = ({
     onCursorChange,
     onSelection,
     codeEditorProps,
-    height, 
-    readOnly
+    height,
+    readOnly,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline

package/src/components/AutoSuggestion/extensions/markText.ts

@@ -56,7 +56,7 @@ export const removeMarkFromText = (config: marksConfig) => {
 
     dispatch({
         effects: filterMarks?.of(
-            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null
+            ((from: number, to: number) => to <= config.from || from >= config.to) as unknown as null,
         ),
     });
 };

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -63,8 +63,8 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         item: T,
         query: string,
         modifiers: SuggestFieldItemRendererModifierProps,
-        handleClick: () => any
-    ): string | JSX.Element;
+        handleClick: () => any,
+    ): string | React.JSX.Element;
 
     /** Renders the string that should be displayed in the input field after the item has been selected.
      */
@@ -121,8 +121,8 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
         itemRenderer: (
             query: string,
             modifiers: SuggestFieldItemRendererModifierProps,
-            handleClick: React.MouseEventHandler<HTMLElement>
-        ) => JSX.Element | undefined;
+            handleClick: React.MouseEventHandler<HTMLElement>,
+        ) => React.JSX.Element | undefined;
 
         /** If the new item option will always be shown as the first entry in the suggestion list, else it will be the last entry.
          * @default false
@@ -160,19 +160,10 @@ export interface SuggestFieldProps<T, UPDATE_VALUE> {
     loadMoreResults?: () => Promise<T[] | undefined>;
 }
 
-SuggestField.defaultProps = {
-    autoFocus: false,
-    disabled: false,
-    onlyDropdownWithQuery: false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
-    fill: true,
-    requestErrorPrefix: "",
-    hasBackDrop: false,
-};
-
 /**
  * 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.
@@ -187,21 +178,21 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
         className,
         reset,
         noResultText,
-        disabled,
-        onlyDropdownWithQuery,
+        disabled = false,
+        onlyDropdownWithQuery = false, // FIXME: this should be `true` by default, otherwise similarity to `<Select />` is very close
         itemValueSelector,
         itemRenderer,
         onSearch,
         onChange,
         initialValue,
-        autoFocus,
+        autoFocus = false,
         createNewItem,
         itemValueRenderer,
         resetQueryToValue,
         itemValueString,
-        requestErrorPrefix,
-        hasBackDrop,
-        fill,
+        requestErrorPrefix = "",
+        hasBackDrop = false,
+        fill = true,
         loadMoreResults,
         ...otherProps
     } = props;
@@ -314,7 +305,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
                     // Do not mutate original array
-                    const withoutSelected = [...emptyStringResults]
+                    const withoutSelected = [...emptyStringResults];
                     withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
                     result = [selectedItem, ...withoutSelected];
                 } else {
@@ -334,7 +325,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
     // Renders the item in the selection list
     const optionRenderer = (
         item: any,
-        { handleClick, modifiers, query }: { handleClick: any; modifiers: any; query: any }
+        { handleClick, modifiers, query }: { handleClick: any; modifiers: any; query: any },
     ) => {
         if (!modifiers.matchesPredicate) {
             return null;
@@ -441,7 +432,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
               createNewItemRenderer: (
                   query: string,
                   active: boolean,
-                  handleClick: React.MouseEventHandler<HTMLElement>
+                  handleClick: React.MouseEventHandler<HTMLElement>,
               ) => {
                   if (selectedItem && query === itemValueString(selectedItem)) {
                       // Never show create new item option if the same item is already selected
@@ -470,7 +461,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
                 }
             }
         },
-        [loadMoreResults]
+        [loadMoreResults],
     );
 
     return (
@@ -494,7 +485,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}
-            popoverContentProps={{className: "nodrag"}}
+            popoverContentProps={{ className: "nodrag" }}
             selectedItem={selectedItem}
             fill={fill}
             {...createNewItemProps}

package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx

@@ -14,11 +14,15 @@ import { SuggestFieldItemRendererModifierProps } from "./interfaces";
  * @param iconName Optional icon to show left to the text.
  */
 export const createNewItemRendererFactory = (
-    itemTextRenderer: (query: string) => string | JSX.Element,
-    iconName?: ValidIconName | React.ReactElement<TestIconProps>
+    itemTextRenderer: (query: string) => string | React.JSX.Element,
+    iconName?: ValidIconName | React.ReactElement<TestIconProps>,
 ) => {
     // Return custom render function
-    return (query: string, modifiers: SuggestFieldItemRendererModifierProps, 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/Badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Badge, Icon, TestIcon } from "../../../index";
+import { Badge, Icon, TestIcon } from "../../components";
 
 export default {
     title: "Components/Badge",

package/src/components/Breadcrumb/BreadcrumbList.tsx

@@ -11,7 +11,8 @@ import BreadcrumbItem from "./BreadcrumbItem";
 import { BreadcrumbItemProps } from "./BreadcrumbItem";
 
 export interface BreadcrumbListProps
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<
             BlueprintBreadcrumbsProps,
             // we remove some properties that are currently not necessary, required usage should be discussed
@@ -83,7 +84,7 @@ export const BreadcrumbList = ({
                 />
             );
         },
-        [onItemClick]
+        [onItemClick],
     );
 
     const renderCurrentBreadcrumb = React.useCallback((propsBreadcrumb: BreadcrumbItemProps) => {
@@ -97,7 +98,7 @@ export const BreadcrumbList = ({
                       minVisibleItems: otherBlueprintBreadcrumbsProps.items.length,
                   }
                 : {},
-        [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length]
+        [ignoreOverflow, otherBlueprintBreadcrumbsProps.items.length],
     );
 
     const breadcrumbs = (

package/src/components/Button/Button.test.tsx

@@ -19,7 +19,7 @@ describe("Button", () => {
         const { container } = render(
             <Button {...FullExample.args} icon={"item-viewdetails"}>
                 Left icon
-            </Button>
+            </Button>,
         );
         expect(screen.getByRole("button").lastChild).toEqual(screen.getByText(/left icon/i));
         expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);
@@ -29,7 +29,7 @@ describe("Button", () => {
         const { container } = render(
             <Button {...FullExample.args} rightIcon={<Icon name={"item-download"} />}>
                 Right icon
-            </Button>
+            </Button>,
         );
         expect(screen.getByRole("button").firstChild).toEqual(screen.getByText(/right icon/i));
         expect(container.getElementsByClassName(`${eccgui}-icon`).length).toBe(1);

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ interface AdditionalButtonProps {
     /**
      * takes in either a string of text or a react element to display as a tooltip when the button is hovered.
      */
-    tooltip?: string | JSX.Element | null;
+    tooltip?: string | React.JSX.Element | null;
     /**
      * Object with additional properties for the tooltip.
      */
@@ -55,19 +55,17 @@ interface AdditionalButtonProps {
     /**
      * Icon displayed on button start.
      */
-    icon?: ValidIconName | JSX.Element;
+    icon?: ValidIconName | React.JSX.Element;
     /**
      * Icon displayed on button end.
      */
-    rightIcon?: ValidIconName | JSX.Element;
+    rightIcon?: ValidIconName | React.JSX.Element;
 }
 
 interface ExtendedButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
-    extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
+    extends AdditionalButtonProps, Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -104,13 +102,18 @@ export const Button = ({
 
     const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton;
 
+    const iconSize = {
+        small: restProps["size"] === "small",
+        large: restProps["size"] === "large",
+    };
+
     const button = (
         <ButtonType
             {...restProps}
             className={`${eccgui}-button ` + className}
             intent={(intent || intentByFunction) as BlueprintIntent}
-            icon={typeof icon === "string" ? <Icon name={icon} /> : icon}
-            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} /> : rightIcon}
+            icon={typeof icon === "string" ? <Icon name={icon} {...iconSize} /> : icon}
+            rightIcon={typeof rightIcon === "string" ? <Icon name={rightIcon} {...iconSize} /> : rightIcon}
         >
             {children}
             {typeof badge !== "undefined" && (
@@ -137,8 +140,7 @@ export const Button = ({
 };
 
 interface constructBadgePropertiesProps
-    extends Pick<ButtonProps, "intent" | "badgeProps">,
-        Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
+    extends Pick<ButtonProps, "intent" | "badgeProps">, Pick<BlueprintButtonProps, "minimal" | "outlined"> {}
 
 const constructBadgeProperties = ({ intent, minimal, outlined, badgeProps = {} }: constructBadgePropertiesProps) => {
     if (badgeProps.intent) return badgeProps;

package/src/components/Button/button.scss

@@ -9,7 +9,7 @@ $button-border-radius: $pt-border-radius;
 
 // $button-padding-small: 0 ($pt-grid-size * 0.7) !default;
 // $button-padding-large: ($pt-grid-size * 0.5) ($pt-grid-size * 1.5) !default;
-// $button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+$button-icon-spacing: $pt-grid-size * 0.5; // ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
 // $button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
 // $button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default;
 // $button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), inset 0 1px 2px rgba($black, 0.2) !default;
@@ -51,8 +51,7 @@ $dark-button-gradient: $button-gradient; // !default;
 
 $button-intents: (
     // default - hover - active
-    "primary":
-        (
+    "primary": (
             eccgui-color-var("identity", "brand", "900"),
             eccgui-color-mix(
                 eccgui-color-var("identity", "brand", "900"),

package/src/components/Card/CardContent.tsx

@@ -15,23 +15,20 @@ 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 = React.forwardRef<HTMLDivElement, CardContentProps>(({
-    children,
-    className='',
-    noFlexHeight,
-    ...otherProps
-}: CardContentProps, ref) => {
-    return (
-        <div
-            {...otherProps}
-            ref={ref}
-            className={
-                `${eccgui}-card__content` +
-                (noFlexHeight ? ` ${eccgui}-card__content--noflexheight` : "") +
-                (className ? ` ${className}` : "")
-            }
-        >
-            {children}
-        </div>
-    );
-});
+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` : "") +
+                    (className ? ` ${className}` : "")
+                }
+            >
+                {children}
+            </div>
+        );
+    },
+);

package/src/components/Card/CardHeader.tsx

@@ -8,7 +8,7 @@ import CardOptions from "./CardOptions";
 import CardTitle from "./CardTitle";
 
 export interface CardHeaderProps extends Omit<OverviewItemProps, "densityHigh" | "hasSpacing"> {
-    children: JSX.Element | (JSX.Element | undefined | null)[] | null | undefined;
+    children: React.JSX.Element | (React.JSX.Element | undefined | null)[] | null | undefined;
 }
 
 export const CardHeader = ({ children, className = "", ...otherProps }: CardHeaderProps) => {

package/src/components/Card/card.scss

@@ -38,10 +38,14 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
 
     &.#{$ns}-selected {
         background-color: $card-selected-background-color;
-        box-shadow: 0 0 0 3px eccgui-color-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 eccgui-color-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: eccgui-color-mix($card-selected-background-color, $button-background-color-hover);
@@ -83,8 +87,8 @@ $eccgui-size-card-spacing: $eccgui-size-typo-base !default;
     }
 
     .#{$eccgui}-card--whitespace-large > header > & {
-        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing *
-            2;
+        padding: $eccgui-size-card-spacing $eccgui-size-card-spacing $eccgui-size-card-spacing
+            $eccgui-size-card-spacing * 2;
     }
 }
 

package/src/components/Card/stories/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
-import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index";
+import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../components";
 
 import { Default as CardActionsExample } from "./CardActions.stories";
 import { Default as CardContentExample } from "./CardContent.stories";

package/src/components/Chat/ChatArea.tsx

@@ -8,8 +8,7 @@ import { Spacing, SpacingProps } from "./../Separation/Spacing";
 import { ChatFieldProps } from "./ChatField";
 
 export interface ChatAreaProps
-    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">,
-        TestableComponent {
+    extends Omit<FlexibleLayoutContainerProps, "vertical" | "noEqualItemSpace">, TestableComponent {
     /**
      * The inut field for the chat.
      */

package/src/components/Chat/_chat.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-chat__content {
-    @extend .bp5-elevation-1;
+    @extend .#{$ns}-elevation-1;
 
     position: relative;
     z-index: 0;
@@ -32,7 +32,7 @@
         position: relative;
 
         &::before {
-            @extend .bp5-elevation-1;
+            @extend .#{$ns}-elevation-1;
 
             position: absolute;
             top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});

package/src/components/Checkbox/Stories/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Checkbox, HtmlContentBlock } from "../../../../index";
+import { Checkbox, HtmlContentBlock } from "../../../components";
 
 export default {
     title: "Forms/Checkbox",

package/src/components/CodeAutocompleteField/CodeAutocompleteField.stories.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
 import { CodeAutocompleteField, CodeAutocompleteFieldProps } from "../../../index";
 import { CodeAutocompleteFieldPartialAutoCompleteResult } from "../AutoSuggestion/AutoSuggestion";
 
 export default {
     title: "Forms/CodeAutocompleteField",
     component: CodeAutocompleteField,
-    argTypes: {},
+    argTypes: {
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
+        },
+    },
     args: {
         onInputChecked: fn(),
     },
@@ -28,7 +34,7 @@ const defaultProps: CodeAutocompleteFieldProps = {
     initialValue: "",
     fetchSuggestions(
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ):
         | CodeAutocompleteFieldPartialAutoCompleteResult
         | undefined

package/src/components/ColorField/ColorField.test.tsx

@@ -29,7 +29,7 @@ describe("ColorField", () => {
                         ["my-black", "#000000"],
                         ["my-white", "#ffffff"],
                     ]}
-                />
+                />,
             );
             // With default palette settings, a text input with readOnly is shown
             expect(container.querySelector("input[type='text']")).toBeInTheDocument();

package/src/components/ColorField/ColorField.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 import classNames from "classnames";
-import Color from "color";
+import { ColorLike } from "color";
 
 import { utils } from "../../common";
 import { getEnabledColorsProps } from "../../common/utils/colorHash";
@@ -14,7 +14,7 @@ import { TextField, TextFieldProps } from "../TextField";
 import { Tooltip } from "../Tooltip/Tooltip";
 import { WhiteSpaceContainer } from "../Typography";
 
-type ColorPresets = [string, string][] | [string, Color][];
+type ColorPresets = [string, string][] | [string, ColorLike][];
 type ColorPresetConfiguration = Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
 
 export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
@@ -108,7 +108,7 @@ export const ColorField = ({
                     )}
                     <FieldSet>
                         <TagList className={`${eccgui}-colorfield__palette`}>
-                            {colorPresets!.map((color: [string, string | Color], idx: number) => [
+                            {colorPresets!.map((color: [string, ColorLike], idx: number) => [
                                 <RadioButton
                                     key={idx}
                                     className={`${eccgui}-colorfield__palette__color`}
@@ -123,7 +123,7 @@ export const ColorField = ({
                                             large
                                             style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
                                         >
-                                            {color[1]}
+                                            {typeof color[1] === "string" ? color[1] : color[1].toString()}
                                         </Tag>
                                     </Tooltip>
                                 </RadioButton>,
@@ -162,7 +162,7 @@ const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
             ...colorPaletteSet,
             minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
         })
-        .map((color: [string, string | Color]) => [
+        .map((color: [string, ColorLike]) => [
             color[0].replace(`${eccgui}-color-palette-`, ""),
             color[1],
         ]) as ColorPresets;
@@ -180,7 +180,7 @@ ColorField.calculateColorHashValue = (
     options: calculateColorHashValueProps = {
         ...defaultColorPaletteSet,
         allowCustomColor: false,
-    }
+    },
 ) => {
     const hash = utils.textToColorHash({
         text,

package/src/components/ContentGroup/ContentGroup.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index";
+import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../components";
 
 export default {
     title: "Components/ContentGroup",

package/src/components/ContentGroup/ContentGroup.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import classNames from "classnames";
 import Color from "color";
 
-import { TestableComponent } from "../../components/interfaces";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
     Divider,
     Icon,
@@ -17,7 +15,9 @@ import {
     Toolbar,
     ToolbarSection,
     Tooltip,
-} from "../index";
+} from "../../components";
+import { TestableComponent } from "../../components/interfaces";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
     /**
@@ -128,7 +128,7 @@ export const ContentGroup = ({
                 acc.push(
                     `${color.rgb().toString()} ` +
                         `${(index / borderColors.length) * 100}% ` +
-                        `${((index + 1) / borderColors.length) * 100}%`
+                        `${((index + 1) / borderColors.length) * 100}%`,
                 );
             } catch {
                 // eslint-disable-next-line no-console
@@ -162,12 +162,12 @@ export const ContentGroup = ({
                                 "h" +
                                     Math.min(
                                         Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
-                                        6
+                                        6,
                                     ).toString(),
                                 {
                                     children: <OverflowText>{title}</OverflowText>,
                                     className: `${eccgui}-contentgroup__header__title`,
-                                }
+                                },
                             )}
                             {description && (
                                 <>

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ValidIconName } from "../Icon/canonicalIconNames";
-import IconButton from "../Icon/IconButton";
+import { IconButton, IconButtonProps } from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
 import Menu from "../Menu/Menu";
 
@@ -17,19 +17,24 @@ export interface ContextMenuProps extends TestableComponent {
      * The elements of the context menu.
      * They will be wrapped in a `Menu` element automatically.
      */
-    children?: JSX.Element | JSX.Element[];
+    children?: React.JSX.Element | React.JSX.Element[];
     /**
      * Toggler that need to be used to display menu.
      * If a valid icon name is used then the icon element is displayed.
      * In this case `togglerText`, `togglerLarge` and `tooltipAsTitle` are used, too.
      */
-    togglerElement?: ValidIconName | JSX.Element;
+    togglerElement?: ValidIconName | React.JSX.Element;
     /**
      * Text displayed as title or tooltip on toggler element.
      */
     togglerText?: string;
+    /**
+     * Allow to de- and increase the size of the default toggler button.
+     */
+    togglerSize?: IconButtonProps["size"];
     /**
      * Toggler element is displayed larger than normal.
+     * @deprecated (v27) use `togglerSize="large" instead
      */
     togglerLarge?: boolean;
     /**
@@ -62,6 +67,7 @@ export const ContextMenu = ({
     contextOverlayProps,
     disabled,
     togglerLarge = false,
+    togglerSize,
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
@@ -76,7 +82,7 @@ export const ContextMenu = ({
                 tooltipAsTitle={tooltipAsTitle}
                 name={[togglerElement]}
                 text={togglerText}
-                large={togglerLarge}
+                size={togglerLarge ? "large" : togglerSize}
                 disabled={!!disabled}
                 data-test-id={dataTestId ?? undefined}
                 data-testid={dataTestid ?? undefined}