);
-};
-
-export default CardContent;
+});
diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
index 78f7c67cd..da51715f2 100644
--- a/src/components/Icon/canonicalIconNames.tsx
+++ b/src/components/Icon/canonicalIconNames.tsx
@@ -66,6 +66,7 @@ const canonicalIcons = {
"item-download": icons.Download,
"item-draggable": icons.Draggable,
"item-edit": icons.Edit,
+ "item-magic-edit": icons.MagicWand,
"item-evaluation": icons.Analytics,
"item-execution": icons.Run,
"item-info": icons.Information,
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 790bc6817..bef756225 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -39,6 +39,8 @@ export interface LabelProps extends React.LabelHTMLAttributes
* Add other elements to the end of the label content
*/
additionalElements?: React.ReactNode | React.ReactNode[];
+ /** Force label to get displayed as inline block element. */
+ inline?: boolean;
}
export const Label = ({
@@ -52,6 +54,7 @@ export const Label = ({
isLayoutForElement = "label",
emphasis = "normal",
additionalElements,
+ inline,
...otherLabelProps
}: LabelProps) => {
let htmlElementstring = isLayoutForElement;
@@ -85,6 +88,7 @@ export const Label = ({
className:
`${eccgui}-label ${eccgui}-label--${emphasis}` +
(className ? " " + className : "") +
+ (inline ? ` ${eccgui}-label--inline` : "") +
(disabled ? ` ${eccgui}-label--disabled` : ""),
...otherLabelProps,
},
diff --git a/src/components/Label/label.scss b/src/components/Label/label.scss
index 2c3d52495..6b1983845 100644
--- a/src/components/Label/label.scss
+++ b/src/components/Label/label.scss
@@ -8,7 +8,6 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
font-size: $eccgui-size-typo-label;
line-height: $eccgui-size-typo-label-lineheight;
color: $eccgui-color-label-text;
- vertical-align: middle;
.#{$eccgui}-typography__overflowtext--passdown > & {
display: flex;
@@ -17,6 +16,11 @@ $eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-mut
}
}
+.#{$eccgui}-label--inline {
+ display: inline-block;
+ vertical-align: middle;
+}
+
.#{$eccgui}-label--disabled {
opacity: $eccgui-opacity-disabled;
}
diff --git a/src/components/OverviewItem/overviewitem.scss b/src/components/OverviewItem/overviewitem.scss
index 19affbdfb..72daced37 100644
--- a/src/components/OverviewItem/overviewitem.scss
+++ b/src/components/OverviewItem/overviewitem.scss
@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
.#{$eccgui}-overviewitem__item:hover &,
.#{$eccgui}-overviewitem__item:focus &,
- .#{$eccgui}-overviewitem__item:active & {
+ .#{$eccgui}-overviewitem__item:active &,
+ &:focus-within,
+ &:has(.#{$ns}-active),
+ &:has(.#{$ns}-popover-open) {
display: flex;
}
}
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
index 485d5512b..27e5cb026 100644
--- a/src/components/Switch/Switch.tsx
+++ b/src/components/Switch/Switch.tsx
@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+ Classes as BlueprintClasses,
+ Switch as BlueprintSwitch,
+ SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
export interface SwitchProps extends Omit {
/**
* Event handler for changed state.
*/
- onChange?: (value: boolean) => any;
+ onChange?: (value: boolean) => void;
/**
* class names
*/
className?: string;
}
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
- const handleChange = (e: SyntheticEvent) => {
- const checked = !!(e as any).target?.checked;
- onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+ const handleChange = (e: React.ChangeEvent) => {
+ if (onChange) {
+ onChange(!!e.target?.checked);
+ }
};
- return ;
+ return (
+
+ ) : undefined
+ }
+ {...otherProps}
+ onChange={handleChange}
+ />
+ );
};
export default memo(Switch);
diff --git a/src/components/Tag/TagList.tsx b/src/components/Tag/TagList.tsx
index 64668e7dd..6aed6706c 100644
--- a/src/components/Tag/TagList.tsx
+++ b/src/components/Tag/TagList.tsx
@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
const tagList = (
{React.Children.map(children, (child, i) => {
- return (
+ return child ? (
-
{child}
- );
+ ) : null;
})}
);