chore: renamed events from kebab to camelCase

sbb-design-systems · Nov 23, 2023 · 808dd71 · 808dd71
1 parent cbbd722
commit 808dd71
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 54 deletions.
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.ts b/src/components/radio-button/radio-button-group/radio-button-group.ts
@@ -24,15 +24,15 @@ import style from './radio-button-group.scss?lit&inline';
  *
  * @slot - Use the unnamed slot to add `sbb-radio-button` elements to the `sbb-radio-button-group`.
  * @slot error - Use this to provide a `sbb-form-error` to show an error message.
- * @event {CustomEvent<void>} did-change - Emits whenever the `sbb-radio-group` value changes.
+ * @event {CustomEvent<void>} didChange - Emits whenever the `sbb-radio-group` value changes.
  * @event {CustomEvent<void>} change - Emits whenever the `sbb-radio-group` value changes.
  * @event {CustomEvent<void>} input - Emits whenever the `sbb-radio-group` value changes.
  */
 @customElement('sbb-radio-button-group')
 export class SbbRadioButtonGroup extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'did-change',
+    didChange: 'didChange',
     change: 'change',
     input: 'input',
   } as const;
@@ -174,7 +174,7 @@ export class SbbRadioButtonGroup extends LitElement {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener(
-      'state-change',
+      'stateChange',
       (e: CustomEvent<SbbRadioButtonStateChange>) => this._onRadioButtonSelect(e),
       {
         signal,

diff --git a/src/components/radio-button/radio-button-group/readme.md b/src/components/radio-button/radio-button-group/readme.md
@@ -81,11 +81,11 @@ In order to ensure readability for screen-readers, please provide an `aria-label
 
 ## Events
 
-| Name         | Type                | Description                                         | Inherited From |
-| ------------ | ------------------- | --------------------------------------------------- | -------------- |
-| `did-change` | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
-| `change`     | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
-| `input`      | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
+| Name        | Type                | Description                                         | Inherited From |
+| ----------- | ------------------- | --------------------------------------------------- | -------------- |
+| `didChange` | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
+| `change`    | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
+| `input`     | `CustomEvent<void>` | Emits whenever the `sbb-radio-group` value changes. |                |
 
 ## Slots
 

diff --git a/src/components/select/readme.md b/src/components/select/readme.md
@@ -122,15 +122,15 @@ Opened panel:
 
 ## Events
 
-| Name         | Type                | Description                                                                      | Inherited From |
-| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `did-change` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `change`     | `CustomEvent<void>` | Notifies that the component's value has changed.                                 |                |
-| `input`      | `CustomEvent<void>` | Notifies that an option value has been selected.                                 |                |
-| `will-open`  | `CustomEvent<void>` | Emits whenever the `sbb-select` starts the opening transition.                   |                |
-| `did-open`   | `CustomEvent<void>` | Emits whenever the `sbb-select` is opened.                                       |                |
-| `will-close` | `CustomEvent<void>` | Emits whenever the `sbb-select` begins the closing transition.                   |                |
-| `did-close`  | `CustomEvent<void>` | Emits whenever the `sbb-select` is closed.                                       |                |
+| Name        | Type                | Description                                                                      | Inherited From |
+| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
+| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
+| `change`    | `CustomEvent<void>` | Notifies that the component's value has changed.                                 |                |
+| `input`     | `CustomEvent<void>` | Notifies that an option value has been selected.                                 |                |
+| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-select` starts the opening transition.                   |                |
+| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-select` is opened.                                       |                |
+| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-select` begins the closing transition.                   |                |
+| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-select` is closed.                                       |                |
 
 ## Slots
 

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -32,26 +32,26 @@ export interface SelectChange {
  * It displays a panel with selectable options.
  *
  * @slot - Use the unnamed slot to add options.
- * @event {CustomEvent<void>} did-change - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {CustomEvent<void>} change - Notifies that the component's value has changed.
  * @event {CustomEvent<void>} input - Notifies that an option value has been selected.
- * @event {CustomEvent<void>} will-open - Emits whenever the `sbb-select` starts the opening transition.
- * @event {CustomEvent<void>} did-open - Emits whenever the `sbb-select` is opened.
- * @event {CustomEvent<void>} will-close - Emits whenever the `sbb-select` begins the closing transition.
- * @event {CustomEvent<void>} did-close - Emits whenever the `sbb-select` is closed.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-select` starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-select` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-select` begins the closing transition.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-select` is closed.
  */
 @customElement('sbb-select')
 export class SbbSelect extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'did-change',
+    didChange: 'didChange',
     change: 'change',
     input: 'input',
-    stateChange: 'state-change',
-    willOpen: 'will-open',
-    didOpen: 'did-open',
-    willClose: 'will-close',
-    didClose: 'did-close',
+    stateChange: 'stateChange',
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
   } as const;
 
   /** The value of the select component. If `multiple` is true, it's an array. */

diff --git a/src/components/selection-panel/readme.md b/src/components/selection-panel/readme.md
@@ -86,12 +86,12 @@ It's also possible to display the `sbb-selection-panel` without border by settin
 
 ## Events
 
-| Name         | Type                                        | Description                                                       | Inherited From |
-| ------------ | ------------------------------------------- | ----------------------------------------------------------------- | -------------- |
-| `will-open`  | `CustomEvent<void>`                         | Emits whenever the content section starts the opening transition. |                |
-| `did-open`   | `CustomEvent<void>`                         | Emits whenever the content section is opened.                     |                |
-| `will-close` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section begins the closing transition. |                |
-| `did-close`  | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section is closed.                     |                |
+| Name        | Type                                        | Description                                                       | Inherited From |
+| ----------- | ------------------------------------------- | ----------------------------------------------------------------- | -------------- |
+| `willOpen`  | `CustomEvent<void>`                         | Emits whenever the content section starts the opening transition. |                |
+| `didOpen`   | `CustomEvent<void>`                         | Emits whenever the content section is opened.                     |                |
+| `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section begins the closing transition. |                |
+| `didClose`  | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the content section is closed.                     |                |
 
 ## Slots
 

diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts
@@ -22,19 +22,19 @@ import '../divider';
  * @slot - Use the unnamed slot to add `sbb-checkbox` or `sbb-radio-button` elements to the `sbb-selection-panel`.
  * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
  * @slot content - Use this slot to provide custom content for the panel (optional).
- * @event {CustomEvent<void>} will-open - Emits whenever the content section starts the opening transition.
- * @event {CustomEvent<void>} did-open - Emits whenever the content section is opened.
- * @event {CustomEvent<{ closeTarget: HTMLElement }>} will-close - Emits whenever the content section begins the closing transition.
- * @event {CustomEvent<{ closeTarget: HTMLElement }>} did-close - Emits whenever the content section is closed.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the content section starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the content section is opened.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the content section begins the closing transition.
+ * @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the content section is closed.
  */
 @customElement('sbb-selection-panel')
 export class SbbSelectionPanel extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events: Record<string, string> = {
-    willOpen: 'will-open',
-    didOpen: 'did-open',
-    willClose: 'will-close',
-    didClose: 'did-close',
+    willOpen: 'willOpen',
+    didOpen: 'didOpen',
+    willClose: 'willClose',
+    didClose: 'didClose',
   } as const;
 
   /** The background color of the panel. */
@@ -146,7 +146,7 @@ export class SbbSelectionPanel extends LitElement {
       { signal, passive: true },
     );
     this.addEventListener('checkboxLoaded', () => this._updateSelectionPanel(), { signal });
-    this.addEventListener('radio-button-loaded', () => this._updateSelectionPanel(), { signal });
+    this.addEventListener('radioButtonLoaded', () => this._updateSelectionPanel(), { signal });
     this._handlerRepository.connect();
   }
 

diff --git a/src/components/slider/readme.md b/src/components/slider/readme.md
@@ -84,10 +84,10 @@ The `sbb-slider` has the following behaviour on keypress when focused:
 
 ## Events
 
-| Name         | Type                | Description                                                                      | Inherited From |
-| ------------ | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `input`      | `InputEvent`        |                                                                                  |                |
-| `did-change` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
+| Name        | Type                | Description                                                                      | Inherited From |
+| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
+| `input`     | `InputEvent`        |                                                                                  |                |
+| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
 
 ## Slots
 

diff --git a/src/components/slider/slider.ts b/src/components/slider/slider.ts
@@ -15,13 +15,13 @@ import '../icon';
  *
  * @slot prefix - Use this slot to render an icon on the left side of the input.
  * @slot suffix - Use this slot to render an icon on the right side of the input.
- * @event {CustomEvent<void>} did-change - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  */
 @customElement('sbb-slider')
 export class SbbSlider extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'did-change',
+    didChange: 'didChange',
   } as const;
 
   /** Value for the inner HTMLInputElement. */

diff --git a/src/components/tabs/tab-group/readme.md b/src/components/tabs/tab-group/readme.md
@@ -55,9 +55,9 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro
 
 ## Events
 
-| Name         | Type                | Description                           | Inherited From |
-| ------------ | ------------------- | ------------------------------------- | -------------- |
-| `did-change` | `CustomEvent<void>` | Emits an event on selected tab change |                |
+| Name        | Type                | Description                           | Inherited From |
+| ----------- | ------------------- | ------------------------------------- | -------------- |
+| `didChange` | `CustomEvent<void>` | Emits an event on selected tab change |                |
 
 ## Slots
 

diff --git a/src/components/tabs/tab-group/tab-group.ts b/src/components/tabs/tab-group/tab-group.ts
@@ -44,13 +44,13 @@ let nextId = 0;
  * This is not correct: `<span>Some text</span><p>Some other text</p>`
  * @slot tab-bar - When you provide the `sbb-tab-title` tag through the unnamed slot,
  * it will be automatically moved to this slot. You do not need to use it directly.
- * @event {CustomEvent<void>} did-change - Emits an event on selected tab change
+ * @event {CustomEvent<void>} didChange - Emits an event on selected tab change
  */
 @customElement('sbb-tab-group')
 export class SbbTabGroup extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    selectedTabChanged: 'did-change',
+    selectedTabChanged: 'didChange',
   } as const;
 
   private _tabs: InterfaceSbbTabGroupTab[] = [];