@eccenca/gui-elements 24.4.1-featurechatcomponentscmem6775.4 → 24.4.1-featurepreparefinalnextcmem6943.0

package/src/components/Form/FieldItem.tsx

@@ -6,7 +6,7 @@ import { TestableComponent } from "../interfaces";
 import Label, { LabelProps } from "../Label/Label";
 
 /*
-    FIXME: Improve development convenience and prevent development errors
+    TODO: Improve development convenience and prevent development errors
 
     * disabled state could be automatically forwarded to inserted input element,
       currently this need to be dome explicitly .
@@ -15,30 +15,6 @@ import Label, { LabelProps } from "../Label/Label";
 */
 
 export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, TestableComponent {
-    /**
-     * Set primary state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * Set success state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * Set warning state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * Set danger state.
-     * This is not routed through automatically.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -69,10 +45,6 @@ export interface FieldItemProps extends React.HTMLAttributes<HTMLDivElement>, Te
  * Form element that manages the combination of label, helper texts, input element and feedback messages.
  */
 export const FieldItem = ({
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     children,
     className,
     disabled,
@@ -82,24 +54,6 @@ export const FieldItem = ({
     intent,
     ...otherProps
 }: FieldItemProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
 
     const label = <Label {...labelProps} disabled={disabled} />;
@@ -117,9 +71,9 @@ export const FieldItem = ({
     const notification =
         messageText &&
         (typeof messageText === "string" ? (
-            <p className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</p>
+            <p className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</p>
         ) : (
-            <div className={`${eccgui}-fielditem__message` + (intentClass || classIntent)}>{messageText}</div>
+            <div className={`${eccgui}-fielditem__message` + intentClass}>{messageText}</div>
         ));
 
     return (

package/src/components/Form/FieldSet.tsx

@@ -9,26 +9,6 @@ export interface FieldSetProps extends Omit<React.FieldsetHTMLAttributes<HTMLFie
      * Background color of the box is set automatically regarding the set intent state.
      */
     boxed?: boolean;
-    /**
-     * The fieldsetsection is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The fieldset section is displayed with success (some type of green) color scheme.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The fieldset section is displayed with warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The fieldsetsection is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the field item.
      */
@@ -56,36 +36,12 @@ export const FieldSet = ({
     boxed = false,
     children,
     className,
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     intent,
     helperText,
     messageText,
     title,
     ...otherProps
 }: FieldSetProps) => {
-    let classIntent = "";
-    switch (true) {
-        case hasStatePrimary:
-            classIntent = " " + IntentClassNames.PRIMARY;
-            break;
-        case hasStateSuccess:
-            classIntent = " " + IntentClassNames.SUCCESS;
-            break;
-        case hasStateWarning:
-            classIntent = " " + IntentClassNames.WARNING;
-            break;
-        case hasStateDanger:
-            classIntent = " " + IntentClassNames.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-
     const userhelp =
         helperText &&
         (typeof helperText === "string" ? (
@@ -109,7 +65,7 @@ export const FieldSet = ({
             className={
                 `${eccgui}-fieldset` +
                 (className ? " " + className : "") +
-                (intentClass || classIntent) +
+                (intent ? " " + IntentClassNames[intent.toUpperCase()] : "") +
                 (boxed ? ` ${eccgui}-fieldset--boxed` : "")
             }
             {...otherProps}

package/src/components/Form/form.scss

@@ -1,6 +1,6 @@
 $eccgui-size-typo-formitem: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-formitem-lineheight: $eccgui-size-typo-caption-lineheight !default;
-$eccgui-color-formitem-text: rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
+$eccgui-color-formitem-text: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-narrow);
 
 @import "~@blueprintjs/core/src/components/forms/common";
 @import "~@blueprintjs/core/src/components/forms/control-group";
@@ -39,7 +39,7 @@ form {
     color: $eccgui-color-formitem-text;
 
     .#{$eccgui}-fielditem--disabled > & {
-        color: rgba($eccgui-color-formitem-text, 1) !important;
+        color: $eccgui-color-workspace-text !important;
         opacity: $eccgui-opacity-disabled !important;
     }
 }

package/src/components/Icon/BaseIcon.tsx

@@ -32,19 +32,10 @@ export interface BaseIconProps extends Omit<CarbonIconProps, "icon" | "descripti
      * Additional CSS classes.
      */
     className?: string;
-    /**
-     * Description for icon as accessibility fallback.
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    description?: string;
     /**
      * Additonal tooltip properties, e.g. `hoverOpenDelay`.
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
-    /**
-     * @deprecated (v25) Use `title` as replacement.
-     */
-    iconTitle?: CarbonIconProps["title"];
 }
 
 /**
@@ -58,8 +49,6 @@ function BaseIcon({
     tooltipText,
     tooltipProps,
     intent,
-    description,
-    iconTitle,
     tabIndex,
     ...restProps
 }: BaseIconProps) {
@@ -70,9 +59,6 @@ function BaseIcon({
 
     const icon = (
         <CarbonIconNamed
-            title={
-                iconTitle || description ? (iconTitle ? iconTitle : description ? description : undefined) : undefined
-            }
             {...restProps}
             {...sizeConfig}
             className={

package/src/components/Icon/IconButton.tsx

@@ -6,9 +6,10 @@ import Button, { ButtonProps } from "../Button/Button";
 import { ValidIconName } from "./canonicalIconNames";
 import Icon, { IconProps } from "./Icon";
 import { TestIconProps } from "./TestIcon";
+import {TestableComponent} from "../interfaces";
 
 interface ExtendedButtonProps
-    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    extends Omit<ButtonProps, "name" | "icon" | "rightIcon" | "text" | "minimal" | "tooltip">, TestableComponent {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

package/src/components/Icon/canonicalIconNames.tsx

@@ -23,6 +23,8 @@ const canonicalIcons = {
     "artefact-task-pivot": icons.Transpose,
     "artefact-task-unpivot": icons.Transpose,
     "artefact-task-concatenatetofile": icons.DocumentExport,
+    "artefact-task-sqlupdatequeryoperator": icons.Sql,
+    "artefact-task-customsqlexecution": icons.Sql,
     "artefact-dataset-csv": icons.Csv,
     "artefact-dataset-eccencadataplatform": icons.DataVis_1,
     "artefact-dataset-excel": icons.Xls,

package/src/components/Label/label.scss

@@ -1,7 +1,7 @@
 $eccgui-size-typo-label: $eccgui-size-typo-caption !default;
 $eccgui-size-typo-label-lineheight: $eccgui-size-typo-caption-lineheight !default;
 $eccgui-color-label-text: $eccgui-color-workspace-text;
-$eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+$eccgui-color-label-info: eccgui-color-rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
 
 .#{$eccgui}-label {
     display: block;

package/src/components/Link/link.scss

@@ -11,7 +11,7 @@
     }
 
     &:focus-visible {
-        outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
+        outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
         outline-offset: 1px;
     }
 }

package/src/components/Menu/menu.scss

@@ -1,30 +1,7 @@
-// uses button colors, we can remove it if we decide to use the blueprint buttons
-$button-intents: (
-    "primary": (
-        $pt-intent-primary,
-        $blue2,
-        $blue1,
-    ),
-    "success": (
-        $pt-intent-success,
-        $green2,
-        $green1,
-    ),
-    "warning": (
-        $pt-intent-warning,
-        $orange2,
-        $orange1,
-    ),
-    "danger": (
-        $pt-intent-danger,
-        $red2,
-        $red1,
-    ),
-) !default;
-$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
-$minimal-button-background-color-active: rgba($gray2, 0.3) !default;
-$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
-$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+$minimal-button-background-color-hover: eccgui-color-rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: eccgui-color-rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color-hover: eccgui-color-rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: eccgui-color-rgba($gray3, 0.3) !default;
 
 // $half-grid-size: $pt-grid-size * 0.5 !default;
 // $menu-item-border-radius: $pt-border-radius - 1 !default;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -12,14 +12,13 @@ import { TestableComponent } from "../interfaces";
 
 import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index";
 
-/** @deprecated (v25) use MultiSuggestFieldSelectionProps */
-export interface MultiSelectSelectionProps<T> {
+export interface MultiSuggestFieldSelectionProps<T> {
     newlySelected?: T;
     selectedItems: T[];
     createdItems: Partial<T>[];
 }
 
-interface MultiSelectCommonProps<T>
+interface MultiSuggestFieldCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
@@ -38,7 +37,7 @@ interface MultiSelectCommonProps<T>
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
-    onSelection?: (params: MultiSelectSelectionProps<T>) => void;
+    onSelection?: (params: MultiSuggestFieldSelectionProps<T>) => void;
     /**
      * Props to spread to `ContextOverlay`. Note that `content` cannot be changed.
      */
@@ -82,26 +81,6 @@ interface MultiSelectCommonProps<T>
      * Intent state of the multi select.
      */
     intent?: BlueprintIntent;
-    /**
-     * The input element is displayed with primary color scheme.
-     * @deprecated (v25) use `intent="primary"` instead.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The input element is displayed with success (some type of green) color scheme.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The input element is displayed with warning (some type of orange) color scheme.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The input element is displayed with danger (some type of red) color scheme.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    hasStateDanger?: boolean;
     /**
      * Disables the input element
      */
@@ -135,12 +114,12 @@ interface MultiSelectCommonProps<T>
     limitHeightOpened?: boolean | number;
 }
 
-/** @deprecated (v25) use MultiSuggestFieldProps */
-export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
+export type MultiSuggestFieldProps<T> = MultiSuggestFieldCommonProps<T> &
     (
         | {
               /**
-               * Predefined selected values
+               * Predefined selected values.
+               * `prePopulateWithItems` cannot be used then.
                */
               selectedItems?: T[];
               prePopulateWithItems?: never;
@@ -148,17 +127,22 @@ export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
         | {
               selectedItems?: never;
               /**
-               * When set to true will set the multi-select value with all the items provided
+               * When set to `true` will set the multi-select value with all the items provided.
+               * `selectedItems` cannot be used then.
                */
               prePopulateWithItems?: boolean;
           }
     );
 
 /**
- * This component will be re-implemented as `Select` like element allowing multiple selections (or a `Select` option).
- * New name for this component is `MultiSuggestField`.
+ * Element behaves very similar to `SuggestField` but allows multiple selections.
+ * Its value does not represent a string but a stack of objects.
+ *
+ * Example usage: input field for user created tags.
+ *
+ * Attention: there may be another `MultiSelect` component in future but this will be a re-implemented `Select` like element allowing multiple selections.
  */
-function MultiSelect<T>({
+export function MultiSuggestField<T>({
     items,
     selectedItems: externalSelectedItems,
     prePopulateWithItems,
@@ -173,10 +157,6 @@ function MultiSelect<T>({
     noResultText = "No results.",
     newItemCreationText = "Add new item",
     newItemPostfix = " (new item)",
-    hasStatePrimary,
-    hasStateDanger,
-    hasStateSuccess,
-    hasStateWarning,
     disabled,
     createNewItemFromQuery,
     requestDelay = 0,
@@ -189,7 +169,7 @@ function MultiSelect<T>({
     limitHeightOpened,
     intent,
     ...otherMultiSelectProps
-}: MultiSelectProps<T>) {
+}: MultiSuggestFieldProps<T>) {
     // Options created by a user
     const createdItems = useRef<T[]>([]);
     // Options passed ouside (f.e. from the backend)
@@ -212,24 +192,6 @@ function MultiSelect<T>({
         timeoutId?: number;
     }>({});
 
-    let stateIntent;
-    switch (true) {
-        case hasStatePrimary:
-            stateIntent = BlueprintIntent.PRIMARY;
-            break;
-        case hasStateSuccess:
-            stateIntent = BlueprintIntent.SUCCESS;
-            break;
-        case hasStateWarning:
-            stateIntent = BlueprintIntent.WARNING;
-            break;
-        case hasStateDanger:
-            stateIntent = BlueprintIntent.DANGER;
-            break;
-        default:
-            break;
-    }
-
     /** Update external items when they change
      *  e.g for auto-complete when query change
      */
@@ -479,7 +441,8 @@ function MultiSelect<T>({
             <IconButton
                 disabled={disabled}
                 name="operation-clear"
-                data-test-id={dataTestId ? dataTestId + "_clearance" : "clear-all-items"} // @deprecated (v25) automatically set test id will be removed
+                data-test-id={dataTestId ? dataTestId + "_clearance" : undefined}
+                data-testid={dataTestid ? dataTestid + "_clearance" : undefined}
                 onClick={handleClear}
             />
         ) : undefined;
@@ -520,10 +483,10 @@ function MultiSelect<T>({
                     "data-testid": dataTestid ? dataTestid + "_searchinput" : undefined,
                     ...inputProps,
                 } as React.InputHTMLAttributes<HTMLInputElement>,
-                className: `${eccgui}-multiselect` + (className ? ` ${className}` : ""),
+                className: `${eccgui}-multisuggestfield ${eccgui}-multiselect` + (className ? ` ${className}` : ""),
                 fill: fullWidth,
                 inputRef: inputRef,
-                intent: intent || stateIntent,
+                intent: intent,
                 addOnBlur: true,
                 onKeyDown: handleOnKeyDown,
                 onKeyUp: handleOnKeyUp,
@@ -584,8 +547,8 @@ function MultiSelect<T>({
 
 // we still return the Blueprint element here because it was already used like that
 /**
- * @deprecated (v25) use directly <MultiSelect<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
+ * @deprecated (v26) use directly <MultiSuggestField<TYPE>> (`ofType` also returns the original BlueprintJS element, not ours!)
  */
-MultiSelect.ofType = BlueprintMultiSelect.ofType;
+MultiSuggestField.ofType = BlueprintMultiSelect.ofType;
 
-export default MultiSelect;
+export default MultiSuggestField;

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -29,7 +29,7 @@ export default {
     component: MultiSuggestField,
     argTypes: {
         items: {
-            control: "none",
+            control: false,
         },
         intent: {
             ...helpersArgTypes.exampleIntent,

package/src/components/MultiSuggestField/index.ts

@@ -0,0 +1 @@
+export * from "./../MultiSelect/MultiSelect";

package/src/components/Notification/Notification.stories.tsx

@@ -10,7 +10,7 @@ export default {
     component: Notification,
     argTypes: {
         message: {
-            control: "none",
+            control: false,
         },
         icon: {
             ...helpersArgTypes.exampleIcon,
@@ -45,17 +45,17 @@ export const ExampleNeutralMessage = TemplateFull.bind({});
 ExampleNeutralMessage.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    neutral: true,
+    intent: "neutral",
 };
 
 export const ExampleWithActions = TemplateFull.bind({});
 ExampleWithActions.args = {
     message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
     onDismiss: false, // workaround for undefined function in Storybook
-    danger: true,
+    intent: "danger",
     actions: [
         <Button text="Something" key="b1" />,
         <Spacing size="tiny" vertical />,
-        <Button text="Important" hasStateDanger key="b2" />,
+        <Button text="Important" intent="danger" key="b2" />,
     ],
 };

package/src/components/Notification/Notification.tsx

@@ -29,29 +29,6 @@ export interface NotificationProps
      * Intent state of the notification.
      */
     intent?: Extract<IntentTypes, "neutral" | "success" | "warning" | "danger" | "info">;
-    /**
-     * Notification has a neutral color scheme.
-     * @deprecated (v25) use `intent="neutral"` instead.
-     */
-    neutral?: boolean;
-    /**
-     * Notification is a success info.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="success"` instead.
-     */
-    success?: boolean;
-    /**
-     * Notification is a warning alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="warning"` instead.
-     */
-    warning?: boolean;
-    /**
-     * Notification is a danger alert.
-     * This defines the colorization and the icon symbol.
-     * @deprecated (v25) use `intent="danger"` instead.
-     */
-    danger?: boolean;
     /**
      * Notification uses the the given space more flexible.
      * Default notification is displayed in min and max limits.
@@ -79,42 +56,17 @@ export const Notification = ({
     children,
     className,
     message,
-    success = false,
-    warning = false,
-    danger = false,
-    neutral = false,
     flexWidth = false,
     icon,
     timeout,
     wrapperProps,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
-    intent,
+    intent = "info",
     ...otherProps
 }: NotificationProps) => {
-    let intentLevel: string = IntentClassNames.INFO;
-    let iconSymbol = "state-info";
-    switch (true) {
-        case success:
-            intentLevel = IntentClassNames.SUCCESS;
-            iconSymbol = "state-success";
-            break;
-        case warning:
-            intentLevel = IntentClassNames.WARNING;
-            iconSymbol = "state-warning";
-            break;
-        case danger:
-            intentLevel = IntentClassNames.DANGER;
-            iconSymbol = "state-danger";
-            break;
-        case neutral:
-            intentLevel = IntentClassNames.NEUTRAL;
-            break;
-    }
-
-    const intents: Array<NotificationProps["intent"]> = ["info", "success", "warning", "danger"];
     const intentClass = intent ? " " + IntentClassNames[intent.toUpperCase()] : "";
-    const intentIconSymbol = intents.includes(intent) ? `state-${intent}` : iconSymbol;
+    const intentIconSymbol = intent !== "neutral" ? `state-${intent}` : false;
 
     let notificationIcon = icon !== false ? icon : undefined;
     if (icon !== false && !notificationIcon && !!intentIconSymbol) {
@@ -136,7 +88,7 @@ export const Notification = ({
         <BlueprintToast
             className={
                 `${eccgui}-notification ` +
-                (intentClass || intentLevel) +
+                intentClass +
                 (className ? ` ${className}` : "") +
                 (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)

package/src/components/Notification/notification.scss

@@ -10,9 +10,9 @@
     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;
+    color: $eccgui-color-workspace-text;
+    background-color: $eccgui-color-workspace-background;
+    border-color: $eccgui-color-workspace-text;
     border-style: solid;
     border-width: 1px 1px 1px 0.25rem;
 

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -3,11 +3,6 @@ import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
-    /**
-     * Displays the element using reduced height and less white space inside.
-     * @deprecated (v25) use property directly on `OverviewItem` children.
-     */
-    densityHigh?: boolean;
     /**
      * Add a bit white space around each of the contained items.
      */
@@ -30,7 +25,6 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 export const OverviewItemList = ({
     children,
     className = "",
-    densityHigh = false,
     hasDivider = false,
     hasSpacing = false,
     columns = 1,
@@ -41,7 +35,6 @@ export const OverviewItemList = ({
             {...restProps}
             className={
                 `${eccgui}-overviewitem__list ` +
-                (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : "") +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : "") +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : "") +
                 (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : "") + // FIXME: Support numbers > 2