@eccenca/gui-elements 23.1.0-easynav.3 → 23.1.0-easynav.4

package/src/components/Table/table.scss

@@ -0,0 +1,318 @@
+// import libs
+@use "~@carbon/styles/scss/components/data-table/data-table";
+// currently not needed @import "~@carbon/styles/scss/components/data-table/action";
+@use "~@carbon/styles/scss/components/data-table/expandable/index" as table-expandable;
+// currently not needed @import ~@carbon/styles/scss/components/data-table/skeleton;
+@use "~@carbon/styles/scss/components/data-table/sort/index" as table-sort;
+@include data-table.data-table;
+
+// own vars
+$eccgui-size-tablecell-height-regular: mini-units(4) !default;
+$eccgui-size-tablecell-padding-regular: ($eccgui-size-tablecell-height-regular - rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-height-compact: mini-units(3) !default;
+$eccgui-size-tablecell-padding-compact: ($eccgui-size-tablecell-height-compact - rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-height-tall: mini-units(6) !default;
+$eccgui-size-tablecell-padding-tall: ($eccgui-size-tablecell-height-tall - rem($eccgui-size-typo-text)) * 0.5 !default;
+$eccgui-size-tablecell-font-weight: $eccgui-font-weight-regular !default;
+$eccgui-size-tableheader-font-weight: $eccgui-font-weight-bold !default;
+$eccgui-color-table-background: $card-background-color !default;
+$eccgui-color-tableheader-background: $button-background-color !default;
+$eccgui-color-tablerow-background-even: lighten($menu-item-color-hover, 24%) !default;
+$eccgui-color-tablerow-background-odd: transparent !default;
+$eccgui-color-tablerow-hover: $menu-item-color-hover !default;
+$eccgui-color-tablerow-selected: rgba($eccgui-color-accent, 0.1) !default;
+$eccgui-color-tablerow-selected-hover: mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-hover, 50%) !default;
+$eccgui-color-tablerow-border: $pt-divider-black !default;
+
+// changes
+.#{$eccgui}-simpletable__container {
+    min-width: unset;
+    background-color: $eccgui-color-table-background;
+}
+
+.#{$prefix}--data-table {
+    min-width: 100%;
+    --#{$eccgui}-color-border: #{$eccgui-color-tablerow-border};
+    --#{$eccgui}-divider-row: none;
+}
+
+.#{$eccgui}-simpletable--haslayout {
+    table-layout: fixed;
+}
+
+.#{$eccgui}-simpletable--rowdivider {
+    --#{$eccgui}-divider-row: solid;
+}
+
+.#{$prefix}--data-table thead {
+    background-color: transparent;
+    font-weight: $eccgui-size-tablecell-font-weight;
+}
+
+.#{$prefix}--data-table th,
+.#{$prefix}--data-table-header {
+    background-color: $eccgui-color-tableheader-background;
+    font-weight: $eccgui-size-tableheader-font-weight;
+}
+.#{$prefix}--data-table th.#{$prefix}--table-column-checkbox {
+    background: $eccgui-color-tableheader-background;
+}
+
+.#{$prefix}--data-table thead tr,
+.#{$prefix}--data-table tbody tr,
+.#{$prefix}--data-table tbody tr th {
+    height: $eccgui-size-tablecell-height-regular;
+}
+
+.#{$prefix}--data-table .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-regular 0;
+    overflow: hidden;
+    flex-shrink: 1;
+    min-width: 0;
+    text-overflow: ellipsis;
+}
+
+.#{$prefix}--data-table td,
+.#{$prefix}--data-table tbody th {
+    padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-regular * 0.95;
+
+    vertical-align: top;
+
+    & + td:first-of-type {
+        padding-left: $spacing-05;
+    }
+}
+
+.#{$prefix}--data-table .#{$prefix}--table-column-menu,
+.#{$prefix}--data-table .#{$prefix}--table-column-menu:last-of-type {
+    width: auto;
+    min-width: 0;
+}
+
+.#{$prefix}--data-table {
+    thead th, tbody td, tbody th {
+        padding-left: $eccgui-size-block-whitespace * 0.5;
+        padding-right: $eccgui-size-block-whitespace * 0.5;
+        overflow: hidden;
+
+        &.#{$prefix}--table-expand {
+            height: $button-height;
+            width: $button-height;
+            padding-top: $eccgui-size-tablecell-padding-regular * 1.05;
+            padding-left: 0;
+        }
+    }
+
+    thead th.#{$prefix}--table-expand {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+
+.#{$prefix}--table-expand__button {
+    height: $button-height;
+    width: $button-height;
+}
+
+.#{$prefix}--data-table td,
+.#{$prefix}--data-table tbody th {
+    border-top: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-cell) !important;
+    border-bottom: 1px var(--#{$eccgui}-divider-row) var(--#{$eccgui}-color-border) !important;
+    background: var(--#{$eccgui}-color-cell) !important;
+}
+
+// Row background colors
+
+.#{$eccgui}-simpletable--colorless > tbody {
+    & > tr, & > tr:hover {
+        background: transparent;
+        --#{$eccgui}-color-cell: transparent;
+    }
+}
+
+.#{$prefix}--data-table:not(.#{$eccgui}-simpletable--colorless) > tbody {
+    background-color: transparent;
+    --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-odd};
+
+    & > tr {
+        &.#{$prefix}--expandable-row:not([data-child-row]) {
+            --#{$eccgui}-color-border: #{$eccgui-color-tablerow-background-odd};
+        }
+
+        &:hover,
+        &:hover + tr[data-child-row],
+        &.#{$prefix}--expandable-row--hover {
+            background-color: transparent;
+
+            & > th, & > td {
+                --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-hover};
+            }
+        }
+
+        &.#{$prefix}--data-table--selected {
+            & > th {
+                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tableheader-background, 50%)};
+            }
+            & > td {
+                --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected};
+            }
+
+            &:hover {
+                & > th {
+                    --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tableheader-background, 50%)};
+                }
+                & > td {
+                    --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-selected-hover};
+                }
+            }
+        }
+    }
+}
+
+.#{$prefix}--data-table--zebra > tbody {
+
+    & > tr[data-parent-row]:nth-child(4n+3),
+    & > tr[data-child-row]:nth-child(4n+4) {
+        // even rows
+
+        &.#{$prefix}--expandable-row:not([data-child-row]) {
+            --#{$eccgui}-color-border: #{$eccgui-color-tablerow-background-even};
+        }
+
+        & > th, & > td {
+            --#{$eccgui}-color-cell: #{$eccgui-color-tablerow-background-even};
+        }
+
+        &:hover,
+        &:hover + tr[data-child-row],
+        &.#{$prefix}--expandable-row--hover {
+            & > th, & > td {
+                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-hover, $eccgui-color-tablerow-background-even, 50%)};
+            }
+        }
+
+        &.#{$prefix}--data-table--selected {
+            & > th {
+                --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+            }
+            & > td {
+                --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected, $eccgui-color-tablerow-background-even, 50%)};
+            }
+
+            &:hover {
+                & > th {
+                    --#{$eccgui}-color-cell: #{mix(mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%), $eccgui-color-tableheader-background, 50%)};
+                }
+                & > td {
+                    --#{$eccgui}-color-cell: #{mix($eccgui-color-tablerow-selected-hover, $eccgui-color-tablerow-background-even, 50%)};
+                }
+            }
+        }
+    }
+}
+
+// Compact
+
+.#{$prefix}--data-table--xs thead tr,
+.#{$prefix}--data-table--xs tbody tr,
+.#{$prefix}--data-table--xs tbody tr th {
+    height: $eccgui-size-tablecell-height-compact;
+}
+
+.#{$prefix}--data-table--xs .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-compact 0;
+}
+
+.#{$prefix}--data-table--xs td,
+.#{$prefix}--data-table--xs tbody tr th {
+    padding-top: $eccgui-size-tablecell-padding-compact * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-compact * 0.95;
+}
+
+.#{$prefix}--data-table--xs tbody td.#{$prefix}--table-expand {
+    padding-top: $eccgui-size-tablecell-padding-compact * 1.05;
+}
+
+// Tall
+
+.#{$prefix}--data-table--md thead tr,
+.#{$prefix}--data-table--md tbody tr,
+.#{$prefix}--data-table--md tbody tr th {
+    height: $eccgui-size-tablecell-height-compact;
+}
+
+.#{$prefix}--data-table--md .#{$prefix}--table-header-label {
+    padding: $eccgui-size-tablecell-padding-tall 0;
+}
+
+.#{$prefix}--data-table--md td,
+.#{$prefix}--data-table--md tbody tr th {
+    padding-top: $eccgui-size-tablecell-padding-tall * 1.05;
+    padding-bottom: $eccgui-size-tablecell-padding-tall * 0.95;
+}
+
+.#{$prefix}--data-table--md tbody td.#{$prefix}--table-expand {
+    padding-top: $eccgui-size-tablecell-padding-tall * 1.05;
+}
+
+// Expanded row
+
+tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) + tr[data-child-row] {
+    display: none;
+}
+
+tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
+    display: table-row;
+
+    td {
+        padding-left: $eccgui-size-block-whitespace * 0.5;
+    }
+
+    & > td {
+        padding: 0;
+    }
+}
+
+// Sorting option
+
+.#{$prefix}--table-sort {
+    background-color: transparent;
+    padding-left: $eccgui-size-block-whitespace * 0.5;
+
+    &:hover {
+        background-color: $button-background-color-hover;
+    }
+
+    .cds--table-sort__icon-unsorted {
+        opacity: 1;
+    }
+
+    .cds--table-sort__flex {
+        justify-content: unset;
+    }
+}
+
+.#{$prefix}--table-sort.#{$prefix}--table-sort--active {
+    background: $button-background-color-active;
+
+    .cds--table-sort__icon {
+        opacity: 1;
+    }
+}
+
+// Sticky header
+
+.#{$prefix}--data-table_inner-container {
+    background-color: $eccgui-color-tableheader-background;
+}
+
+.#{$prefix}--data-table--sticky-header {
+    thead tr th {
+        // border-bottom-color: $active-ui;
+    }
+
+    tr {
+        min-height: $eccgui-size-tablecell-height-regular;
+    }
+}

package/src/components/Tag/Tag.tsx

@@ -29,7 +29,7 @@ export interface TagProps extends Omit<
 
     /**
      * 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
+     * [npm color module](https://www.npmjs.com/export 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.

package/src/components/Tag/TagList.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
+export interface TagListProps extends React.HTMLAttributes<HTMLUListElement> {
+    label?: string;
+}
+
 function TagList({
     children,
     className = '',
     label = '',
     ...otherProps
-}: any) {
-
-
+}: TagListProps) {
 
     const tagList = (
         <ul

package/src/components/Tag/index.ts

@@ -0,0 +1,5 @@
+import Tag, { TagProps } from "./Tag";
+import TagList, { TagListProps } from "./TagList";
+
+export { Tag, TagList };
+export type { TagProps, TagListProps };

package/src/components/Tag/{Tag.stories.tsx → stories/Tag.stories.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tag } from "./../../../index";
-import { helpersArgTypes } from "../../../.storybook/helpers";
+import { Tag } from "./../../../../index";
+import { helpersArgTypes } from "../../../../.storybook/helpers";
 
 export default {
     title: "Components/Tag",
@@ -33,6 +33,7 @@ const Template: ComponentStory<typeof Tag> = (args) => (
 export const Default = Template.bind({});
 Default.args = {
     children: "Tag label",
+    small: false,
     onClick: undefined,
     onRemove: undefined,
 };

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { TagList, Tag } from "./../../../../index";
+
+export default {
+    title: "Components/Tag",
+    component: TagList,
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof TagList>;
+
+const Template: ComponentStory<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>,
+    ]
+};

package/src/components/Tag/tag.scss

@@ -80,6 +80,7 @@ $tag-round-adjustment: 0px !default;
 
     svg {
         fill: currentColor;
+        stroke: initial;
     }
 }
 

package/src/components/TextField/TextField.tsx

@@ -7,6 +7,7 @@ import {
     HTMLInputProps,
     InputGroupProps,
 } from "@blueprintjs/core";
+import { IntentTypes, Definitions as IntentDefinitions } from "../../common/Intent";
 import Icon from "../Icon/Icon";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
@@ -15,20 +16,28 @@ import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValida
 export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
     /**
     * 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
     */
     hasStateSuccess?: boolean;
     /**
     * 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
     */
     hasStateDanger?: boolean;
+    /**
+     * Intent state of the text field.
+     */
+    intent?: IntentTypes | "edited" | "removed"
     /**
      * The input element uses the full horizontal width of the parent container.
      */
@@ -57,43 +66,65 @@ function TextField({
   invisibleCharacterWarning,
   ...otherProps
 }: TextFieldProps) {
-  let intent;
+  let deprecatedIntent;
   switch (true) {
     case hasStatePrimary:
-      intent = BlueprintIntent.PRIMARY;
+      deprecatedIntent = IntentDefinitions.PRIMARY;
       break;
     case hasStateSuccess:
-      intent = BlueprintIntent.SUCCESS;
+      deprecatedIntent = IntentDefinitions.SUCCESS;
       break;
     case hasStateWarning:
-      intent = BlueprintIntent.WARNING;
+      deprecatedIntent = IntentDefinitions.WARNING;
       break;
     case hasStateDanger:
-      intent = BlueprintIntent.DANGER;
+      deprecatedIntent = IntentDefinitions.DANGER;
       break;
     default:
       break;
   }
 
-  const maybeWrappedOnChange = useTextValidation({...otherProps, invisibleCharacterWarning})
+  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;
+  }
+
+  const maybeWrappedOnChange = useTextValidation({...otherBlueprintInputGroupProps, invisibleCharacterWarning})
 
-  if ((otherProps.readOnly || otherProps.disabled) && !!otherProps.value && !otherProps.title) {
-      otherProps["title"] = otherProps.value;
+  if ((otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) && !!otherBlueprintInputGroupProps.value && !otherBlueprintInputGroupProps.title) {
+      otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
   }
 
   return (
     <BlueprintInputGroup
-      className={`${eccgui}-textfield ` + className}
-      intent={intent}
+      className={
+          `${eccgui}-textfield` +
+          (intent ? ` ${eccgui}-intent--${intent}` : "") +
+          (!!className ? ` ${className}` : "")
+      }
+      intent={(intent && !(["info", "edited", "removed", "neutral"].includes(intent))) ? intent as BlueprintIntent : undefined}
       fill={fullWidth}
-      {...otherProps}
+      {...otherBlueprintInputGroupProps}
       leftIcon={
         leftIcon != null && leftIcon !== false ? (
           typeof leftIcon === "string" ? (
             <Icon
               name={leftIcon}
               className={BlueprintClassNames.ICON}
-              intent={intent}
+              intent={iconIntent as IntentTypes | undefined}
             />
           ) : (
             <span className={BlueprintClassNames.ICON}>{leftIcon}</span>

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

@@ -13,6 +13,9 @@ export default {
         rightElement: {
             ...helpersArgTypes.exampleIcon,
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        }
     },
 } as ComponentMeta<typeof TextField>;
 

package/src/components/TextField/textfield.scss

@@ -71,7 +71,7 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
 }
 
 .#{$ns}-input {
-    .#{$ns}-input-group[class*="#{$ns}-intent"] & {
+    .#{$ns}-input-group[class*="#{$eccgui}-intent--"] & {
         animation-delay: 0.5s;
         animation-duration: 1s;
     }
@@ -79,6 +79,28 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
     @include intent-state-flash("success", $eccgui-color-success-background);
     @include intent-state-flash("warning", $eccgui-color-warning-background);
     @include intent-state-flash("danger", $eccgui-color-danger-background);
+
+    .#{$ns}-input-group.#{$eccgui}-intent--info & {
+        @include pt-input-intent($eccgui-color-info-text);
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--accent & {
+        @include pt-input-intent($eccgui-color-primary);
+    }
+
+    .#{$ns}-input-group.#{$eccgui}-intent--neutral & {
+        @include pt-input-intent($eccgui-color-workspace-text);
+    }
+
+    .#{$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;
+    }
 }
 
 .#{$eccgui}-textarea {

package/src/components/Tree/tree.scss

@@ -25,4 +25,8 @@
     .#{$ns}-tag {
         display: inline-flex;
     }
+
+    span.#{$ns}-fill {
+        display: inline-block;
+    }
 }

package/src/components/index.scss

@@ -2,4 +2,5 @@
 @import "./Depiction/depiction";
 @import "./Icon/icon";
 @import "./Tree/tree";
+@import "./Table/table";
 @import "./Typography/typography";

package/src/components/index.ts

@@ -1,5 +1,10 @@
 export * from "./Badge/Badge";
 export * from "./Depiction/Depiction";
 export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Table";
+export * from "./Tag";
 export * from "./Tree/Tree";
 export * from "./Typography";
+
+export * from "./interfaces";

package/src/extensions/react-flow/_config.scss

@@ -17,4 +17,4 @@ $reactflow-edge-stroke-color-selected: $eccgui-color-accent !default;
 $reactflow-transition-time: 0.25s !default;
 $reactflow-transition-function: "" !default;
 
-$reactflow-transition-anglestart: 270deg;
+$reactflow-transition-anglestart: -90deg;