@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {
+    Tab as BlueprintTab,
+    TabProps as BlueprintTabProps
+} from "@blueprintjs/core";
+import Color from "color";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import TabTitle, { TabTitleProps } from "./TabTitle";
+
+export interface TabProps extends Omit<BlueprintTabProps, "title"> {
+    /**
+     * Title (or tab label).
+     */
+    title: string | React.ReactElement<TabTitleProps>;
+    /**
+     * Sets the background color of a tag, depends on the `Color` object provided by the
+     * [npm color module](https://www.npmjs.com/package/color) v3. You can use it with
+     * all allowed [CSS color values](https://developer.mozilla.org/de/docs/Web/CSS/color_value).
+     *
+     * The front color is set automatically, so the tag label is always readable.
+     */
+    backgroundColor?: Color | string;
+    /**
+     * In case of not enough space do not shrink this tab in its size.
+     */
+    dontShrink?: boolean;
+}
+
+// Dummy as we cannot use it like that directly for now
+export const TabDummyForStorybook = (props: TabProps) => { return <>{props.title}</>}
+
+export const transformTabProperties = ({
+    title,
+    dontShrink=false,
+    className="",
+    backgroundColor,
+    ...otherBlueprintTabProperties
+}: TabProps) => {
+    const flexStyles = dontShrink ? { flexShrink: 0} : {};
+    let colorStyles = {};
+    if (!!backgroundColor) {
+        let color = Color("#ffffff")
+        try {
+            color = Color(backgroundColor);
+        } catch(ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor)
+        }
+        colorStyles = {
+            backgroundColor: `${color.rgb().toString()}`,
+            color: color.isLight() ? "#000" : "#fff",
+        }
+    }
+    const extraStyles = (dontShrink || !!backgroundColor) ? {style: {...flexStyles, ...colorStyles}} : {};
+    return {
+        key: otherBlueprintTabProperties.id,
+        className: className + ` ${eccgui}-tabs`,
+        title: typeof title === "string" ? <TabTitle text={title} /> : title,
+        ...otherBlueprintTabProperties,
+        ...extraStyles
+    }
+}
+
+/*
+
+NOTE: Try to overload the original Tab element. Currently it does not work.
+(at least inside Storybook) because the set displayName is overwritten and
+Blueprints Tabs integration cannot match the new Tab element correctly by
+checking the displayName.
+
+const Tab = (tabProps: TabProps) => {
+    return <BlueprintTab
+        {...transformTabProperties(tabProps)}
+    />;
+}
+
+Tab.displayName = BlueprintTab.displayName;
+//*/
+
+/*
+import { AbstractPureComponent2, Classes } from "@blueprintjs/core";
+class Tab extends AbstractPureComponent2<TabProps> {
+    public static defaultProps: Partial<TabProps> = {
+        disabled: false,
+        //dontShrink: false,
+    };
+
+    constructor(props: TabProps) {
+        //const { title, ...otherProps} = transformTabProperties(props);
+        //const newProps = {...otherProps, title: props.title}
+        //console.log(newProps);
+        super(props);
+    }
+
+    public static displayName = BlueprintTab.displayName;
+
+    // this component is never rendered directly; see BlueprintTabs#renderTabPanel()
+    public render() {
+        const { className, panel } = this.props;
+        return (
+            <div className={`${Classes.TAB_PANEL} ${className}`} role="tablist">
+                {panel}
+            </div>
+        );
+    }
+}
+
+//*
+export default Tab;
+//*/
+
+export default BlueprintTab;

package/src/components/Tabs/TabTitle.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Button from "../Button/Button";
+
+export interface TabTitleProps {
+    /**
+     * Content of the label that is displayed in the tab element.
+     */
+    text: string | React.ReactNode;
+    /**
+     * Content that is displayed before the tab label, could be used for icons, change markers, etc.
+     * Use text content inside `<span>` element to force white space between th eprefix and the label.
+     */
+    titlePrefix?: React.ReactNode;
+    /**
+     * Content that is display after tab label, could be used for counts or close/remove buttons.
+     * Use text content inside `<span>` element to force white space between th eprefix and the label.
+     */
+    titleSuffix?: React.ReactNode;
+    /**
+     * Enable larger display of the tab.
+     */
+    large?: boolean;
+    /**
+     * Enable smaller display of the tab.
+     */
+    small?: boolean;
+    /**
+     * Add a tooltip to a tab, displayed when user hoveres over it.
+     */
+    tooltip?: string | JSX.Element;
+    /**
+     * Make the tab not usable, display is also narrowed.
+     */
+    disabled?: boolean;
+}
+
+/**
+ * Gives control about functionality and layout of the tab titles.
+ */
+const TabTitle = ({
+    text,
+    tooltip,
+    titlePrefix,
+    titleSuffix,
+    large=false,
+    small=false,
+    disabled=false,
+}: TabTitleProps) => {
+    return (
+        <Button
+            className={`${eccgui}-tabtitle`}
+            minimal
+            tabIndex={-1}
+            text={text}
+            tooltip={disabled ? undefined : tooltip}
+            tooltipProperties={{
+                tooltipProps: {
+                    boundary: "window"
+                }
+            }}
+            icon={<>{titlePrefix}</>}
+            rightIcon={<>{titleSuffix}</>}
+            small={small}
+            large={large}
+            disabled={disabled}
+        />
+    );
+};
+
+export default TabTitle;

package/src/components/Tabs/Tabs.tsx

@@ -1,119 +1,51 @@
 import React from 'react';
 import {
     Tabs as BlueprintTabs,
-    TabsProps as BlueprintTabsProbs,
-    Tab,
-    TabProps as BlueprintTabProbs,
+    TabsProps as BlueprintTabsProps,
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import Button from "../Button/Button";
+import Tab, { TabProps, transformTabProperties } from "./Tab";
 
-// new interface
-export interface TabProps extends BlueprintTabProbs {
-    // could be used for Icons, etc.
-    titlePrefix?: React.ReactNode;
-    // could be used for action  buttons, e.g. "close/remove tab"
-    titleSuffix?: React.ReactNode;
-    // prevent shrinking when too many tabs appear in the list
-    dontShrink?: boolean;
-    // display tab with larger styling
-    large?: boolean;
-    // display tabs with smaller styling
-    small?: boolean;
-}
-
-const createBlueprintTab = ({
-    titlePrefix,
-    title,
-    titleSuffix,
-    dontShrink=false,
-    large=false,
-    small=false,
-    ...otherBlueprintTabProperties
-}: TabProps) => {
-    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
-    return <Tab
-        key={otherBlueprintTabProperties.id}
-        title={(
-            <Button
-                //title={title}
-                minimal
-                tabIndex={-1}
-                text={title}
-                icon={<>{titlePrefix}</>}
-                rightIcon={<>{titleSuffix}</>}
-                small={small}
-                large={large}
-            />
-        )}
-        {...otherBlueprintTabProperties}
-        {...extraStyles}
-    />;
-}
-
-// deprecated interface
-export interface DeprecatedTabProps {
-    tabId: string;
-    tabTitle: React.ReactNode;
-    tabContent?: JSX.Element;
-    dontShrink?: boolean;
-}
-
-const createDeprecatedTab = ({
-    tabId,
-    tabTitle,
-    tabContent,
-    dontShrink=false
-}: DeprecatedTabProps) => {
-    const extraStyles = dontShrink ? { style: {flexShrink: 0} } : {};
-    return <Tab
-        key={tabId}
-        id={tabId}
-        title={tabTitle}
-        panel={tabContent}
-        {...extraStyles}
-    />;
-}
-
-interface TabsProps extends Omit<BlueprintTabsProbs, "vertical" | "onChange" | "large"> {
-    activeTab: string;
-    tabs: any[]; // DeprecatedTabProps[] | TabProps[];
-    onTabClick: ({props}: any) => void;
-    prefixTabNames?: string;
+interface TabsProps extends Omit<BlueprintTabsProps, "vertical" | "large" | "animate"> {
+    children?: React.ReactNode;
+    /**
+     * Data structure containing all tabs, including their titles and content panels.
+     * Currently it is not possible to add `Tab` elements direct as children elements to the `<Tabs>` container.
+     */
+    tabs?: TabProps[];
+    /**
+     * Allow scrollbars on the tabs header.
+     * Otherwise they will be shrinked if not enough space.
+     */
     allowScrollbars?: boolean;
 }
 
 function Tabs(
     {
-        activeTab,
         tabs=[],
-        onTabClick,
-        prefixTabNames='tabBar',
+        children,
         className = "",
         allowScrollbars,
         ...restProps
     }: TabsProps) {
+
     return (
         <BlueprintTabs
-            onChange={onTabClick}
-            selectedTabId={activeTab}
             className={
                 className +
+                ` ${eccgui}-tabs` +
                 (allowScrollbars ? ` ${eccgui}-tabs--scrollablelist` : "")
             }
             {...restProps}
+            animate={false}
         >
-            {
+            {!!tabs ? (
                 tabs.map(tab => {
-                    return !!tab.id ? createBlueprintTab({
-                        className: `${prefixTabNames}-header-${tab.id}`,
-                        ...tab
-                    }) : createDeprecatedTab({
-                        className: `${prefixTabNames}-header-${tab.tabId}`,
-                        ...tab
-                    });
+                    return <Tab {...transformTabProperties(tab)} />;
                 })
-            }
+            ) : (
+                children
+            )}
         </BlueprintTabs>
     );
 };

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tabs } from "./../../../../";
+import { TabDummyForStorybook } from "./../Tab";
+
+export default {
+    title: "Components/Tabs",
+    component: TabDummyForStorybook,
+    argTypes: {
+        id: {
+            description: "Unique identifier used to control which tab is selected.",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+            }
+        },
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        disabled: {
+            description: "Whether this action is non-interactive and the button is not usable. This option must be repeated currently also in the `TabTitle` element.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: false },
+                type: { summary: "boolean" },
+            }
+        },
+        panel: {
+            description: "Panel content, rendered by the parent Tabs when this tab is active.",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "JSX.Element" },
+            }
+        },
+        backgroundColor: {
+            control: "color",
+        },
+    },
+} as ComponentMeta<typeof TabDummyForStorybook>;
+
+const Tab = (args) => {
+    return (
+        <Tabs
+            id="titledemo"
+            tabs={[args]}
+        />
+    )
+}
+
+const TemplateFull: ComponentStory<typeof TabDummyForStorybook> = (args) => (
+    <Tab {...args} />
+);
+
+export const TabElement = TemplateFull.bind({});
+TabElement.args = {
+    id: "tabtest",
+    title: "Tab title",
+    dontShrink: false,
+    panel: <div>Test panel content.</div>
+};

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+
+export default {
+    title: "Components/Tabs",
+    component: TabTitleOrg,
+    argTypes: {
+    },
+} as ComponentMeta<typeof TabTitleOrg>;
+
+const TabTitle = (args) => {
+    return (
+        <Tabs
+            id="titledemo"
+            tabs={[
+                {
+                    id: "titlesimple",
+                    title: <TabTitleOrg {...args} />
+                }
+            ]}
+        />
+    )
+}
+
+const TemplateFull: ComponentStory<typeof TabTitleOrg> = (args) => (
+    <TabTitle {...args} />
+);
+
+export const TabTitleElement = TemplateFull.bind({});
+TabTitleElement.args = {
+    text: "Tab title",
+    titlePrefix: "[",
+    titleSuffix: <span>]</span>,
+};

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

@@ -0,0 +1,98 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tabs, Tab, TabTitle } from "./../../../";
+
+export default {
+    title: "Components/Tabs",
+    component: Tabs,
+    argTypes: {
+        id: {
+            description: "Unique identifier used to control which tab is selected.",
+            control: "text",
+            table: {
+                type: { summary: "string" },
+            }
+        },
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        /*
+        NOTE: we currently cannot support this because Blueprint set then !important
+        styles prevent tab background colors.
+
+        animate: {
+            description: "Whether the selected tab indicator should animate its movement.",
+            control: "boolean",
+            table: {
+                defaultValue: { summary: true },
+                type: { summary: "boolean" },
+            }
+        },
+        */
+        defaultSelectedTabId: {
+            description: "Initial selected tab `id`, for uncontrolled usage.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        selectedTabId: {
+            description: "Selected tab id, for controlled usage. Providing this prop will put the component in controlled mode and the `onChange` handler must be set.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        onChange: {
+            description: "A callback function that is invoked when a tab in the tab list is clicked.",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "(newTabId: TabId, prevTabId: TabId | undefined, event: MouseEvent<HTMLElement>) => void" },
+            }
+        },
+    },
+} as ComponentMeta<typeof Tabs>;
+
+const TemplateFull: ComponentStory<typeof Tabs> = (args) => (
+    <Tabs {...args} />
+);
+
+export const TabsContainerUncontrolled = TemplateFull.bind({});
+TabsContainerUncontrolled.args = {
+    id: "storytabs1",
+    tabs: [
+        {
+            id: "storytab1",
+            title: "Tab title 1",
+            panel: <div>Tab content 1</div>,
+        },
+        {
+            id: "storytab2",
+            title: <TabTitle text="Tab title 2" />,
+            panel: <div>Tab content 2</div>,
+        },
+        {
+            id: "storytab3",
+            title: <TabTitle text="Tab title 3" tooltip="Tab tooltip 3" />,
+            panel: <div>Tab content 3</div>,
+        }
+    ]
+};
+
+/*
+FIXME: this integration does currently not work, reason is not clear. See Tab component comments at bottom.
+export const UncontrolledElementsUsage = TemplateFull.bind({});
+UncontrolledElementsUsage.args = {
+    id: "storytabs2",
+    children: [
+        <Tab id="storytab1" title="Tab title 1" panel={<div>Tab content 1</div>} />
+    ]
+};
+*/

package/src/components/Tabs/tabs.scss

@@ -32,11 +32,14 @@ $tab-indicator-width: 3px !default;
         max-width: 33%;
     }
 
-    & > .#{$ns}-button {
+    & > .#{$ns}-button, // normal button
+    & > span > span > span > .#{$ns}-button { // button with tooltip
         outline: none;
         margin-bottom: $tab-indicator-width;
         max-width: 15rem;
         width: 100%;
+        color: inherit;
+        border-radius: 0;
 
         .#{$ns}-button-text {
             white-space: nowrap;
@@ -50,10 +53,14 @@ $tab-indicator-width: 3px !default;
         }
     }
 
-    &:focus > .#{$ns}-button {
-        @extend .#{$ns}-button:hover;
+    &:focus,
+    &:hover {
+        & > .#{$ns}-button,
+        & > span > span > span > .#{$ns}-button {
+            background: $minimal-button-background-color-hover;
+            color: inherit;
+        }
     }
-
 }
 
 .#{$ns}-tab-indicator-wrapper {

package/src/components/Tag/Tag.tsx

@@ -14,8 +14,9 @@ interface TagProps extends Omit<
     "large" |
     "multiline" |
     "intent" |
-    "rightIcon" |
-    "round"
+    "rightIcon"
+    // Removed round to have chip-like elements, since they are currently missing
+    // "round"
 > {
     // own properties
 
@@ -57,7 +58,13 @@ function Tag({
     otherProps['interactive'] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
     if (!!backgroundColor) {
         const additionalStyles = otherProps.style ?? {};
-        const color = Color(backgroundColor);
+        let color = Color("#ffffff")
+        try {
+            color = Color(backgroundColor);
+        } catch(ex) {
+            console.warn("Received invalid background color for tag: " + backgroundColor)
+        }
+
         otherProps['style'] = {
             ...additionalStyles,
             ...{

package/src/components/Tag/TagList.tsx

@@ -16,6 +16,7 @@ function TagList({
                 `${eccgui}-tag__list` +
                 ((className && label) ? ' ' + className : '')
             }
+            {...otherProps}
         >
             {
                 React.Children.map(children, (child, i) => {

package/src/components/Tag/tag.scss

@@ -18,7 +18,7 @@ $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
 // $tag-icon-spacing: ($tag-height - 12px) / 2 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) / 2 !default;
-// $tag-round-adjustment: 2px !default;
+$tag-round-adjustment: 0px !default;
 
 @import "~@blueprintjs/core/src/components/tag/tag";
 
@@ -53,7 +53,7 @@ $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
     vertical-align: baseline;
     font-size: $eccgui-size-typo-tag;
     line-height: $eccgui-size-typo-tag-lineheight;
-    font-weight: $eccgui-font-weight-light;
+    font-weight: $eccgui-font-weight-regular;
 }
 
 .#{$eccgui}-tag__list-label {

package/src/components/TextField/TextField.tsx

@@ -35,7 +35,7 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
     /**
      * Left aligned icon, can be a canonical icon name or an `Icon` element.
      */
-    leftIcon?: ValidIconName | MaybeElement
+    leftIcon?: ValidIconName | MaybeElement;
 }
 
 /**

package/src/components/Toolbar/toolbar.scss

@@ -26,7 +26,7 @@
 
     .#{$eccgui}-toolbar--vertical > & {
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
     }
 }
 

package/src/components/Typography/HtmlContentBlock.tsx

@@ -2,15 +2,34 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import * as TypographyClassNames from "./classnames";
 
+// FIXME: CMEM-3742: comment + add story
+
+export interface HtmlContentBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    small?: boolean;
+    /** currently not supported */
+    large?: boolean;
+    /** currently not supported */
+    muted ?: boolean;
+    /** currently not supported */
+    disabled?: boolean;
+    linebreakForced?: boolean;
+    linebreakPrevented?: boolean;
+    noScrollbarsOnChildren?: boolean;
+}
+
 function HtmlContentBlock({
     className = "",
     children,
     small = false,
-    large = false, // currently unsupported
-    muted = false, // currently unsupported
-    disabled = false, // currently unsupported
+    large = false,
+    muted = false,
+    disabled = false,
+    linebreakForced = false,
+    linebreakPrevented = false,
+    noScrollbarsOnChildren = false,
     ...otherProps
-}: any) {
+}: HtmlContentBlockProps) {
     return (
         <div
             className={
@@ -19,8 +38,12 @@ function HtmlContentBlock({
                 (small ? " " + TypographyClassNames.SMALL : "") +
                 (large ? " " + TypographyClassNames.LARGE : "") +
                 (muted ? " " + TypographyClassNames.MUTED : "") +
+                (linebreakForced ? " " + TypographyClassNames.FORCELINEBREAK : "") +
+                (linebreakPrevented ? " " + TypographyClassNames.PREVENTLINEBREAK : "") +
+                (noScrollbarsOnChildren ? " " + TypographyClassNames.NOSCROLLBARSONCHILDREN : "") +
                 (disabled ? " " + TypographyClassNames.DISABLED : "")
             }
+            {...otherProps}
         >
             {children}
         </div>