@eccenca/gui-elements 23.0.0-rc.0 → 23.0.0-rc.3-unofficial.0

package/src/components/Form/FieldItem.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Label from "../Label/Label";
+import Label, { LabelProps } from "../Label/Label";
 import {ClassNames as IntentClassNames} from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {TestableComponent} from "../interfaces";
@@ -21,7 +21,7 @@ interface IProps extends TestableComponent {
     children: JSX.Element | JSX.Element[] | null
     className?: string
     disabled?: boolean
-    labelAttributes?: object
+    labelProps?: LabelProps
     helperText?: string | JSX.Element
     messageText?: string
 }
@@ -34,7 +34,7 @@ function FieldItem({
     children,
     className,
     disabled,
-    labelAttributes = {},
+    labelProps,
     helperText,
     messageText,
     ...otherProps
@@ -57,7 +57,7 @@ function FieldItem({
             break;
     }
 
-    const label = <Label {...labelAttributes} disabled={disabled} />;
+    const label = <Label {...labelProps} disabled={disabled} />;
 
     const userhelp =
         helperText &&

package/src/components/Form/form.scss

@@ -45,10 +45,10 @@ form {
 
 .#{$eccgui}-fielditem__inputfields {
     &:not(:first-child) {
-        margin-top: $eccgui-size-block-whitespace / 4;
+        margin-top: $eccgui-size-block-whitespace * 0.25;
     }
     &:not(:last-child) {
-        margin-bottom: $eccgui-size-block-whitespace / 4;
+        margin-bottom: $eccgui-size-block-whitespace * 0.25;
     }
 }
 
@@ -76,7 +76,7 @@ form {
     }
 
     &.#{$eccgui}-fieldset--boxed {
-        padding: $eccgui-size-block-whitespace/2 $eccgui-size-block-whitespace $eccgui-size-block-whitespace
+        padding: $eccgui-size-block-whitespace * 0.5 $eccgui-size-block-whitespace $eccgui-size-block-whitespace
             $eccgui-size-block-whitespace;
         background-color: $data-table-zebra-color;
 
@@ -125,7 +125,7 @@ form {
 
 .#{$eccgui}-fieldset__helpertext,
 .#{$eccgui}-fieldset__message {
-    margin-top: $eccgui-size-block-whitespace / 4;
+    margin-top: $eccgui-size-block-whitespace * 0.25;
 }
 
 .#{$eccgui}-fieldset__fielditems {
@@ -145,12 +145,12 @@ form {
     flex-wrap: nowrap;
     justify-content: flex-start;
     align-items: flex-end;
-    margin: 0 -1 * $eccgui-size-block-whitespace/2;
+    margin: 0 -1 * $eccgui-size-block-whitespace * 0.5;
 
     & > .#{$eccgui}-fielditem {
         flex-shrink: 1;
         flex-grow: 1;
-        margin: 0 $eccgui-size-block-whitespace/2;
+        margin: 0 $eccgui-size-block-whitespace * 0.5;
     }
 
     &:not(:last-child) {

package/src/components/Icon/Icon.tsx

@@ -6,24 +6,40 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 import canonicalIcons, {IconSized, ValidIconName} from "./canonicalIconNames"
 
 export interface IconProps extends Omit<CarbonIconProps, "icon" | "description" | "name"> {
-    // The CSS class name.
-    className?: string,
-    // Canonical icon name
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[],
-    // description for SVG as accessibility fallback
-    description?: string,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean,
-    // Add tooltip text to icon
+    /**
+     * Add tooltip text to icon
+     */
     tooltipText?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Other tooltip properties
-    tooltipProperties?: Partial<Omit<TooltipProps, "content" | "children">>,
-    // Intent state of icon (currently only success, info, warning and danger are implemented in style rules)
+    /**
+     * Intent state of icon.
+     * Currently only `success`, `info`, `warning` and `danger` are implemented for icons, even there are more states available.
+     */
     intent?: IntentTypes
+    /**
+     * Display large icon version.
+     */
+    large?: boolean,
+    /**
+     * Display small icon version.
+     */
+    small?: boolean,
+    /**
+     * Additional CSS classes.
+     */
+    className?: string,
+    /**
+     * Description for icon as accessibility fallback.
+     */
+    description?: string,
+    /**
+     * Additonal tooltip properties, e.g. `hoverOpenDelay`.
+     */
+    tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>,
 }
 
 /** Returns the first icon that exists or the fallback icon. */
@@ -56,8 +72,7 @@ function Icon({
     large = false,
     small = false,
     tooltipText,
-    tooltipOpenDelay,
-    tooltipProperties,
+    tooltipProps,
     intent,
     ...restProps
 }: IconProps) {
@@ -85,7 +100,7 @@ function Icon({
         />
     );
     return tooltipText ? (
-        <Tooltip content={tooltipText} hoverOpenDelay={tooltipOpenDelay} {...tooltipProperties}>
+        <Tooltip content={tooltipText} {...tooltipProps}>
             <span>{icon}</span>
         </Tooltip>
     ) : (

package/src/components/Icon/IconButton.tsx

@@ -4,24 +4,30 @@ import {CLASSPREFIX as eccgui} from "../../configuration/constants";
 import Icon from "./Icon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends ButtonProps {
-    // Canonical icon name
+interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+    /**
+     * Canonical icon name, or an array of strings.
+     * In case of the array the first valid icon name is used.
+     */
     name: ValidIconName | string[]
-    className?: string
-    // Tooltip text
+    /**
+     * Button text, will be displayed as tooltip.
+     */
     text?: string,
-    // Time after tooltip text is visible when icon is hovered/focuses
-    tooltipOpenDelay?: number,
-    // Display large icon version
-    large?: boolean,
-    // Display small icon version
-    small?: boolean
-    // If the tooltip should be set as title attribute instead of the Tooltip component. If true, all other tooltip parameters are ignored.
+    /**
+     * If `text` should be set as HTML `title` attribute instead of attaching it as tooltip.
+     * If true then `tooltipProps` is ignored.
+     */
     tooltipAsTitle?: boolean
-    // If set, button will become an anchor button. FIXME: CMEM-3742: Setting this parameter should not change the type of the button. Split into several components.
-    href?: string
-    // Additional description of the icon function to improve accessibility, if not defined then the text label is used as fallback
+    /**
+     * Description for icon as accessibility fallback.
+     * If not set then `text` is used.
+     */
     description?: string
+    /**
+     * Button is displayed with minimal styles (no borders, no background color).
+     */
+    minimal?: boolean;
 }
 
 /** A button with an icon instead of text. */
@@ -29,10 +35,10 @@ function IconButton({
     className = "",
     name = "undefined",
     text,
-    tooltipProperties,
+    tooltipProps,
     description,
-    tooltipOpenDelay = 1000,
     tooltipAsTitle = false,
+    minimal=true,
     ...restProps
 }: IconButtonProps & AnchorOrButtonProps) {
     return (
@@ -45,13 +51,12 @@ function IconButton({
                     small={restProps.small}
                     large={restProps.large}
                     tooltipText={tooltipAsTitle ? undefined : text}
-                    tooltipOpenDelay={tooltipOpenDelay}
-                    tooltipProperties={!!tooltipProperties ? tooltipProperties : {}}
+                    tooltipProps={!!tooltipProps ? {hoverOpenDelay: 1000, ...tooltipProps} : {hoverOpenDelay: 1000}}
                     description={description ? description : text}
                 />
             }
             className={`${eccgui}-button--icon ` + className}
-            minimal
+            minimal={minimal}
         />
     );
 }