feat(elements|ino-segment-button): add type property (#1095)

inovex · Nov 13, 2023 · 924c0fc · 924c0fc
1 parent e04e94d
commit 924c0fc
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 11 deletions.
diff --git a/packages/elements-angular/src/generated/components.ts b/packages/elements-angular/src/generated/components.ts
@@ -991,14 +991,14 @@ export declare interface InoRange extends Components.InoRange {
 
 
 @ProxyCmp({
-  inputs: ['checked', 'dense', 'disabled', 'name', 'value']
+  inputs: ['checked', 'dense', 'disabled', 'name', 'type', 'value']
 })
 @Component({
   selector: 'ino-segment-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'dense', 'disabled', 'name', 'value'],
+  inputs: ['checked', 'dense', 'disabled', 'name', 'type', 'value'],
 })
 export class InoSegmentButton {
   protected el: HTMLElement;

diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts
@@ -433,6 +433,7 @@ export const InoSegmentButton = /*@__PURE__*/ defineContainer<JSX.InoSegmentButt
   'dense',
   'name',
   'value',
+  'type',
   'checkedChange'
 ],
 'checked', 'v-checked-change', 'checkedChange');

diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts
@@ -1116,6 +1116,10 @@ export namespace Components {
           * Name of the element
          */
         "name"?: string;
+        /**
+          * The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'.
+         */
+        "type"?: string;
         /**
           * Value of the element
          */
@@ -3108,6 +3112,10 @@ declare namespace LocalJSX {
           * Emits if the user interacts with the button. If the button is disabled or checked, the event will not be emitted.
          */
         "onCheckedChange"?: (event: InoSegmentButtonCustomEvent<any>) => void;
+        /**
+          * The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'.
+         */
+        "type"?: string;
         /**
           * Value of the element
          */

diff --git a/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx b/packages/elements/src/components/ino-segment-button/ino-segment-button.tsx
@@ -1,7 +1,16 @@
-import {Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Prop,} from '@stencil/core';
+import {
+  Component,
+  ComponentInterface,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
 import classNames from 'classnames';
 
-import {generateUniqueId} from '../../util/component-utils';
+import { generateUniqueId } from '../../util/component-utils';
 
 /**
  * @slot default - Label of the button
@@ -41,6 +50,13 @@ export class InoSegmentButton implements ComponentInterface {
    */
   @Prop() value?: string;
 
+  /**
+   * The type of the internal button in the element.
+   * This can be 'submit', 'reset', or 'button'.
+   * If not specified, the default type is 'submit'.
+   */
+  @Prop() type?: string;
+
   /**
    * Emits if the user interacts with the button.
    * If the button is disabled or checked, the event will not be emitted.
@@ -77,6 +93,7 @@ export class InoSegmentButton implements ComponentInterface {
           disabled={this.disabled}
           id={this.buttonId}
           name={this.name}
+          type={this.type}
         >
           <slot></slot>
         </button>

diff --git a/packages/elements/src/components/ino-segment-button/readme.md b/packages/elements/src/components/ino-segment-button/readme.md
@@ -42,13 +42,14 @@ class MyComponent extends Component {
 
 ## Properties
 
-| Property   | Attribute  | Description                               | Type      | Default     |
-| ---------- | ---------- | ----------------------------------------- | --------- | ----------- |
-| `checked`  | `checked`  | Activates the button                      | `boolean` | `false`     |
-| `dense`    | `dense`    | Slightly decreases the size of the button | `boolean` | `false`     |
-| `disabled` | `disabled` | Disables the button                       | `boolean` | `false`     |
-| `name`     | `name`     | Name of the element                       | `string`  | `undefined` |
-| `value`    | `value`    | Value of the element                      | `string`  | `undefined` |
+| Property   | Attribute  | Description                                                                                                                                 | Type      | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `checked`  | `checked`  | Activates the button                                                                                                                        | `boolean` | `false`     |
+| `dense`    | `dense`    | Slightly decreases the size of the button                                                                                                   | `boolean` | `false`     |
+| `disabled` | `disabled` | Disables the button                                                                                                                         | `boolean` | `false`     |
+| `name`     | `name`     | Name of the element                                                                                                                         | `string`  | `undefined` |
+| `type`     | `type`     | The type of the internal button in the element. This can be 'submit', 'reset', or 'button'. If not specified, the default type is 'submit'. | `string`  | `undefined` |
+| `value`    | `value`    | Value of the element                                                                                                                        | `string`  | `undefined` |
 
 
 ## Events

diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json
@@ -8547,6 +8547,27 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "type",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "type",
+          "reflectToAttr": false,
+          "docs": "The type of the internal button in the element.\nThis can be 'submit', 'reset', or 'button'.\nIf not specified, the default type is 'submit'.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "value",
           "type": "string",

diff --git a/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts b/packages/storybook/src/stories/ino-segment-button/ino-segment-button.stories.ts
@@ -23,6 +23,7 @@ export default {
     disabled: false,
     name: '',
     value: '',
+    type: '',
   },
 } as Meta<Components.InoSegmentButton>;
 
@@ -39,6 +40,7 @@ const template = new TemplateGenerator<Components.InoSegmentButton>(
     disabled="${args.disabled}"
     name="${args.name}"
     value="${args.value}"
+    type="${args.type}"
     @checkedChange="${checkedChangeHandler}"
   >
     Segment Button Label