@eccenca/gui-elements 25.1.0-rc.4 → 25.2.0-rc.0

package/src/components/Typography/_reset.scss

@@ -28,6 +28,7 @@ button {
 
 svg {
     padding: 0;
+
     // forgotten in reset import but necessary to fix problems when used together with MDL resets
     margin: 0;
     font: inherit;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -326,6 +326,20 @@ export const CodeEditor = ({
         ];
     }
 
+    const syncIntentClass = React.useCallback((editorView: EditorView | undefined, nextIntent?: CodeEditorProps["intent"]) => {
+        if (!editorView?.dom) {
+            return;
+        }
+
+        Array.from(editorView.dom.classList)
+            .filter((className) => className.startsWith(`${eccgui}-intent--`))
+            .forEach((className) => editorView.dom.classList.remove(className));
+
+        if (nextIntent) {
+            editorView.dom.classList.add(`${eccgui}-intent--${nextIntent}`);
+        }
+    }, []);
+
     React.useEffect(() => {
         const domEventHandlers = {
             ...addHandlersFor(!!onScroll, "scroll", onScroll),
@@ -360,7 +374,7 @@ export const CodeEditor = ({
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
                 if (onFocusChange && currentIntent.current && !v.view.dom.classList?.contains(`${eccgui}-intent--${currentIntent.current}`)) {
-                    v.view.dom.classList.add(`${eccgui}-intent--${currentIntent.current}`);
+                    syncIntentClass(v.view, currentIntent.current);
                 }
 
                 if (onCursorChange) {
@@ -410,9 +424,7 @@ export const CodeEditor = ({
                 view.dom.classList.add(`${eccgui}-disabled`);
             }
 
-            if (currentIntent.current) {
-                view.dom.className += ` ${eccgui}-intent--${currentIntent.current}`;
-            }
+            syncIntentClass(view, currentIntent.current);
 
             if (autoFocus) {
                 view.focus();
@@ -472,6 +484,10 @@ export const CodeEditor = ({
         }
     }, [disabled])
 
+    React.useEffect(() => {
+        syncIntentClass(view, intent);
+    }, [intent, view, syncIntentClass]);
+
     React.useEffect(() => {
         setEditorAppearance({
             ...editorAppearance,

package/src/extensions/react-flow/_react-flow_v12.scss

@@ -6,8 +6,8 @@
  */
 
 .react-flow {
-    direction: ltr;
     z-index: 0;
+    direction: ltr;
 }
 
 .react-flow__pane {

package/src/extensions/react-flow/handles/_handles.scss

@@ -62,10 +62,10 @@ div.react-flow__handle {
             inset: 0;
             display: none;
             cursor: pointer;
-            content: " ";
-            border-radius: 100%;
             outline: dotted $eccgui-size-flow-handle-border currentcolor;
             outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+            content: " ";
+            border-radius: 100%;
 
             .react-flow__node:hover & {
                 display: block;
@@ -207,9 +207,9 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
         z-index: -1;
+        visibility: hidden;
         width: 1px;
         height: 1px;
-        visibility: hidden;
         border: none;
 
         &.react-flow__handle-top {

package/src/includes/carbon-components/_requisits.scss

@@ -8,11 +8,13 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/react/scss/utilities/_visually-hidden";
-// we replicate the function here because the distinct import is not ossible via @carbon/react
+
+// we replicate the function here because the distinct import is not possible via @carbon/react
 // @import "~@carbon/styles/scss/components/ui-shell/functions";
 @function mini-units($count) {
     @return 0.5rem * $count;
 }
+
 @import "~@carbon/react/scss/feature-flags";
 @import "~@carbon/react/scss/colors";
 @import "~@carbon/react/scss/theme";