@eccenca/gui-elements 23.1.0 → 23.2.0-rc.1

package/src/components/Notification/notification.scss

@@ -1,26 +1,25 @@
 // TODO: add vars and process them
 
 @use "sass:math";
-
 @import "~@blueprintjs/core/src/components/toast/toast";
 
 .#{$eccgui}-notification {
-    border-style: solid;
-    border-width: 1px 1px 1px 0.25rem;
-    border-color: $eccgui-color-application-text;
-    color: $eccgui-color-application-text;
-    background-color: $eccgui-color-application-background;
-    font-size: 1rem;
-    line-height: $eccgui-size-typo-base-lineheight;
-    min-width: math.div(4, 16) * 100vw;
     width: 100%;
+    min-width: math.div(4, 16) * 100vw;
     max-width: 40rem;
     margin-top: $eccgui-size-block-whitespace;
+    font-size: 1rem;
+    line-height: $eccgui-size-typo-base-lineheight;
+    color: $eccgui-color-application-text;
+    background-color: $eccgui-color-application-background;
+    border-color: $eccgui-color-application-text;
+    border-style: solid;
+    border-width: 1px 1px 1px 0.25rem;
 
     & > .#{$eccgui}-icon {
-        color: inherit;
         flex-grow: 0;
         flex-shrink: 0;
+        color: inherit;
     }
 
     &.#{$eccgui}-notification--static > .#{$ns}-button-group {
@@ -31,29 +30,33 @@
 
     &:not(.#{$eccgui}-notification--toast) {
         max-width: none;
-        box-shadow: none;
         margin-top: 0;
+        box-shadow: none;
+    }
+
+    .#{$eccgui}-card__content & {
+        min-width: unset;
     }
 
     &.#{$eccgui}-intent--info {
-        border-color: $eccgui-color-info-text;
         color: $eccgui-color-info-text;
         background-color: $eccgui-color-info-background;
+        border-color: $eccgui-color-info-text;
     }
     &.#{$eccgui}-intent--success {
-        border-color: $eccgui-color-success-text;
         color: $eccgui-color-success-text;
         background-color: $eccgui-color-success-background;
+        border-color: $eccgui-color-success-text;
     }
     &.#{$eccgui}-intent--warning {
-        border-color: $eccgui-color-warning-text;
         color: $eccgui-color-warning-text;
         background-color: $eccgui-color-warning-background;
+        border-color: $eccgui-color-warning-text;
     }
     &.#{$eccgui}-intent--danger {
-        border-color: $eccgui-color-danger-text;
         color: $eccgui-color-danger-text;
         background-color: $eccgui-color-danger-background;
+        border-color: $eccgui-color-danger-text;
     }
 }
 
@@ -65,15 +68,15 @@
 
 .#{$eccgui}-notification__content {
     display: flex;
-    justify-content: space-between;
     align-items: baseline;
+    justify-content: space-between;
     margin: -10px; // TODO: use blueprint var ofr toast padding here
 }
 
 .#{$eccgui}-notification__messagebody {
-    padding: 10px; // TODO: use blueprint var ofr toast padding here
     flex-grow: 1;
     flex-shrink: 1;
+    padding: 10px; // TODO: use blueprint var ofr toast padding here
 }
 
 .#{$eccgui}-notification__actions {

package/src/components/NumericInput/NumericInput.tsx

@@ -1,4 +1,6 @@
-import { NumericInput } from "@blueprintjs/core";
+import { NumericInput as BlueprintNumericInput } from "@blueprintjs/core";
 import { memo } from "react";
 
-export default memo(NumericInput);
+// @deprecated will be remove because beside the special arrow buttons it does not add any special. Could be done also with TextField + correct `type`.
+export const NumericInput = memo(BlueprintNumericInput)
+export default NumericInput;

package/src/components/OverviewItem/OverviewItem.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,21 +17,20 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
  * This element can include all basic information and actions to give an overview about the item.
  * Mainly used in items list or to create basic widgets.
  */
-function OverviewItem({
+export const OverviewItem = ({
     children,
-    className = '',
+    className = "",
     densityHigh = false,
     hasSpacing = false,
     ...otherProps
-}: OverviewItemProps) {
-
+}: OverviewItemProps) => {
     const item = (
         <div
             {...otherProps}
             className={
                 `${eccgui}-overviewitem__item ` +
-                (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : '') +
-                (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : '') +
+                (densityHigh ? `${eccgui}-overviewitem__item--highdensity ` : "") +
+                (hasSpacing ? `${eccgui}-overviewitem__item--hasspacing ` : "") +
                 className
             }
         >
@@ -38,24 +38,15 @@ function OverviewItem({
         </div>
     );
 
-    let accessibilityParameters:  { [key: string]: any; } = {};
-    if (
-        typeof otherProps.onClick !== 'undefined' ||
-        typeof otherProps.onKeyDown !== 'undefined'
-    ) {
-        accessibilityParameters['tabIndex'] = 0;
+    const accessibilityParameters: { [key: string]: any } = Object.create(null);
+    if (typeof otherProps.onClick !== "undefined" || typeof otherProps.onKeyDown !== "undefined") {
+        accessibilityParameters["tabIndex"] = 0;
     }
-    if (
-        typeof otherProps.onClick !== 'undefined' &&
-        typeof otherProps.onKeyDown !== 'undefined'
-    ) {
-        accessibilityParameters['role'] = "button";
+    if (typeof otherProps.onClick !== "undefined" && typeof otherProps.onKeyDown !== "undefined") {
+        accessibilityParameters["role"] = "button";
     }
 
-    return React.cloneElement(
-            item,
-            accessibilityParameters
-    );
-}
+    return React.cloneElement(item, accessibilityParameters);
+};
 
 export default OverviewItem;

package/src/components/OverviewItem/OverviewItemActions.tsx

@@ -12,12 +12,12 @@ export interface OverviewItemActionsProps extends React.HTMLAttributes<HTMLDivEl
  * Contains an arbitrary number of elements for user-interactions.
  * It does not make sense to include more than 1 or 2 of these elements within `OverviewItem`.
  */
-function OverviewItemActions ({
+export const OverviewItemActions = ({
     children,
     className = '',
     hiddenInteractions = false,
     ...restProps
-}: OverviewItemActionsProps) {
+}: OverviewItemActionsProps) => {
     return (
         <div
             {...restProps}

package/src/components/OverviewItem/OverviewItemDepiction.tsx

@@ -9,12 +9,12 @@ export interface OverviewItemDepictionProps extends React.HTMLAttributes<HTMLDiv
     keepColors?: boolean;
 }
 
-function OverviewItemDepiction({
+export const OverviewItemDepiction = ({
     children,
     className = '',
     keepColors = false,
     ...restProps
-}: OverviewItemDepictionProps) {
+}: OverviewItemDepictionProps) => {
     const defaultDepictionDisplay = {
         // mimic OverviewItemDepiction "behaviour"
         border: false,

package/src/components/OverviewItem/OverviewItemDescription.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function OverviewItemDescription({
+export interface OverviewItemDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const OverviewItemDescription = ({
     children,
-    className = '',
-    ...restProps
-}: React.HTMLAttributes<HTMLDivElement>) {
+    className = "",
+    ...otherDivProps
+}: OverviewItemDescriptionProps) => {
     return (
-        <div {...restProps} className={`${eccgui}-overviewitem__description `+className}>
+        <div {...otherDivProps} className={`${eccgui}-overviewitem__description ` + className}>
             {children}
         </div>
     )

package/src/components/OverviewItem/OverviewItemLine.tsx

@@ -18,13 +18,13 @@ export interface OverviewItemLineProps extends React.HTMLAttributes<HTMLDivEleme
  * If the content overflows the container then this part of the content is hidden.
  * It does not make sense to include more that 2 or 3 of those lines within one `OverviewItemDescription`.
  */
-function OverviewItemLine({
+export const OverviewItemLine = ({
     children,
     className = '',
     small=false,
     large=false,
     ...restProps
-}: OverviewItemLineProps) {
+}: OverviewItemLineProps) => {
     return (
         <div
             {...restProps}

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -25,7 +25,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
  * This element can include all basic information and actions to give an overview about the item.
  * Mainly used in items list or to create basic widgets.
  */
-function OverviewItemList({
+export const OverviewItemList = ({
     children,
     className = '',
     densityHigh = false,
@@ -33,7 +33,7 @@ function OverviewItemList({
     hasSpacing = false,
     columns=1,
     ...restProps
-}: OverviewItemListProps) {
+}: OverviewItemListProps) => {
     return (
         <ol
             {...restProps}

package/src/components/OverviewItem/index.ts

@@ -0,0 +1,6 @@
+export * from "./OverviewItem";
+export * from "./OverviewItemDepiction";
+export * from "./OverviewItemDescription";
+export * from "./OverviewItemLine";
+export * from "./OverviewItemActions";
+export * from "./OverviewItemList";

package/src/components/Pagination/Pagination.tsx

@@ -32,7 +32,7 @@ export interface PaginationProps extends CarbonPaginationProps {
     hideBorders?: boolean;
 }
 
-function Pagination({
+export const Pagination = ({
     className,
     hidePageSizeConfiguration = false,
     hideInfoText = false,
@@ -40,7 +40,7 @@ function Pagination({
     hideNavigationArrows = false,
     hideBorders = false,
     ...otherProps
-}: PaginationProps) {
+}: PaginationProps) => {
     return (
         <CarbonPagination
             {...otherProps}

package/src/components/PropertyValuePair/PropertyName.tsx

@@ -1,13 +1,28 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Label from "../Label/Label";
 
-function PropertyName({ className = "", children, ...otherProps }: any) {
+export interface PropertyNameProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Increase or decrease the width used for the property name.
+     */
+    size?: "small" | "medium" | "large";
+}
+
+export const PropertyName = ({ className = "", size, children, ...otherProps }: PropertyNameProps) => {
     return (
-        <dt className={`${eccgui}-propertyvalue__property` + (className ? " " + className : "")} {...otherProps}>
+        <dt
+            className={
+                `${eccgui}-propertyvalue__property` +
+                (size ? ` ${eccgui}-propertyvalue__property--${size}` : "") +
+                (className ? " " + className : "")
+            }
+            {...otherProps}
+        >
             <div>{typeof children === "string" ? <Label text={children} isLayoutForElement="span" /> : children}</div>
         </dt>
     );
-}
+};
 
 export default PropertyName;

package/src/components/PropertyValuePair/PropertyValue.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValue({ className = "", children, ...otherProps }: any) {
+export interface PropertyValueProps extends React.HTMLAttributes<HTMLElement> {};
+
+export const PropertyValue = ({ className = "", children, ...otherProps }: PropertyValueProps) => {
     return (
         <dd className={`${eccgui}-propertyvalue__value` + (className ? " " + className : "")} {...otherProps}>
             <div>{children}</div>

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValueList({ className = "", children, ...otherProps }: any) {
+export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {};
+
+export const PropertyValueList = ({ className = "", children, ...otherProps }: PropertyValueListProps) => {
     return (
         <dl className={`${eccgui}-propertyvalue__list` + (className ? " " + className : "")} {...otherProps}>
             {children}

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -1,7 +1,24 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-function PropertyValuePair({ className = "", children, hasSpacing = false, hasDivider = false, ...otherProps }: any) {
+export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Add a bit white space to the bottom of the element.
+     */
+    hasSpacing?: boolean;
+    /**
+     * Add a horizontal rule to the bottom of the element.
+     */
+    hasDivider?: boolean;
+};
+
+export const PropertyValuePair = ({
+    className = "",
+    children,
+    hasSpacing = false,
+    hasDivider = false,
+    ...otherProps
+}: PropertyValuePairProps) => {
     return (
         <div
             className={

package/src/components/PropertyValuePair/index.ts

@@ -0,0 +1,4 @@
+export * from "./PropertyName";
+export * from "./PropertyValue";
+export * from "./PropertyValuePair";
+export * from "./PropertyValueList";

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -46,9 +46,25 @@
     }
 }
 
+.#{$eccgui}-propertyvalue__property--small {
+    width: math.div(2, 16) * 100%;
+
+    & + .#{$eccgui}-propertyvalue__value {
+        margin-left: math.div(2, 16) * 100%;
+    }
+}
+
+.#{$eccgui}-propertyvalue__property--large {
+    width: math.div(5, 16) * 100%;
+
+    & + .#{$eccgui}-propertyvalue__value {
+        margin-left: math.div(5, 16) * 100%;
+    }
+}
+
 .#{$eccgui}-propertyvalue__value {
-    margin-left: math.div(3, 16) * 100%;
     box-sizing: content-box;
+    margin-left: math.div(3, 16) * 100%;
 
     &:not(:last-child) {
         .#{$eccgui}-propertyvalue__pair--hasdivider > & {

package/src/components/RadioButton/RadioButton.tsx

@@ -5,15 +5,15 @@ import {
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface RadioButtonProps extends BlueprintRadioProps {
+export interface RadioButtonProps extends BlueprintRadioProps {
     // currently we do not alter it
 };
 
-function RadioButton({
+export const RadioButton = ({
     children,
     className='',
     ...restProps
-}: RadioButtonProps) {
+}: RadioButtonProps) => {
     return (
         <BlueprintRadioButton
             {...restProps}

package/src/components/Select/Select.stories.tsx

@@ -1,35 +1,64 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-  Select,
-  Button,
-  MenuItem,
-} from "../../index";
+import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Button, MenuItem, Select } from "../../index";
 
 export default {
-  title: "Forms/Select",
-  component: Select,
-  argTypes: {
-  },
-} as ComponentMeta<typeof Select>;
+    title: "Forms/Select",
+    component: Select,
+    argTypes: {
+        icon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+    },
+} as Meta<typeof Select>;
 
-const Template: ComponentStory<typeof Select> = (args) => (
-    <Select {...args}>
-        <Button alignText="left" text="Select an element" fill outlined rightIcon="toggler-showmore"/>
-    </Select>
-);
+const Template: StoryFn<typeof Select> = (args) => <Select {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
     items: loremIpsum({ p: 1, avgSentencesPerParagraph: 5, random: false })
         .toString()
         .split(".")
-        .map((item) => { return { label: item }}),
+        .map((item) => {
+            return { label: item };
+        }),
     itemRenderer: (item, props) => {
-        return <MenuItem text={item.label} />
+        return <MenuItem text={item.label} title={item.label} />;
     },
     fill: true,
-    filterable: false,
-}
+    // placeholder: loremIpsum({ p: 1, avgSentencesPerParagraph: 5, random: false })
+};
+
+/**
+ * A controlled select target is used by adding `children` elements to `<Select />` directly.
+ * Properties like `text`, `placeholder`, `onClearanceHandler` and `onClearanceText` won't be evaluated then.
+ */
+export const ControlledTarget = Template.bind({});
+ControlledTarget.args = {
+    ...Default.args,
+    fill: false,
+    children: <Button text="Controlled select target" intent="primary" />,
+};
+
+/**
+ * If the selection is not mandatory it is suggested to add an option letting the user reset the select value.
+ * `onClearanceHandler` follows the pattern to add a button on the right side of the element.
+ * An alternate way would be to add an additional select item to reset the value but this could come with a few usablity issues:
+ * user do not see it when the options are filtered, or the "empty" select option leads to the pre-selected option, etc.
+ */
+export const ClearanceOption = Template.bind({});
+ClearanceOption.args = {
+    ...Default.args,
+    text: "Example selection",
+    onClearanceText: "Reset the selection",
+    //onClearanceHandler: false,
+    onClearanceHandler: () => {
+        alert("Reset now.");
+    },
+};

package/src/components/Select/Select.tsx

@@ -1,38 +1,113 @@
 import React from "react";
-import {
-    Select2 as BlueprintSelect,
-    Select2Props as BlueprintSelectProps,
-} from "@blueprintjs/select";
-import { ContextOverlayProps } from "./../../index";
+import { Select2 as BlueprintSelect, Select2Props as BlueprintSelectProps } from "@blueprintjs/select";
 
-/**
- * FIXME: Currently we only route the original element through.
- * We should add here basic elemeents and processes for target and selections, etc.
- */
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export interface SelectProps<T> extends Omit<
-    BlueprintSelectProps<T>,
-    "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef"
-> {
+import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+
+export interface SelectProps<T>
+    extends Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
+        Pick<ButtonProps, "icon" | "rightIcon"> {
+    /**
+     * Textual representation of the the selected value.
+     * This is displayed if the select target is not controlled directly via `children` elements.
+     */
+    text?: string;
+    /**
+     * Placeholder text displayed for selects without defined `text`.
+     * This is displayed if the select target is not controlled directly via `children` elements.
+     */
+    placeholder?: string;
     /**
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
-    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">>
+    contextOverlayProps?: Partial<
+        Omit<ContextOverlayProps, "content" | "defaultIsOpen" | "disabled" | "fill" | "renderTarget" | "targetTagName">
+    >;
+    /**
+     * Event handler to reset search input.
+     * Only works with the uncontrolled default select target.
+     * If set then `rightElement` is automatically set with an action button to trigger the handler.
+     */
+    onClearanceHandler?: () => void;
+    /**
+     * Tooltip to show for the clear button.
+     * Only works with the uncontrolled default select target.
+     */
+    onClearanceText?: string;
 }
 
 /**
  * Create a Select box without the HTML select element.
  * It is possible to filter options, as well as to add new options if necessary.
+ *
+ * **Use this input element when the value is primarily selected from a defined set of elements.**
  */
-function Select<T>({contextOverlayProps, ...otherSelectProps}: SelectProps<T>) {
+export function Select<T>({
+    contextOverlayProps,
+    className,
+    children,
+    text,
+    placeholder = "Select item ...",
+    icon,
+    rightIcon,
+    onClearanceHandler,
+    inputProps,
+    onClearanceText = "Reset selection",
+    ...otherSelectProps
+}: SelectProps<T>) {
     return (
         <BlueprintSelect<T>
-            popoverProps={{ minimal: true, ...contextOverlayProps}}
+            popoverProps={{
+                minimal: true,
+                matchTargetWidth: otherSelectProps.fill ?? false,
+                ...contextOverlayProps,
+            }}
+            inputProps={{
+                round: true,
+                ...inputProps,
+            }}
+            className={`${eccgui}-select` + (className ? ` ${className}` : "")}
             {...otherSelectProps}
-        />
+        >
+            {children ?? (
+                <Button
+                    text={text ? <OverflowText>{text}</OverflowText> : <OverflowText>{placeholder}</OverflowText>}
+                    alignText="left"
+                    outlined
+                    fill={otherSelectProps.fill ?? false}
+                    disabled={otherSelectProps.disabled ?? false}
+                    icon={icon}
+                    rightIcon={
+                        <>
+                            {onClearanceHandler && text && (
+                                <Icon
+                                    name="operation-clear"
+                                    tooltipText={onClearanceText ? onClearanceText : undefined}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        onClearanceHandler();
+                                    }}
+                                />
+                            )}
+                            {typeof rightIcon === "string" ? (
+                                <Icon name={rightIcon} />
+                            ) : (
+                                rightIcon ?? <Icon name={"toggler-caretdown"} />
+                            )}
+                        </>
+                    }
+                />
+            )}
+        </BlueprintSelect>
     );
 }
 
-Select.ofType = BlueprintSelect.ofType;
+/** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
+function ofType<U>() {
+    return (props: SelectProps<U>) => <Select<U> {...props} />;
+}
+
+Select.ofType = ofType;
 
 export default Select;

package/src/components/Select/_select.scss

@@ -2,7 +2,19 @@
 
 .#{$ns}-select-popover {
     .#{$ns}-menu {
-        max-height: unset;
         max-width: unset;
+        max-height: unset;
+    }
+}
+
+.#{$eccgui}-select {
+    display: inline-block;
+
+    &.#{$ns}-fill {
+        display: block;
+    }
+
+    .#{$eccgui}-button {
+        max-width: 100%;
     }
 }

package/src/components/Separation/Spacing.tsx

@@ -22,7 +22,7 @@ export interface SpacingProps {
  * Adds horizontal or vertical space between neighbouring elements.
  * It also can add a visual ruler inside.
  */
-function Spacing({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) {
+export const Spacing = ({ size = "medium", hasDivider = false, vertical = false }: SpacingProps) => {
     const direction = vertical ? "vertical" : "horizontal";
     return (
         <div