@eccenca/gui-elements 24.0.0-rc.2 → 24.0.0-rc.4

package/src/components/Grid/GridColumn.tsx

@@ -23,11 +23,6 @@ export interface GridColumnProps extends Omit<CarbonGridColumnProps<"div">, "max
      * Overwrite column sizes by using the original size config of the Carbon grid column.
      */
     carbonSizeConfig?: Pick<CarbonGridColumnProps<"div">, "max" | "xlg" | "lg" | "md" | "sm">;
-    /**
-     * @deprecated
-     * Grid column always uses full width if it is the only column and does not have any othe size config.
-     */
-    full?: boolean;
 }
 
 /**
@@ -39,7 +34,6 @@ export const GridColumn = ({
     className = "",
     small = false,
     medium = false,
-    full,
     verticalAlign = "top",
     carbonSizeConfig,
     ...otherProps

package/src/components/Icon/BaseIcon.tsx

@@ -34,7 +34,7 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
     className?: string;
     /**
      * Description for icon as accessibility fallback.
-     * @deprecated Use `title` as replacement.
+     * @deprecated (v25) Use `title` as replacement.
      */
     description?: string;
     /**
@@ -42,7 +42,7 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-     * @deprecated Use `title` as replacement.
+     * @deprecated (v25) Use `title` as replacement.
      */
     iconTitle?: CarbonIconProps["title"];
 }

package/src/components/Icon/Icon.tsx

@@ -25,12 +25,8 @@ const findExistingIcon = (
 
 /**
  * Returns the first icon name that exists or the fallback icon name.
- * @deprecated use `iconUtils.findExistingIconName`
  */
-export const findExistingIconName = (
-    iconNames: string[],
-    fallbackIconName: ValidIconName = "undefined"
-): ValidIconName => {
+const findExistingIconName = (iconNames: string[], fallbackIconName: ValidIconName = "undefined"): ValidIconName => {
     let foundIconName: string = fallbackIconName;
     const iconNameStack = [...iconNames];
     while (foundIconName === fallbackIconName && iconNameStack.length > 0) {

package/src/components/Icon/canonicalIconNames.tsx

@@ -1,14 +1,6 @@
 import * as icons from "@carbon/react/icons";
 import { CarbonIconType as IconType } from "@carbon/react/icons";
 
-export type CarbonIconType = IconType;
-
-/**
- * @deprecated
- * use CarbonIconType instead
- */
-export type IconSized = CarbonIconType;
-
 const canonicalIcons = {
     "application-activities": icons.Activity,
     "application-dataintegration": icons.DataUnstructured,
@@ -180,6 +172,8 @@ const canonicalIcons = {
     undefined: icons.Undefined,
 };
 
-export type ValidIconName = keyof typeof canonicalIcons;
 const canonicalIconNames: Record<ValidIconName, CarbonIconType> = canonicalIcons;
+
+export type CarbonIconType = IconType;
+export type ValidIconName = keyof typeof canonicalIcons;
 export default canonicalIconNames;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -12,15 +12,13 @@ import { TestableComponent } from "../interfaces";
 
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
+/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
 export interface MultiSelectSelectionProps<T> {
     newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-// @deprecated use `MultiSelectSelectionProps<T>`
-export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
-
 interface MultiSelectCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
@@ -37,7 +35,6 @@ interface MultiSelectCommonProps<T>
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -122,8 +119,15 @@ interface MultiSelectCommonProps<T>
      * If not provided, values are filtered by their labels
      */
     searchPredicate?: (item: T, query: string) => boolean;
+    /**
+     * Limits the height of the input target plus its dropdown menu when it is opened.
+     * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100).
+     * If not set than the dropdown menu cannot be larger that appr. the half of the available viewport hight.
+     */
+    limitHeightOpened?: boolean | number;
 }
 
+/** @deprecated (v25) use MultiSuggestFieldProps */
 export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
     (
         | {
@@ -143,13 +147,10 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
     );
 
 /**
- * **Element is deprecated for the current type of usage.**
- * Use `MultiSuggestField` as replacement.
- *
- * This component will be re-implemented later as a `Select` allowing multiple selections.
- * @deprecated
+ * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
+ * New name for this component is `MultiSuggestField`.
  */
-export function MultiSelect<T>({
+function MultiSelect<T>({
     items,
     selectedItems: externalSelectedItems,
     prePopulateWithItems,
@@ -177,6 +178,7 @@ export function MultiSelect<T>({
     "data-testid": dataTestid,
     wrapperProps,
     searchPredicate,
+    limitHeightOpened,
     ...otherMultiSelectProps
 }: MultiSelectProps<T>) {
     // Options created by a user
@@ -189,6 +191,8 @@ export function MultiSelect<T>({
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
         prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
     );
+    // Max height of the menu
+    const [calculatedMaxHeight, setCalculatedMaxHeight] = React.useState<string | null>(null);
 
     //currently focused element in popover list
     const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
@@ -249,6 +253,29 @@ export function MultiSelect<T>({
         setSelectedItems(externalSelectedItems);
     }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
+    React.useEffect(() => {
+        const calculateMaxHeight = () => {
+            if (inputRef.current) {
+                // Get the height of the input target
+                const inputTargetHeight = inputRef.current.getBoundingClientRect().height;
+                // Calculate the menu dropdown by using the limited height reduced by the target height
+                setCalculatedMaxHeight(`calc(${maxHeightToProcess}vh - ${inputTargetHeight}px)`);
+            }
+        };
+
+        const removeListener = () => {
+            window.removeEventListener("resize", calculateMaxHeight);
+        };
+
+        if (!limitHeightOpened || (typeof limitHeightOpened === "number" && limitHeightOpened > 100))
+            return removeListener;
+        const maxHeightToProcess = typeof limitHeightOpened === "number" ? limitHeightOpened : 100;
+
+        calculateMaxHeight();
+        window.addEventListener("resize", calculateMaxHeight);
+        return removeListener;
+    }, [limitHeightOpened, selectedItems]);
+
     /**
      * using the equality prop specified checks if an item has already been selected
      * @param matcher
@@ -439,7 +466,7 @@ export function MultiSelect<T>({
             <IconButton
                 disabled={disabled}
                 name="operation-clear"
-                data-test-id="clear-all-items" // @deprecated should be created from the given testid plus `_clearance` suffix
+                data-test-id={dataTestId ? dataTestId + "_clearance" : "clear-all-items"} // @deprecated (v25) automatically set test id will be removed
                 onClick={handleClear}
             />
         ) : undefined;
@@ -519,6 +546,11 @@ export function MultiSelect<T>({
                 {
                     "data-test-id": dataTestId ? dataTestId + "_drowpdown" : undefined,
                     "data-testid": dataTestid ? dataTestid + "_dropdown" : undefined,
+                    style: calculatedMaxHeight
+                        ? ({
+                              "--eccgui-multisuggestfield-max-height": `${calculatedMaxHeight}`,
+                          } as React.CSSProperties)
+                        : undefined,
                 } as BlueprintMultiSelectProps<T>["popoverContentProps"]
             }
         />
@@ -537,15 +569,10 @@ export function MultiSelect<T>({
     );
 }
 
-/** @deprecated */
-/*
-function ofType<U>() {
-    return (props: MultiSelectProps<U>) => <MultiSelect<U> {...props} />;
-}
-// */
-
 // we still return the Blueprint element here because it was already used like that
-// MultiSelect.ofType = ofType;
+/**
+ * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ */
 MultiSelect.ofType = BlueprintMultiSelect.ofType;
 
 export default MultiSelect;

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
-import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
+import { MultiSuggestField, MultiSuggestFieldSelectionProps, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
     p: 1,
-    avgSentencesPerParagraph: 5,
+    avgSentencesPerParagraph: 50,
     avgWordsPerSentence: 1,
     startWithLoremIpsum: false,
     random: false,
@@ -16,8 +17,8 @@ const testLabels = loremIpsum({
     .split(".")
     .map((item) => item.trim());
 
-const items = new Array(5).fill(undefined).map((_, id) => {
-    const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+    const testLabel = `${testLabels[id]}${id + 1}`;
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -36,9 +37,9 @@ export default {
 
 const Template: StoryFn<typeof MultiSuggestField> = (args) => {
     return (
-        <div>
+        <OverlaysProvider>
             <MultiSuggestField {...args} />
-        </div>
+        </OverlaysProvider>
     );
 };
 
@@ -91,7 +92,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
     const identity = useCallback((item: string): string => item, []);
 
     return (
-        <>
+        <OverlaysProvider>
             <div>Selected items loaded: {loaded.toString()}</div>
 
             <br />
@@ -107,7 +108,7 @@ const DeferredSelectionTemplate: StoryFn = () => {
             <br />
 
             <button onClick={() => setLoaded((prev) => !prev)}>Toggle selected</button>
-        </>
+        </OverlaysProvider>
     );
 };
 
@@ -135,21 +136,23 @@ const CreationTemplate: StoryFn = () => {
 
     const identity = useCallback((item: string): string => item, []);
 
-    const handleOnSelect = useCallback((params: MultiSelectSelectionProps<string>) => {
+    const handleOnSelect = useCallback((params: MultiSuggestFieldSelectionProps<string>) => {
         const selected = params.selectedItems;
 
         setSelectedValues(selected);
     }, []);
 
     return (
-        <MultiSuggestField<string>
-            items={items}
-            selectedItems={selectedValues}
-            onSelection={handleOnSelect}
-            itemId={identity}
-            itemLabel={identity}
-            createNewItemFromQuery={identity}
-        />
+        <OverlaysProvider>
+            <MultiSuggestField<string>
+                items={items}
+                selectedItems={selectedValues}
+                onSelection={handleOnSelect}
+                itemId={identity}
+                itemLabel={identity}
+                createNewItemFromQuery={identity}
+            />
+        </OverlaysProvider>
     );
 };
 
@@ -173,7 +176,7 @@ const WithResetButtonComponent = (): JSX.Element => {
     };
 
     return (
-        <div>
+        <OverlaysProvider>
             <button onClick={handleReset}>Reset</button>
             <br />
             <br />
@@ -185,7 +188,7 @@ const WithResetButtonComponent = (): JSX.Element => {
                 itemLabel={({ testLabel }) => testLabel}
                 createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })}
             />
-        </div>
+        </OverlaysProvider>
     );
 };
 
@@ -215,7 +218,7 @@ const WithinModal = (): JSX.Element => {
     };
 
     return (
-        <>
+        <OverlaysProvider>
             <button onClick={() => setIsOpen(true)}>open modal</button>
 
             <SimpleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} canOutsideClickClose>
@@ -233,7 +236,7 @@ const WithinModal = (): JSX.Element => {
                     />
                 </div>
             </SimpleDialog>
-        </>
+        </OverlaysProvider>
     );
 };
 

package/src/components/MultiSuggestField/MultiSuggestField.tsx

@@ -1,9 +1,16 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { MultiSelect, MultiSelectProps } from "../MultiSelect/MultiSelect";
+import MultiSelect, { MultiSelectProps, MultiSelectSelectionProps } from "../MultiSelect/MultiSelect";
 
-export type MultiSuggestFieldProps<T> = MultiSelectProps<T>;
+export type MultiSuggestFieldSelectionProps<T> = MultiSelectSelectionProps<T>;
+
+export interface MultiSuggestFieldProps<T> extends Omit<MultiSelectProps<T>, "onSelection"> {
+    /**
+     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
+     */
+    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
+}
 
 /**
  * Element behaves very similar to `SuggestField` but allows multiple selections.
@@ -16,7 +23,13 @@ export function MultiSuggestField<T>({ className, ...otherProps }: MultiSuggestF
     return (
         <MultiSelect<T>
             className={`${eccgui}-multisuggestfield` + (className ? ` ${className}` : "")}
-            {...otherProps}
+            {...(otherProps as MultiSelectProps<T>)}
         />
     );
 }
+
+// we still return the Blueprint element here because it was already used like that
+/**
+ * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ */
+MultiSuggestField.ofType = MultiSelect.ofType;

package/src/components/MultiSuggestField/_multisuggestfield.scss

@@ -0,0 +1,8 @@
+@import "~@blueprintjs/select/src/components/multi-select/multi-select";
+
+.#{$ns}-multi-select-popover {
+    .#{$ns}-menu {
+        max-width: unset;
+        max-height: var(--eccgui-multisuggestfield-max-height, 45vh);
+    }
+}

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -3,13 +3,13 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
-import { MultiSuggestField } from "../MultiSuggestField";
+import { MultiSuggestField } from "../../../../index";
 import { CustomSearch, Default, dropdownOnFocus, predefinedNotControlledValues } from "../MultiSuggestField.stories";
 
-const testLabels = ["label1", "label2", "label3", "label4", "label5"];
+//const testLabels = ["label1", "label2", "label3", "label4", "label5"];
 
-const items = new Array(5).fill(undefined).map((_, id) => {
-    const testLabel = testLabels[id];
+const items = new Array(50).fill(undefined).map((_, id) => {
+    const testLabel = `label${id + 1}`;
     return { testLabel, testId: `${testLabel}-id` };
 });
 
@@ -81,7 +81,7 @@ describe("MultiSuggestField", () => {
 
             expect(container.querySelectorAll("[data-tag-index]").length).toBe(selectedLength);
 
-            const clearButton = container.querySelector('[data-test-id="clear-all-items"');
+            const clearButton = container.querySelector('[data-test-id="multi-suggest-field_clearance"');
 
             expect(clearButton).toBeInTheDocument();
 
@@ -108,7 +108,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(dropdownOnFocus.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "ex" } });
+            fireEvent.change(input, { target: { value: "cras" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -165,7 +165,7 @@ describe("MultiSuggestField", () => {
 
             const { rerender, container } = render(<MultiSuggestField {...args} data-test-id="multi-suggest-field" />);
 
-            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+            const clearButtonBefore = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
             expect(clearButtonBefore).not.toBeInTheDocument();
 
@@ -186,7 +186,7 @@ describe("MultiSuggestField", () => {
             });
 
             await waitFor(() => {
-                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+                const clearButtonAfter = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
                 expect(clearButtonAfter).toBeInTheDocument();
 
@@ -277,7 +277,7 @@ describe("MultiSuggestField", () => {
                 expect(menuItems.length).toBe(CustomSearch.args.items.length);
             });
 
-            fireEvent.change(input, { target: { value: "label1" } });
+            fireEvent.change(input, { target: { value: "label11" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -289,10 +289,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id" } });
+            fireEvent.change(input, { target: { value: "label11-id" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -304,10 +304,10 @@ describe("MultiSuggestField", () => {
                 const item = menuItems[0];
 
                 const [div] = item.getElementsByTagName("div");
-                expect(div.textContent).toBe("label1");
+                expect(div.textContent).toBe("label11");
             });
 
-            fireEvent.change(input, { target: { value: "label1-id-other" } });
+            fireEvent.change(input, { target: { value: "label11-id-other" } });
 
             await waitFor(() => {
                 const listbox = screen.getByRole("listbox");
@@ -399,7 +399,7 @@ describe("MultiSuggestField", () => {
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
             const [input] = inputContainer.getElementsByTagName("input");
 
-            const clearButtonBefore = container.querySelector("[data-test-id='clear-all-items'");
+            const clearButtonBefore = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
             expect(clearButtonBefore).not.toBeInTheDocument();
 
@@ -451,7 +451,7 @@ describe("MultiSuggestField", () => {
             });
 
             await waitFor(() => {
-                const clearButtonAfter = container.querySelector("[data-test-id='clear-all-items'");
+                const clearButtonAfter = container.querySelector("[data-test-id='multi-suggest-field_clearance'");
 
                 expect(clearButtonAfter).toBeInTheDocument();
 
@@ -549,5 +549,99 @@ describe("MultiSuggestField", () => {
             const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]");
             expect(tagsAfterRemove.length).toBe(0);
         });
+
+        it("should not contain the custom css property when limitHeightOpened not provided", async () => {
+            const { container } = render(
+                <MultiSuggestField {...Default.args} openOnKeyDown={false} data-testid="multi-suggest-field" />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should notcontain the custom css property when limitHeightOpened greater than 100", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={110}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeFalsy();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened is true", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
+
+        it("should contain the custom css property when limitHeightOpened a valid number value", async () => {
+            const { container } = render(
+                <MultiSuggestField
+                    {...Default.args}
+                    openOnKeyDown={false}
+                    limitHeightOpened={80}
+                    data-testid="multi-suggest-field"
+                />
+            );
+
+            const [inputTargetContainer] = container.getElementsByClassName("eccgui-multiselect");
+
+            fireEvent.click(inputTargetContainer);
+
+            await waitFor(() => {
+                const dropdown = screen.getByTestId("multi-suggest-field_dropdown");
+
+                const customProperty = (dropdown as HTMLElement)?.style?.getPropertyValue(
+                    "--eccgui-multisuggestfield-max-height"
+                );
+
+                expect(customProperty).toBeDefined();
+            });
+        });
     });
 });

package/src/components/Notification/Notification.tsx

@@ -44,13 +44,6 @@ export interface NotificationProps
      * This defines the colorization and the icon symbol.
      */
     danger?: boolean;
-    /**
-     * @deprecated
-     * Notification uses the the given space more flexible.
-     * Deprecation notice: Property name will removed in future versions.
-     * Please use `flexWidth`.
-     */
-    fullWidth?: boolean;
     /**
      * Notification uses the the given space more flexible.
      * Default notification is displayed in min and max limits.
@@ -62,11 +55,6 @@ export interface NotificationProps
      * Set it to false if you need to prevent automatically set icon regarding the notification type.
      */
     icon?: false | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
-    /**
-     * @deprecated
-     * Icon used as depiction that is displayed with the notification.
-     */
-    iconName?: ValidIconName | null;
     /**
      * If set then a `div` element is used as wrapper.
      * It uses the attributes given via this property.
@@ -87,9 +75,7 @@ export const Notification = ({
     warning = false,
     danger = false,
     neutral = false,
-    fullWidth = false, // deprecated
     flexWidth = false,
-    iconName = "state-info", // deprecated
     icon,
     timeout,
     wrapperProps,
@@ -98,7 +84,7 @@ export const Notification = ({
     ...otherProps
 }: NotificationProps) => {
     let intentLevel: string = IntentClassNames.INFO;
-    let iconSymbol = iconName;
+    let iconSymbol = "state-info";
     switch (true) {
         case success:
             intentLevel = IntentClassNames.SUCCESS;
@@ -119,7 +105,7 @@ export const Notification = ({
 
     let notificationIcon = icon !== false ? icon : undefined;
     if (icon !== false && !notificationIcon && !!iconSymbol) {
-        notificationIcon = <Icon name={iconSymbol} />;
+        notificationIcon = <Icon name={iconSymbol as ValidIconName} />;
     }
 
     const content = actions ? (
@@ -139,7 +125,6 @@ export const Notification = ({
                 `${eccgui}-notification ` +
                 intentLevel +
                 (className ? ` ${className}` : "") +
-                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") + // deprecated
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
             }

package/src/components/Notification/notification.scss

@@ -60,8 +60,7 @@
     }
 }
 
-.#{$eccgui}-notification--flexwidth,
-.#{$eccgui}-notification--fullwidth {
+.#{$eccgui}-notification--flexwidth {
     min-width: 0;
     max-width: none;
 }