@eccenca/gui-elements 25.0.0 → 25.1.0-changeupgradedtoreact18cmem6639.0

package/src/components/Notification/notification.scss

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

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
     /**
      * Display element while the rendering of the actual children is delayed.
      */
-    delaySkeleton?: JSX.Element;
+    delaySkeleton?: React.JSX.Element;
 }
 
 /**

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -35,7 +35,7 @@ export const OverviewItemDepiction = ({
         "type" in children &&
         (children.type === Icon || children.type === TestIcon)
     ) {
-        return <Depiction image={children as JSX.Element} {...defaultDepictionDisplay} />;
+        return <Depiction image={children as React.JSX.Element} {...defaultDepictionDisplay} />;
     }
     return (
         <div

package/src/components/OverviewItem/overviewitem.scss

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

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

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

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

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

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

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import png16to9 from "../../Depiction/stories/test-16to9.png";
 
-import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index";
+import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../components";
 import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories";
 
 export default {

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

@@ -2,7 +2,7 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { OverviewItemDescription, OverviewItemLine } from "./../../../../index";
+import { OverviewItemDescription, OverviewItemLine } from "./../../../components";
 
 export default {
     title: "Components/OverviewItem/OverviewItemDescription",
@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for text content.",
         },
     },

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

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

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

@@ -10,6 +10,14 @@ export default {
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
+const ContainerQueriesExample = (args) => (
+    <>
+        <Pagination {...args} style={{ maxWidth: "100%" }} />
+        <Pagination {...args} style={{ maxWidth: "32rem" }} />
+        <Pagination {...args} style={{ maxWidth: "26rem" }} />
+    </>
+);
+
 export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
@@ -28,3 +36,27 @@ ExtendedPagesizeSelection.args = {
         { text: "Large page with 100 items", value: "100" },
     ],
 };
+
+/**
+ * This story demonstrates a minimal pagination and is a check that elements are always hidden.
+ */
+export const MinimalPagination: StoryFn<typeof Pagination> = PaginationExample.bind({});
+MinimalPagination.args = {
+    ...Default.args,
+    hidePageSizeConfiguration: true,
+    hidePageSelect: true,
+    hideInfoText: true,
+    hideNavigationArrows: false,
+    hideBorders: false,
+};
+
+/**
+ * Demonstrates the breakpoints of the container queries.
+ * If the container gets too small, some elements are removed automatically.
+ * First, page selector disappears, then the page size selector.
+ * Info text and navigation arrow are never hidden automatically.
+ */
+export const ContainerQueries: StoryFn<typeof Pagination> = ContainerQueriesExample.bind({});
+ContainerQueries.args = {
+    ...Default.args,
+};

package/src/components/Pagination/pagination.scss

@@ -7,6 +7,8 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 $eccgui-size-pagination-height-medium: $pt-button-height !default;
 $eccgui-size-pagination-height-small: $pt-button-height-small !default;
 $eccgui-size-pagination-height-large: $pt-button-height-large !default;
+$eccgui-size-pagination-breakpoint-wide: 32rem !default;
+$eccgui-size-pagination-breakpoint-small: 26rem !default;
 
 .#{$prefix}--pagination {
     min-block-size: $eccgui-size-pagination-height-medium;
@@ -15,8 +17,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
-        font-size: 100%;
         text-overflow: clip;
+        font-size: 100%;
     }
 }
 
@@ -38,7 +40,7 @@ span.#{$prefix}--pagination__text {
         padding-left: 0;
 
         & > *:not(:last-child) {
-            display: none;
+            display: none !important;
         }
     }
 }
@@ -56,7 +58,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
-        display: none;
+        display: none !important;
     }
 
     & .#{$prefix}--select__item-count .#{$prefix}--select-input {
@@ -66,13 +68,13 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hidepageselect {
     .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
-        display: none;
+        display: none !important;
     }
 }
 
 .#{$eccgui}-pagination--hidenavigation {
     .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
-        display: none;
+        display: none !important;
     }
 }
 
@@ -137,3 +139,51 @@ span.#{$prefix}--pagination__text {
         line-height: $eccgui-size-pagination-height-large;
     }
 }
+
+// fix breakpoints for container queries
+// Carbon does not provide the option to configure that breakpoint
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+        .#{$prefix}--pagination__left > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__left > * {
+            display: none;
+        }
+        .#{$prefix}--pagination__items-count {
+            margin-left: 0;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: none;
+        }
+
+        .#{$prefix}--pagination__items-count {
+            display: initial;
+        }
+
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+    }
+}

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -7,7 +7,7 @@ import { PropertyValuePair } from "./PropertyValuePair";
 export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
     /**
      * Only use one single column and put property label and value below each other.
-     * This property is forwardd to direct `PropertyValuePair` children.
+     * This property is forward to direct `PropertyValuePair` children.
      */
     singleColumn?: boolean;
 }

package/src/components/PropertyValuePair/propertyvalue.scss

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

package/src/components/RadioButton/RadioButton.tsx

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

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

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

package/src/components/RadioButton/radiobutton.scss

@@ -1,6 +1,10 @@
 // Checkbox need to be imported before, we won't double it here currently
 
 .#{$ns}-control {
+    --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+    --#{$eccgui}-a11y-outline-width: 2px;
+    --#{$eccgui}-a11y-outline-offset: 0;
+
     &.#{$ns}-radio {
         input ~ .#{$ns}-control-indicator,
         input:checked ~ .#{$ns}-control-indicator {
@@ -8,7 +12,7 @@
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            outline-offset: 1px;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -29,3 +33,16 @@
         }
     }
 }
+
+.#{$eccgui}-radiobutton--hidden-indicator {
+    &:not(.#{$ns}-align-right) {
+        padding-inline-start: 0;
+    }
+    &:not(.#{$ns}-align-left) {
+        padding-inline-end: 0;
+    }
+
+    input ~ .#{$ns}-control-indicator {
+        visibility: hidden;
+    }
+}

package/src/components/Select/Select.tsx

@@ -1,11 +1,13 @@
 import React from "react";
-import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core";
-import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select";
+import {Classes as BlueprintClasses, InputGroupProps} from "@blueprintjs/core";
+import {Select as BlueprintSelect, SelectProps as BlueprintSelectProps} from "@blueprintjs/select";
 
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { TestableComponent } from "../interfaces";
-
-import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import {TestableComponent} from "../interfaces";
+import {Button, ButtonProps} from "../Button/Button";
+import {ContextOverlayProps} from "../ContextOverlay";
+import OverflowText from "../Typography/OverflowText";
+import Icon from "../Icon/Icon";
 
 export interface SelectProps<T>
     extends TestableComponent,

package/src/components/Separation/separation.scss

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

package/src/components/Skeleton/Skeleton.tsx

@@ -6,7 +6,7 @@ export interface SkeletonProps {
     /**
      * Element that need to displayed using the skeleton styles.
      */
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 }
 
 /**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,

package/src/components/Structure/TitleSubsection.tsx

@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
     /**
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
-    useHtmlElement?: keyof JSX.IntrinsicElements;
+    useHtmlElement?: keyof React.JSX.IntrinsicElements;
 }
 
 export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {

package/src/components/Table/Table.tsx

@@ -50,7 +50,7 @@ export function Table({
     children,
     ...otherCarbonTableProps
 }: TableProps) {
-    let colLayout: boolean | JSX.Element = false;
+    let colLayout: boolean | React.JSX.Element = false;
     if (!!columnWidths && columnWidths.length > 0) {
         colLayout = (
             <colgroup className={`${eccgui}-simpletable__layout`}>

package/src/components/Table/TableContainer.tsx

@@ -19,14 +19,14 @@ export interface TableDataContainerProps
             >,
             "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
         >,
-        React.TableHTMLAttributes<HTMLTableElement> {
-    children(signature: any): JSX.Element;
+        Omit<React.TableHTMLAttributes<HTMLTableElement>, "children">  {
+    children(signature: any): React.JSX.Element;
     size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
     extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
         React.HTMLAttributes<HTMLDivElement> {
-    children?: JSX.Element;
+    children?: React.JSX.Element;
 }
 
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
@@ -46,7 +46,7 @@ export function TableContainer({ className = "", ...otherProps }: TableContainer
             />
         </CarbonDataTable.TableContainer>
     ) : (
-        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+        <CarbonDataTable.TableContainer {...{...otherProps, children: otherProps.children as React.ReactNode}} className={`${eccgui}-simpletable__container ` + className} />
     );
 }
 

package/src/components/Table/TableExpandRow.tsx

@@ -6,7 +6,7 @@ import { usePrefix as carbonPrefix } from "@carbon/react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 import IconButton from "./../Icon/IconButton";
-import { TableCell } from "./index";
+import TableCell from "./TableCell";
 
 // workaround to get type/interface
 type CarbonTableExpandRowProps = React.ComponentProps<typeof CarbonTableExpandRow>;

package/src/components/Table/table.scss

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

package/src/components/Tabs/TabTitle.tsx

@@ -29,7 +29,7 @@ export interface TabTitleProps {
     /**
      * Add a tooltip to a tab, displayed when user hoveres over it.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Make the tab not usable, display is also narrowed.
      */

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

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

package/src/components/Tabs/tabs.scss

@@ -39,15 +39,15 @@ $tab-indicator-width: 3px !default;
         max-width: 15rem;
         margin-bottom: $tab-indicator-width;
         color: inherit;
-        border-radius: 0;
         outline: none;
+        border-radius: 0;
 
         .#{$ns}-button-text {
             overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            //min-width: 6em;
+            // min-width: 6em;
         }
 
         &::before,

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

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
-import { Tag } from "./../../../../index";
+import { Tag } from "./../../../components";
 
 export default {
     title: "Components/Tag",

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

@@ -1,14 +1,14 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tag, TagList } from "./../../../../index";
+import { Tag, TagList } from "./../../../components";
 
 export default {
     title: "Components/Tag",
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };