fix(ui): adjust naming in documentation of textarea (#485) (#885)

deven-org · Feb 19, 2024 · 9faaa83 · 9faaa83
1 parent fc23c91
commit 9faaa83
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 23 deletions.
diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js
@@ -9,6 +9,7 @@ const blrButton = document.getElementsByTagName('blr-text-button')[0];
 const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0];
 const blrSelect = document.getElementsByTagName('blr-select')[0];
 const blrTextInput = document.getElementsByTagName('blr-text-input')[0];
+const blrTextArea = document.getElementsByTagName('blr-textarea')[0];
 
 const addLog = (log) => {
   logsContainer.innerHTML = logsContainer.innerHTML + log + '<br>';
@@ -64,18 +65,34 @@ blrCheckbox.addEventListener('blrBlur', () => {
   addLog('blr-checkbox blurred');
 });
 
-blrSelect.addEventListener('blrChange', (e) => {
+blrSelect.addEventListener('blrChange', () => {
   addLog('blr-select changed');
 });
 
-blrTextInput.addEventListener('blrFocus', (e) => {
+blrTextInput.addEventListener('blrFocus', () => {
   addLog('blr-text-input focused');
 });
 
-blrTextInput.addEventListener('blrBlur', (e) => {
+blrTextInput.addEventListener('blrBlur', () => {
   addLog('blr-text-input blurred');
 });
 
-blrTextInput.addEventListener('blrChange', (e) => {
+blrTextInput.addEventListener('blrChange', () => {
   addLog('blr-text-input changed');
 });
+
+blrTextArea.addEventListener('blrFocus', () => {
+  addLog('blr-textarea focused');
+});
+
+blrTextArea.addEventListener('blrBlur', () => {
+  addLog('blr-textarea blurred');
+});
+
+blrTextArea.addEventListener('blrChange', () => {
+  addLog('blr-textarea changed');
+});
+
+blrTextArea.addEventListener('blrSelect', () => {
+  addLog('blr-textarea selected',);
+});
diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -319,34 +319,30 @@ export default {
     },
 
     // Events
-    onChange: {
-      name: 'onChange',
+    blrChange: {
       description: 'Fires when the value changes.',
-      action: 'onChange',
+      action: 'blrChange',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
-      description: 'Fires when the component is focused.',
-      action: 'onFocus',
+    blrSelect: {
+      description: 'Fires when some text is selected.',
+      action: 'blrSelect',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      name: 'onBlur',
-      description: 'Fires when the component lost focus.',
-      action: 'onBlur',
+    blrFocus: {
+      description: 'Fires when the component is focused.',
+      action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
-    onSelect: {
-      name: 'onSelect',
-      description: 'Fires when some text is selected.',
-      action: 'onSelect',
+    blrBlur: {
+      description: 'Fires when the component lost focus.',
+      action: 'blrBlur',
       table: {
         category: 'Events',
       },
@@ -425,10 +421,10 @@ const argTypesToDisable = [
   'arialabel',
   'textareaId',
   'name',
-  'onChange',
-  'onFocus',
-  'onBlur',
-  'onSelect',
+  'blrChange',
+  'blrSelect',
+  'blrFocus',
+  'blrBlur',
 ];
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};