From 8681ed8d4f1cd08a756cf7e952e520df840c40b4 Mon Sep 17 00:00:00 2001 From: tshimber <110041439+tshimber@users.noreply.github.com> Date: Thu, 19 Sep 2024 10:50:25 +0200 Subject: [PATCH] event part in storybook fixed (#2345) * fix: event part in storybook fixed * fix: german versions fixed --- .../stories/setup_and_info/ScaleAndAngular_de.md | 4 ++-- .../stories/setup_and_info/ScaleAndAngular_en.md | 4 ++-- .../stories/setup_and_info/ScaleAndReact_de.md | 10 ++++++---- .../stories/setup_and_info/ScaleAndReact_en.md | 10 ++++++---- .../stories/setup_and_info/ScaleAndVue_de.md | 6 +++--- .../stories/setup_and_info/ScaleAndVue_en.md | 6 +++--- 6 files changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md index 55c44ebfca..f924099597 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md @@ -72,12 +72,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe ## Events in Angular -Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "docs". +Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs". An Events mit dem Prefix `scale` kannst du reguläre Angular-Syntax anbinden: ```html - + ``` ## Reactive Forms diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md index 6c2200d8af..657ae69905 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md @@ -72,12 +72,12 @@ You should now be able to use Scale components in your templates: ## Events in Angular -In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation on these custom events on the respective component pages in the "docs" section. +In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section. You can bind to `scale`-prefixed events with the regular Angular syntax: ```html - + ``` ## Reactive Forms diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md index 1a86ade1a5..2271b3c316 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md @@ -62,7 +62,7 @@ React übermittelt Daten zu Custom Elements nicht als Properties, sondern als HT ### Custom Events -React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `` wird nicht funktionieren. +React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `` wird nicht funktionieren. Diese Einschränkung ohne Hilfe zu umgehen, kann aufwändig sein und erfordert imperativen Code. Wir empfehlen die Verwendung eines Wrappers oder Interop Layers. @@ -82,17 +82,19 @@ const App = () => { const handleInput = (event) => { // it works! }; - return ; + return ( + + ); }; export default App; ``` -Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scaleChange" sollte zum Beispiel als "onScaleChange" geschrieben werden. +Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scale-change" sollte zum Beispiel als "on-scale-change" geschrieben werden. ## Events in React -Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z.B. `scaleChange`) Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs". +Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs". Aufgrund von Reacts [Synthetic Events](https://reactjs.org/docs/handling-events.html), bedarf das Binding von Custom Events etwas Mehraufwand. Nutze wie oben beschrieben einen Interop Layer oder alternativ [`ref`](https://reactjs.org/docs/refs-and-the-dom.html), um `addEventListener` imperativ anzuwenden. diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md index cfdada40d9..3d83d368c4 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md @@ -62,7 +62,7 @@ React passes all data to custom elements not as props but as HTML attributes whi ### Custom Events -React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `` won't work. +React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `` won't work. Working around these limitations without help is possible but can be cumbersome and requires some imperative code. So we recommend using a wrapper or interop layer to make things easier. @@ -82,17 +82,19 @@ const App = () => { const handleInput = (event) => { // it works! }; - return ; + return ( + + ); }; export default App; ``` -Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scaleChange" should be written as "onScaleChange. +Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scale-change" should be written as "on-scale-change". ## Events in React -In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section. +In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section. Due to React's [synthetic events](https://reactjs.org/docs/handling-events.html), binding to custom events requires some extra work. You can use an interop layer like the ones listed above, or alternatively use [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to bind imperatively with `addEventListener`. diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md index 86d3882d8f..ec71e1bc7c 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md @@ -100,12 +100,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe ## Events in Vue -Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "Docs". +Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z. B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs". An Events mit dem Prefix `scale` kannst du reguläre Vue-Syntax anbinden: ```html - + ``` ## Form Input Bindings @@ -117,7 +117,7 @@ Du kannst ganz einfach die gleichen Ergebnisse erzielen: ```html ``` diff --git a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md index 19bad55672..293c568eac 100644 --- a/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md +++ b/packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md @@ -100,12 +100,12 @@ You should now be able to use Scale components in your templates: ## Events in Vue -In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section. +In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section. You can bind to `scale`-prefixed events with the regular Vue syntax: ```html - + ``` ## Form Input Bindings @@ -117,7 +117,7 @@ You can achieve the same results quite easily: ```html ```