From 784a6729d195c97be74ab61ad9bf3ba14094b141 Mon Sep 17 00:00:00 2001 From: Andreas Schultz Date: Tue, 25 Aug 2026 12:47:49 +0200 Subject: [PATCH 1/2] Add nodrag class to Switch component by default --- CHANGELOG.md | 4 ++++ src/components/Switch/Switch.tsx | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7101c14eb..df34f9b95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `utils` - `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties +- `` + - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: true ### Changed @@ -23,6 +25,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - make the breakpoint configurable via SCSS (`$eccgui-propertyvalue-size-column-breakpoint-small`) - `utils` - values of CSS custom properties are resolved via the computed style of a matching element now, so they always represent what the browser really applies, e.g. references to other custom properties are already replaced +- `` + - Always add `nodrag` class to Switch. ### Fixed diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 27e5cb026..b955c8554 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -17,18 +17,23 @@ export interface SwitchProps extends Omit { * class names */ className?: string; + + /** Adds the 'nodrag' class to the element, preventing dragging via the Switch element. Default: true */ + noDrag?: boolean } -export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => { +export const Switch = ({ onChange, className, label, noDrag = true, ...otherProps }: SwitchProps) => { const handleChange = (e: React.ChangeEvent) => { if (onChange) { onChange(!!e.target?.checked); } }; + const noDragClass = noDrag ? "nodrag " : "" + return ( Date: Wed, 26 Aug 2026 16:46:44 +0200 Subject: [PATCH 2/2] add story, improve docs --- CHANGELOG.md | 4 +--- src/components/Switch/Stories/Switch.stories.tsx | 11 +++++++++++ src/components/Switch/Switch.tsx | 4 ++-- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df34f9b95..87c0d3328 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `utils` - `useComputedStyleFallback` option for `CssCustomProperties`: if the CSSOM does not provide any property name for the used selector, e.g. because the declarations are part of a constructed and adopted stylesheet, then the names are read from the computed style of the matching element; disabled by default because the computed style also contains all inherited custom properties - `` - - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: true + - `noDrag` parameter: Add the `nodrag` class to the Switch element. Default: `true` ### Changed @@ -25,8 +25,6 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - make the breakpoint configurable via SCSS (`$eccgui-propertyvalue-size-column-breakpoint-small`) - `utils` - values of CSS custom properties are resolved via the computed style of a matching element now, so they always represent what the browser really applies, e.g. references to other custom properties are already replaced -- `` - - Always add `nodrag` class to Switch. ### Fixed diff --git a/src/components/Switch/Stories/Switch.stories.tsx b/src/components/Switch/Stories/Switch.stories.tsx index f4967c89d..470caa2c3 100644 --- a/src/components/Switch/Stories/Switch.stories.tsx +++ b/src/components/Switch/Stories/Switch.stories.tsx @@ -23,3 +23,14 @@ WithStateLabel.args = { innerLabel: "Off", innerLabelChecked: "On", }; + +/** + * By default the `nodrag` class is set, so the switch cannot be used to drag a surrounding element, + * e.g. a React Flow node. Set `noDrag` to `false` to remove the class and allow the drag interaction. + */ +export const WithoutNoDragClass = Template.bind({}); +WithoutNoDragClass.args = { + ...Default.args, + label: "Switch label, drag interaction not prevented", + noDrag: false, +}; diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index b955c8554..d53dacee1 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -19,7 +19,7 @@ export interface SwitchProps extends Omit { className?: string; /** Adds the 'nodrag' class to the element, preventing dragging via the Switch element. Default: true */ - noDrag?: boolean + noDrag?: boolean; } export const Switch = ({ onChange, className, label, noDrag = true, ...otherProps }: SwitchProps) => { @@ -29,7 +29,7 @@ export const Switch = ({ onChange, className, label, noDrag = true, ...otherProp } }; - const noDragClass = noDrag ? "nodrag " : "" + const noDragClass = noDrag ? "nodrag " : ""; return (