@eccenca/gui-elements 23.5.0 → 23.6.0-rc.1

package/src/components/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, {KeyboardEventHandler, RefObject} from "react";
+import React, { KeyboardEventHandler, RefObject } from "react";
 import {
     Classes as BlueprintClassNames,
     HTMLInputProps,
@@ -7,37 +7,40 @@ import {
     Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
-import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
+
+import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {ValidIconName} from "../Icon/canonicalIconNames";
-import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
-export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
+import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
+
+export interface TextFieldProps
+    extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
-    * The input element is displayed with primary color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with primary color scheme.
+     * @deprecated
+     */
     hasStatePrimary?: boolean;
     /**
-    * The input element is displayed with success (some type of green) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with success (some type of green) color scheme.
+     * @deprecated
+     */
     hasStateSuccess?: boolean;
     /**
-    * The input element is displayed with warning (some type of orange) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with warning (some type of orange) color scheme.
+     * @deprecated
+     */
     hasStateWarning?: boolean;
     /**
-    * The input element is displayed with danger (some type of red) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with danger (some type of red) color scheme.
+     * @deprecated
+     */
     hasStateDanger?: boolean;
     /**
      * Intent state of the text field.
      */
-    intent?: IntentTypes | "edited" | "removed"
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * The input element uses the full horizontal width of the parent container.
      */
@@ -49,118 +52,126 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 
     /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
-    escapeToBlur?: boolean
+    escapeToBlur?: boolean;
 }
 
 /**
-  * Text input field.
-  */
+ * Text input field.
+ */
 export const TextField = ({
-  className = "",
-  hasStatePrimary = false,
-  hasStateSuccess = false,
-  hasStateWarning = false,
-  hasStateDanger = false,
-  fullWidth = true,
-  leftIcon,
-  invisibleCharacterWarning,
-  escapeToBlur = false,
-  ...otherProps
+    className = "",
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    fullWidth = true,
+    leftIcon,
+    invisibleCharacterWarning,
+    escapeToBlur = false,
+    ...otherProps
 }: TextFieldProps) => {
-    const inputRef = React.useRef<HTMLInputElement | null>(null)
-  let deprecatedIntent;
-  switch (true) {
-    case hasStatePrimary:
-      deprecatedIntent = IntentDefinitions.PRIMARY;
-      break;
-    case hasStateSuccess:
-      deprecatedIntent = IntentDefinitions.SUCCESS;
-      break;
-    case hasStateWarning:
-      deprecatedIntent = IntentDefinitions.WARNING;
-      break;
-    case hasStateDanger:
-      deprecatedIntent = IntentDefinitions.DANGER;
-      break;
-    default:
-      break;
-  }
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    let deprecatedIntent;
+    switch (true) {
+        case hasStatePrimary:
+            deprecatedIntent = IntentDefinitions.PRIMARY;
+            break;
+        case hasStateSuccess:
+            deprecatedIntent = IntentDefinitions.SUCCESS;
+            break;
+        case hasStateWarning:
+            deprecatedIntent = IntentDefinitions.WARNING;
+            break;
+        case hasStateDanger:
+            deprecatedIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            break;
+    }
 
     const handleLabelEscape = React.useCallback(() => {
-        inputRef.current?.blur()
-        if(otherProps.inputRef) {
-            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
-            if(otherInputRef.current) {
-                otherInputRef.current.blur()
+        inputRef.current?.blur();
+        if (otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>;
+            if (otherInputRef.current) {
+                otherInputRef.current.blur();
             }
         }
-    }, [])
+    }, []);
 
-    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
-        if(escapeToBlur && event.key === "Escape") {
-            event.preventDefault()
-            handleLabelEscape()
-            return false
-        }
-        return otherProps.onKeyDown?.(event)
-    }, [otherProps.onKeyDown, escapeToBlur])
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback(
+        (event) => {
+            if (escapeToBlur && event.key === "Escape") {
+                event.preventDefault();
+                handleLabelEscape();
+                return false;
+            }
+            return otherProps.onKeyDown?.(event);
+        },
+        [otherProps.onKeyDown, escapeToBlur]
+    );
 
-  const {
-      intent = deprecatedIntent,
-      ...otherBlueprintInputGroupProps
-  } = otherProps;
+    const { intent = deprecatedIntent, ...otherBlueprintInputGroupProps } = otherProps;
 
-  let iconIntent;
-  switch (intent) {
-      case "edited":
-        iconIntent = IntentDefinitions.INFO;
-        break;
-      case "removed":
-        iconIntent = IntentDefinitions.DANGER;
-        break;
-      default:
-        iconIntent = intent as IntentTypes;
-        break;
-  }
+    let iconIntent;
+    switch (intent) {
+        case "edited":
+            iconIntent = IntentDefinitions.INFO;
+            break;
+        case "removed":
+            iconIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            iconIntent = intent as IntentTypes;
+            break;
+    }
 
-  const maybeWrappedOnChange = useTextValidation({...otherBlueprintInputGroupProps, invisibleCharacterWarning})
+    const maybeWrappedOnChange = useTextValidation({ ...otherBlueprintInputGroupProps, invisibleCharacterWarning });
 
-  if ((otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) && !!otherBlueprintInputGroupProps.value && !otherBlueprintInputGroupProps.title) {
-      otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
-  }
+    if (
+        (otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) &&
+        !!otherBlueprintInputGroupProps.value &&
+        !otherBlueprintInputGroupProps.title
+    ) {
+        otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
+    }
 
-  return (
-    <BlueprintInputGroup
-        inputRef={inputRef}
-      className={
-          `${eccgui}-textfield` +
-          (intent ? ` ${eccgui}-intent--${intent}` : "") +
-          (!!className ? ` ${className}` : "")
-      }
-      intent={(intent && !(["info", "edited", "removed", "neutral"].includes(intent))) ? intent as BlueprintIntent : undefined}
-      fill={fullWidth}
-      {...otherBlueprintInputGroupProps}
-      leftElement={
-        leftIcon != null && leftIcon !== false ? (
-          typeof leftIcon === "string" ? (
-            <Icon
-              name={leftIcon}
-              className={BlueprintClassNames.ICON}
-              intent={iconIntent as IntentTypes | undefined}
-            />
-          ) : (
-            <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
-          )
-        ) : undefined
-      }
-      dir={"auto"}
-      onChange={maybeWrappedOnChange}
-        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
-    />
-  );
-}
+    return (
+        <BlueprintInputGroup
+            inputRef={inputRef}
+            className={
+                `${eccgui}-textfield` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            intent={
+                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                    ? (intent as BlueprintIntent)
+                    : undefined
+            }
+            fill={fullWidth}
+            {...otherBlueprintInputGroupProps}
+            leftElement={
+                leftIcon != null && leftIcon !== false ? (
+                    typeof leftIcon === "string" ? (
+                        <Icon
+                            name={leftIcon as ValidIconName}
+                            className={BlueprintClassNames.ICON}
+                            intent={iconIntent as IntentTypes | undefined}
+                        />
+                    ) : (
+                        <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+                    )
+                ) : undefined
+            }
+            dir={"auto"}
+            onChange={maybeWrappedOnChange}
+            onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
+        />
+    );
+};
 
 export default TextField;

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,23 +1,21 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import SearchField from "./../SearchField";
 
 export default {
-  title: "Components/SearchField",
-  component: SearchField,
-  argTypes: {
-      hasStatePrimary: { table: { disable: true } },
-      hasStateSuccess: { table: { disable: true } },
-      hasStateWarning: { table: { disable: true } },
-      hasStateDanger: { table: { disable: true } },
-      fullWidth: { table: { disable: true } },
-  },
+    title: "Components/SearchField",
+    component: SearchField,
+    argTypes: {
+        hasStatePrimary: { table: { disable: true } },
+        hasStateSuccess: { table: { disable: true } },
+        hasStateWarning: { table: { disable: true } },
+        hasStateDanger: { table: { disable: true } },
+        fullWidth: { table: { disable: true } },
+    },
 } as ComponentMeta<typeof SearchField>;
 
-const Template: ComponentStory<typeof SearchField> = (args) => (
-  <SearchField {...args}></SearchField>
-);
+const Template: ComponentStory<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -25,16 +23,14 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (
-  args
-) => {
-  const [query, setQuery] = React.useState<string>("");
-  return (
-    <SearchField
-      {...args}
-      value={query}
-      onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
-      onClearanceHandler={() => setQuery("")}
-    />
-  );
+export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (args) => {
+    const [query, setQuery] = React.useState<string>("");
+    return (
+        <SearchField
+            {...args}
+            value={query}
+            onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
+            onClearanceHandler={() => setQuery("")}
+        />
+    );
 };

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -1,18 +1,16 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TextArea as CustomTextArea} from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { TextArea as CustomTextArea } from "./../../../../index";
 type TextAreaType = typeof CustomTextArea;
 
 export default {
     title: "Forms/TextArea",
     component: CustomTextArea,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<TextAreaType>;
 
-const Template: ComponentStory<TextAreaType> = (args) => (
-    <CustomTextArea {...args}></CustomTextArea>
-);
+const Template: ComponentStory<TextAreaType> = (args) => <CustomTextArea {...args}></CustomTextArea>;
 
 export const Default = Template.bind({});
 Default.args = {

package/src/components/TextField/textfield.scss

@@ -4,7 +4,7 @@
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
-$eccgui-size-type-levelratio !default;
+    $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -59,22 +59,29 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
 @mixin intent-state-flash($state, $bgcolor, $mixratio: 24%) {
     @keyframes intent-state-flash-#{$state} {
-        0% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
-        39% { background-color: $bgcolor; }
-        100% { background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio); }
+        0% {
+            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+        }
+        39% {
+            background-color: $bgcolor;
+        }
+        100% {
+            background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+        }
     }
 
     .#{$ns}-input-group.#{$ns}-intent-#{$state} & {
-        animation-name: intent-state-flash-#{$state};
         background-color: mix($bgcolor, $eccgui-color-textfield-background, $mixratio);
+        animation-name: intent-state-flash-#{$state};
     }
 }
 
 .#{$ns}-input {
     .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
-        animation-delay: 0.5s;
         animation-duration: 1s;
+        animation-delay: 0.5s;
     }
+
     @include intent-state-flash("primary", $eccgui-color-info-background);
     @include intent-state-flash("success", $eccgui-color-success-background);
     @include intent-state-flash("warning", $eccgui-color-warning-background);
@@ -94,11 +101,13 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 
     .#{$ns}-input-group.#{$eccgui}-intent--edited & {
         @include pt-input-intent($eccgui-color-info-text);
+
         color: $eccgui-color-info-text;
     }
 
     .#{$ns}-input-group.#{$eccgui}-intent--removed & {
         @include pt-input-intent($eccgui-color-danger-text);
+
         text-decoration: line-through $eccgui-color-danger-text 2px;
     }
 }
@@ -114,10 +123,11 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         width: 0;
         height: 0;
     }
+
     input[type="search"]::-webkit-search-decoration,
     input[type="search"]::-webkit-search-cancel-button,
     input[type="search"]::-webkit-search-results-button,
     input[type="search"]::-webkit-search-results-decoration {
-        -webkit-appearance: none;
+        appearance: none;
     }
 }

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -1,19 +1,20 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
-import Toolbar from "./Toolbar";
-import ToolbarSection from "./ToolbarSection";
 import Button from "../Button/Button";
-import IconButton from "../Icon/IconButton"
+import IconButton from "../Icon/IconButton";
 import Spacing from "../Separation/Spacing";
 
+import Toolbar from "./Toolbar";
+import ToolbarSection from "./ToolbarSection";
+
 export default {
-  title: "Components/Toolbar",
-  component: Toolbar,
-  subcomponents: {
-    ToolbarSection,
-  },
-  argTypes: {},
+    title: "Components/Toolbar",
+    component: Toolbar,
+    subcomponents: {
+        ToolbarSection,
+    },
+    argTypes: {},
 } as ComponentMeta<typeof Toolbar>;
 
 const Template: ComponentStory<typeof Toolbar> = (args) => (
@@ -36,6 +37,6 @@ const Template: ComponentStory<typeof Toolbar> = (args) => (
 export const Default = Template.bind({});
 
 Default.args = {
-  verticalStack: false,
-  noWrap: false,
+    verticalStack: false,
+    noWrap: false,
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -6,12 +7,12 @@ export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
      * Allow sections to break up into multiple lines when there is not enough space available.
      * Only makes sense for horizontal toolbars.
      */
-     noWrap?: boolean;
-     /**
-      * Toolbar displays vertically like a column.
-      * Can be used for toolbars in sidebars.
-      */
-     verticalStack?: boolean;
+    noWrap?: boolean;
+    /**
+     * Toolbar displays vertically like a column.
+     * Can be used for toolbars in sidebars.
+     */
+    verticalStack?: boolean;
 }
 
 /**
@@ -19,7 +20,7 @@ export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export const Toolbar = ({
     children,
-    className = '',
+    className = "",
     noWrap = false,
     verticalStack = false,
     ...restProps
@@ -29,14 +30,14 @@ export const Toolbar = ({
             {...restProps}
             className={
                 `${eccgui}-toolbar ` +
-                (noWrap ? ` ${eccgui}-toolbar--nowrap` : '') +
-                (verticalStack ? ` ${eccgui}-toolbar--vertical` : '') +
-                (className ? ' ' + className : '')
+                (noWrap ? ` ${eccgui}-toolbar--nowrap` : "") +
+                (verticalStack ? ` ${eccgui}-toolbar--vertical` : "") +
+                (className ? " " + className : "")
             }
         >
-            { children }
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default Toolbar;

package/src/components/Toolbar/ToolbarSection.tsx

@@ -1,19 +1,20 @@
 import React from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-    * Is allowed to allocate more space than necessary to show all children.
-    */
+     * Is allowed to allocate more space than necessary to show all children.
+     */
     canGrow?: boolean;
     /**
-    * Allow element to get shrinked if there is not enough space to show all content.
-    * This only makes sense if it contains children that are elastic in its size.
-    */
+     * Allow element to get shrinked if there is not enough space to show all content.
+     * This only makes sense if it contains children that are elastic in its size.
+     */
     canShrink?: boolean;
     /**
-    * Hides content that overflows available space.
-    */
+     * Hides content that overflows available space.
+     */
     hideOverflow?: boolean;
 }
 
@@ -23,26 +24,26 @@ export interface ToolbarSectionProps extends React.HTMLAttributes<HTMLDivElement
  */
 export const ToolbarSection = ({
     children,
-    className = '',
+    className = "",
     canGrow = false,
     canShrink = false,
     hideOverflow = false,
     ...otherProps
-}:ToolbarSectionProps) => {
+}: ToolbarSectionProps) => {
     return (
         <div
             {...otherProps}
             className={
                 `${eccgui}-toolbar__section` +
-                (canGrow ? ` ${eccgui}-toolbar__section--cangrow` : '') +
-                (canShrink ? ` ${eccgui}-toolbar__section--canshrink` : '') +
-                (hideOverflow ? ` ${eccgui}-toolbar__section--overflowhidden` : '') +
-                (className ? ' ' + className : '')
+                (canGrow ? ` ${eccgui}-toolbar__section--cangrow` : "") +
+                (canShrink ? ` ${eccgui}-toolbar__section--canshrink` : "") +
+                (hideOverflow ? ` ${eccgui}-toolbar__section--overflowhidden` : "") +
+                (className ? " " + className : "")
             }
         >
-            { children }
+            {children}
         </div>
-    )
-}
+    );
+};
 
 export default ToolbarSection;

package/src/components/Toolbar/toolbar.scss

@@ -1,11 +1,9 @@
 .#{$eccgui}-toolbar {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
+    flex-flow: row wrap;
     align-content: center;
-
+    align-items: center;
+    justify-content: flex-start;
 }
 
 .#{$eccgui}-toolbar--vertical {
@@ -17,9 +15,9 @@
 }
 
 .#{$eccgui}-toolbar__section {
+    display: flex;
     flex-grow: 0;
     flex-shrink: 0;
-    display: flex;
     flex-wrap: nowrap;
     align-items: center;
     min-width: 0;