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

package/src/components/Tag/tag.scss

@@ -5,6 +5,7 @@ $eccgui-size-typo-tag-large: $eccgui-size-typo-text !default;
 $eccgui-size-typo-tag-large-lineheight: $eccgui-size-typo-text-lineheight !default;
 $eccgui-size-margin-tag: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-color-tag-background-emphasized: $eccgui-color-workspace-text !default;
+
 // lib vars
 $tag-default-color: $eccgui-color-tag-background-emphasized; // !default;
 // $dark-tag-default-color: $gray5 !default;
@@ -21,16 +22,17 @@ $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) * 0.5 !default;
 // $tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
-$tag-round-adjustment: 0px !default;
+$tag-round-adjustment: 0 !default;
 
+@use "sass:color";
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
-    flex-shrink: 0;
     flex-grow: 0;
-    max-height: calc(#{$tag-height} - 2px);
-    min-height: calc(#{$tag-height} - 2px);
+    flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
+    min-height: calc(#{$tag-height} - 2px);
+    max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
 
     &.#{$ns}-round {
@@ -42,8 +44,8 @@ $tag-round-adjustment: 0px !default;
     }
 
     .#{$ns}-tag-remove {
-        margin: 0 !important;
         padding: 0;
+        margin: 0 !important;
     }
 
     .#{$eccgui}-overviewitem__description > & {
@@ -51,11 +53,11 @@ $tag-round-adjustment: 0px !default;
     }
 
     &.#{$eccgui}-tag--small {
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        line-height: calc(#{$tag-height-small} - 2px);
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         padding: 0 $tag-padding-small;
+        line-height: calc(#{$tag-height-small} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -67,11 +69,11 @@ $tag-round-adjustment: 0px !default;
     }
 
     &.#{$eccgui}-tag--large {
-        max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
-        min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         min-width: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
-        line-height: calc(#{$tag-height-large} - 2px);
+        min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
+        max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
+        line-height: calc(#{$tag-height-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -79,7 +81,8 @@ $tag-round-adjustment: 0px !default;
     }
 
     svg {
-        fill: currentColor;
+        max-height: 1em;
+        fill: currentcolor;
         stroke: initial;
     }
 }
@@ -90,10 +93,10 @@ $tag-round-adjustment: 0px !default;
 .#{$eccgui}-tag__list,
 .#{$eccgui}-tag__list-item {
     display: inline;
-    vertical-align: middle;
     font-size: $eccgui-size-typo-tag;
-    line-height: $eccgui-size-typo-tag-lineheight;
     font-weight: $eccgui-font-weight-regular;
+    line-height: $eccgui-size-typo-tag-lineheight;
+    vertical-align: middle;
 }
 
 .#{$eccgui}-tag__list-label {
@@ -106,9 +109,14 @@ $tag-round-adjustment: 0px !default;
 }
 
 .#{$eccgui}-tag__list-item {
-    margin-bottom: $eccgui-size-margin-tag;
-    display: inline-block;
+    display: inline-flex;
     max-width: 100%;
+    margin-bottom: $eccgui-size-margin-tag;
+
+    .#{$eccgui}-overviewitem__line &,
+    .#{$eccgui}-typography__overflowtext & {
+        margin-bottom: 0;
+    }
 }
 
 .#{$eccgui}-tag__list-label,
@@ -120,124 +128,120 @@ $tag-round-adjustment: 0px !default;
     color: inherit !important;
     .#{$ns}-icon,
     svg {
-        height: $eccgui-size-typo-tag;
         width: $eccgui-size-typo-tag;
-        fill: currentColor;
+        height: $eccgui-size-typo-tag;
+        fill: currentcolor;
     }
 }
 
 .#{$ns}-tag {
-    border-width: 1px;
     border-style: solid;
+    border-width: 1px;
 
     &:not([class*="#{$ns}-intent-"]) {
         &.#{$eccgui}-tag--strongeremphasis {
-            border-color: rgba($tag-default-color, 1);
             background-color: rgba($tag-default-color, 1);
+            border-color: rgba($tag-default-color, 1);
         }
         &.#{$eccgui}-tag--strongemphasis {
-            border-color: rgba($tag-default-color, 0.875);
             background-color: rgba($tag-default-color, 0.875);
+            border-color: rgba($tag-default-color, 0.875);
         }
         &.#{$eccgui}-tag--normalemphasis {
-            border-color: rgba($tag-default-color, 0.75);
             background-color: rgba($tag-default-color, 0.75);
+            border-color: rgba($tag-default-color, 0.75);
         }
         &.#{$eccgui}-tag--weakemphasis {
-            border-color: rgba($tag-default-color, 0.625);
             background-color: rgba($tag-default-color, 0.625);
+            border-color: rgba($tag-default-color, 0.625);
         }
         &.#{$eccgui}-tag--weakeremphasis {
-            border-color: rgba($tag-default-color, 0.5);
             background-color: rgba($tag-default-color, 0.5);
-        }
-
-        &.#{$ns}-minimal,
-        &.#{$ns}-minimal.#{$ns}-interactive {
-            &.#{$eccgui}-tag--strongeremphasis {
-                border-color: rgba($tag-default-color, 0.3);
-                background-color: rgba(mix(rgba($tag-default-color, 0.3), #fff), 1);
-            }
-            &.#{$eccgui}-tag--strongemphasis {
-                border-color: rgba($tag-default-color, 0.225);
-                background-color: rgba(mix(rgba($tag-default-color, 0.225), #fff), 0.875);
-            }
-            &.#{$eccgui}-tag--normalemphasis {
-                border-color: rgba($tag-default-color, 0.15);
-                background-color: rgba(mix(rgba($tag-default-color, 0.15), #fff), 0.75);
-            }
-            &.#{$eccgui}-tag--weakemphasis {
-                border-color: rgba($tag-default-color, 0.075);
-                background-color: rgba(mix(rgba($tag-default-color, 0.075), #fff), 0.625);
-            }
-            &.#{$eccgui}-tag--weakeremphasis {
-                border-color: rgba($tag-default-color, 0.15);
-                background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
-            }
+            border-color: rgba($tag-default-color, 0.5);
         }
 
         &.#{$eccgui}-intent--primary {
-            border-color: $eccgui-color-primary;
-            background-color: $eccgui-color-primary;
             color: $eccgui-color-primary-contrast;
+            background-color: $eccgui-color-primary;
+            border-color: $eccgui-color-primary;
         }
         &.#{$eccgui}-intent--accent {
-            border-color: $eccgui-color-accent;
-            background-color: $eccgui-color-accent;
             color: $eccgui-color-accent-contrast;
+            background-color: $eccgui-color-accent;
+            border-color: $eccgui-color-accent;
         }
         &.#{$eccgui}-intent--info {
-            border-color: $eccgui-color-info-text;
-            background-color: $eccgui-color-info-text;
             color: $eccgui-color-info-background;
+            background-color: $eccgui-color-info-text;
+            border-color: $eccgui-color-info-text;
         }
         &.#{$eccgui}-intent--success {
-            border-color: $eccgui-color-success-text;
-            background-color: $eccgui-color-success-text;
             color: $eccgui-color-success-background;
+            background-color: $eccgui-color-success-text;
+            border-color: $eccgui-color-success-text;
         }
         &.#{$eccgui}-intent--warning {
-            border-color: $eccgui-color-warning-text;
-            background-color: $eccgui-color-warning-text;
             color: $eccgui-color-warning-background;
+            background-color: $eccgui-color-warning-text;
+            border-color: $eccgui-color-warning-text;
         }
         &.#{$eccgui}-intent--danger {
-            border-color: $eccgui-color-danger-text;
-            background-color: $eccgui-color-danger-text;
             color: $eccgui-color-danger-background;
+            background-color: $eccgui-color-danger-text;
+            border-color: $eccgui-color-danger-text;
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-minimal.#{$ns}-interactive {
+            &.#{$eccgui}-tag--strongeremphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.3), #fff), 1);
+                border-color: rgba($tag-default-color, 0.3);
+            }
+            &.#{$eccgui}-tag--strongemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.225), #fff), 0.875);
+                border-color: rgba($tag-default-color, 0.225);
+            }
+            &.#{$eccgui}-tag--normalemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.15), #fff), 0.75);
+                border-color: rgba($tag-default-color, 0.15);
+            }
+            &.#{$eccgui}-tag--weakemphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0.075), #fff), 0.625);
+                border-color: rgba($tag-default-color, 0.075);
+            }
+            &.#{$eccgui}-tag--weakeremphasis {
+                background-color: rgba(color.mix(rgba($tag-default-color, 0), #fff), 0.5);
+                border-color: rgba($tag-default-color, 0.15);
+            }
             &.#{$eccgui}-intent--primary {
-                border-color: $eccgui-color-primary;
                 color: $eccgui-color-primary;
                 background-color: $eccgui-color-primary-contrast;
+                border-color: $eccgui-color-primary;
             }
             &.#{$eccgui}-intent--accent {
-                border-color: $eccgui-color-accent;
                 color: $eccgui-color-accent;
                 background-color: $eccgui-color-accent-contrast;
+                border-color: $eccgui-color-accent;
             }
             &.#{$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;
             }
         }
     }

package/src/components/TextField/SearchField.tsx

@@ -1,26 +1,30 @@
 import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import IconButton from "../Icon/IconButton";
 import Icon from "../Icon/Icon";
+import IconButton from "../Icon/IconButton";
+
 import TextField, { TextFieldProps } from "./TextField";
-import { TestableComponent } from "../../components/interfaces";
 
-export interface SearchFieldProps extends TestableComponent, Omit<
-    TextFieldProps,
-    "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
-> {
+export interface SearchFieldProps
+    extends TestableComponent,
+        Omit<
+            TextFieldProps,
+            "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
+        > {
     /**
-    * Placeholder text for search box.
-    */
+     * Placeholder text for search box.
+     */
     emptySearchInputMessage?: string;
     /**
-    * Event handler to reset search input.
-    * If set then `rightElement` is automatically set with an action button to trigger the handler.
-    */
+     * Event handler to reset search input.
+     * If set then `rightElement` is automatically set with an action button to trigger the handler.
+     */
     onClearanceHandler?: () => void;
     /**
-    * Tooltip to show for the clear button.
-    */
+     * Tooltip to show for the clear button.
+     */
     onClearanceText?: string;
 }
 
@@ -28,44 +32,39 @@ export interface SearchFieldProps extends TestableComponent, Omit<
  * Special `TextField` element for search term inputs.
  */
 export const SearchField = ({
-  className = "",
-  emptySearchInputMessage = "Enter search term",
-  onClearanceHandler,
-  onClearanceText = "Clear input",
-  leftIcon = <Icon name="operation-search" />,
-  ...otherProps
+    className = "",
+    emptySearchInputMessage = "Enter search term",
+    onClearanceHandler,
+    onClearanceText = "Clear input",
+    leftIcon = <Icon name="operation-search" />,
+    ...otherProps
 }: SearchFieldProps) => {
-  return (
-    <TextField
-      className={
-        `${eccgui}-textfield--searchinput` +
-        (onClearanceHandler ? ` ${eccgui}-textfield--justifyclearance` : "") +
-        (className ? ` ${className}` : "")
-      }
-      dir={"auto"}
-      placeholder={emptySearchInputMessage}
-      aria-label={emptySearchInputMessage}
-      rightElement={
-        onClearanceHandler && otherProps.value ? (
-          <IconButton
-            data-test-id={
-              otherProps["data-test-id"] &&
-              `${otherProps["data-test-id"]}-clear-btn`
+    return (
+        <TextField
+            className={
+                `${eccgui}-textfield--searchinput` +
+                (onClearanceHandler ? ` ${eccgui}-textfield--justifyclearance` : "") +
+                (className ? ` ${className}` : "")
             }
-            name="operation-clear"
-            text={
-              onClearanceText ? onClearanceText : "Clear current search term"
+            dir={"auto"}
+            placeholder={emptySearchInputMessage}
+            aria-label={emptySearchInputMessage}
+            rightElement={
+                onClearanceHandler && otherProps.value ? (
+                    <IconButton
+                        data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                        name="operation-clear"
+                        text={onClearanceText ? onClearanceText : "Clear current search term"}
+                        onClick={onClearanceHandler}
+                    />
+                ) : undefined
             }
-            onClick={onClearanceHandler}
-          />
-        ) : undefined
-      }
-      {...otherProps}
-      type={"search"}
-      leftIcon={leftIcon}
-      round={true}
-    />
-  );
-}
+            {...otherProps}
+            type={"search"}
+            leftIcon={leftIcon}
+            round={true}
+        />
+    );
+};
 
 export default SearchField;

package/src/components/TextField/TextArea.tsx

@@ -1,75 +1,77 @@
 import React from "react";
 import {
-  TextArea as BlueprintTextArea,
-  Intent as BlueprintIntent,
-  TextAreaProps as BlueprintTextAreaProps,
+    Intent as BlueprintIntent,
+    TextArea as BlueprintTextArea,
+    TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
+
+import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
     /**
-    * when set to true the input takes a blue border color
-    */
+     * when set to true the input takes a blue border color
+     */
     hasStatePrimary?: boolean;
     /**
-    * when set to true the input takes a green border color
-    */
+     * when set to true the input takes a green border color
+     */
     hasStateSuccess?: boolean;
     /**
-    * when set to true the input takes an orange border color
-    */
+     * when set to true the input takes an orange border color
+     */
     hasStateWarning?: boolean;
     /**
-    * when set to true the input takes a red border color
-    */
+     * when set to true the input takes a red border color
+     */
     hasStateDanger?: boolean;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 
 export const TextArea = ({
-  className = "",
-  hasStatePrimary = false,
-  hasStateSuccess = false,
-  hasStateWarning = false,
-  hasStateDanger = false,
-  rows = 5,
-  invisibleCharacterWarning,
-  ...otherProps
+    className = "",
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    rows = 5,
+    invisibleCharacterWarning,
+    ...otherProps
 }: TextAreaProps) => {
-  let intent;
-  switch (true) {
-    case hasStatePrimary:
-      intent = BlueprintIntent.PRIMARY;
-      break;
-    case hasStateSuccess:
-      intent = BlueprintIntent.SUCCESS;
-      break;
-    case hasStateWarning:
-      intent = BlueprintIntent.WARNING;
-      break;
-    case hasStateDanger:
-      intent = BlueprintIntent.DANGER;
-      break;
-    default:
-      break;
-  }
+    let intent;
+    switch (true) {
+        case hasStatePrimary:
+            intent = BlueprintIntent.PRIMARY;
+            break;
+        case hasStateSuccess:
+            intent = BlueprintIntent.SUCCESS;
+            break;
+        case hasStateWarning:
+            intent = BlueprintIntent.WARNING;
+            break;
+        case hasStateDanger:
+            intent = BlueprintIntent.DANGER;
+            break;
+        default:
+            break;
+    }
 
-  const maybeWrappedOnChange = useTextValidation({...otherProps, invisibleCharacterWarning})
+    const maybeWrappedOnChange = useTextValidation({ ...otherProps, invisibleCharacterWarning });
 
-  return (
-    <BlueprintTextArea
-      className={`${eccgui}-textarea ` + className}
-      intent={intent}
-      rows={rows ? rows : undefined}
-      {...otherProps}
-      dir={"auto"}
-      onChange={maybeWrappedOnChange}
-    />
-  );
-}
+    return (
+        <BlueprintTextArea
+            className={`${eccgui}-textarea ` + className}
+            intent={intent}
+            rows={rows ? rows : undefined}
+            {...otherProps}
+            dir={"auto"}
+            onChange={maybeWrappedOnChange}
+        />
+    );
+};
 
 export default TextArea;