@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-featuredarkthemesupportcmem7503.0

package/src/components/Application/stories/ColorPalettes.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { loremIpsum } from "react-lorem-ipsum";
+import { Classes as BlueprintClasses } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import Color from "color";
 
@@ -183,7 +184,9 @@ const ColorPaletteConfigurator = ({
 
     React.useEffect(() => {
         if (refConfigurator.current) {
-            const panelConfig = document.getElementById("bp5-tab-panel_colorconfig_editor");
+            const panelConfig = document.getElementById(
+                `${BlueprintClasses.getClassNamespace()}-tab-panel_colorconfig_editor`,
+            );
             if (panelConfig) {
                 const warnings = Array.from(panelConfig.getElementsByClassName("eccgui-badge"))
                     .map((warning: Element) => {
@@ -194,10 +197,11 @@ const ColorPaletteConfigurator = ({
                     }, 0 as number);
                 const warningsTarget = document.getElementById("sumWarnings");
                 if (warningsTarget) {
+                    const warningsRoot = createRoot(warningsTarget);
                     if (warnings > 0) {
-                        render(<Badge intent={"warning"}>{warnings}</Badge>, warningsTarget);
+                        warningsRoot.render(<Badge intent={"warning"}>{warnings}</Badge>);
                     } else {
-                        render(<></>, warningsTarget);
+                        warningsRoot.render(<></>);
                     }
                 }
             }
@@ -238,7 +242,7 @@ const ColorPaletteConfigurator = ({
     const fixColorByLuminosity = (
         color: Color,
         colorTest: Color,
-        testFn: (color1: Color, color2: Color) => boolean
+        testFn: (color1: Color, color2: Color) => boolean,
     ) => {
         let fixedColor = color as Color;
         let check = testFn(fixedColor, colorTest);
@@ -306,7 +310,7 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
@@ -332,12 +336,12 @@ const ColorPaletteConfigurator = ({
                                                         // eslint-disable-next-line no-console
                                                         console.log(`${c1.hex()} -> ${distance}`);
                                                         return distance < minimalDistance;
-                                                    }
+                                                    },
                                                 );
                                                 setPaletteData({ ...colors });
                                             }}
                                         />
-                                    </MenuItem>
+                                    </MenuItem>,
                                 );
                             }
                         }
@@ -391,7 +395,7 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
@@ -415,12 +419,12 @@ const ColorPaletteConfigurator = ({
                                                                 // eslint-disable-next-line no-console
                                                                 console.log(`${c1.hex()} -> ${contrast}`);
                                                                 return contrast < minimalContrast;
-                                                            }
+                                                            },
                                                         );
                                                         setPaletteData({ ...colors });
                                                     }}
                                                 />
-                                            </MenuItem>
+                                            </MenuItem>,
                                         );
                                     }
                                 }
@@ -457,7 +461,7 @@ const ColorPaletteConfigurator = ({
         paletteData: object = {},
         label: string,
         id: string[],
-        updateFn: (color: string) => void
+        updateFn: (color: string) => void,
     ) => {
         if (!paletteData[id[0]] || !paletteData[id[0]][id[1]] || !paletteData[id[0]][id[1]][id[2]]) {
             return <></>;
@@ -579,7 +583,7 @@ const ColorPaletteConfigurator = ({
                                                         (newcolor) => {
                                                             paletteData[group][tint][weight] = Color(newcolor).rgb();
                                                             setPaletteData({ ...paletteData });
-                                                        }
+                                                        },
                                                     );
                                                 })}
                                             </FieldItemRow>
@@ -590,7 +594,7 @@ const ColorPaletteConfigurator = ({
                                                 text="Auto-span tint value from 100 to 900"
                                                 onClick={() => {
                                                     const tintValues = Object.values(
-                                                        paletteData[group][tint]
+                                                        paletteData[group][tint],
                                                     ) as Color[];
                                                     const tintKeys = Object.keys(paletteData[group][tint]);
                                                     if (tintValues.length > 0) {
@@ -599,15 +603,15 @@ const ColorPaletteConfigurator = ({
                                                         tintKeys.forEach((weight, id) => {
                                                             paletteData[group][tint][weight] = Color(tint100).mix(
                                                                 Color(tint900),
-                                                                id / (tintValues.length - 1)
+                                                                id / (tintValues.length - 1),
                                                             );
                                                             // eslint-disable-next-line no-console
                                                             console.log(
                                                                 `mix ${Color(tint100).hex()} with ${Color(
-                                                                    tint900
+                                                                    tint900,
                                                                 ).hex()} by ${id / (tintValues.length - 1)} -> ${
                                                                     paletteData[group][tint][weight]
-                                                                }`
+                                                                }`,
                                                             );
                                                         });
                                                     }
@@ -695,7 +699,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestGroups(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestGroups.includes(group)}
@@ -715,7 +719,7 @@ const ColorPaletteConfigurator = ({
                                                         onChange={(event) => {
                                                             updateHashtestWeights(
                                                                 event.target.value,
-                                                                event.target.checked
+                                                                event.target.checked,
                                                             );
                                                         }}
                                                         checked={hashtestWeights.includes(weight)}

package/src/components/Application/tests/ApplicationViewability.test.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { expect } from "@storybook/test";
 import { render } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
@@ -11,7 +10,7 @@ import { Default as ApplicationViewabilityStory } from "./../stories/Application
 const applyViewabilityAndCheckClass = (props: Omit<ApplicationViewabilityProps, "children">) => {
     const { container } = render(<ApplicationViewability {...ApplicationViewabilityStory.args} {...props} />);
     const element = container.getElementsByClassName(
-        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`
+        props.hide ? `${eccgui}-application__hide--${props.hide}` : `${eccgui}-application__show--${props.show}`,
     );
     expect(element.length).toBe(1);
     return element;
@@ -25,19 +24,14 @@ describe("ApplicationViewability", () => {
          * Looks like it is not too easy to include and test them.
          * So we only test for the correct CSS class.
          */
-        // console.log(window.getComputedStyle(element.item(0)??new Element).getPropertyValue("display"));
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `hide=screen`", () => {
         applyViewabilityAndCheckClass({ hide: "screen" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
     it("should be visible on `hide=print`", () => {
         applyViewabilityAndCheckClass({ hide: "print" });
-        // waitFor(() => expect(element).toBeVisible());
     });
     it("should not be visible on `show=print`", () => {
         applyViewabilityAndCheckClass({ show: "print" });
-        // waitFor(() => expect(element).not.toBeVisible());
     });
 });

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -4,6 +4,7 @@ import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
 import { debounce } from "lodash";
 
+import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -96,14 +97,14 @@ export interface CodeAutocompleteFieldProps {
      */
     fetchSuggestions: (
         inputString: string,
-        cursorPosition: number
+        cursorPosition: number,
     ) =>
         | (CodeAutocompleteFieldPartialAutoCompleteResult | undefined)
         | Promise<CodeAutocompleteFieldPartialAutoCompleteResult | undefined>;
     /** Checks if the input is valid
      */
     checkInput?: (
-        inputString: string
+        inputString: string,
     ) => CodeAutocompleteFieldValidationResult | Promise<CodeAutocompleteFieldValidationResult | undefined>;
     /** Called with the input validation result
      */
@@ -124,10 +125,10 @@ export interface CodeAutocompleteFieldProps {
      */
     useTabForCompletions?: boolean;
     /** An additional element that is put to the left side of the input field */
-    leftElement?: JSX.Element | null;
+    leftElement?: React.JSX.Element | null;
     /** An additional element that is put to the right side of the input field
      */
-    rightElement?: JSX.Element | null;
+    rightElement?: React.JSX.Element | null;
     /** Placeholder tobe shown when no text has been entered, yet. */
     placeholder?: string;
     /** If the horizontal scrollbars should be shown. */
@@ -154,6 +155,8 @@ export interface CodeAutocompleteFieldProps {
     readOnly?: boolean;
     /** Properties that should be added to the outer div container. */
     outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
+    /** Intent state of the input field. Validation errors override this. */
+    intent?: IntentTypes;
 }
 
 // Meta data regarding a request
@@ -192,6 +195,7 @@ export const CodeAutocompleteField = ({
     height,
     readOnly,
     outerDivAttributes,
+    intent,
 }: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -204,7 +208,7 @@ export const CodeAutocompleteField = ({
     const validationRequestData = React.useRef<RequestMetaData>({ requestId: undefined });
     const errorMarkers = React.useRef<any[]>([]);
     const [validationResponse, setValidationResponse] = useState<CodeAutocompleteFieldValidationResult | undefined>(
-        undefined
+        undefined,
     );
     const [suggestionResponse, setSuggestionResponse] = useState<
         CodeAutocompleteFieldPartialAutoCompleteResult | undefined
@@ -214,7 +218,7 @@ export const CodeAutocompleteField = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
-    const currentCm = React.useRef<EditorView>();
+    const currentCm = React.useRef<EditorView>(undefined);
     currentCm.current = cm;
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
@@ -339,7 +343,7 @@ export const CodeAutocompleteField = ({
                         length,
                     }));
                     newSuggestions = [...newSuggestions, ...replacementsWithMetaData];
-                }
+                },
             );
             editorState.suggestions = newSuggestions;
             setSuggestions(newSuggestions);
@@ -361,7 +365,7 @@ export const CodeAutocompleteField = ({
         return { fromOffset, toOffset };
     };
 
-    const inputActionsDisplayed = React.useCallback((node) => {
+    const inputActionsDisplayed = React.useCallback((node: any) => {
         if (!node) return;
         const width = node.offsetWidth;
         const slCodeEditor = node.parentElement.getElementsByClassName(`${eccgui}-singlelinecodeeditor`);
@@ -392,12 +396,12 @@ export const CodeAutocompleteField = ({
                 setPathValidationPending(false);
             }
         },
-        [checkInput]
+        [checkInput],
     );
 
     const checkValuePathValidity = useMemo(
         () => debounce((inputString: string) => asyncCheckInput(inputString), validationRequestDelay),
-        [asyncCheckInput, validationRequestDelay]
+        [asyncCheckInput, validationRequestDelay],
     );
 
     const asyncHandleEditorInputChange = useMemo(
@@ -414,7 +418,7 @@ export const CodeAutocompleteField = ({
                 if (cursorLine) {
                     const result: CodeAutocompleteFieldPartialAutoCompleteResult | undefined = await fetchSuggestions(
                         inputString.split("\n")[cursorLine - 1], //line starts from 1
-                        cursorPosition
+                        cursorPosition,
                     );
                     if (value.current === inputString) {
                         setSuggestionResponse(result);
@@ -428,7 +432,7 @@ export const CodeAutocompleteField = ({
                 setSuggestionsPending(false);
             }
         },
-        [fetchSuggestions, cm]
+        [fetchSuggestions, cm],
     );
 
     const handleEditorInputChange = useMemo(
@@ -436,9 +440,9 @@ export const CodeAutocompleteField = ({
             debounce(
                 (inputString: string, cursorPosition: number) =>
                     asyncHandleEditorInputChange(inputString, cursorPosition),
-                autoCompletionRequestDelay
+                autoCompletionRequestDelay,
             ),
-        [asyncHandleEditorInputChange, autoCompletionRequestDelay]
+        [asyncHandleEditorInputChange, autoCompletionRequestDelay],
     );
 
     const handleChange = React.useMemo(() => {
@@ -620,16 +624,22 @@ export const CodeAutocompleteField = ({
         (item: CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined) => {
             setHighlightedElement(item);
         },
-        []
+        [],
     );
 
     const onSelection = React.useMemo(
         () => (ranges: IRange[]) => {
             selectedTextRanges.current = ranges;
         },
-        []
+        [],
     );
 
+    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
+    const effectiveIntent = hasError ? "danger" : intent;
+    const blueprintIntent =
+        effectiveIntent && !["info", "accent", "neutral"].includes(effectiveIntent) ? effectiveIntent : undefined;
+    const inputIntentClass = effectiveIntent ? ` ${eccgui}-intent--${effectiveIntent}` : "";
+
     const codeEditor = React.useMemo(() => {
         return (
             <ExtendedCodeEditor
@@ -661,9 +671,8 @@ export const CodeAutocompleteField = ({
         multiline,
         handleInputMouseDown,
         readOnly,
+        effectiveIntent,
     ]);
-
-    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
             id={id}
@@ -674,7 +683,7 @@ export const CodeAutocompleteField = ({
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
                     BlueprintClassNames.FILL
-                } ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}
+                } ${blueprintIntent ? BlueprintClassNames.intentClass(blueprintIntent as any) : ""}${inputIntentClass}`}
             >
                 <ContextOverlay
                     minimal
@@ -734,13 +743,11 @@ export const CodeAutocompleteField = ({
                     <>
                         {label}
                         &nbsp;
-                        {(pathValidationPending || suggestionsPending) && (
-                            <Spinner size="tiny" position="inline" />
-                        )}
+                        {(pathValidationPending || suggestionsPending) && <Spinner size="tiny" position="inline" />}
                     </>
                 ),
             }}
-            intent={hasError ? "danger" : undefined}
+            intent={effectiveIntent}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}

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/Breadcrumb/breadcrumb.scss

@@ -19,8 +19,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
         width: $eccgui-size-block-whitespace;
         height: auto;
         margin: 0;
-        text-align: center;
         vertical-align: middle;
+        text-align: center;
         content: ">";
         background: none;
     }
@@ -61,8 +61,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
 .#{$eccgui}-breadcrumb__item {
     display: inline-block;
     overflow: hidden;
-    font-size: inherit;
     text-overflow: ellipsis;
+    font-size: inherit;
 
     a {
         @extend .#{$eccgui}-breadcrumb__item;

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);